Added support for UI translation and other fields

src/components/Content/ThumbnailHeader.tsx

@@ -21,13 +21,17 @@ export default function ThumbnailHeader(
     <>
       <div className="grid place-items-center gap-12  mb-12">
         <div className="drop-shadow-dark-lg">
-          <Image
+          {content.thumbnail.data ? (
-            className=" rounded-xl"
+            <Image
-            src={getAssetURL(content.thumbnail.data.attributes.url)}
+              className=" rounded-xl"
-            alt={content.thumbnail.data.attributes.alternativeText}
+              src={getAssetURL(content.thumbnail.data.attributes.url)}
-            width={content.thumbnail.data.attributes.width}
+              alt={content.thumbnail.data.attributes.alternativeText}
-            height={content.thumbnail.data.attributes.height}
+              width={content.thumbnail.data.attributes.width}
-          />
+              height={content.thumbnail.data.attributes.height}
+            />
+          ) : (
+            <div className="w-full aspect-[4/3] bg-light rounded-xl"></div>
+          )}
         </div>
         <div className="grid place-items-center">
           <p className="text-2xl">{content.titles[0].pre_title}</p>
@@ -40,7 +44,7 @@ export default function ThumbnailHeader(
         {content.type ? (
           <div className="grid place-items-center place-content-start gap-2">
             <h3 className="text-xl">Type</h3>
-            <Button>{prettySlug(content.type.data.attributes.slug)}</Button>
+            <Button>{content.type.data.attributes.titles[0].title}</Button>
           </div>
         ) : (
           ""

src/components/Library/LibraryItemComponent.tsx

@@ -32,7 +32,7 @@ export default function LibraryItemComponent(
         ) : (
           <div className="w-full aspect-[21/29.7] bg-light rounded-lg"></div>
         )}
-        <div className="linearbg-1 shadow-[0_0_1em_rgb(0,0,0,0.2)] absolute bottom-0 left-0 right-0 h-auto 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-4 text-left">
           <div>
             <h2 className="text-lg leading-7">{item.title}</h2>
             <h3 className="leading-3">{item.subtitle}</h3>

src/components/PanelComponents/ReturnButton.tsx

@@ -1,10 +1,12 @@
 import Button from "components/Button";
+import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 
 type ReturnButtonProps = {
   href: string;
   title: string;
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
 };
 
 export default function ReturnButton(props: ReturnButtonProps): JSX.Element {
-  return <Button href={props.href}>❮&emsp;Return to {props.title}</Button>;
+  return <Button href={props.href}>❮&emsp;{props.langui.global_return_label} {props.title}</Button>;
 }

src/components/Panels/MainPanel.tsx

@@ -4,8 +4,15 @@ import SVG from "components/SVG";
 import { useRouter } from "next/router";
 import Button from "components/Button";
 import HorizontalLine from "components/HorizontalLine";
+import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
+import Markdown from "markdown-to-jsx";
 
-export default function MainPanel(): JSX.Element {
+type Props = {
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
+};
+
+export default function MainPanel(props: Props): JSX.Element {
+  const langui = props.langui;
   const router = useRouter();
   return (
     <div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] overflow-y-scroll border-r-[1px] border-black max-h-screen h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center">
@@ -37,39 +44,50 @@ export default function MainPanel(): JSX.Element {
       <NavOption
         url="/library"
         icon="library_books"
-        title="Library"
+        title={langui.main_library}
-        subtitle="Browse all physical and digital media"
+        subtitle={langui.main_library_description}
       />
 
       <NavOption
         url="/hubs"
         icon="workspaces"
-        title="Hubs"
+        title={langui.main_hub}
-        subtitle="Explore all content of a specific game/series"
+        subtitle={langui.main_hub_description}
       />
 
       <NavOption
         url="/chronology"
         icon="watch_later"
-        title="Chronology"
+        title={langui.main_chronology}
-        subtitle="Follow all events in chronological order"
+        subtitle={langui.main_chronology_description}
       />
 
       <HorizontalLine />
 
-      <NavOption url="/news" icon="feed" title="News" />
+      <NavOption url="/news" icon="feed" title={langui.main_news} />
-      <NavOption url="/data" icon="travel_explore" title="Data" />
+      <NavOption url="/data" icon="travel_explore" title={langui.main_data} />
-      <NavOption url="/gallery" icon="collections" title="Gallery" />
+      <NavOption url="/merch" icon="store" title={langui.main_merch} />
-      <NavOption url="/archive" icon="inventory" title="Archive" />
+      <NavOption
-      <NavOption url="/about-us" icon="info" title="About us" />
+        url="/gallery"
+        icon="collections"
+        title={langui.main_gallery}
+      />
+      <NavOption
+        url="/archives"
+        icon="inventory"
+        title={langui.main_archives}
+      />
+      <NavOption url="/about-us" icon="info" title={langui.main_about_us} />
 
       <HorizontalLine />
 
       <div className="text-center">
         <p>
-          This website&rsquo;s content is made available under{" "}
+          {langui.main_licensing ? (
-          <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a>{" "}
+            <Markdown>{langui.main_licensing}</Markdown>
-          unless otherwise noted.
+          ) : (
+            ""
+          )}
         </p>
         <a
           className="transition-[filter] hover:colorize-dark"
@@ -94,9 +112,11 @@ export default function MainPanel(): JSX.Element {
           </div>
         </a>
         <p>
-          Accord&rsquo;s Library is not affiliated with or endorsed by SQUARE
+          {langui.main_copyright ? (
-          ENIX CO. LTD. All game assets and promotional materials belongs to
+            <Markdown>{langui.main_copyright}</Markdown>
-          ©&nbsp;SQUARE ENIX CO. LTD.
+          ) : (
+            ""
+          )}
         </p>
         <div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
           <a

src/graphql/operation.graphql

@@ -1,3 +1,56 @@
+query getWebsiteInterface($language_code: String) {
+  websiteInterfaces(filters: { language: { code: { eq: $language_code } } }) {
+    data {
+      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
+        main_about_us
+        main_licensing
+        main_copyright
+        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
+        chronology_description
+        chronology_timelines
+        chronology_timelines_description
+        chronology_overview
+        chronology_overview_description
+        chronology_walkthrough
+        chronology_walkthrough_description
+      }
+    }
+  }
+}
+
 query getEras($language_code: String) {
   chronologyEras {
     data {
@@ -176,6 +229,11 @@ query getLibraryItem($slug: String, $language_code: String) {
               data {
                 attributes {
                   slug
+                  titles(
+                    filters: { language: { code: { eq: $language_code } } }
+                  ) {
+                    title
+                  }
                 }
               }
             }
@@ -240,6 +298,11 @@ query getLibraryItem($slug: String, $language_code: String) {
               data {
                 attributes {
                   slug
+                  titles(
+                    filters: { language: { code: { eq: $language_code } } }
+                  ) {
+                    title
+                  }
                 }
               }
             }
@@ -252,20 +315,16 @@ query getLibraryItem($slug: String, $language_code: String) {
               }
             }
           }
-          ... on ComponentMetadataMerch {
-            merch_item {
-              data {
-                attributes {
-                  slug
-                }
-              }
-            }
-          }
           ... on ComponentMetadataOther {
             subtype {
               data {
                 attributes {
                   slug
+                  titles(
+                    filters: { language: { code: { eq: $language_code } } }
+                  ) {
+                    title
+                  }
                 }
               }
             }
@@ -303,6 +362,28 @@ query getLibraryItem($slug: String, $language_code: String) {
             }
           }
         }
+        submerchs {
+          data {
+            id
+            attributes {
+              slug
+              title
+              subtitle
+              thumbnail {
+                data {
+                  attributes {
+                    name
+                    alternativeText
+                    caption
+                    width
+                    height
+                    url
+                  }
+                }
+              }
+            }
+          }
+        }
         contents(pagination: { limit: -1 }) {
           data {
             id
@@ -338,6 +419,13 @@ query getLibraryItem($slug: String, $language_code: String) {
                       data {
                         attributes {
                           slug
+                          titles(
+                            filters: {
+                              language: { code: { eq: $language_code } }
+                            }
+                          ) {
+                            title
+                          }
                         }
                       }
                     }
@@ -401,6 +489,9 @@ query getContent($slug: String, $language_code: String) {
           data {
             attributes {
               slug
+              titles(filters: { language: { code: { eq: $language_code } } }) {
+                title
+              }
             }
           }
         }
@@ -485,6 +576,9 @@ query getContentText($slug: String, $language_code: String) {
           data {
             attributes {
               slug
+              titles(filters: { language: { code: { eq: $language_code } } }) {
+                title
+              }
             }
           }
         }
@@ -595,7 +689,6 @@ query getContentText($slug: String, $language_code: String) {
           }
           notes
         }
-
         thumbnail {
           data {
             attributes {

src/graphql/operations-types.ts

@@ -29,7 +29,6 @@ export type Scalars = {
   But to make the type easier to work with, it went through the following transformation:
     - Removed ?
     - Removed | null
-    - Removed | undefined
 */
 
 export enum Enum_Componentmetadatabooks_Binding_Type {
@@ -65,6 +64,67 @@ export enum Enum_Componentsetstextset_Status {
 
 // __________________________________________________________________
 
+export type GetWebsiteInterfaceQueryVariables = Exact<{
+  language_code: InputMaybe<Scalars["String"]>;
+}>;
+
+export type GetWebsiteInterfaceQuery = {
+  __typename: "Query";
+  websiteInterfaces: {
+    __typename: "WebsiteInterfaceEntityResponseCollection";
+    data: Array<{
+      __typename: "WebsiteInterfaceEntity";
+      attributes: {
+        __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;
+        main_about_us: string;
+        main_licensing: string;
+        main_copyright: 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;
+        chronology_description: string;
+        chronology_timelines: string;
+        chronology_timelines_description: string;
+        chronology_overview: string;
+        chronology_overview_description: string;
+        chronology_walkthrough: string;
+        chronology_walkthrough_description: string;
+      };
+    }>;
+  };
+};
+
 export type GetErasQueryVariables = Exact<{
   language_code: InputMaybe<Scalars["String"]>;
 }>;
@@ -304,6 +364,10 @@ export type GetLibraryItemQuery = {
                   attributes: {
                     __typename: "TextualSubtype";
                     slug: string;
+                    titles: Array<{
+                      __typename: "ComponentTranslationsSimpleTitle";
+                      title: string;
+                    }>;
                   };
                 };
               };
@@ -389,6 +453,10 @@ export type GetLibraryItemQuery = {
                   attributes: {
                     __typename: "AudioSubtype";
                     slug: string;
+                    titles: Array<{
+                      __typename: "ComponentTranslationsSimpleTitle";
+                      title: string;
+                    }>;
                   };
                 };
               };
@@ -404,19 +472,6 @@ export type GetLibraryItemQuery = {
                 }>;
               };
             }
-          | {
-              __typename: "ComponentMetadataMerch";
-              merch_item: {
-                __typename: "MerchItemEntityResponse";
-                data: {
-                  __typename: "MerchItemEntity";
-                  attributes: {
-                    __typename: "MerchItem";
-                    slug: string;
-                  };
-                };
-              };
-            }
           | {
               __typename: "ComponentMetadataOther";
               subtype: {
@@ -426,6 +481,10 @@ export type GetLibraryItemQuery = {
                   attributes: {
                     __typename: "OtherSubtype";
                     slug: string;
+                    titles: Array<{
+                      __typename: "ComponentTranslationsSimpleTitle";
+                      title: string;
+                    }>;
                   };
                 };
               };
@@ -473,6 +532,34 @@ export type GetLibraryItemQuery = {
             };
           }>;
         };
+        submerchs: {
+          __typename: "MerchItemRelationResponseCollection";
+          data: Array<{
+            __typename: "MerchItemEntity";
+            id: string;
+            attributes: {
+              __typename: "MerchItem";
+              slug: string;
+              title: string;
+              subtitle: string;
+              thumbnail: {
+                __typename: "UploadFileEntityResponse";
+                data: {
+                  __typename: "UploadFileEntity";
+                  attributes: {
+                    __typename: "UploadFile";
+                    name: string;
+                    alternativeText: string;
+                    caption: string;
+                    width: number;
+                    height: number;
+                    url: string;
+                  };
+                };
+              };
+            };
+          }>;
+        };
         contents: {
           __typename: "RangedContentRelationResponseCollection";
           data: Array<{
@@ -524,6 +611,10 @@ export type GetLibraryItemQuery = {
                         attributes: {
                           __typename: "ContentType";
                           slug: string;
+                          titles: Array<{
+                            __typename: "ComponentTranslationsSimpleTitle";
+                            title: string;
+                          }>;
                         };
                       };
                     };
@@ -605,7 +696,14 @@ export type GetContentQuery = {
           __typename: "ContentTypeEntityResponse";
           data: {
             __typename: "ContentTypeEntity";
-            attributes: { __typename: "ContentType"; slug: string };
+            attributes: {
+              __typename: "ContentType";
+              slug: string;
+              titles: Array<{
+                __typename: "ComponentTranslationsSimpleTitle";
+                title: string;
+              }>;
+            };
           };
         };
         ranged_contents: {
@@ -698,41 +796,48 @@ export type GetContentTextQuery = {
         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";
               name: string;
               short: string;
-            } ;
+            };
           }>;
-        } ;
+        };
         type: {
           __typename: "ContentTypeEntityResponse";
           data: {
             __typename: "ContentTypeEntity";
-            attributes: { __typename: "ContentType"; slug: string } ;
+            attributes: {
-          } ;
+              __typename: "ContentType";
-        } ;
+              slug: string;
+              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: {
@@ -741,7 +846,7 @@ export type GetContentTextQuery = {
                     __typename: "LibraryItem";
                     slug: string;
                     title: string;
-                    subtitle: string ;
+                    subtitle: string;
                     thumbnail: {
                       __typename: "UploadFileEntityResponse";
                       data: {
@@ -749,32 +854,32 @@ export type GetContentTextQuery = {
                         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";
           status: Enum_Componentsetstextset_Status;
-          text: string ;
+          text: string;
-          notes: string ;
+          notes: string;
           source_language: {
             __typename: "LanguageEntityResponse";
             data: {
               __typename: "LanguageEntity";
-              attributes: { __typename: "Language"; name: string } ;
+              attributes: { __typename: "Language"; name: string };
-            } ;
+            };
-          } ;
+          };
           transcribers: {
             __typename: "RecorderRelationResponseCollection";
             data: Array<{
@@ -791,17 +896,17 @@ export type GetContentTextQuery = {
                     attributes: {
                       __typename: "UploadFile";
                       name: string;
-                      alternativeText: string ;
+                      alternativeText: string;
-                      caption: string ;
+                      caption: string;
-                      width: number ;
+                      width: number;
-                      height: number ;
+                      height: number;
                       url: string;
-                    } ;
+                    };
-                  } ;
+                  };
-                } ;
+                };
-              } ;
+              };
             }>;
-          } ;
+          };
           translators: {
             __typename: "RecorderRelationResponseCollection";
             data: Array<{
@@ -818,17 +923,17 @@ export type GetContentTextQuery = {
                     attributes: {
                       __typename: "UploadFile";
                       name: string;
-                      alternativeText: string ;
+                      alternativeText: string;
-                      caption: string ;
+                      caption: string;
-                      width: number ;
+                      width: number;
-                      height: number ;
+                      height: number;
                       url: string;
-                    } ;
+                    };
-                  } ;
+                  };
-                } ;
+                };
-              } ;
+              };
             }>;
