More element are translation-ready

next.config.js

@@ -2,19 +2,19 @@
 module.exports = {
   reactStrictMode: true,
   i18n: {
-    locales: ['en', 'fr', 'ja', 'es'],
+    locales: ["en", "fr", "ja", "es", "xx"],
-    defaultLocale: 'en',
+    defaultLocale: "en",
   },
   images: {
-    domains: ['strapi.accords-library.com'],
+    domains: ["strapi.accords-library.com"],
   },
   async redirects() {
     return [
       {
-        source: '/discord',
+        source: "/discord",
-        destination: 'https://discord.com/invite/5mcXcRAczj',
+        destination: "https://discord.com/invite/5mcXcRAczj",
         permanent: false,
       },
-    ]
+    ];
   },
-}
+};

src/components/Content/ThumbnailHeader.tsx

@@ -56,7 +56,11 @@ export default function ThumbnailHeader(
         {content.type ? (
           <div className="grid place-items-center place-content-start gap-2">
             <h3 className="text-xl">{langui.global_type}</h3>
-            <Button>{content.type.data.attributes.titles[0].title}</Button>
+            <Button>
+              {content.type.data.attributes.titles.length > 0
+                ? content.type.data.attributes.titles[0].title
+                : prettySlug(content.type.data.attributes.slug)}
+            </Button>
           </div>
         ) : (
           ""

src/components/Library/LibraryContentPreview.tsx

@@ -2,12 +2,15 @@ import Link from "next/link";
 import { GetContentsQuery } from "graphql/operations-types";
 import { getAssetURL, prettySlug } from "queries/helpers";
 import Image from "next/image";
+import Chip from "components/Chip";
 
 export type LibraryContentPreviewProps = {
   item: {
     slug: GetContentsQuery["contents"]["data"][number]["attributes"]["slug"];
     thumbnail: GetContentsQuery["contents"]["data"][number]["attributes"]["thumbnail"];
     titles: GetContentsQuery["contents"]["data"][number]["attributes"]["titles"];
+    categories: GetContentsQuery["contents"]["data"][number]["attributes"]["categories"];
+    type: GetContentsQuery["contents"]["data"][number]["attributes"]["type"];
   };
 };
 
@@ -21,6 +24,7 @@ export default function LibraryContentPreview(
       <div className="drop-shadow-dark-xl cursor-pointer grid items-end hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
         {item.thumbnail.data ? (
           <Image
+            className=" rounded-md"
             src={getAssetURL(item.thumbnail.data.attributes.url)}
             alt={item.thumbnail.data.attributes.alternativeText}
             height={item.thumbnail.data.attributes.height}
@@ -29,17 +33,31 @@ export default function LibraryContentPreview(
         ) : (
           <div className="w-full aspect-[3/2] bg-light rounded-lg"></div>
         )}
-        <div className="linearbg-1 drop-shadow-dark-lg absolute bottom-2 inset-x-[-0.15rem] opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-4 text-left">
+        <div className="linearbg-1 drop-shadow-dark-lg absolute bottom-2 inset-x-[-0.15rem] opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-1 text-left">
           <div>
-          {item.titles.length > 0 ? (
+            {item.titles.length > 0 ? (
-            <>
+              <>
-              <p>{item.titles[0].pre_title}</p>
+                <p>{item.titles[0].pre_title}</p>
-              <h1 className="text-lg">{item.titles[0].title}</h1>
+                <h1 className="text-lg">{item.titles[0].title}</h1>
-              <h2>{item.titles[0].subtitle}</h2>
+                <h2>{item.titles[0].subtitle}</h2>
-            </>
+              </>
-          ) : (
+            ) : (
-            <h1 className="text-3xl">{prettySlug(item.slug)}</h1>
+              <h1 className="text-lg">{prettySlug(item.slug)}</h1>
-          )}
+            )}
+          </div>
+          <div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
+            {item.categories.data.map((category) => (
+              <Chip key={category.id} className="text-sm">
+                {category.attributes.short}
+              </Chip>
+            ))}
+          </div>
+          <div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
+            {item.type ? (
+              <Chip>{item.type.data.attributes.titles.length > 0 ? item.type.data.attributes.titles[0].title : prettySlug(item.type.data.attributes.slug)}</Chip>
+            ) : (
+              ""
+            )}
           </div>
         </div>
       </div>

src/components/Panels/MainPanel.tsx

@@ -51,15 +51,15 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
       <NavOption
         url="/wiki"
         icon="travel_explore"
-        title="Wiki"
+        title={langui.main_wiki}
-        subtitle="Explore all content of a specific game/series"
+        subtitle={langui.main_wiki_description}
       />
 
       <NavOption
         url="/chronicles"
         icon="watch_later"
-        title="Chronicles"
+        title={langui.main_chronicles}
-        subtitle="Experience all events in chronological order"
+        subtitle={langui.main_chronicles_description}
       />
 
       <HorizontalLine />

src/graphql/operation.graphql

@@ -4,12 +4,7 @@ query getWebsiteInterface($language_code: String) {
       attributes {
         main_library
         main_library_description
-        main_hub
-        main_hub_description
-        main_chronology
-        main_chronology_description
         main_news
-        main_data
         main_merch
         main_gallery
         main_archives
@@ -39,13 +34,6 @@ query getWebsiteInterface($language_code: String) {
         global_price
         library_item_physical_size
         library_item_type_information
-        chronology_description
-        chronology_timelines
-        chronology_timelines_description
-        chronology_overview
-        chronology_overview_description
-        chronology_walkthrough
-        chronology_walkthrough_description
         library_item_front_matter
         library_item_back_matter
         library_item_type_textual
@@ -64,6 +52,21 @@ query getWebsiteInterface($language_code: String) {
         global_hardcover
         global_left_to_right
         global_right_to_left
+        main_wiki
+        main_wiki_description
+        main_chronicles
+        main_chronicles_description
+        library_items
+        library_items_description
+        library_content
+        library_content_description
+        wiki_description
+        news_description
+        chronicles_description
+        gallery_description
+        archives_description
+        about_us_description
+        merch_description
       }
     }
   }
@@ -479,93 +482,92 @@ query getContentsSlugs {
 }
 
 query getContents($language_code: String) {
-	contents(pagination: { limit: -1 }) {
+  contents(pagination: { limit: -1 }) {
-		data {
+    data {
       id
-			attributes {
+      attributes {
-				slug
+        slug
-				titles(filters: { language: { code: { eq: $language_code } } }) {
+        titles(filters: { language: { code: { eq: $language_code } } }) {
-					pre_title
+          pre_title
-					title
+          title
-					subtitle
+          subtitle
-				}
+        }
-				categories {
+        categories {
-					data {
+          data {
-						id
+            id
-						attributes {
+            attributes {
-							short
+              short
-						}
+            }
-					}
+          }
-				}
+        }
-				type {
+        type {
-					data {
+          data {
-						attributes {
+            attributes {
-							slug
+              slug
-							titles(filters: { language: { code: { eq: $language_code } } }) {
+              titles(filters: { language: { code: { eq: $language_code } } }) {
-								title
+                title
-							}
+              }
-						}
+            }
-					}
+          }
-				}
+        }
-				ranged_contents {
+        ranged_contents {
-					data {
+          data {
-						id
+            id
-						attributes {
+            attributes {
-							slug
+              slug
-							scan_set {
+              scan_set {
-								id
+                id
-							}
+              }
-							library_item {
+              library_item {
-								data {
+                data {
-									attributes {
+                  attributes {
-										slug
+                    slug
-										title
+                    title
-										subtitle
+                    subtitle
-										thumbnail {
+                    thumbnail {
-											data {
+                      data {
-												attributes {
+                        attributes {
-													name
+                          name
-													alternativeText
+                          alternativeText
-													caption
+                          caption
-													width
+                          width
-													height
+                          height
-													url
+                          url
-												}
+                        }
-											}
+                      }
-										}
+                    }
-									}
+                  }
-								}
+                }
-							}
+              }
-						}
+            }
-					}
+          }
-				}
+        }
-				text_set {
+        text_set {
-					id
+          id
-				}
+        }
-				video_set {
+        video_set {
-					id
+          id
-				}
+        }
-				audio_set {
+        audio_set {
-					id
+          id
-				}
+        }
-				thumbnail {
+        thumbnail {
-					data {
+          data {
-						attributes {
+            attributes {
-							name
+              name
-							alternativeText
+              alternativeText
-							caption
+              caption
-							width
+              width
-							height
+              height
-							url
+              url
-						}
+            }
-					}
+          }
-				}
+        }
-			}
+      }
-		}
+    }
-	}
+  }
 }
 
-
 query getContent($slug: String, $language_code: String) {
   contents(filters: { slug: { eq: $slug } }) {
     data {

src/graphql/operations-types.ts

@@ -78,12 +78,7 @@ export type GetWebsiteInterfaceQuery = {
         __typename: "WebsiteInterface";
         main_library: string;
         main_library_description: string;
-        main_hub: string;
-        main_hub_description: string;
-        main_chronology: string;
-        main_chronology_description: string;
         main_news: string;
-        main_data: string;
         main_merch: string;
         main_gallery: string;
         main_archives: string;
@@ -113,13 +108,6 @@ export type GetWebsiteInterfaceQuery = {
         global_price: string;
         library_item_physical_size: string;
         library_item_type_information: string;
-        chronology_description: string;
-        chronology_timelines: string;
-        chronology_timelines_description: string;
-        chronology_overview: string;
-        chronology_overview_description: string;
-        chronology_walkthrough: string;
-        chronology_walkthrough_description: string;
         library_item_front_matter: string;
         library_item_back_matter: string;
         library_item_type_textual: string;
@@ -138,6 +126,21 @@ export type GetWebsiteInterfaceQuery = {
         global_hardcover: string;
         global_left_to_right: string;
         global_right_to_left: string;
+        main_wiki: string;
+        main_wiki_description: string;
+        main_chronicles: string;
+        main_chronicles_description: string;
+        library_items: string;
+        library_items_description: string;
+        library_content: string;
+        library_content_description: string;
+        wiki_description: string;
+        news_description: string;
+        chronicles_description: string;
+        gallery_description: string;
+        archives_description: string;
+        about_us_description: string;
+        merch_description: string;
       };
     }>;
   };
@@ -689,18 +692,18 @@ export type GetContentsQuery = {
         slug: string;
         titles: Array<{
           __typename: "ComponentTranslationsTitle";
-          pre_title: string ;
+          pre_title: string;
           title: string;
-          subtitle: string ;
+          subtitle: string;
-        } > ;
+        }>;
         categories: {
           __typename: "CategoryRelationResponseCollection";
           data: Array<{
             __typename: "CategoryEntity";
-            id: string ;
+            id: string;
-            attributes: { __typename: "Category"; short: string } ;
+            attributes: { __typename: "Category"; short: string };
           }>;
-        } ;
+        };
         type: {
           __typename: "ContentTypeEntityResponse";
           data: {
@@ -711,22 +714,22 @@ export type GetContentsQuery = {
               titles: Array<{
                 __typename: "ComponentTranslationsSimpleTitle";
                 title: string;
-              } > ;
+              }>;
-            } ;
+            };
-          } ;
+          };
-        } ;
+        };
         ranged_contents: {
           __typename: "RangedContentRelationResponseCollection";
           data: Array<{
             __typename: "RangedContentEntity";
-            id: string ;
+            id: string;
             attributes: {
               __typename: "RangedContent";
               slug: string;
               scan_set: Array<{
                 __typename: "ComponentSetsScanSet";
                 id: string;
-              } > ;
+              }>;
               library_item: {
                 __typename: "LibraryItemEntityResponse";
                 data: {
@@ -735,7 +738,7 @@ export type GetContentsQuery = {
                     __typename: "LibraryItem";
                     slug: string;
                     title: string;
-                    subtitle: string ;
+                    subtitle: string;
                     thumbnail: {
                       __typename: "UploadFileEntityResponse";
                       data: {
@@ -743,32 +746,32 @@ export type GetContentsQuery = {
                         attributes: {
                           __typename: "UploadFile";
                           name: string;
-                          alternativeText: string ;
+                          alternativeText: string;
-                          caption: string ;
+                          caption: string;
-                          width: number ;
+                          width: number;
-                          height: number ;
+                          height: number;
                           url: string;
-                        } ;
+                        };
-                      } ;
+                      };
-                    } ;
+                    };
-                  } ;
+                  };
-                } ;
+                };
-              } ;
+              };
-            } ;
+            };
           }>;
