Added more translations + more pages

next.config.js

@@ -8,4 +8,13 @@ module.exports = {
   images: {
     domains: ['strapi.accords-library.com'],
   },
+  async redirects() {
+    return [
+      {
+        source: '/discord',
+        destination: 'https://discord.com/invite/5mcXcRAczj',
+        permanent: false,
+      },
+    ]
+  },
 }

src/components/Content/ThumbnailHeader.tsx

@@ -1,21 +1,25 @@
-import { GetContentQuery } from "graphql/operations-types";
+import {
+  GetContentQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
 import { getAssetURL, prettySlug } from "queries/helpers";
 import Image from "next/image";
 import Button from "components/Button";
 
-export type ThumbnailHeaderProps = {
+export type Props = {
   content: {
+    slug: GetContentQuery["contents"]["data"][number]["attributes"]["slug"];
     thumbnail: GetContentQuery["contents"]["data"][number]["attributes"]["thumbnail"];
     titles: GetContentQuery["contents"]["data"][number]["attributes"]["titles"];
     type: GetContentQuery["contents"]["data"][number]["attributes"]["type"];
     categories: GetContentQuery["contents"]["data"][number]["attributes"]["categories"];
   };
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
 };
 
-export default function ThumbnailHeader(
+export default function ThumbnailHeader(props: Props): JSX.Element {
-  props: ThumbnailHeaderProps
-): JSX.Element {
   const content = props.content;
+  const langui = props.langui;
 
   return (
     <>
@@ -34,16 +38,22 @@ export default function ThumbnailHeader(
           )}
         </div>
         <div className="grid place-items-center">
+          {content.titles.length > 0 ? (
+            <>
               <p className="text-2xl">{content.titles[0].pre_title}</p>
               <h1 className="text-3xl">{content.titles[0].title}</h1>
               <h2 className="text-2xl">{content.titles[0].subtitle}</h2>
+            </>
+          ) : (
+            <h1 className="text-3xl">{prettySlug(content.slug)}</h1>
+          )}
         </div>
       </div>
 
       <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">Type</h3>
+            <h3 className="text-xl">{langui.global_type}</h3>
             <Button>{content.type.data.attributes.titles[0].title}</Button>
           </div>
         ) : (
@@ -52,7 +62,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">Categories</h3>
+            <h3 className="text-xl">{langui.global_categories}</h3>
             {content.categories.data.map((category) => (
               <Button key={category.id}>{category.attributes.name}</Button>
             ))}

src/components/Panels/MainPanel.tsx

@@ -56,10 +56,10 @@ export default function MainPanel(props: Props): JSX.Element {
       />
 
       <NavOption
-        url="/chronology"
+        url="/chronicles"
         icon="watch_later"
-        title={langui.main_chronology}
+        title="Chronicles"
-        subtitle={langui.main_chronology_description}
+        subtitle="Experience all events in chronological order"
       />
 
       <HorizontalLine />
@@ -129,7 +129,7 @@ export default function MainPanel(props: Props): JSX.Element {
           </a>
           <a
             className="transition-[filter] hover:colorize-dark"
-            href="https://accords-library.com/discord"
+            href="/discord"
             target="_blank"
             rel="noopener noreferrer"
           >

src/graphql/operation.graphql

@@ -46,6 +46,24 @@ query getWebsiteInterface($language_code: String) {
         chronology_overview_description
         chronology_walkthrough
         chronology_walkthrough_description
+        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
       }
     }
   }

src/graphql/operations-types.ts

@@ -120,6 +120,24 @@ export type GetWebsiteInterfaceQuery = {
         chronology_overview_description: string;
         chronology_walkthrough: string;
         chronology_walkthrough_description: string;
+        library_item_front_matter: string;
+        library_item_back_matter: string;
+        library_item_type_textual: string;
+        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;
       };
     }>;
   };

src/pages/about-us/index.tsx

@@ -0,0 +1,48 @@
+import SubPanel from "components/Panels/SubPanel";
+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";
+import ContentPanel from "components/Panels/ContentPanel";
+
+applyCustomAppProps(AboutUs, {
+  useSubPanel: true,
+  useContentPanel: true,
+});
+
+type Props = {
+  langui: GetWebsiteInterfaceQuery;
+};
+
+export default function AboutUs(props: Props): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  return (
+    <>
+      <MainPanel langui={langui} />
+      <SubPanel>
+        <PanelHeader
+          icon="info"
+          title={langui.main_about_us}
+          description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        />
+      </SubPanel>
+      <ContentPanel>Hello</ContentPanel>
+    </>
+  );
+}
+
+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/archives/index.tsx

@@ -0,0 +1,48 @@
+import SubPanel from "components/Panels/SubPanel";
+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";
+import ContentPanel from "components/Panels/ContentPanel";
+
+applyCustomAppProps(Archives, {
+  useSubPanel: true,
+  useContentPanel: true,
+});
+
+type Props = {
+  langui: GetWebsiteInterfaceQuery;
+};
+
+export default function Archives(props: Props): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  return (
+    <>
+      <MainPanel langui={langui} />
+      <SubPanel>
+        <PanelHeader
+          icon="inventory"
+          title={langui.main_archives}
+          description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        />
+      </SubPanel>
+      <ContentPanel>Hello</ContentPanel>
+    </>
+  );
+}
+
+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/chronicles/index.tsx