-          } ;
+          };
           proofreaders: {
             __typename: "RecorderRelationResponseCollection";
             data: Array<{
@@ -845,18 +950,18 @@ export type GetContentTextQuery = {
                     attributes: {
                       __typename: "UploadFile";
                       name: string;
-                      alternativeText: string ;
+                      alternativeText: string;
-                      caption: string ;
+                      caption: string;
-                      width: number ;
+                      width: number;
-                      height: number ;
+                      height: number;
                       url: string;
-                    } ;
+                    };
-                  } ;
+                  };
-                } ;
+                };
-              } ;
+              };
             }>;
-          } ;
+          };
-        } > ;
+        }>;
         thumbnail: {
           __typename: "UploadFileEntityResponse";
           data: {
@@ -864,15 +969,15 @@ export type GetContentTextQuery = {
             attributes: {
               __typename: "UploadFile";
               name: string;
-              alternativeText: string ;
+              alternativeText: string;
-              caption: string ;
+              caption: string;
-              width: number ;
+              width: number;
-              height: number ;
+              height: number;
               url: string;
-            } ;
+            };
-          } ;
+          };
-        } ;
+        };
-      } ;
+      };
     }>;
-  } ;
+  };
 };

src/graphql/operations.ts

@@ -17,6 +17,8 @@ import {
   GetLibraryItemsPreviewQueryVariables,
   GetLibraryItemsSlugsQuery,
   GetLibraryItemsSlugsQueryVariables,
+  GetWebsiteInterfaceQuery,
+  GetWebsiteInterfaceQueryVariables,
 } from "graphql/operations-types";
 
 const graphQL = async (query: string, variables?: string) => {
@@ -50,6 +52,13 @@ function getQueryFromOperations(queryName: string): string {
   return lines.slice(startingIndex, endingIndex).join("\n");
 }
 
+export async function getWebsiteInterface(
+  variables: GetWebsiteInterfaceQueryVariables
+): Promise<GetWebsiteInterfaceQuery> {
+  const query = getQueryFromOperations("getWebsiteInterface");
+  return await graphQL(query, JSON.stringify(variables));
+}
+
 export async function getEras(
   variables: GetErasQueryVariables
 ): Promise<GetErasQuery> {

src/graphql/schema.graphql

@@ -995,6 +995,26 @@ type ComponentTranslationsScanSet {
   credits: ComponentBasicsCredits!
 }
 
+input ComponentTranslationsSimpleTitleFiltersInput {
+  language: LanguageFiltersInput
+  title: StringFilterInput
+  and: [ComponentTranslationsSimpleTitleFiltersInput]
+  or: [ComponentTranslationsSimpleTitleFiltersInput]
+  not: ComponentTranslationsSimpleTitleFiltersInput
+}
+
+input ComponentTranslationsSimpleTitleInput {
+  id: ID
+  language: ID
+  title: String
+}
+
+type ComponentTranslationsSimpleTitle {
+  id: ID!
+  language: LanguageEntityResponse
+  title: String!
+}
+
 enum ENUM_COMPONENTTRANSLATIONSTEXTSET_STATUS {
   Incomplete
   Draft
@@ -1225,10 +1245,16 @@ input AudioSubtypeFiltersInput {
 
 input AudioSubtypeInput {
   slug: String
+  titles: [ComponentTranslationsSimpleTitleInput]
 }
 
 type AudioSubtype {
   slug: String!
+  titles(
+    filters: ComponentTranslationsSimpleTitleFiltersInput
+    pagination: PaginationArg = {}
+    sort: [String] = []
+  ): [ComponentTranslationsSimpleTitle]
   createdAt: DateTime
   updatedAt: DateTime
 }
@@ -1481,10 +1507,16 @@ input ContentTypeFiltersInput {
 
 input ContentTypeInput {
   slug: String
+  titles: [ComponentTranslationsSimpleTitleInput]
 }
 
 type ContentType {
   slug: String!
+  titles(
+    filters: ComponentTranslationsSimpleTitleFiltersInput
+    pagination: PaginationArg = {}
+    sort: [String] = []
+  ): [ComponentTranslationsSimpleTitle]
   createdAt: DateTime
   updatedAt: DateTime
 }
@@ -1711,7 +1743,6 @@ union LibraryItemMetadataDynamicZone =
   | ComponentMetadataVideo
   | ComponentMetadataGame
   | ComponentMetadataAudio
-  | ComponentMetadataMerch
   | ComponentMetadataOther
   | Error
 
@@ -1725,8 +1756,10 @@ input LibraryItemFiltersInput {
   subitems: LibraryItemFiltersInput
   subitem_of: LibraryItemFiltersInput
   root_item: BooleanFilterInput
-  variants: LibraryVariantFiltersInput
   contents: RangedContentFiltersInput
+  digital: BooleanFilterInput
+  primary: BooleanFilterInput
+  submerchs: MerchItemFiltersInput
   createdAt: DateTimeFilterInput
   updatedAt: DateTimeFilterInput
   and: [LibraryItemFiltersInput]
@@ -1743,7 +1776,6 @@ input LibraryItemInput {
   subitem_of: [ID]
   root_item: Boolean
   price: ComponentBasicsPriceInput
-  variants: ID
   metadata: [LibraryItemMetadataDynamicZoneInput!]
   size: ComponentBasicsSizeInput
   release_date: ComponentBasicsDatepickerInput
@@ -1751,6 +1783,9 @@ input LibraryItemInput {
   gallery: [ID]
   contents: [ID]
   images: ComponentCollectionsComponentLibraryImagesInput
+  digital: Boolean
+  primary: Boolean
+  submerchs: [ID]
 }
 
 type LibraryItem {
@@ -1770,7 +1805,6 @@ type LibraryItem {
   ): LibraryItemRelationResponseCollection
   root_item: Boolean!
   price: ComponentBasicsPrice
-  variants: LibraryVariantEntityResponse
   metadata: [LibraryItemMetadataDynamicZone]
   size: ComponentBasicsSize
   release_date: ComponentBasicsDatepicker
@@ -1790,6 +1824,13 @@ type LibraryItem {
     sort: [String] = []
   ): RangedContentRelationResponseCollection
   images: ComponentCollectionsComponentLibraryImages
+  digital: Boolean!
+  primary: Boolean!
+  submerchs(
+    filters: MerchItemFiltersInput
+    pagination: PaginationArg = {}
+    sort: [String] = []
+  ): MerchItemRelationResponseCollection
   createdAt: DateTime
   updatedAt: DateTime
 }
@@ -1812,47 +1853,12 @@ type LibraryItemRelationResponseCollection {
   data: [LibraryItemEntity!]!
 }
 
-input LibraryVariantFiltersInput {
-  id: IDFilterInput
-  items: LibraryItemFiltersInput
-  createdAt: DateTimeFilterInput
-  updatedAt: DateTimeFilterInput
-  and: [LibraryVariantFiltersInput]
-  or: [LibraryVariantFiltersInput]
-  not: LibraryVariantFiltersInput
-}
-
-input LibraryVariantInput {
-  items: [ID]
-}
-
-type LibraryVariant {
-  items(
-    filters: LibraryItemFiltersInput
-    pagination: PaginationArg = {}
-    sort: [String] = []
-  ): LibraryItemRelationResponseCollection
-  createdAt: DateTime
-  updatedAt: DateTime
-}
-
-type LibraryVariantEntity {
-  id: ID
-  attributes: LibraryVariant
-}
-
-type LibraryVariantEntityResponse {
-  data: LibraryVariantEntity
-}
-
-type LibraryVariantEntityResponseCollection {
-  data: [LibraryVariantEntity!]!
-  meta: ResponseCollectionMeta!
-}
-
 input MerchItemFiltersInput {
   id: IDFilterInput
   slug: StringFilterInput
+  library_items: LibraryItemFiltersInput
+  title: StringFilterInput
+  subtitle: StringFilterInput
   createdAt: DateTimeFilterInput
   updatedAt: DateTimeFilterInput
   and: [MerchItemFiltersInput]
@@ -1862,10 +1868,22 @@ input MerchItemFiltersInput {
 
 input MerchItemInput {
   slug: String
+  library_items: [ID]
+  title: String
+  subtitle: String
+  thumbnail: ID
 }
 
 type MerchItem {
   slug: String!
+  library_items(
+    filters: LibraryItemFiltersInput
+    pagination: PaginationArg = {}
+    sort: [String] = []
+  ): LibraryItemRelationResponseCollection
+  title: String!
+  subtitle: String
+  thumbnail: UploadFileEntityResponse
   createdAt: DateTime
   updatedAt: DateTime
 }
@@ -1884,6 +1902,10 @@ type MerchItemEntityResponseCollection {
   meta: ResponseCollectionMeta!
 }
 
+type MerchItemRelationResponseCollection {
+  data: [MerchItemEntity!]!
+}
+
 input OtherSubtypeFiltersInput {
   id: IDFilterInput
   slug: StringFilterInput
@@ -1896,10 +1918,16 @@ input OtherSubtypeFiltersInput {
 
 input OtherSubtypeInput {
   slug: String
+  titles: [ComponentTranslationsSimpleTitleInput]
 }
 
 type OtherSubtype {
   slug: String!
+  titles(
+    filters: ComponentTranslationsSimpleTitleFiltersInput
+    pagination: PaginationArg = {}
+    sort: [String] = []
+  ): [ComponentTranslationsSimpleTitle]
   createdAt: DateTime
   updatedAt: DateTime
 }
@@ -2137,10 +2165,16 @@ input TextualSubtypeFiltersInput {
 
 input TextualSubtypeInput {
   slug: String
+  titles: [ComponentTranslationsSimpleTitleInput]
 }
 
 type TextualSubtype {
   slug: String!
+  titles(
+    filters: ComponentTranslationsSimpleTitleFiltersInput
+    pagination: PaginationArg = {}
+    sort: [String] = []
+  ): [ComponentTranslationsSimpleTitle]
   createdAt: DateTime
   updatedAt: DateTime
 }
@@ -2298,6 +2332,172 @@ type WeaponStoryTypeEntityResponseCollection {
   meta: ResponseCollectionMeta!
 }
 
+input WebsiteInterfaceFiltersInput {
+  id: IDFilterInput
+  language: LanguageFiltersInput
+  main_library: StringFilterInput
+  main_library_description: StringFilterInput
+  main_hub: StringFilterInput
+  main_hub_description: StringFilterInput
+  main_chronology: StringFilterInput
+  main_chronology_description: StringFilterInput
+  main_news: StringFilterInput
+  main_data: StringFilterInput
+  main_merch: StringFilterInput
+  main_gallery: StringFilterInput
+  main_archives: StringFilterInput
+  main_about_us: StringFilterInput
+  main_licensing: StringFilterInput
+  main_copyright: StringFilterInput
+  library_description: StringFilterInput
+  library_item_summary: StringFilterInput
+  library_item_gallery: StringFilterInput
+  library_item_details: StringFilterInput
+  library_item_subitems: StringFilterInput
+  library_item_variants: StringFilterInput
+  library_item_content: StringFilterInput
+  global_return_label: StringFilterInput
+  global_subitem_of: StringFilterInput
+  global_type: StringFilterInput
+  global_width: StringFilterInput
+  global_height: StringFilterInput
+  global_thickness: StringFilterInput
+  global_binding: StringFilterInput
+  global_language: StringFilterInput
+  global_languages: StringFilterInput
+  global_page: StringFilterInput
+  global_pages: StringFilterInput
+  global_page_order: StringFilterInput
+  global_release_date: StringFilterInput
+  global_price: StringFilterInput
+  library_item_physical_size: StringFilterInput
+  library_item_type_information: StringFilterInput
+  chronology_description: StringFilterInput
+  chronology_timelines: StringFilterInput
+  chronology_timelines_description: StringFilterInput
+  chronology_overview: StringFilterInput
+  chronology_overview_description: StringFilterInput
+  chronology_walkthrough: StringFilterInput
+  chronology_walkthrough_description: StringFilterInput
+  createdAt: DateTimeFilterInput
+  updatedAt: DateTimeFilterInput
+  and: [WebsiteInterfaceFiltersInput]
+  or: [WebsiteInterfaceFiltersInput]
+  not: WebsiteInterfaceFiltersInput
+}
+
+input WebsiteInterfaceInput {
+  language: ID
+  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
+  main_about_us: String
+  main_licensing: String
+  main_copyright: 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
+  chronology_description: String
+  chronology_timelines: String
+  chronology_timelines_description: String
+  chronology_overview: String
+  chronology_overview_description: String
+  chronology_walkthrough: String
+  chronology_walkthrough_description: String
+}
+
+type WebsiteInterface {
+  language: LanguageEntityResponse
+  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
+  main_about_us: String
+  main_licensing: String
+  main_copyright: 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
+  chronology_description: String
+  chronology_timelines: String
+  chronology_timelines_description: String
+  chronology_overview: String
+  chronology_overview_description: String
+  chronology_walkthrough: String
+  chronology_walkthrough_description: String
+  createdAt: DateTime
+  updatedAt: DateTime
+}
+
+type WebsiteInterfaceEntity {
+  id: ID
+  attributes: WebsiteInterface
+}
+
+type WebsiteInterfaceEntityResponse {
+  data: WebsiteInterfaceEntity
+}
+
+type WebsiteInterfaceEntityResponseCollection {
+  data: [WebsiteInterfaceEntity!]!
+  meta: ResponseCollectionMeta!
+}
+
 union GenericMorph =
     ComponentBasicsCredits
   | ComponentBasicsDatepicker
@@ -2340,6 +2540,7 @@ union GenericMorph =
   | ComponentTranslationsLibraryItems
   | ComponentTranslationsPosts
   | ComponentTranslationsScanSet
+  | ComponentTranslationsSimpleTitle
   | ComponentTranslationsTextSet
   | ComponentTranslationsTitle
   | ComponentTranslationsVideoSets
@@ -2359,7 +2560,6 @@ union GenericMorph =
   | GlossaryItemType
   | Language
   | LibraryItem
-  | LibraryVariant
   | MerchItem
   | OtherSubtype
   | Post
@@ -2370,6 +2570,7 @@ union GenericMorph =
   | WeaponStory
   | WeaponStoryGroup
   | WeaponStoryType
+  | WebsiteInterface
 
 input FileInfoInput {
   name: String
@@ -2463,12 +2664,6 @@ type Query {
     pagination: PaginationArg = {}
     sort: [String] = []
   ): LibraryItemEntityResponseCollection
-  libraryVariant(id: ID): LibraryVariantEntityResponse
-  libraryVariants(
-    filters: LibraryVariantFiltersInput
-    pagination: PaginationArg = {}
-    sort: [String] = []
-  ): LibraryVariantEntityResponseCollection
   merchItem(id: ID): MerchItemEntityResponse
   merchItems(
     filters: MerchItemFiltersInput
@@ -2530,6 +2725,12 @@ type Query {
     pagination: PaginationArg = {}
     sort: [String] = []
   ): WeaponStoryTypeEntityResponseCollection
+  websiteInterface(id: ID): WebsiteInterfaceEntityResponse
+  websiteInterfaces(
+    filters: WebsiteInterfaceFiltersInput
+    pagination: PaginationArg = {}
+    sort: [String] = []
+  ): WebsiteInterfaceEntityResponseCollection
 }
 
 type Mutation {
@@ -2592,12 +2793,6 @@ type Mutation {
   createLibraryItem(data: LibraryItemInput!): LibraryItemEntityResponse
   updateLibraryItem(id: ID!, data: LibraryItemInput!): LibraryItemEntityResponse
   deleteLibraryItem(id: ID!): LibraryItemEntityResponse
-  createLibraryVariant(data: LibraryVariantInput!): LibraryVariantEntityResponse
-  updateLibraryVariant(
-    id: ID!
-    data: LibraryVariantInput!
-  ): LibraryVariantEntityResponse
-  deleteLibraryVariant(id: ID!): LibraryVariantEntityResponse
   createMerchItem(data: MerchItemInput!): MerchItemEntityResponse
   updateMerchItem(id: ID!, data: MerchItemInput!): MerchItemEntityResponse
   deleteMerchItem(id: ID!): MerchItemEntityResponse
@@ -2647,6 +2842,14 @@ type Mutation {
     data: WeaponStoryTypeInput!
   ): WeaponStoryTypeEntityResponse
   deleteWeaponStoryType(id: ID!): WeaponStoryTypeEntityResponse
+  createWebsiteInterface(
+    data: WebsiteInterfaceInput!
+  ): WebsiteInterfaceEntityResponse
+  updateWebsiteInterface(
+    id: ID!
+    data: WebsiteInterfaceInput!
+  ): WebsiteInterfaceEntityResponse
+  deleteWebsiteInterface(id: ID!): WebsiteInterfaceEntityResponse
   upload(
     refId: ID
     ref: String

src/pages/404.tsx

@@ -2,18 +2,28 @@ import Link from "next/link";
 import ContentPanel from "components/Panels/ContentPanel";
 import { applyCustomAppProps } from "./_app";
 import Head from "next/head";
+import { getWebsiteInterface } from "graphql/operations";
+import { GetStaticProps } from "next";
+import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
+import MainPanel from "components/Panels/MainPanel";
 
 applyCustomAppProps(FourOhFour, {
   useSubPanel: false,
   useContentPanel: true,
 });
 
-export default function FourOhFour(): JSX.Element {
+type Props = {
+  langui: GetWebsiteInterfaceQuery;
+};
+
+export default function FourOhFour(props: Props): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
   return (
     <>
       <Head>
         <title>Accord&rsquo;s Library - 404</title>
       </Head>
+      <MainPanel langui={langui} />
       <ContentPanel>
         <h1>404 - Page Not Found</h1>
         <Link href="/">
@@ -23,3 +33,17 @@ export default function FourOhFour(): JSX.Element {
     </>
   );
 }
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  if (context.locale) {
+    const props: Props = {
+      langui: await getWebsiteInterface({
+        language_code: context.locale,
+      }),
+    };
+    return {
+      props: props,
+    };
+  }
+  return { props: {} };
+};

src/pages/_app.tsx

@@ -31,7 +31,6 @@ export default function AccordsLibraryApp(appProps: AppProps) {
           : "grid grid-cols-[20rem]"
       }
     >
-      <MainPanel />
       <appProps.Component {...appProps.pageProps} />
     </div>
   );

src/pages/chronology/index.tsx

@@ -2,43 +2,67 @@ import SubPanel from "components/Panels/SubPanel";
 import NavOption from "components/PanelComponents/NavOption";
 import { applyCustomAppProps } from "pages/_app";
 import PanelHeader from "components/PanelComponents/PanelHeader";
+import MainPanel from "components/Panels/MainPanel";
+import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
+import { GetStaticProps } from "next";
+import { getWebsiteInterface } from "graphql/operations";
 
 applyCustomAppProps(Chronology, {
   useSubPanel: true,
   useContentPanel: false,
 });
 
-export default function Chronology(): JSX.Element {
+type Props = {
+  langui: GetWebsiteInterfaceQuery;
+};
+
+export default function Chronology(props: Props): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
   return (
     <>
+      <MainPanel langui={langui} />
       <SubPanel>
         <PanelHeader
           icon="watch_later"
-          title="Chronology"
+          title={langui.main_chronology}
-          description="Follow all events in chronological order. Here we can write more about this section of the website, whatever we like in fact."
+          description={langui.chronology_description}
         />
 
         <NavOption
           url="/chronology/timelines"
-          title="Timelines"
+          title={langui.chronology_timelines}
-          subtitle="Diagram of how the games connect to each other"
+          subtitle={langui.chronology_timelines_description}
           border={true}
         />
 
         <NavOption
           url="/chronology/overview"
-          title="Chronology Overview"
+          title={langui.chronology_overview}
-          subtitle="List of all the events from the main timeline"
+          subtitle={langui.chronology_overview_description}
           border={true}
         />
 
         <NavOption
           url="/chronology/walkthrough"
-          title="Chronology Walkthrough"
+          title={langui.chronology_walkthrough}
-          subtitle="Chronological exploration of the lore and stories"
+          subtitle={langui.chronology_walkthrough_description}
           border={true}
         />
       </SubPanel>
     </>
   );
 }
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  if (context.locale) {
+    const props: Props = {
+      langui: await getWebsiteInterface({
+        language_code: context.locale,
+      }),
+    };
+    return {
+      props: props,
+    };
+  }
+  return { props: {} };
+};

src/pages/chronology/overview.tsx

@@ -6,15 +6,22 @@ import { applyCustomAppProps } from "pages/_app";
 import {
   GetChronologyItemsQuery,
   GetErasQuery,
+  GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
-import { getEras, getChronologyItems } from "graphql/operations";
+import {
+  getEras,
+  getChronologyItems,
+  getWebsiteInterface,
+} from "graphql/operations";
 import NavOption from "components/PanelComponents/NavOption";
 import ReturnButton from "components/PanelComponents/ReturnButton";
 import HorizontalLine from "components/HorizontalLine";
+import MainPanel from "components/Panels/MainPanel";
 
 interface Props {
   chronologyItems: GetChronologyItemsQuery;
   chronologyEras: GetErasQuery;
+  langui: GetWebsiteInterfaceQuery;
 }
 
 applyCustomAppProps(ChronologyOverview, {
@@ -24,7 +31,7 @@ applyCustomAppProps(ChronologyOverview, {
 
 export default function ChronologyOverview(props: Props): JSX.Element {
   // Group by year the Chronology items
-
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
   let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][] =
     [];
 
@@ -40,8 +47,9 @@ export default function ChronologyOverview(props: Props): JSX.Element {
 
   return (
     <>
+      <MainPanel langui={langui} />
       <SubPanel>
-        <ReturnButton href="/chronology" title="Chronology" />
+        <ReturnButton href="/chronology" title="Chronology" langui={langui} />
         <HorizontalLine />
 
         {props.chronologyEras.chronologyEras.data.map((era) => (
@@ -75,16 +83,19 @@ export default function ChronologyOverview(props: Props): JSX.Element {
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale)
+  if (context.locale) {
-    return {
+    const props: Props = {
-      props: {
+      chronologyItems: await getChronologyItems({
-        chronologyItems: await getChronologyItems({
+        language_code: context.locale,
-          language_code: context.locale,
+      }),
-        }),
+      chronologyEras: await getEras({ language_code: context.locale }),
-        chronologyEras: await getEras({ language_code: context.locale }),
+      langui: await getWebsiteInterface({
-      },
+        language_code: context.locale,
+      }),
+    };
+    return {
+      props: props,
     };
-  else {
-    return { props: {} };
   }
+  return { props: {} };
 };

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

@@ -1,16 +1,25 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 import { applyCustomAppProps } from "pages/_app";
-import { getContent, getContentsSlugs } from "graphql/operations";
+import {
-import { GetContentQuery } from "graphql/operations-types";
+  getContent,
+  getContentsSlugs,
+  getWebsiteInterface,
+} from "graphql/operations";
+import {
+  GetContentQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
 import ContentPanel from "components/Panels/ContentPanel";
 import Image from "next/image";
 import { getAssetURL, prettySlug } from "queries/helpers";
 import Button from "components/Button";
 import HorizontalLine from "components/HorizontalLine";
 import ThumbnailHeader from "components/Content/ThumbnailHeader";
+import MainPanel from "components/Panels/MainPanel";
 
 type Props = {
   content: GetContentQuery;
+  langui: GetWebsiteInterfaceQuery;
 };
 
 applyCustomAppProps(Library, {
@@ -20,9 +29,11 @@ applyCustomAppProps(Library, {
 
 export default function Library(props: Props): JSX.Element {
   const content = props.content.contents.data[0].attributes;
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
 
   return (
     <>
+      <MainPanel langui={langui} />
       <ContentPanel>
         <div className="grid place-items-center">
           <ThumbnailHeader content={content} />
@@ -63,30 +74,38 @@ export const getStaticProps: GetStaticProps = async (context) => {
     if (context.params.slug && context.locale) {
       if (context.params.slug instanceof Array)
         context.params.slug = context.params.slug.join("");
+
+      const props: Props = {
+        content: await getContent({
+          slug: context.params.slug,
+          language_code: context.locale,
+        }),
+        langui: await getWebsiteInterface({
+          language_code: context.locale,
+        }),
+      };
       return {
-        props: {
+        props: props,
-          content: await getContent({
-            slug: context.params.slug,
-            language_code: context.locale,
-          }),
-        },
       };
     }
   }
   return { props: {} };
 };
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths: GetStaticPaths = async (context) => {
   type Path = {
     params: {
       slug: string;
     };
+    locale: string;
   };
 
   const data = await getContentsSlugs({});
   const paths: Path[] = [];
   data.contents.data.map((item) => {
-    paths.push({ params: { slug: item.attributes.slug } });
+    context.locales?.map((local) => {
+      paths.push({ params: { slug: item.attributes.slug }, locale: local });
+    });
   });
   return {
     paths,

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

@@ -1,7 +1,14 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 import { applyCustomAppProps } from "pages/_app";
-import { getContentsSlugs, getContentText } from "graphql/operations";
+import {
-import { GetContentTextQuery } from "graphql/operations-types";
+  getContentsSlugs,
+  getContentText,
+  getWebsiteInterface,
+} from "graphql/operations";
+import {
+  GetContentTextQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
 import ContentPanel from "components/Panels/ContentPanel";
 import Image from "next/image";
 import { getAssetURL, prettySlug } from "queries/helpers";
@@ -12,9 +19,11 @@ import SubPanel from "components/Panels/SubPanel";
 import ReturnButton from "components/PanelComponents/ReturnButton";
 import SceneBreak from "components/Markdown/SceneBreak";
 import ThumbnailHeader from "components/Content/ThumbnailHeader";
+import MainPanel from "components/Panels/MainPanel";
 
 type Props = {
   content: GetContentTextQuery;
+  langui: GetWebsiteInterfaceQuery;
 };
 
 applyCustomAppProps(Library, {
@@ -24,11 +33,13 @@ applyCustomAppProps(Library, {
 
 export default function Library(props: Props): JSX.Element {
   const content = props.content.contents.data[0].attributes;
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
 
   return (
     <>
+      <MainPanel langui={langui} />
       <SubPanel>
-        <ReturnButton href={`/content/${content.slug}`} title="Content" />
+        <ReturnButton href={`/content/${content.slug}`} title={"Content"} langui={langui} />
       </SubPanel>
       <ContentPanel>
         <div className="grid place-items-center">
@@ -54,33 +65,41 @@ export default function Library(props: Props): JSX.Element {
 
 export const getStaticProps: GetStaticProps = async (context) => {
   if (context.params) {
-    if (context.params.slug instanceof Array)
-      context.params.slug = context.params.slug.join("");
     if (context.params.slug && context.locale) {
+      if (context.params.slug instanceof Array)
+        context.params.slug = context.params.slug.join("");
+
+      const props: Props = {
+        content: await getContentText({
+          slug: context.params.slug,
+          language_code: context.locale,
+        }),
+        langui: await getWebsiteInterface({
+          language_code: context.locale,
+        }),
+      };
       return {
-        props: {
+        props: props,
-          content: await getContentText({
-            slug: context.params.slug,
-            language_code: context.locale,
-          }),
-        },
       };
     }
   }
   return { props: {} };
 };
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths: GetStaticPaths = async (context) => {
   type Path = {
     params: {
       slug: string;
     };
+    locale: string;
   };
 
   const data = await getContentsSlugs({});
   const paths: Path[] = [];
   data.contents.data.map((item) => {
-    paths.push({ params: { slug: item.attributes.slug } });
+    context.locales?.map((local) => {
+      paths.push({ params: { slug: item.attributes.slug }, locale: local });
+    });
   });
   return {
     paths,

src/pages/gallery/index.tsx

@@ -1,13 +1,23 @@
+import MainPanel from "components/Panels/MainPanel";
+import { getWebsiteInterface } from "graphql/operations";
+import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
+import { GetStaticProps } from "next";
 import { applyCustomAppProps } from "pages/_app";
 
-applyCustomAppProps(Chronology, {
+applyCustomAppProps(Gallery, {
   useSubPanel: false,
   useContentPanel: true,
 });
 
-export default function Chronology(): JSX.Element {
+type Props = {
+  langui: GetWebsiteInterfaceQuery;
+};
+
+export default function Gallery(props: Props): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
   return (
     <>
+      <MainPanel langui={langui} />
       <iframe
         className="w-full h-screen"
         src="https://gallery.accords-library.com/posts"
@@ -15,3 +25,17 @@ export default function Chronology(): JSX.Element {
     </>
   );
 }
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  if (context.locale) {
+    const props: Props = {
+      langui: await getWebsiteInterface({
+        language_code: context.locale,
+      }),
+    };
+    return {
+      props: props,
+    };
+  }
+  return { props: {} };
+};

src/pages/index.tsx

@@ -1,4 +1,8 @@
 import ContentPanel from "components/Panels/ContentPanel";
+import MainPanel from "components/Panels/MainPanel";
+import { getWebsiteInterface } from "graphql/operations";
+import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
+import { GetStaticProps } from "next";
 import Head from "next/head";
 import { applyCustomAppProps } from "./_app";
 
@@ -7,12 +11,20 @@ applyCustomAppProps(Home, {
   useContentPanel: true,
 });
 
-export default function Home(): JSX.Element {
+type Props = {
+  langui: GetWebsiteInterfaceQuery;
+};
+
+export default function Home(props: Props): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
   return (
     <>
       <Head>
         <title>Accord&rsquo;s Library - Home</title>
       </Head>
+
+      <MainPanel langui={langui} />
+
       <ContentPanel autoformat={true}>
         <h2>Discover • Analyse • Translate • Archive</h2>
         <h2>What is this?</h2>
@@ -139,3 +151,18 @@ export default function Home(): JSX.Element {
     </>
   );
 }
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  if (context.locale) {
+    const props: Props = {
+      langui: await getWebsiteInterface({
+        language_code: context.locale,
+      }),
+    };
+    return {
+      props: props,
+    };
+  } else {
+    return { props: {} };
+  }
+};

src/pages/library/[slug].tsx

@@ -4,8 +4,15 @@ import ContentPanel, {
 import Image from "next/image";
 import { GetStaticPaths, GetStaticProps } from "next";
 import { applyCustomAppProps } from "pages/_app";
-import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations";
+import {
-import { GetLibraryItemQuery } from "graphql/operations-types";
+  getLibraryItem,
+  getLibraryItemsSlugs,
+  getWebsiteInterface,
+} from "graphql/operations";
+import {
+  GetLibraryItemQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
 import {
   convertMmToInch,
   getAssetURL,
@@ -21,9 +28,11 @@ import LibraryItemComponent from "components/Library/LibraryItemComponent";
 import Chip from "components/Chip";
 import Button from "components/Button";
 import HorizontalLine from "components/HorizontalLine";
+import MainPanel from "components/Panels/MainPanel";
 
 type Props = {
   libraryItem: GetLibraryItemQuery;
+  langui: GetWebsiteInterfaceQuery;
 };
 
 applyCustomAppProps(Library, {
@@ -33,6 +42,7 @@ applyCustomAppProps(Library, {
 
 export default function Library(props: Props): JSX.Element {
   const item = props.libraryItem.libraryItems.data[0].attributes;
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
 
   item.contents.data.sort((a, b) => {
     if (
@@ -49,28 +59,62 @@ export default function Library(props: Props): JSX.Element {
 
   return (
     <>
+      <MainPanel langui={langui} />
       <SubPanel>
-        <ReturnButton title="Library" href="/library" />
+        <ReturnButton
+          title={langui.main_library}
+          href="/library"
+          langui={langui}
+        />
         <HorizontalLine />
 
-        <NavOption title="Summary" url="#summary" border={true} />
+        <NavOption
+          title={langui.library_item_summary}
+          url="#summary"
+          border={true}
+        />
 
         {item.gallery.data.length > 0 ? (
-          <NavOption title="Gallery" url="#gallery" border={true} />
+          <NavOption
+            title={langui.library_item_gallery}
+            url="#gallery"
+            border={true}
+          />
         ) : (
           ""
         )}
 
-        <NavOption title="Details" url="#details" border={true} />
+        <NavOption
+          title={langui.library_item_details}
+          url="#details"
+          border={true}
+        />
 
         {item.subitems.data.length > 0 ? (
-          <NavOption title="Subitems" url="#subitems" border={true} />
+          item.metadata[0].__typename === "ComponentMetadataOther" &&
+          item.metadata[0].subtype.data.attributes.slug === "variant-set" ? (
+            <NavOption
+              title={langui.library_item_variants}
+              url="#variants"
+              border={true}
+            />
+          ) : (
+            <NavOption
+              title={langui.library_item_subitems}
+              url="#subitems"
+              border={true}
+            />
+          )
         ) : (
           ""
         )}
 
         {item.contents.data.length > 0 ? (
-          <NavOption title="Content" url="#content" border={true} />
+          <NavOption
+            title={langui.library_item_content}
+            url="#content"
+            border={true}
+          />
         ) : (
           ""
         )}
@@ -86,7 +130,7 @@ export default function Library(props: Props): JSX.Element {
                 height={item.thumbnail.data.attributes.height}
               />
             ) : (
-              <div className="w-full aspect-[21/29.7]"></div>
+              <div className="w-full aspect-[21/29.7] bg-light rounded-xl"></div>
             )}
           </div>
 
@@ -97,7 +141,7 @@ export default function Library(props: Props): 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>Subitem of</p>
+                  <p>{langui.global_subitem_of}</p>
                   <Button
                     href={`/library/${item.subitem_of.data[0].attributes.slug}`}
                   >
@@ -129,8 +173,8 @@ export default function Library(props: Props): JSX.Element {
 
           {item.gallery.data.length > 0 ? (
             <div id="gallery" className="grid place-items-center gap-8  w-full">
-              <h2 className="text-2xl">Gallery</h2>
+              <h2 className="text-2xl">{langui.library_item_gallery}</h2>
-              <div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]">
+              <div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
                 {item.gallery.data.map((galleryItem) => (
                   <div
                     key={galleryItem.id}
@@ -159,11 +203,13 @@ export default function Library(props: Props): JSX.Element {
             className="bg-mid w-full grid place-items-center p-8 rounded-2xl"
           >
             <div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
-              <h2 className="text-2xl text-center">Details</h2>
+              <h2 className="text-2xl text-center">
+                {langui.library_item_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">Type</h3>
+                    <h3 className="text-xl">{langui.global_type}</h3>
                     <Button>
                       {item.metadata[0].__typename.substring(
                         "ComponentMetadata".length
@@ -176,7 +222,7 @@ export default function Library(props: Props): JSX.Element {
 
                 {item.release_date ? (
                   <div className="grid place-items-center">
-                    <h3 className="text-xl">Release date</h3>
+                    <h3 className="text-xl">{langui.global_release_date}</h3>
                     <p>{prettyDate(item.release_date)}</p>
                   </div>
                 ) : (
@@ -185,7 +231,7 @@ export default function Library(props: Props): JSX.Element {
 
                 {item.release_date ? (
                   <div className="grid place-items-center">
-                    <h3 className="text-xl">Price</h3>
+                    <h3 className="text-xl">{langui.global_price}</h3>
                     <p>{prettyPrice(item.price)}</p>
                   </div>
                 ) : (
@@ -194,17 +240,19 @@ export default function Library(props: Props): JSX.Element {
               </div>
               {item.size ? (
                 <>
-                  <h3 className="text-xl">Physical Size</h3>
+                  <h3 className="text-xl">
+                    {langui.library_item_physical_size}
+                  </h3>
                   <div className="grid grid-flow-col w-full place-content-between">
                     <div className="grid place-items-start grid-flow-col gap-4">
-                      <p className="font-bold">Width:</p>
+                      <p className="font-bold">{langui.global_width}:</p>
                       <div>
                         <p>{item.size.width} mm</p>
                         <p>{convertMmToInch(item.size.width)} in</p>
                       </div>
                     </div>
                     <div className="grid place-items-start grid-flow-col gap-4">
-                      <p className="font-bold">Height:</p>
+                      <p className="font-bold">{langui.global_height}:</p>
                       <div>
                         <p>{item.size.height} mm</p>
                         <p>{convertMmToInch(item.size.height)} in</p>
@@ -212,7 +260,7 @@ export default function Library(props: Props): JSX.Element {
                     </div>
                     {item.size.thickness ? (
                       <div className="grid place-items-start grid-flow-col gap-4">
-                        <p className="font-bold">Thickness:</p>
+                        <p className="font-bold">{langui.global_thickness}:</p>
                         <div>
                           <p>{item.size.thickness} mm</p>
                           <p>{convertMmToInch(item.size.thickness)} in</p>
@@ -229,37 +277,47 @@ export default function Library(props: Props): JSX.Element {
 
               {item.metadata.length > 0 ? (
                 <>
-                  <h3 className="text-xl">Type Information</h3>
+                  <h3 className="text-xl">
+                    {langui.library_item_type_information}
+                  </h3>
                   <div className="grid grid-cols-2 w-full place-content-between">
                     {item.metadata[0].__typename ===
                     "ComponentMetadataBooks" ? (
                       <>
                         <div className="grid place-content-start grid-flow-col gap-4">
-                          <p className="font-bold">Type:</p>
+                          <p className="font-bold">{langui.global_type}:</p>
                           <Chip>
-                            {prettySlug(
+                            {item.metadata[0].subtype.data.attributes.titles
-                              item.metadata[0].subtype.data.attributes.slug
+                              .length > 0
-                            )}
+                              ? item.metadata[0].subtype.data.attributes
+                                  .titles[0].title
+                              : prettySlug(
+                                  item.metadata[0].subtype.data.attributes.slug
+                                )}
                           </Chip>
                         </div>
 
                         <div className="grid place-content-start grid-flow-col gap-4">
-                          <p className="font-bold">Pages:</p>
+                          <p className="font-bold">{langui.global_pages}:</p>
                           <p>{item.metadata[0].page_count}</p>
                         </div>
 
                         <div className="grid place-content-start grid-flow-col gap-4">
-                          <p className="font-bold">Binding:</p>
+                          <p className="font-bold">{langui.global_binding}:</p>
                           <p>{item.metadata[0].binding_type}</p>
                         </div>
 
                         <div className="grid place-content-start grid-flow-col gap-4">
-                          <p className="font-bold">Page order:</p>
+                          <p className="font-bold">
+                            {langui.global_page_order}:
+                          </p>
                           <p>{prettySlug(item.metadata[0].page_order)}</p>
                         </div>
 
                         <div className="grid place-content-start grid-flow-col gap-4">
-                          <p className="font-bold">Languages:</p>
+                          <p className="font-bold">
+                            {langui.global_languages}:
+                          </p>
                           {item.metadata[0].languages.data.map((lang) => (
                             <p key={lang.attributes.code}>
                               {lang.attributes.name}
@@ -276,18 +334,19 @@ export default function Library(props: Props): JSX.Element {
                     ) : item.metadata[0].__typename ===
                       "ComponentMetadataGame" ? (
                       <></>
-                    ) : item.metadata[0].__typename ===
-                      "ComponentMetadataMerch" ? (
-                      <></>
                     ) : item.metadata[0].__typename ===
                       "ComponentMetadataOther" ? (
                       <>
                         <div className="grid place-content-start grid-flow-col gap-4">
-                          <p className="font-bold">Type:</p>
+                          <p className="font-bold">{langui.global_type}:</p>
                           <Chip>
-                            {prettySlug(
+                            {item.metadata[0].subtype.data.attributes.titles
-                              item.metadata[0].subtype.data.attributes.slug
+                              .length > 0
-                            )}
+                              ? item.metadata[0].subtype.data.attributes
+                                  .titles[0].title
+                              : prettySlug(
+                                  item.metadata[0].subtype.data.attributes.slug
+                                )}
                           </Chip>
                         </div>
                       </>
@@ -303,24 +362,45 @@ export default function Library(props: Props): JSX.Element {
           </div>
 
           {item.subitems.data.length > 0 ? (
-            <div id="subitems" className="grid place-items-center gap-8 w-full">
+            item.metadata[0].__typename === "ComponentMetadataOther" &&
-              <h2 className="text-2xl">Subitems</h2>
+            item.metadata[0].subtype.data.attributes.slug === "variant-set" ? (
-              <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
+              <div
-                {item.subitems.data.map((subitem) => (
+                id="variants"
-                  <LibraryItemComponent
+                className="grid place-items-center gap-8 w-full"
-                    key={subitem.id}
+              >
-                    item={subitem.attributes}
+                <h2 className="text-2xl">{langui.library_item_variants}</h2>
-                  />
+                <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
-                ))}
+                  {item.subitems.data.map((variant) => (
+                    <LibraryItemComponent
+                      key={variant.id}
+                      item={variant.attributes}
+                    />
+                  ))}
+                </div>
               </div>
-            </div>
+            ) : (
+              <div
+                id="subitems"
+                className="grid place-items-center gap-8 w-full"
+              >
+                <h2 className="text-2xl">{langui.library_item_subitems}</h2>
+                <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
+                  {item.subitems.data.map((subitem) => (
+                    <LibraryItemComponent
+                      key={subitem.id}
+                      item={subitem.attributes}
+                    />
+                  ))}
+                </div>
+              </div>
+            )
           ) : (
             ""
           )}
 
           {item.contents.data.length > 0 ? (
             <div id="content" className="w-full grid place-items-center gap-8">
-              <h2 className="text-2xl">Content</h2>
+              <h2 className="text-2xl">{langui.library_item_content}</h2>
               <div className="grid gap-4 w-full">
                 {item.contents.data.map((content) => (
                   <div
@@ -363,10 +443,14 @@ export default function Library(props: Props): JSX.Element {
                       </p>
                       {content.attributes.content.data ? (
                         <Chip className="place-self-end">
-                          {prettySlug(
+                          {content.attributes.content.data.attributes.type.data
-                            content.attributes.content.data.attributes.type.data
+                            .attributes.titles.length > 0
-                              .attributes.slug
+                            ? content.attributes.content.data.attributes.type
-                          )}
+                                .data.attributes.titles[0].title
+                            : prettySlug(
+                                content.attributes.content.data.attributes.type
+                                  .data.attributes.slug
+                              )}
                         </Chip>
                       ) : (
                         ""
@@ -420,31 +504,38 @@ export const getStaticProps: GetStaticProps = async (context) => {
     if (context.params.slug && context.locale) {
       if (context.params.slug instanceof Array)
         context.params.slug = context.params.slug.join("");
+
+      const props: Props = {
+        libraryItem: await getLibraryItem({
+          slug: context.params.slug,
+          language_code: context.locale,
+        }),
+        langui: await getWebsiteInterface({
+          language_code: context.locale,
+        }),
+      };
       return {
-        props: {
+        props: props,
-          libraryItem: await getLibraryItem({
-            slug: context.params.slug,
-            language_code: context.locale,
-          }),
-        },
       };
     }
   }
   return { props: {} };
 };
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths: GetStaticPaths = async (context) => {
   type Path = {
     params: {
       slug: string;
     };
+    locale: string;
   };
 
   const data = await getLibraryItemsSlugs({});
   const paths: Path[] = [];
   data.libraryItems.data.map((item) => {
-    console.log(item.attributes.slug);
+    context.locales?.map((local) => {
-    paths.push({ params: { slug: item.attributes.slug } });
+      paths.push({ params: { slug: item.attributes.slug }, locale: local });
+    });
   });
   return {
     paths,

src/pages/library/index.tsx

@@ -5,12 +5,21 @@ import ContentPanel, {
 } from "components/Panels/ContentPanel";
 import LibraryItemComponent from "components/Library/LibraryItemComponent";
 import { applyCustomAppProps } from "pages/_app";
-import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
+import {
-import { getLibraryItemsPreview } from "graphql/operations";
+  GetLibraryItemsPreviewQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
+import {
+  getLibraryItemsPreview,
+  getWebsiteInterface,
+} from "graphql/operations";
 import PanelHeader from "components/PanelComponents/PanelHeader";
+import MainPanel from "components/Panels/MainPanel";
+import Head from "next/head";
 
 type Props = {
   libraryItems: GetLibraryItemsPreviewQuery;
+  langui: GetWebsiteInterfaceQuery;
 };
 
 applyCustomAppProps(Library, {
@@ -19,13 +28,18 @@ applyCustomAppProps(Library, {
 });
 
 export default function Library(props: Props): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
   return (
     <>
+      <Head>
+        <title>Accord&rsquo;s Library - Library</title>
+      </Head>
+      <MainPanel langui={langui} />
       <SubPanel>
         <PanelHeader
           icon="library_books"
-          title="Library"
+          title={langui.main_library}
-          description="A comprehensive list of all Yokoverse&rsquo;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_description}
         />
       </SubPanel>
 
@@ -41,15 +55,19 @@ export default function Library(props: Props): JSX.Element {
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale)
+  if (context.locale) {
-    return {
+    const props: Props = {
-      props: {
+      libraryItems: await getLibraryItemsPreview({
-        libraryItems: await getLibraryItemsPreview({
+        language_code: context.locale,
-          language_code: context.locale,
+      }),
-        }),
+      langui: await getWebsiteInterface({
-      },
+        language_code: context.locale,
+      }),
     };
-  else {
+    return {
+      props: props,
+    };
+  } else {
     return { props: {} };
   }
 };

src/queries/helpers.ts

@@ -1,7 +1,4 @@
-import {
+import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
-  GetLibraryItemQuery,
-  GetLibraryItemsPreviewQuery,
-} from "graphql/operations-types";
 
 export function getAssetURL(url: string): string {
   return process.env.NEXT_PUBLIC_URL_CMS + url;
@@ -60,4 +57,4 @@ export function capitalizeString(string: string): string {
 
 export function convertMmToInch(mm: number): string {
   return (mm * 0.03937008).toPrecision(3);
-}
+}