-        } ;
+        };
         text_set: Array<{
           __typename: "ComponentSetsTextSet";
           id: string;
-        } > ;
+        }>;
         video_set: Array<{
           __typename: "ComponentSetsVideoSet";
           id: string;
-        } > ;
+        }>;
         audio_set: Array<{
           __typename: "ComponentSetsAudioSet";
           id: string;
-        } > ;
+        }>;
         thumbnail: {
           __typename: "UploadFileEntityResponse";
           data: {
@@ -776,17 +779,17 @@ export type GetContentsQuery = {
             attributes: {
               __typename: "UploadFile";
               name: string;
-              alternativeText: string ;
+              alternativeText: string;
-              caption: string ;
+              caption: string;
-              width: number ;
+              width: number;
-              height: number ;
+              height: number;
               url: string;
-            } ;
+            };
-          } ;
+          };
-        } ;
+        };
-      } ;
+      };
     }>;
-  } ;
+  };
 };
 
 export type GetContentQuery = {

src/pages/about-us/index.tsx

@@ -16,11 +16,11 @@ export default function AboutUs(props: AboutUsProps): JSX.Element {
       <PanelHeader
         icon="info"
         title={langui.main_about_us}
-        description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        description={langui.about_us_description}
       />
     </SubPanel>
   );
-  return <AppLayout title="404" langui={langui} subPanel={subPanel} />;
+  return <AppLayout title={langui.main_about_us} langui={langui} subPanel={subPanel} />;
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {

src/pages/archives/index.tsx

@@ -16,11 +16,11 @@ export default function Archives(props: ArchivesProps): JSX.Element {
       <PanelHeader
         icon="inventory"
         title={langui.main_archives}
-        description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        description={langui.archives_description}
       />
     </SubPanel>
   );
-  return <AppLayout title="Archives" langui={langui} subPanel={subPanel} />;
+  return <AppLayout title={langui.main_archives} langui={langui} subPanel={subPanel} />;
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {

src/pages/chronicles/index.tsx

@@ -15,12 +15,12 @@ export default function Chronicles(props: ChroniclesProps): JSX.Element {
     <SubPanel>
       <PanelHeader
         icon="watch_later"
-        title="Chronicles"
+        title={langui.main_chronicles}
-        description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        description={langui.chronicles_description}
       />
     </SubPanel>
   );
-  return <AppLayout title="Chronicles" langui={langui} subPanel={subPanel} />;
+  return <AppLayout title={langui.main_chronicles} langui={langui} subPanel={subPanel} />;
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {

src/pages/gallery/index.tsx

@@ -17,7 +17,7 @@ export default function Gallery(props: GalleryProps): JSX.Element {
   );
 
   return (
-    <AppLayout title="Content" langui={langui} contentPanel={contentPanel} />
+    <AppLayout title={langui.main_gallery} langui={langui} contentPanel={contentPanel} />
   );
 }
 

src/pages/hubs/index.tsx

@@ -1,48 +0,0 @@
-import SubPanel from "components/Panels/SubPanel";
-import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
-import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
-import ContentPanel from "components/Panels/ContentPanel";
-import AppLayout from "components/AppLayout";
-
-type HubsProps = {
-  langui: GetWebsiteInterfaceQuery;
-};
-
-export default function Hubs(props: HubsProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
-  const subPanel = (
-    <SubPanel>
-      <PanelHeader
-        icon="workspaces"
-        title={langui.main_hub}
-        description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
-      />
-    </SubPanel>
-  );
-  const contentPanel = <ContentPanel>Hello</ContentPanel>;
-
-  return (
-    <AppLayout
-      title="Hub"
-      langui={langui}
-      contentPanel={contentPanel}
-      subPanel={subPanel}
-    />
-  );
-}
-
-export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: HubsProps = {
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
-};

src/pages/index.tsx

@@ -3,7 +3,6 @@ import ContentPanel from "components/Panels/ContentPanel";
 import { getWebsiteInterface } from "graphql/operations";
 import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import Head from "next/head";
 type HomeProps = {
   langui: GetWebsiteInterfaceQuery;
 };
@@ -137,7 +136,7 @@ export default function Home(props: HomeProps): JSX.Element {
 
   return (
     <>
-      <AppLayout title="Home" langui={langui} contentPanel={contentPanel} />
+      <AppLayout title={"Accord’s Library"} langui={langui} contentPanel={contentPanel} />
     </>
   );
 }

src/pages/library/content/[slug]/index.tsx

@@ -13,6 +13,8 @@ import Button from "components/Button";
 import HorizontalLine from "components/HorizontalLine";
 import ThumbnailHeader from "components/Content/ThumbnailHeader";
 import AppLayout from "components/AppLayout";
+import SubPanel from "components/Panels/SubPanel";
+import ReturnButton from "components/PanelComponents/ReturnButton";
 
 type ContentIndexProps = {
   content: GetContentQuery;
@@ -22,6 +24,16 @@ type ContentIndexProps = {
 export default function ContentIndex(props: ContentIndexProps): JSX.Element {
   const content = props.content.contents.data[0].attributes;
   const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const subPanel = (
+    <SubPanel>
+      <ReturnButton
+        href="/library/content"
+        title={langui.library_content}
+        langui={langui}
+      />
+      <HorizontalLine />
+    </SubPanel>
+  );
   const contentPanel = (
     <ContentPanel>
       <div className="grid place-items-center">
@@ -57,7 +69,12 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
   );
 
   return (
-    <AppLayout title="Content" langui={langui} contentPanel={contentPanel} />
+    <AppLayout
+      title={langui.library_content}
+      langui={langui}
+      contentPanel={contentPanel}
+      subPanel={subPanel}
+    />
   );
 }
 

src/pages/library/content/[slug]/read.tsx

@@ -57,7 +57,7 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
 
   return (
     <AppLayout
-      title="Read"
+      title={langui.library_content}
       langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}

src/pages/library/content/index.tsx

@@ -13,6 +13,7 @@ import AppLayout from "components/AppLayout";
 import ReturnButton from "components/PanelComponents/ReturnButton";
 import HorizontalLine from "components/HorizontalLine";
 import LibraryContentPreview from "components/Library/LibraryContentPreview";
+import { prettyinlineTitle } from "queries/helpers";
 
 type LibraryProps = {
   contents: GetContentsQuery;
@@ -21,6 +22,13 @@ type LibraryProps = {
 
 export default function Library(props: LibraryProps): JSX.Element {
   const langui = props.langui.websiteInterfaces.data[0].attributes;
+
+  props.contents.contents.data.sort((a, b) => {
+    const titleA = a.attributes.titles.length > 0 ? prettyinlineTitle(a.attributes.titles[0].pre_title, a.attributes.titles[0].title, a.attributes.titles[0].subtitle) : a.attributes.slug
+    const titleB = b.attributes.titles.length > 0 ? prettyinlineTitle(b.attributes.titles[0].pre_title, b.attributes.titles[0].title, b.attributes.titles[0].subtitle) : b.attributes.slug
+    return titleA.localeCompare(titleB);
+  });
+
   const subPanel = (
     <SubPanel>
       <ReturnButton
@@ -31,8 +39,8 @@ export default function Library(props: LibraryProps): JSX.Element {
       <HorizontalLine />
       <PanelHeader
         icon="library_books"
-        title="Content"
+        title={langui.library_content}
-        description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        description={langui.library_content_description}
       />
     </SubPanel>
   );
@@ -47,7 +55,7 @@ export default function Library(props: LibraryProps): JSX.Element {
   );
   return (
     <AppLayout
-      title="Library"
+      title={langui.library_content}
       langui={langui}
       subPanel={subPanel}
       contentPanel={contentPanel}

src/pages/library/index.tsx

@@ -21,24 +21,24 @@ export default function Library(props: LibraryProps): JSX.Element {
       <PanelHeader
         icon="library_books"
         title={langui.main_library}
-        description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        description={langui.library_description}
       />
       <NavOption
         url="/library/items"
-        title="Items"
+        title={langui.library_items}
-        subtitle="A comprehensive list of all Yokoverse’s physical or digital items"
+        subtitle={langui.library_items_description}
         border={true}
       />
       <NavOption
         url="/library/content"
-        title="Content"
+        title={langui.library_content}
-        subtitle="Search for a specific content depending on its type or category"
+        subtitle={langui.library_content_description}
         border={true}
       />
     </SubPanel>
   );
 
-  return <AppLayout title="Library" langui={langui} subPanel={subPanel} />;
+  return <AppLayout title={langui.main_library} langui={langui} subPanel={subPanel} />;
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {

src/pages/library/items/[slug].tsx

@@ -43,7 +43,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
     <SubPanel>
       <ReturnButton
         href="/library/items"
-        title="Media"
+        title={langui.library_items}
         langui={langui}
       />
       <HorizontalLine />
@@ -493,6 +493,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
     </ContentPanel>
   );
 
+  // Sort content by range
   item.contents.data.sort((a, b) => {
     if (
       a.attributes.range[0].__typename === "ComponentRangePageRange" &&
@@ -508,7 +509,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
 
   return (
     <AppLayout
-      title="Library"
+      title={langui.library_items}
       langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}

src/pages/library/items/index.tsx

@@ -34,8 +34,8 @@ export default function Library(props: LibraryProps): JSX.Element {
       <HorizontalLine />
       <PanelHeader
         icon="library_books"
-        title="Media"
+        title={langui.library_items}
-        description="A comprehensive list of all Yokoverse’s side materials (books, novellas, artbooks, stage plays, manga, drama CDs, and comics). For each, we provide photos and/or scans of the content, information about what it is, when and how it was released, size, initial price…"
+        description={langui.library_items_description}
       />
     </SubPanel>
   );
@@ -50,7 +50,7 @@ export default function Library(props: LibraryProps): JSX.Element {
   );
   return (
     <AppLayout
-      title="Library"
+      title={langui.library_items}
       langui={langui}
       subPanel={subPanel}
       contentPanel={contentPanel}

src/pages/merch/index.tsx

@@ -16,12 +16,12 @@ export default function Merch(props: MerchProps): JSX.Element {
       <PanelHeader
         icon="store"
         title={langui.main_merch}
-        description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        description={langui.merch_description}
       />
     </SubPanel>
   );
 
-  return <AppLayout title="Merch" langui={langui} subPanel={subPanel} />;
+  return <AppLayout title={langui.main_merch} langui={langui} subPanel={subPanel} />;
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {

src/pages/news/index.tsx

@@ -16,12 +16,12 @@ export default function News(props: NewsProps): JSX.Element {
       <PanelHeader
         icon="feed"
         title={langui.main_news}
-        description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        description={langui.news_description}
       />
     </SubPanel>
   );
 
-  return <AppLayout title="Merch" langui={langui} subPanel={subPanel} />;
+  return <AppLayout title={langui.main_news} langui={langui} subPanel={subPanel} />;
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {

src/pages/wiki/index.tsx

@@ -16,8 +16,8 @@ export default function Hubs(props: WikiProps): JSX.Element {
     <SubPanel>
       <PanelHeader
         icon="travel_explore"
-        title="Wiki"
+        title={langui.main_wiki}
-        description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        description={langui.wiki_description}
       />
     </SubPanel>
   );
@@ -25,7 +25,7 @@ export default function Hubs(props: WikiProps): JSX.Element {
 
   return (
     <AppLayout
-      title="Wiki"
+      title={langui.main_wiki}
       langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}