@@ -0,0 +1,48 @@
+import SubPanel from "components/Panels/SubPanel";
+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";
+import ContentPanel from "components/Panels/ContentPanel";
+
+applyCustomAppProps(Chronicles, {
+  useSubPanel: true,
+  useContentPanel: true,
+});
+
+type Props = {
+  langui: GetWebsiteInterfaceQuery;
+};
+
+export default function Chronicles(props: Props): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  return (
+    <>
+      <MainPanel langui={langui} />
+      <SubPanel>
+        <PanelHeader
+          icon="watch_later"
+          title="Chronicles"
+          description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        />
+      </SubPanel>
+      <ContentPanel>Hello</ContentPanel>
+    </>
+  );
+}
+
+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/content/[slug]/index.tsx

@@ -36,13 +36,13 @@ export default function Library(props: Props): JSX.Element {
       <MainPanel langui={langui} />
       <ContentPanel>
         <div className="grid place-items-center">
-          <ThumbnailHeader content={content} />
+          <ThumbnailHeader content={content} langui={langui} />
 
           <HorizontalLine />
 
           {content.text_set.length > 0 ? (
             <Button href={`/content/${content.slug}/read/`}>
-              Read content
+              {langui.content_read_content}
             </Button>
           ) : (
             ""
@@ -50,7 +50,7 @@ export default function Library(props: Props): JSX.Element {
 
           {content.audio_set.length > 0 ? (
             <Button href={`/content/${content.slug}/listen/`}>
-              Listen content
+              {langui.content_listen_content}
             </Button>
           ) : (
             ""
@@ -58,7 +58,7 @@ export default function Library(props: Props): JSX.Element {
 
           {content.video_set.length > 0 ? (
             <Button href={`/content/${content.slug}/watch/`}>
-              View content
+              {langui.content_watch_content}
             </Button>
           ) : (
             ""

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

@@ -39,11 +39,15 @@ export default function Library(props: Props): JSX.Element {
     <>
       <MainPanel langui={langui} />
       <SubPanel>
-        <ReturnButton href={`/content/${content.slug}`} title={"Content"} langui={langui} />
+        <ReturnButton
+          href={`/content/${content.slug}`}
+          title={"Content"}
+          langui={langui}
+        />
       </SubPanel>
       <ContentPanel>
         <div className="grid place-items-center">
-          <ThumbnailHeader content={content} />
+          <ThumbnailHeader content={content} langui={langui} />
 
           <HorizontalLine />
 

src/pages/data/chronology.tsx

@@ -49,7 +49,7 @@ export default function ChronologyOverview(props: Props): JSX.Element {
     <>
       <MainPanel langui={langui} />
       <SubPanel>
-        <ReturnButton href="/chronology" title="Chronology" langui={langui} />
+        <ReturnButton href="/data" title="Data" langui={langui} />
         <HorizontalLine />
 
         {props.chronologyEras.chronologyEras.data.map((era) => (

src/pages/data/index.tsx

@@ -7,7 +7,7 @@ import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
 import { getWebsiteInterface } from "graphql/operations";
 
-applyCustomAppProps(Chronology, {
+applyCustomAppProps(Data, {
   useSubPanel: true,
   useContentPanel: false,
 });
@@ -16,36 +16,43 @@ type Props = {
   langui: GetWebsiteInterfaceQuery;
 };
 
-export default function Chronology(props: Props): JSX.Element {
+export default function Data(props: Props): JSX.Element {
   const langui = props.langui.websiteInterfaces.data[0].attributes;
   return (
     <>
       <MainPanel langui={langui} />
       <SubPanel>
         <PanelHeader
-          icon="watch_later"
+          icon="travel_explore"
-          title={langui.main_chronology}
+          title={langui.main_data}
-          description={langui.chronology_description}
+          description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
         />
 
         <NavOption
-          url="/chronology/timelines"
+          url="/data/timelines"
           title={langui.chronology_timelines}
           subtitle={langui.chronology_timelines_description}
           border={true}
         />
 
         <NavOption
-          url="/chronology/overview"
+          url="/data/chronology"
-          title={langui.chronology_overview}
+          title="Chronology"
           subtitle={langui.chronology_overview_description}
           border={true}
         />
 
         <NavOption
-          url="/chronology/walkthrough"
+          url="/data/weapon-stories"
-          title={langui.chronology_walkthrough}
+          title="Weapon Stories"
-          subtitle={langui.chronology_walkthrough_description}
+          subtitle="Reiciendis id reiciendis at ullam."
+          border={true}
+        />
+
+        <NavOption
+          url="/data/glossary"
+          title="Glossary"
+          subtitle="Reiciendis id reiciendis at ullam."
           border={true}
         />
       </SubPanel>

src/pages/hubs/index.tsx

@@ -1,22 +1,48 @@
 import SubPanel from "components/Panels/SubPanel";
 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";
+import ContentPanel from "components/Panels/ContentPanel";
 
 applyCustomAppProps(Hubs, {
   useSubPanel: true,
-  useContentPanel: false,
+  useContentPanel: true,
 });
 
-export default function Hubs(): JSX.Element {
+type Props = {
+  langui: GetWebsiteInterfaceQuery;
+};
+
+export default function Hubs(props: Props): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
   return (
     <>
+      <MainPanel langui={langui} />
       <SubPanel>
         <PanelHeader
           icon="workspaces"
-          title="Hubs"
+          title={langui.main_hub}
-          description="Explore all content of a specific game/series. Here we can write more about this section of the website, whatever we like in fact."
+          description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
         />
       </SubPanel>
+      <ContentPanel>Hello</ContentPanel>
     </>
   );
 }
+
+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/library/[slug].tsx

@@ -10,6 +10,8 @@ import {
   getWebsiteInterface,
 } from "graphql/operations";
 import {
+  Enum_Componentmetadatabooks_Binding_Type,
+  Enum_Componentmetadatabooks_Page_Order,
   GetLibraryItemQuery,
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
@@ -91,6 +93,7 @@ export default function Library(props: Props): JSX.Element {
         />
 
         {item.subitems.data.length > 0 ? (
+          item.metadata.length > 0 &&
           item.metadata[0].__typename === "ComponentMetadataOther" &&
           item.metadata[0].subtype.data.attributes.slug === "variant-set" ? (
             <NavOption
@@ -211,9 +214,21 @@ export default function Library(props: Props): JSX.Element {
                   <div className="grid place-items-center">
                     <h3 className="text-xl">{langui.global_type}</h3>
                     <Button>
-                      {item.metadata[0].__typename.substring(
+                      {item.metadata[0].__typename === "ComponentMetadataAudio"
-                        "ComponentMetadata".length
+                        ? langui.library_item_type_audio
-                      )}
+                        : item.metadata[0].__typename ===
+                          "ComponentMetadataBooks"
+                        ? langui.library_item_type_textual
+                        : item.metadata[0].__typename ===
+                          "ComponentMetadataGame"
+                        ? langui.library_item_type_game
+                        : item.metadata[0].__typename ===
+                          "ComponentMetadataOther"
+                        ? langui.library_item_type_game
+                        : item.metadata[0].__typename ===
+                          "ComponentMetadataVideo"
+                        ? langui.library_item_type_video
+                        : ""}
                     </Button>
                   </div>
                 ) : (
@@ -304,14 +319,30 @@ export default function Library(props: Props): JSX.Element {
 
                         <div className="grid place-content-start grid-flow-col gap-4">
                           <p className="font-bold">{langui.global_binding}:</p>
-                          <p>{item.metadata[0].binding_type}</p>
+                          <p>
+                            {item.metadata[0].binding_type ===
+                            Enum_Componentmetadatabooks_Binding_Type.Paperback
+                              ? langui.global_paperback
+                              : item.metadata[0].binding_type ===
+                                Enum_Componentmetadatabooks_Binding_Type.Hardcover
+                              ? langui.global_hardcover
+                              : ""}
+                          </p>
                         </div>
 
                         <div className="grid place-content-start grid-flow-col gap-4">
                           <p className="font-bold">
                             {langui.global_page_order}:
                           </p>
-                          <p>{prettySlug(item.metadata[0].page_order)}</p>
+                          <p>
+                            {item.metadata[0].page_order ===
+                            Enum_Componentmetadatabooks_Page_Order.LeftToRight
+                              ? langui.global_left_to_right
+                              : item.metadata[0].page_order ===
+                                Enum_Componentmetadatabooks_Page_Order.RightToLeft
+                              ? langui.global_right_to_left
+                              : ""}
+                          </p>
                         </div>
 
                         <div className="grid place-content-start grid-flow-col gap-4">
@@ -362,6 +393,7 @@ export default function Library(props: Props): JSX.Element {
           </div>
 
           {item.subitems.data.length > 0 ? (
+            item.metadata.length > 0 &&
             item.metadata[0].__typename === "ComponentMetadataOther" &&
             item.metadata[0].subtype.data.attributes.slug === "variant-set" ? (
               <div
@@ -465,7 +497,7 @@ export default function Library(props: Props): JSX.Element {
                         <Button
                           href={`/content/${content.attributes.content.data.attributes.slug}/scans/`}
                         >
-                          View scans
+                          {langui.library_item_view_scans}
                         </Button>
                       ) : (
                         ""
@@ -475,7 +507,7 @@ export default function Library(props: Props): JSX.Element {
                         <Button
                           href={`/content/${content.attributes.content.data.attributes.slug}`}
                         >
-                          Open content
+                          {langui.library_item_open_content}
                         </Button>
                       ) : (
                         ""

src/pages/merch/index.tsx

@@ -0,0 +1,48 @@
+import SubPanel from "components/Panels/SubPanel";
+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";
+import ContentPanel from "components/Panels/ContentPanel";
+
+applyCustomAppProps(Merch, {
+  useSubPanel: true,
+  useContentPanel: true,
+});
+
+type Props = {
+  langui: GetWebsiteInterfaceQuery;
+};
+
+export default function Merch(props: Props): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  return (
+    <>
+      <MainPanel langui={langui} />
+      <SubPanel>
+        <PanelHeader
+          icon="store"
+          title={langui.main_merch}
+          description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        />
+      </SubPanel>
+      <ContentPanel>Hello</ContentPanel>
+    </>
+  );
+}
+
+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/news/index.tsx

@@ -0,0 +1,48 @@
+import SubPanel from "components/Panels/SubPanel";
+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";
+import ContentPanel from "components/Panels/ContentPanel";
+
+applyCustomAppProps(News, {
+  useSubPanel: true,
+  useContentPanel: true,
+});
+
+type Props = {
+  langui: GetWebsiteInterfaceQuery;
+};
+
+export default function News(props: Props): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  return (
+    <>
+      <MainPanel langui={langui} />
+      <SubPanel>
+        <PanelHeader
+          icon="feed"
+          title={langui.main_news}
+          description="Reiciendis id reiciendis at ullam. Corrupti voluptatibus quo magnam enim voluptas eaque. Quia id consequatur fuga magni. Voluptate eaque pariatur porro voluptate rerum. Harum velit in laborum eligendi. Nihil eius dolor et omnis."
+        />
+      </SubPanel>
+      <ContentPanel>Hello</ContentPanel>
+    </>
+  );
+}
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  if (context.locale) {
+    const props: Props = {
+      langui: await getWebsiteInterface({
+        language_code: context.locale,
+      }),
+    };
+    return {
+      props: props,
+    };
+  }
+  return { props: {} };
+};