Added more localized texts

src/components/AppLayout.tsx

@@ -29,6 +29,7 @@ type AppLayoutProps = {
 };
 
 export default function AppLayout(props: AppLayoutProps): JSX.Element {
+  const langui = props.langui;
   const router = useRouter();
   const isMobile = useMediaMobile();
   const isCoarse = useMediaCoarse();
@@ -91,7 +92,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
 
   const metaDescription = props.description
     ? props.description
-    : props.langui.default_description;
+    : langui.default_description;
 
   useEffect(() => {
     document.getElementsByTagName("html")[0].style.fontSize = `${
@@ -166,9 +167,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
             <div className="grid place-content-center h-full">
               <div className="text-dark border-dark border-2 border-dotted rounded-2xl p-8 grid grid-flow-col place-items-center gap-9 opacity-40">
                 <p className="text-4xl">❮</p>
-                <p className="text-2xl w-64">
+                <p className="text-2xl w-64">{langui.select_option_sidebar}</p>
-                  {props.langui.select_option_sidebar}
-                </p>
               </div>
             </div>
           )}
@@ -220,7 +219,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
           className={`${mainPanelClass} border-r-[1px] mobile:bottom-20 border-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light texture-paper-dots
         ${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
         >
-          <MainPanel langui={props.langui} />
+          <MainPanel langui={langui} />
         </div>
 
         {/* Main panel minimize button*/}
@@ -270,7 +269,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
           state={appLayout.languagePanelOpen}
           setState={appLayout.setLanguagePanelOpen}
         >
-          <h2 className="text-2xl">{props.langui.select_language}</h2>
+          <h2 className="text-2xl">{langui.select_language}</h2>
           <div className="flex flex-wrap flex-row gap-2 mobile:flex-col">
             {router.locales?.sort().map((locale) => (
               <Button
@@ -290,11 +289,11 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
           state={appLayout.configPanelOpen}
           setState={appLayout.setConfigPanelOpen}
         >
-          <h2 className="text-2xl">Settings</h2>
+          <h2 className="text-2xl">{langui.settings}</h2>
 
           <div className="mt-4 grid gap-8 place-items-center text-center desktop:grid-cols-2">
             <div>
-              <h3 className="text-xl">Theme</h3>
+              <h3 className="text-xl">{langui.theme}</h3>
               <div className="flex flex-row">
                 <Button
                   onClick={() => {
@@ -307,7 +306,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
                   }
                   className="rounded-r-none"
                 >
-                  Light
+                  {langui.light}
                 </Button>
                 <Button
                   onClick={() => {
@@ -316,7 +315,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
                   active={appLayout.selectedThemeMode === false}
                   className="rounded-l-none rounded-r-none border-x-0"
                 >
-                  Auto
+                  {langui.auto}
                 </Button>
                 <Button
                   onClick={() => {
@@ -329,13 +328,13 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
                   }
                   className="rounded-l-none"
                 >
-                  Dark
+                  {langui.dark}
                 </Button>
               </div>
             </div>
 
             <div>
-              <h3 className="text-xl">Currency</h3>
+              <h3 className="text-xl">{langui.currency}</h3>
               <div>
                 <Select
                   options={currencyOptions}
@@ -347,7 +346,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
             </div>
 
             <div>
-              <h3 className="text-xl">Font size</h3>
+              <h3 className="text-xl">{langui.font_size}</h3>
               <div className="flex flex-row">
                 <Button
                   className="rounded-r-none"
@@ -382,7 +381,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
             </div>
 
             <div>
-              <h3 className="text-xl">Font</h3>
+              <h3 className="text-xl">{langui.font}</h3>
               <div className="grid gap-2">
                 <Button
                   active={appLayout.dyslexic === false}
@@ -402,12 +401,14 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
             </div>
 
             <div>
-              <h3 className="text-xl">Player name</h3>
+              <h3 className="text-xl">{langui.player_name}</h3>
               <input
                 type="text"
                 placeholder="<player>"
                 className="w-48"
-                onInput={(e) => appLayout.setPlayerName(e.target.value)}
+                onInput={(e) =>
+                  appLayout.setPlayerName((e.target as HTMLInputElement).value)
+                }
               />
             </div>
           </div>

src/components/RecorderChip.tsx

@@ -1,15 +1,20 @@
 import Chip from "components/Chip";
-import { GetContentTextQuery } from "graphql/operations-types";
+import {
+  GetContentTextQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
 import Img, { ImageQuality } from "./Img";
 import ReactDOMServer from "react-dom/server";
 
 type RecorderChipProps = {
   className?: string;
   recorder: GetContentTextQuery["contents"]["data"][number]["attributes"]["text_set"][number]["transcribers"]["data"][number];
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
 };
 
 export default function RecorderChip(props: RecorderChipProps): JSX.Element {
   const recorder = props.recorder;
+  const langui = props.langui;
   return (
     <Chip
       key={recorder.id}
@@ -28,7 +33,7 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
           </div>
           {recorder.attributes.languages.data.length > 0 && (
             <div className="flex flex-row flex-wrap gap-1">
-              <p>Languages:</p>
+              <p>{langui.languages}:</p>
               {recorder.attributes.languages.data.map((language) => (
                 <Chip key={language.attributes.code}>
                   {language.attributes.code.toUpperCase()}
@@ -38,7 +43,7 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
           )}
           {recorder.attributes.pronouns && (
             <div className="flex flex-row flex-wrap gap-1">
-              <p>Pronouns:</p>
+              <p>{langui.pronouns}:</p>
               <Chip>{recorder.attributes.pronouns}</Chip>
             </div>
           )}

src/graphql/operation.graphql

@@ -83,6 +83,32 @@ query getWebsiteInterface($language_code: String) {
         group_by
         select_option_sidebar
         group
+        settings
+        theme
+        light
+        auto
+        dark
+        font_size
+        player_name
+        currency
+        font
+        calculated
+        status_incomplete
+        status_draft
+        status_review
+        status_done
+        incomplete
+        draft
+        review
+        done
+        status
+        transcribers
+        translators
+        proofreaders
+        transcript_notice
+        translation_notice
+        source_language
+        pronouns
       }
     }
   }

src/graphql/operations-types.ts

@@ -165,6 +165,32 @@ export type GetWebsiteInterfaceQuery = {
         group_by: string;
         select_option_sidebar: string;
         group: string;
+        settings: string;
+        theme: string;
+        light: string;
+        auto: string;
+        dark: string;
+        font_size: string;
+        player_name: string;
+        currency: string;
+        font: string;
+        calculated: string;
+        status_incomplete: string;
+        status_draft: string;
+        status_review: string;
+        status_done: string;
+        incomplete: string;
+        draft: string;
+        review: string;
+        done: string;
+        status: string;
+        transcribers: string;
+        translators: string;
+        proofreaders: string;
+        transcript_notice: string;
+        translation_notice: string;
+        source_language: string;
+        pronouns: string;
       };
     }>;
   };

src/pages/contents/[slug]/index.tsx

@@ -36,7 +36,6 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
         displayOn={ReturnButtonType.Desktop}
         horizontalLine
       />
-      
     </SubPanel>
   );
   const contentPanel = (
@@ -96,9 +95,22 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
       langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}
-      description={
+      description={`${langui.type}: ${
-        content.titles.length > 0 ? content.titles[0].description : undefined
+        content.type.data.attributes.titles.length > 0
+          ? content.type.data.attributes.titles[0].title
+          : prettySlug(content.type.data.attributes.slug)
       }
+      ${langui.categories}: ${
+        content.categories.data.length > 0 &&
+        content.categories.data
+          .map((category) => {
+            return category.attributes.short;
+          })
+          .join(" | ")
+      }
+         
+        ${content.titles.length > 0 ? content.titles[0].description : undefined}
+        `}
     />
   );
 }

src/pages/contents/[slug]/read.tsx

@@ -57,14 +57,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
           <h2 className="text-xl">
             {content.text_set[0].source_language.data.attributes.code ===
             router.locale
-              ? "This content is a transcript"
+              ? langui.transcript_notice
-              : "This content is a fan-translation"}
+              : langui.translation_notice}
           </h2>
 
           {content.text_set[0].source_language.data.attributes.code !==
             router.locale && (
             <div className="grid place-items-center gap-2">
-              <p className="font-headers">Source language:</p>
+              <p className="font-headers">{langui.source_language}:</p>
               <Button
                 href={router.asPath}
                 locale={
@@ -79,20 +79,20 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
           )}
 
           <div className="grid grid-flow-col place-items-center place-content-center gap-2">
-            <p className="font-headers">Status:</p>
+            <p className="font-headers">{langui.status}:</p>
 
             <Chip
               data-tip={
                 content.text_set[0].status ===
                 Enum_Componentsetstextset_Status.Incomplete
-                  ? "This entry is only partially translated/transcribed."
+                  ? langui.status_incomplete
                   : content.text_set[0].status ===
                     Enum_Componentsetstextset_Status.Draft
-                  ? "This entry is just a draft. It usually means that this is a work-in-progress. Translation/transcription might be poor and/or computer-generated."
+                  ? langui.status_draft
                   : content.text_set[0].status ===
                     Enum_Componentsetstextset_Status.Review
-                  ? "This entry has not yet being proofread. The content should still be accurate."
+                  ? langui.status_review
-                  : "This entry has been checked and proofread. If you notice any translation errors or typos, please contact us so we can fix it!"
+                  : langui.status_done
               }
               data-for={"StatusTooltip"}
             >
@@ -102,10 +102,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
 
           {content.text_set[0].transcribers.data.length > 0 && (
             <div>
-              <p className="font-headers">Transcribers:</p>
+              <p className="font-headers">{langui.transcribers}:</p>
               <div className="grid place-items-center place-content-center gap-2">
                 {content.text_set[0].transcribers.data.map((recorder) => (
-                  <RecorderChip key={recorder.id} recorder={recorder} />
+                  <RecorderChip
+                    key={recorder.id}
+                    langui={langui}
+                    recorder={recorder}
+                  />
                 ))}
               </div>
             </div>
@@ -113,10 +117,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
 
           {content.text_set[0].translators.data.length > 0 && (
             <div>
-              <p className="font-headers">Translators:</p>
+              <p className="font-headers">{langui.translators}:</p>
               <div className="grid place-items-center place-content-center gap-2">
                 {content.text_set[0].translators.data.map((recorder) => (
-                  <RecorderChip key={recorder.id} recorder={recorder} />
+                  <RecorderChip
+                    key={recorder.id}
+                    langui={langui}
+                    recorder={recorder}
+                  />
                 ))}
               </div>
             </div>
@@ -124,10 +132,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
 
           {content.text_set[0].proofreaders.data.length > 0 && (
             <div>
-              <p className="font-headers">Proofreaders:</p>
+              <p className="font-headers">{langui.proofreaders}:</p>
               <div className="grid place-items-center place-content-center gap-2">
                 {content.text_set[0].proofreaders.data.map((recorder) => (
-                  <RecorderChip key={recorder.id} recorder={recorder} />
+                  <RecorderChip
+                    key={recorder.id}
+                    langui={langui}
+                    recorder={recorder}
+                  />
                 ))}
               </div>
             </div>
@@ -204,6 +216,22 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
       contentPanel={contentPanel}
       subPanel={subPanel}
       extra={extra}
+      description={`${langui.type}: ${
+        content.type.data.attributes.titles.length > 0
+          ? content.type.data.attributes.titles[0].title
+          : prettySlug(content.type.data.attributes.slug)
+      }
+      ${langui.categories}: ${
+        content.categories.data.length > 0 &&
+        content.categories.data
+          .map((category) => {
+            return category.attributes.short;
+          })
+          .join(" | ")
+      }
+         
+        ${content.titles.length > 0 ? content.titles[0].description : undefined}
+        `}
     />
   );
 }

src/pages/library/[slug].tsx

@@ -239,8 +239,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                     appLayout.currency && (
                     <p>
                       {prettyPrice(item.price, currencies, appLayout.currency)}{" "}
-                      <br />
+                      <br />({langui.calculated.toLowerCase()})
-                      (calculated)
                     </p>
                   )}
                 </div>
@@ -283,7 +282,9 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
               ""
             )}
 
-            {item.metadata.length > 0 ? (
+            {item.metadata.length > 0 &&
+            item.metadata[0].__typename !== "ComponentMetadataGroup" &&
+            item.metadata[0].__typename !== "ComponentMetadataOther" ? (
               <>
                 <h3 className="text-xl">{langui.type_information}</h3>
                 <div className="grid grid-cols-2 w-full place-content-between">
@@ -338,9 +339,6 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                   ) : item.metadata[0].__typename ===
                     "ComponentMetadataGame" ? (
                     <></>
-                  ) : item.metadata[0].__typename ===
-                    "ComponentMetadataGroup" ? (
-                    <></>
                   ) : (
                     ""
                   )}