Replaced old UI translation naming scheme

2022-03-05 15:36:43 +01:00 · 2022-03-05 15:36:43 +01:00 · 9b42a4f59f
parent 4c7d7231e3
commit 9b42a4f59f
18 changed files with 253 additions and 252 deletions
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@ -88,7 +88,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {

  const metaDescription = props.description
    ? props.description
-    : "Accord's Library aims at gathering and archiving all of Yoko Taro’s work. Yoko Taro is a Japanese video game director and scenario writer.";
+    : props.langui.default_description;

  return (
    <div className={appLayout.darkMode ? "set-theme-dark" : "set-theme-light"}>
--- a/src/components/Content/ThumbnailHeader.tsx
+++ b/src/components/Content/ThumbnailHeader.tsx
@ -55,7 +55,7 @@ export default function ThumbnailHeader(
      <div className="grid grid-flow-col gap-8">
        {content.type ? (
          <div className="grid place-items-center place-content-start gap-2">
-            <h3 className="text-xl">{langui.global_type}</h3>
+            <h3 className="text-xl">{langui.type}</h3>
            <Button>
              {content.type.data.attributes.titles.length > 0
                ? content.type.data.attributes.titles[0].title
@ -68,7 +68,7 @@ export default function ThumbnailHeader(

        {content.categories.data.length > 0 ? (
          <div className="grid place-items-center place-content-start gap-2">
-            <h3 className="text-xl">{langui.global_categories}</h3>
+            <h3 className="text-xl">{langui.categories}</h3>
            {content.categories.data.map((category) => (
              <Button key={category.id}>{category.attributes.name}</Button>
            ))}
--- a/src/components/PanelComponents/ReturnButton.tsx
+++ b/src/components/PanelComponents/ReturnButton.tsx
@ -13,7 +13,7 @@ export default function ReturnButton(props: ReturnButtonProps): JSX.Element {

  return (
    <Button onClick={() => appLayout.setSubPanelOpen(false)} href={props.href}>
-      ❮&emsp;{props.langui.global_return_label} {props.title}
+      ❮&emsp;{props.langui.return_to} {props.title}
    </Button>
  );
 }
--- a/src/components/Panels/MainPanel.tsx
+++ b/src/components/Panels/MainPanel.tsx
@ -1,6 +1,5 @@
 import Link from "next/link";
 import NavOption from "components/PanelComponents/NavOption";
-import SVG from "components/SVG";
 import { useRouter } from "next/router";
 import Button from "components/Button";
 import HorizontalLine from "components/HorizontalLine";
@ -84,8 +83,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
      <NavOption
        url="/library"
        icon="library_books"
-        title={langui.main_library}
-        subtitle={langui.main_library_description}
+        title={langui.library}
+        subtitle={langui.library_short_description}
        tooltipId="MainPanelTooltip"
        reduced={appLayout.mainPanelReduced && isDesktop}
        onClick={() => appLayout.setMainPanelOpen(false)}
@ -94,8 +93,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
      <NavOption
        url="/contents"
        icon="workspaces"
-        title="Contents"
-        subtitle="Explore all content and filter by type or category"
+        title={langui.contents}
+        subtitle={langui.contents_short_description}
        tooltipId="MainPanelTooltip"
        reduced={appLayout.mainPanelReduced && isDesktop}
        onClick={() => appLayout.setMainPanelOpen(false)}
@ -104,8 +103,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
      <NavOption
        url="/wiki"
        icon="travel_explore"
-        title={langui.main_wiki}
-        subtitle={langui.main_wiki_description}
+        title={langui.wiki}
+        subtitle={langui.wiki_short_description}
        tooltipId="MainPanelTooltip"
        reduced={appLayout.mainPanelReduced && isDesktop}
        onClick={() => appLayout.setMainPanelOpen(false)}
@ -114,8 +113,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
      <NavOption
        url="/chronicles"
        icon="watch_later"
-        title={langui.main_chronicles}
-        subtitle={langui.main_chronicles_description}
+        title={langui.chronicles}
+        subtitle={langui.chronicles_short_description}
        tooltipId="MainPanelTooltip"
        reduced={appLayout.mainPanelReduced && isDesktop}
        onClick={() => appLayout.setMainPanelOpen(false)}
@ -126,7 +125,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
      <NavOption
        url="/news"
        icon="feed"
-        title={langui.main_news}
+        title={langui.news}
        tooltipId="MainPanelTooltip"
        reduced={appLayout.mainPanelReduced && isDesktop}
        onClick={() => appLayout.setMainPanelOpen(false)}
@ -135,7 +134,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
      <NavOption
        url="/merch"
        icon="store"
-        title={langui.main_merch}
+        title={langui.merch}
        tooltipId="MainPanelTooltip"
        reduced={appLayout.mainPanelReduced && isDesktop}
        onClick={() => appLayout.setMainPanelOpen(false)}
@ -144,7 +143,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
      <NavOption
        url="/gallery"
        icon="collections"
-        title={langui.main_gallery}
+        title={langui.gallery}
        tooltipId="MainPanelTooltip"
        reduced={appLayout.mainPanelReduced && isDesktop}
        onClick={() => appLayout.setMainPanelOpen(false)}
@ -153,7 +152,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
      <NavOption
        url="/archives"
        icon="inventory"
-        title={langui.main_archives}
+        title={langui.archives}
        tooltipId="MainPanelTooltip"
        reduced={appLayout.mainPanelReduced && isDesktop}
        onClick={() => appLayout.setMainPanelOpen(false)}
@ -162,7 +161,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
      <NavOption
        url="/about-us"
        icon="info"
-        title={langui.main_about_us}
+        title={langui.about_us}
        tooltipId="MainPanelTooltip"
        reduced={appLayout.mainPanelReduced && isDesktop}
        onClick={() => appLayout.setMainPanelOpen(false)}
@ -176,8 +175,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
        }`}
      >
        <p>
-          {langui.main_licensing ? (
-            <Markdown>{langui.main_licensing}</Markdown>
+          {langui.licensing_notice ? (
+            <Markdown>{langui.licensing_notice}</Markdown>
          ) : (
            ""
          )}
@ -194,8 +193,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
          </div>
        </a>
        <p>
-          {langui.main_copyright ? (
-            <Markdown>{langui.main_copyright}</Markdown>
+          {langui.copyright_notice ? (
+            <Markdown>{langui.copyright_notice}</Markdown>
          ) : (
            ""
          )}
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@ -3,18 +3,13 @@ import { Dispatch, SetStateAction, useState } from "react";
 export type SelectProps = {
  setState: Dispatch<SetStateAction<number>>;
  state: number;
-  options: SelectOption[];
+  options: string[];
  selected?: number;
  allowEmpty?: boolean;
  className?: string;
  onChange?: Function;
 };

-export type SelectOption = {
-  name: string;
-  label: string;
-};
-
 export default function Select(props: SelectProps): JSX.Element {
  const [opened, setOpened] = useState(false);

@ -30,7 +25,7 @@ export default function Select(props: SelectProps): JSX.Element {
        }`}
      >
        <p onClick={() => setOpened(!opened)} className="w-full">
-          {props.state === -1 ? "—" : props.options[props.state].label}
+          {props.state === -1 ? "—" : props.options[props.state]}
        </p>
        {props.state >= 0 && props.allowEmpty && (
          <span
@ -54,14 +49,14 @@ export default function Select(props: SelectProps): JSX.Element {
            {index !== props.state && (
              <div
                className="bg-light hover:bg-mid transition-colors cursor-pointer p-1 last-of-type:rounded-b-[1em]"
-                key={option.name}
-                id={option.name}
+                key={option}
+                id={option}
                onClick={() => {
                  setOpened(false);
                  props.setState(index);
                }}
              >
-                {option.label}
+                {option}
              </div>
            )}
          </>
--- a/src/graphql/operation.graphql
+++ b/src/graphql/operation.graphql
@ -1,72 +1,86 @@
 query getWebsiteInterface($language_code: String) {
-  websiteInterfaces(filters: { language: { code: { eq: $language_code } } }) {
+  websiteInterfaces(
+    filters: { ui_language: { code: { eq: $language_code } } }
+  ) {
    data {
      attributes {
-        main_library
-        main_library_description
-        main_news
-        main_merch
-        main_gallery
-        main_archives
-        main_about_us
-        main_licensing
-        main_copyright
+        library
+        contents
+        wiki
+        chronicles
+        library_short_description
+        contents_short_description
+        wiki_short_description
+        chronicles_short_description
+        news
+        merch
+        gallery
+        archives
+        about_us
+        licensing_notice
+        copyright_notice
+        contents_description
+        type
+        category
+        categories
+        size
+        release_date
+        release_year
+        details
+        price
+        width
+        height
+        thickness
+        subitem
+        subitems
+        subitem_of
+        variant
+        variants
+        variant_of
+        summary
+        audio
+        video
+        textual
+        game
+        other
+        return_to
+        left_to_right
+        right_to_left
+        page
+        pages
+        page_order
+        binding
+        type_information
+        front_matter
+        back_matter
+        open_content
+        read_content
+        watch_content
+        listen_content
+        view_scans
+        paperback
+        hardcover
+        languages
+        select_language
+        language
        library_description
-        library_item_summary
-        library_item_gallery
-        library_item_details
-        library_item_subitems
-        library_item_variants
-        library_item_content
-        global_return_label
-        global_subitem_of
-        global_type
-        global_width
-        global_height
-        global_thickness
-        global_binding
-        global_language
-        global_languages
-        global_page
-        global_pages
-        global_page_order
-        global_release_date
-        global_price
-        library_item_physical_size
-        library_item_type_information
-        library_item_front_matter
-        library_item_back_matter
-        library_item_type_textual
-        library_item_type_audio
-        library_item_type_game
-        library_item_type_video
-        library_item_type_other
-        library_item_open_content
-        library_item_view_scans
-        content_read_content
-        content_watch_content
-        content_listen_content
-        global_category
-        global_categories
-        global_paperback
-        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
+        news_description
+        merch_description
        gallery_description
        archives_description
        about_us_description
-        merch_description
+        page_not_found
+        default_description
+        name
+        show_subitems
+        show_primary_items
+        show_secondary_items
+        no_type
+        no_year
+        order_by
+        group_by
      }
    }
  }
@ -125,9 +139,7 @@ query getChronologyItems($language_code: String) {
 }

 query getLibraryItemsPreview($language_code: String) {
-  libraryItems(
-    pagination: { limit: -1 }
-  ) {
+  libraryItems(pagination: { limit: -1 }) {
    data {
      id
      attributes {
--- a/src/graphql/operations-types.ts
+++ b/src/graphql/operations-types.ts
@ -86,71 +86,83 @@ export type GetWebsiteInterfaceQuery = {
      __typename: "WebsiteInterfaceEntity";
      attributes: {
        __typename: "WebsiteInterface";
-        main_library: string;
-        main_library_description: string;
-        main_news: string;
-        main_merch: string;
-        main_gallery: string;
-        main_archives: string;
-        main_about_us: string;
-        main_licensing: string;
-        main_copyright: string;
+        library: string;
+        contents: string;
+        wiki: string;
+        chronicles: string;
+        library_short_description: string;
+        contents_short_description: string;
+        wiki_short_description: string;
+        chronicles_short_description: string;
+        news: string;
+        merch: string;
+        gallery: string;
+        archives: string;
+        about_us: string;
+        licensing_notice: string;
+        copyright_notice: string;
+        contents_description: string;
+        type: string;
+        category: string;
+        categories: string;
+        size: string;
+        release_date: string;
+        release_year: string;
+        details: string;
+        price: string;
+        width: string;
+        height: string;
+        thickness: string;
+        subitem: string;
+        subitems: string;
+        subitem_of: string;
+        variant: string;
+        variants: string;
+        variant_of: string;
+        summary: string;
+        audio: string;
+        video: string;
+        textual: string;
+        game: string;
+        other: string;
+        return_to: string;
+        left_to_right: string;
+        right_to_left: string;
+        page: string;
+        pages: string;
+        page_order: string;
+        binding: string;
+        type_information: string;
+        front_matter: string;
+        back_matter: string;
+        open_content: string;
+        read_content: string;
+        watch_content: string;
+        listen_content: string;
+        view_scans: string;
+        paperback: string;
+        hardcover: string;
+        languages: string;
+        select_language: string;
+        language: string;
        library_description: string;
-        library_item_summary: string;
-        library_item_gallery: string;
-        library_item_details: string;
-        library_item_subitems: string;
-        library_item_variants: string;
-        library_item_content: string;
-        global_return_label: string;
-        global_subitem_of: string;
-        global_type: string;
-        global_width: string;
-        global_height: string;
-        global_thickness: string;
-        global_binding: string;
-        global_language: string;
-        global_languages: string;
-        global_page: string;
-        global_pages: string;
-        global_page_order: string;
-        global_release_date: string;
-        global_price: string;
-        library_item_physical_size: string;
-        library_item_type_information: string;
-        library_item_front_matter: string;
-        library_item_back_matter: string;
-        library_item_type_textual: string;
-        library_item_type_audio: string;
-        library_item_type_game: string;
-        library_item_type_video: string;
-        library_item_type_other: string;
-        library_item_open_content: string;
-        library_item_view_scans: string;
-        content_read_content: string;
-        content_watch_content: string;
-        content_listen_content: string;
-        global_category: string;
-        global_categories: string;
-        global_paperback: string;
-        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;
+        news_description: string;
+        merch_description: string;
        gallery_description: string;
        archives_description: string;
        about_us_description: string;
-        merch_description: string;
+        page_not_found: string;
+        default_description: string;
+        name: string;
+        show_subitems: string;
+        show_primary_items: string;
+        show_secondary_items: string;
+        no_type: string;
+        no_year: string;
+        order_by: string;
+        group_by: string;
      };
    }>;
  };
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@ -13,13 +13,15 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element {
  const langui = props.langui.websiteInterfaces.data[0].attributes;
  const contentPanel = (
    <ContentPanel>
-      <h1>404 - Page Not Found</h1>
+      <h1>404 - {langui.page_not_found}</h1>
      <Link href="/">
        <a>Go back home</a>
      </Link>
    </ContentPanel>
  );
-  return <AppLayout navTitle="404" langui={langui} contentPanel={contentPanel} />;
+  return (
+    <AppLayout navTitle="404" langui={langui} contentPanel={contentPanel} />
+  );
 }

 export const getStaticProps: GetStaticProps = async (context) => {
--- a/src/pages/about-us/index.tsx
+++ b/src/pages/about-us/index.tsx
@ -15,14 +15,14 @@ export default function AboutUs(props: AboutUsProps): JSX.Element {
    <SubPanel>
      <PanelHeader
        icon="info"
-        title={langui.main_about_us}
+        title={langui.about_us}
        description={langui.about_us_description}
      />
    </SubPanel>
  );
  return (
    <AppLayout
-      navTitle={langui.main_about_us}
+      navTitle={langui.about_us}
      langui={langui}
      subPanel={subPanel}
    />
--- a/src/pages/archives/index.tsx
+++ b/src/pages/archives/index.tsx
@ -15,14 +15,14 @@ export default function Archives(props: ArchivesProps): JSX.Element {
    <SubPanel>
      <PanelHeader
        icon="inventory"
-        title={langui.main_archives}
+        title={langui.archives}
        description={langui.archives_description}
      />
    </SubPanel>
  );
  return (
    <AppLayout
-      navTitle={langui.main_archives}
+      navTitle={langui.archives}
      langui={langui}
      subPanel={subPanel}
    />
--- a/src/pages/chronicles/index.tsx
+++ b/src/pages/chronicles/index.tsx
@ -15,14 +15,14 @@ export default function Chronicles(props: ChroniclesProps): JSX.Element {
    <SubPanel>
      <PanelHeader
        icon="watch_later"
-        title={langui.main_chronicles}
+        title={langui.chronicles}
        description={langui.chronicles_description}
      />
    </SubPanel>
  );
  return (
    <AppLayout
-      navTitle={langui.main_chronicles}
+      navTitle={langui.chronicles}
      langui={langui}
      subPanel={subPanel}
    />
--- a/src/pages/contents/[slug]/index.tsx
+++ b/src/pages/contents/[slug]/index.tsx
@ -40,7 +40,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {

        {content.text_set.length > 0 ? (
          <Button href={`/contents/${content.slug}/read/`}>
-            {langui.content_read_content}
+            {langui.read_content}
          </Button>
        ) : (
          ""
@ -48,7 +48,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {

        {content.audio_set.length > 0 ? (
          <Button href={`/contents/${content.slug}/listen/`}>
-            {langui.content_listen_content}
+            {langui.listen_content}
          </Button>
        ) : (
          ""
@ -56,7 +56,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {

        {content.video_set.length > 0 ? (
          <Button href={`/contents/${content.slug}/watch/`}>
-            {langui.content_watch_content}
+            {langui.watch_content}
          </Button>
        ) : (
          ""
--- a/src/pages/gallery/index.tsx
+++ b/src/pages/gallery/index.tsx
@ -18,7 +18,7 @@ export default function Gallery(props: GalleryProps): JSX.Element {

  return (
    <AppLayout
-      navTitle={langui.main_gallery}
+      navTitle={langui.gallery}
      langui={langui}
      contentPanel={contentPanel}
    />
--- a/src/pages/library/[slug].tsx
+++ b/src/pages/library/[slug].tsx
@ -58,16 +58,12 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {

  const subPanel = (
    <SubPanel>
-      <ReturnButton
-        href="/library/"
-        title={langui.main_library}
-        langui={langui}
-      />
+      <ReturnButton href="/library/" title={langui.library} langui={langui} />
      <HorizontalLine />

      <div className="grid gap-4">
        <NavOption
-          title={langui.library_item_summary}
+          title={langui.summary}
          url="#summary"
          border
          onClick={() => appLayout.setSubPanelOpen(false)}
@ -75,7 +71,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {

        {item.gallery.data.length > 0 ? (
          <NavOption
-            title={langui.library_item_gallery}
+            title={langui.gallery}
            url="#gallery"
            border
            onClick={() => appLayout.setSubPanelOpen(false)}
@ -85,7 +81,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
        )}

        <NavOption
-          title={langui.library_item_details}
+          title={langui.details}
          url="#details"
          border
          onClick={() => appLayout.setSubPanelOpen(false)}
@ -93,11 +89,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {

        {item.subitems.data.length > 0 ? (
          <NavOption
-            title={
-              isVariantSet
-                ? langui.library_item_variants
-                : langui.library_item_subitems
-            }
+            title={isVariantSet ? langui.variants : langui.subitems}
            url={isVariantSet ? "#variants" : "#subitems"}
            border
            onClick={() => appLayout.setSubPanelOpen(false)}
@ -107,11 +99,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
        )}

        {item.contents.data.length > 0 ? (
-          <NavOption
-            title={langui.library_item_content}
-            url="#content"
-            border
-          />
+          <NavOption title={langui.contents} url="#contents" border />
        ) : (
          ""
        )}
@ -140,7 +128,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
          <div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8">
            {item.subitem_of.data.length > 0 ? (
              <div className="grid place-items-center">
-                <p>{langui.global_subitem_of}</p>
+                <p>{langui.subitem_of}</p>
                <Button
                  href={`/library/${item.subitem_of.data[0].attributes.slug}`}
                >
@ -172,7 +160,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {

        {item.gallery.data.length > 0 ? (
          <div id="gallery" className="grid place-items-center gap-8  w-full">
-            <h2 className="text-2xl">{langui.library_item_gallery}</h2>
+            <h2 className="text-2xl">{langui.gallery}</h2>
            <div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
              {item.gallery.data.map((galleryItem) => (
                <div
@ -197,12 +185,12 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
        <InsetBox id="details" className="grid place-items-center">
          <div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
            <h2 className="text-2xl text-center">
-              {langui.library_item_details}
+              {langui.details}
            </h2>
            <div className="grid grid-flow-col w-full place-content-between">
              {item.metadata.length > 0 ? (
                <div className="grid place-items-center">
-                  <h3 className="text-xl">{langui.global_type}</h3>
+                  <h3 className="text-xl">{langui.type}</h3>
                  <div className="grid grid-flow-col gap-1">
                    <Chip>{prettyItemType(item.metadata[0], langui)}</Chip>
                    {"›"}
@ -215,7 +203,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {

              {item.release_date ? (
                <div className="grid place-items-center">
-                  <h3 className="text-xl">{langui.global_release_date}</h3>
+                  <h3 className="text-xl">{langui.release_date}</h3>
                  <p>{prettyDate(item.release_date)}</p>
                </div>
              ) : (
@ -224,7 +212,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {

              {item.price ? (
                <div className="grid place-items-center">
-                  <h3 className="text-xl">{langui.global_price}</h3>
+                  <h3 className="text-xl">{langui.price}</h3>
                  <p>{prettyPrice(item.price)}</p>
                </div>
              ) : (
@ -233,17 +221,17 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
            </div>
            {item.size ? (
              <>
-                <h3 className="text-xl">{langui.library_item_physical_size}</h3>
+                <h3 className="text-xl">{langui.size}</h3>
                <div className="grid grid-flow-col w-full place-content-between">
                  <div className="flex flex-row flex-wrap place-items-start gap-4">
-                    <p className="font-bold">{langui.global_width}:</p>
+                    <p className="font-bold">{langui.width}:</p>
                    <div>
                      <p>{item.size.width} mm</p>
                      <p>{convertMmToInch(item.size.width)} in</p>
                    </div>
                  </div>
                  <div className="flex flex-row flex-wrap place-items-start gap-4">
-                    <p className="font-bold">{langui.global_height}:</p>
+                    <p className="font-bold">{langui.height}:</p>
                    <div>
                      <p>{item.size.height} mm</p>
                      <p>{convertMmToInch(item.size.height)} in</p>
@ -251,7 +239,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                  </div>
                  {item.size.thickness ? (
                    <div className="flex flex-row flex-wrap place-items-start gap-4">
-                      <p className="font-bold">{langui.global_thickness}:</p>
+                      <p className="font-bold">{langui.thickness}:</p>
                      <div>
                        <p>{item.size.thickness} mm</p>
                        <p>{convertMmToInch(item.size.thickness)} in</p>
@ -269,44 +257,44 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
            {item.metadata.length > 0 ? (
              <>
                <h3 className="text-xl">
-                  {langui.library_item_type_information}
+                  {langui.type_information}
                </h3>
                <div className="grid grid-cols-2 w-full place-content-between">
                  {item.metadata[0].__typename === "ComponentMetadataBooks" ? (
                    <>
                      <div className="flex flex-row place-content-start gap-4">
-                        <p className="font-bold">{langui.global_pages}:</p>
+                        <p className="font-bold">{langui.pages}:</p>
                        <p>{item.metadata[0].page_count}</p>
                      </div>

                      <div className="flex flex-row place-content-start gap-4">
-                        <p className="font-bold">{langui.global_binding}:</p>
+                        <p className="font-bold">{langui.binding}:</p>
                        <p>
                          {item.metadata[0].binding_type ===
                          Enum_Componentmetadatabooks_Binding_Type.Paperback
-                            ? langui.global_paperback
+                            ? langui.paperback
                            : item.metadata[0].binding_type ===
                              Enum_Componentmetadatabooks_Binding_Type.Hardcover
-                            ? langui.global_hardcover
+                            ? langui.hardcover
                            : ""}
                        </p>
                      </div>

                      <div className="flex flex-row place-content-start gap-4">
-                        <p className="font-bold">{langui.global_page_order}:</p>
+                        <p className="font-bold">{langui.page_order}:</p>
                        <p>
                          {item.metadata[0].page_order ===
                          Enum_Componentmetadatabooks_Page_Order.LeftToRight
-                            ? langui.global_left_to_right
+                            ? langui.left_to_right
                            : item.metadata[0].page_order ===
                              Enum_Componentmetadatabooks_Page_Order.RightToLeft
-                            ? langui.global_right_to_left
+                            ? langui.right_to_left
                            : ""}
                        </p>
                      </div>

                      <div className="flex flex-row place-content-start gap-4">
-                        <p className="font-bold">{langui.global_languages}:</p>
+                        <p className="font-bold">{langui.languages}:</p>
                        {item.metadata[0].languages.data.map((lang) => (
                          <p key={lang.attributes.code}>
                            {lang.attributes.name}
@ -327,7 +315,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                    "ComponentMetadataOther" ? (
                    <>
                      <div className="flex flex-row place-content-start gap-4">
-                        <p className="font-bold">{langui.global_type}:</p>
+                        <p className="font-bold">{langui.type}:</p>
                        <Chip>
                          {item.metadata[0].subtype.data.attributes.titles
                            .length > 0
@ -357,8 +345,8 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
          >
            <h2 className="text-2xl">
              {isVariantSet
-                ? langui.library_item_variants
-                : langui.library_item_subitems}
+                ? langui.variants
+                : langui.subitems}
            </h2>
            <div className="grid gap-8 items-end mobile:grid-cols-2 grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
              {item.subitems.data.map((subitem) => (
@ -374,8 +362,8 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
        )}

        {item.contents.data.length > 0 ? (
-          <div id="content" className="w-full grid place-items-center gap-8">
-            <h2 className="text-2xl">{langui.library_item_content}</h2>
+          <div id="contents" className="w-full grid place-items-center gap-8">
+            <h2 className="text-2xl">{langui.contents}</h2>
            <div className="grid gap-4 w-full">
              {item.contents.data.map((content) => (
                <div
@ -440,7 +428,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                      <Button
                        href={`/contents/${content.attributes.content.data.attributes.slug}/scans/`}
                      >
-                        {langui.library_item_view_scans}
+                        {langui.view_scans}
                      </Button>
                    ) : (
                      ""
@ -450,7 +438,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                      <Button
                        href={`/contents/${content.attributes.content.data.attributes.slug}`}
                      >
-                        {langui.library_item_open_content}
+                        {langui.open_content}
                      </Button>
                    ) : (
                      ""
@ -474,7 +462,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {

  return (
    <AppLayout
-      navTitle={langui.main_library}
+      navTitle={langui.library}
      title={prettyinlineTitle("", item.title, item.subtitle)}
      langui={langui}
      contentPanel={contentPanel}
--- a/src/pages/library/index.tsx
+++ b/src/pages/library/index.tsx
@ -45,7 +45,7 @@ export default function Library(props: LibraryProps): JSX.Element {
  >(sortBy(groupingMethod, filteredItems));

  const [groups, setGroups] = useState<GroupLibraryItems>(
-    getGroups(groupingMethod, sortedItems)
+    getGroups(langui, groupingMethod, sortedItems)
  );

  useEffect(() => {
@ -59,26 +59,22 @@ export default function Library(props: LibraryProps): JSX.Element {
  }, [filteredItems, sortingMethod]);

  useEffect(() => {
-    setGroups(getGroups(groupingMethod, sortedItems));
-  }, [groupingMethod, sortedItems]);
+    setGroups(getGroups(langui, groupingMethod, sortedItems));
+  }, [langui, groupingMethod, sortedItems]);

  const subPanel = (
    <SubPanel>
      <PanelHeader
        icon="library_books"
-        title={langui.main_library}
+        title={langui.library}
        description={langui.library_description}
      />

      <div className="flex flex-row gap-2 place-items-center">
-        <p className="flex-shrink-0">Group by:</p>
+        <p className="flex-shrink-0">{langui.group_by}:</p>
        <Select
          className="w-full"
-          options={[
-            { name: "category", label: "Category" },
-            { name: "type", label: "Type" },
-            { name: "releaseYear", label: "Release year" },
-          ]}
+          options={[langui.category, langui.type, langui.release_year]}
          state={groupingMethod}
          setState={setGroupingMethod}
          allowEmpty
@ -86,21 +82,17 @@ export default function Library(props: LibraryProps): JSX.Element {
      </div>

      <div className="flex flex-row gap-2 place-items-center">
-        <p className="flex-shrink-0">Order by:</p>
+        <p className="flex-shrink-0">{langui.order_by}:</p>
        <Select
          className="w-full"
-          options={[
-            { name: "title", label: "Title" },
-            { name: "price", label: "Price" },
-            { name: "releaseDate", label: "Release date" },
-          ]}
+          options={[langui.name, langui.price, langui.release_date]}
          state={sortingMethod}
          setState={setSortingMethod}
        />
      </div>

      <div className="flex flex-row gap-2 place-items-center">
-        <p className="flex-shrink-0">Show subitems:</p>
+        <p className="flex-shrink-0">{langui.show_subitems}:</p>
        <Switch state={showSubitems} setState={setShowSubitems} />
      </div>
    </SubPanel>
@ -128,7 +120,7 @@ export default function Library(props: LibraryProps): JSX.Element {
  );
  return (
    <AppLayout
-      navTitle={langui.main_library}
+      navTitle={langui.library}
      langui={langui}
      subPanel={subPanel}
      contentPanel={contentPanel}
@ -155,6 +147,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
 };

 function getGroups(
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"],
  groupByType: number,
  items: LibraryProps["libraryItems"]["libraryItems"]["data"]
 ): GroupLibraryItems {
@ -164,52 +157,52 @@ function getGroups(

    case 1:
      const groupType: GroupLibraryItems = new Map();
-      groupType.set("Audio", []);
-      groupType.set("Game", []);
-      groupType.set("Textual", []);
-      groupType.set("Video", []);
-      groupType.set("Other", []);
-      groupType.set("No type", []);
+      groupType.set(langui.audio, []);
+      groupType.set(langui.game, []);
+      groupType.set(langui.textual, []);
+      groupType.set(langui.video, []);
+      groupType.set(langui.other, []);
+      groupType.set(langui.no_type, []);
      items.map((item) => {
        if (item.attributes.metadata.length > 0) {
          switch (item.attributes.metadata[0].__typename) {
            case "ComponentMetadataAudio":
-              groupType.get("Audio")?.push(item);
+              groupType.get(langui.audio)?.push(item);
              break;
            case "ComponentMetadataGame":
-              groupType.get("Game")?.push(item);
+              groupType.get(langui.game)?.push(item);
              break;
            case "ComponentMetadataBooks":
-              groupType.get("Textual")?.push(item);
+              groupType.get(langui.textual)?.push(item);
              break;
            case "ComponentMetadataVideo":
-              groupType.get("Video")?.push(item);
+              groupType.get(langui.video)?.push(item);
              break;
            case "ComponentMetadataOther":
              switch (
                item.attributes.metadata[0].subtype.data.attributes.slug
              ) {
                case "audio-case":
-                  groupType.get("Audio")?.push(item);
+                  groupType.get(langui.audio)?.push(item);
                  break;

                case "video-case":
-                  groupType.get("Video")?.push(item);
+                  groupType.get(langui.video)?.push(item);
                  break;

                case "game-case":
-                  groupType.get("Game")?.push(item);
+                  groupType.get(langui.game)?.push(item);
                  break;

                default:
-                  groupType.get("Other")?.push(item);
+                  groupType.get(langui.other)?.push(item);
                  break;
              }

              break;
          }
        } else {
-          groupType.get("No type")?.push(item);
+          groupType.get(langui.no_type)?.push(item);
        }
      });
      return groupType;
@ -227,14 +220,14 @@ function getGroups(
      years.map((year) => {
        groupYear.set(year.toString(), []);
      });
-      groupYear.set("No year", []);
+      groupYear.set(langui.no_year, []);
      items.map((item) => {
        if (item.attributes.release_date) {
          groupYear
            .get(item.attributes.release_date.year.toString())
            ?.push(item);
        } else {
-          groupYear.get("No year")?.push(item);
+          groupYear.get(langui.no_year)?.push(item);
        }
      });

--- a/src/pages/merch/index.tsx
+++ b/src/pages/merch/index.tsx
@ -15,7 +15,7 @@ export default function Merch(props: MerchProps): JSX.Element {
    <SubPanel>
      <PanelHeader
        icon="store"
-        title={langui.main_merch}
+        title={langui.merch}
        description={langui.merch_description}
      />
    </SubPanel>
@ -23,7 +23,7 @@ export default function Merch(props: MerchProps): JSX.Element {

  return (
    <AppLayout
-      navTitle={langui.main_merch}
+      navTitle={langui.merch}
      langui={langui}
      subPanel={subPanel}
    />
--- a/src/pages/news/index.tsx
+++ b/src/pages/news/index.tsx
@ -15,7 +15,7 @@ export default function News(props: NewsProps): JSX.Element {
    <SubPanel>
      <PanelHeader
        icon="feed"
-        title={langui.main_news}
+        title={langui.news}
        description={langui.news_description}
      />
    </SubPanel>
@ -23,7 +23,7 @@ export default function News(props: NewsProps): JSX.Element {

  return (
    <AppLayout
-      navTitle={langui.main_news}
+      navTitle={langui.news}
      langui={langui}
      subPanel={subPanel}
    />
--- a/src/pages/wiki/index.tsx
+++ b/src/pages/wiki/index.tsx
@ -16,7 +16,7 @@ export default function Hubs(props: WikiProps): JSX.Element {
    <SubPanel>
      <PanelHeader
        icon="travel_explore"
-        title={langui.main_wiki}
+        title={langui.wiki}
        description={langui.wiki_description}
      />
    </SubPanel>
@ -25,7 +25,7 @@ export default function Hubs(props: WikiProps): JSX.Element {

  return (
    <AppLayout
-      navTitle={langui.main_wiki}
+      navTitle={langui.wiki}
      langui={langui}
      contentPanel={contentPanel}
      subPanel={subPanel}