Use getAppStaticProps to globally define props for all pages

src/components/AppLayout.tsx

@@ -15,21 +15,21 @@ import { ImageQuality } from "./Img";
 import Popup from "./Popup";
 import { useEffect, useState } from "react";
 import Select from "./Select";
+import { AppStaticProps } from "queries/getAppStaticProps";
 
-type AppLayoutProps = {
+interface AppLayoutProps extends AppStaticProps {
   subPanel?: React.ReactNode;
   subPanelIcon?: string;
   contentPanel?: React.ReactNode;
-  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
   title?: string;
   navTitle: string;
   thumbnail?: StrapiImage;
   description?: string;
   extra?: React.ReactNode;
-};
+}
 
 export default function AppLayout(props: AppLayoutProps): JSX.Element {
-  const langui = props.langui;
+  const { langui, currencies, languages, subPanel, contentPanel } = props;
   const router = useRouter();
   const isMobile = useMediaMobile();
   const isCoarse = useMediaCoarse();
@@ -42,7 +42,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
       if (SwipeEventData.velocity < sensibilitySwipe) return;
       if (appLayout.mainPanelOpen) {
         appLayout.setMainPanelOpen(false);
-      } else if (props.subPanel && props.contentPanel) {
+      } else if (subPanel && contentPanel) {
         appLayout.setSubPanelOpen(true);
       }
     },
@@ -63,13 +63,13 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
     appLayout.mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]"
   }`;
   let contentPanelClass = "";
-  if (props.subPanel) {
+  if (subPanel) {
     contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
       appLayout.mainPanelReduced
         ? "desktop:left-[26rem]"
         : "desktop:left-[40rem]"
     }`;
-  } else if (props.contentPanel) {
+  } else if (contentPanel) {
     contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
       appLayout.mainPanelReduced
         ? "desktop:left-[6rem]"
@@ -77,7 +77,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
     }`;
   }
 
-  const turnSubIntoContent = props.subPanel && !props.contentPanel;
+  const turnSubIntoContent = subPanel && !contentPanel;
 
   const titlePrefix = "Accord’s Library";
   const metaImage: OgImage = props.thumbnail
@@ -100,7 +100,9 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
     }%`;
   }, [appLayout.fontSize]);
 
-  const currencyOptions = ["EUR", "USD", "CAD", "JPY"];
+  const currencyOptions = currencies.map((currency) => {
+    return currency.attributes.code;
+  });
   const [currencySelect, setCurrencySelect] = useState<number>(-1);
 
   useEffect(() => {
@@ -161,8 +163,8 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
         <div
           className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll bg-light texture-paper-dots ${contentPanelClass}`}
         >
-          {props.contentPanel ? (
+          {contentPanel ? (
-            props.contentPanel
+            contentPanel
           ) : (
             <div className="grid place-content-center h-full">
               <div className="text-dark border-dark border-2 border-dotted rounded-2xl p-8 grid grid-flow-col place-items-center gap-9 opacity-40">
@@ -197,7 +199,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
         </div>
 
         {/* Sub panel */}
-        {props.subPanel ? (
+        {subPanel ? (
           <div
             className={`${subPanelClass} border-r-[1px] mobile:bottom-20 mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
           ${
@@ -208,7 +210,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
               : ""
           }`}
           >
-            {props.subPanel}
+            {subPanel}
           </div>
         ) : (
           ""
@@ -255,7 +257,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
               appLayout.setMainPanelOpen(false);
             }}
           >
-            {props.subPanel && !turnSubIntoContent
+            {subPanel && !turnSubIntoContent
               ? appLayout.subPanelOpen
                 ? "close"
                 : props.subPanelIcon
@@ -271,15 +273,15 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
         >
           <h2 className="text-2xl">{langui.select_language}</h2>
           <div className="flex flex-wrap flex-row gap-2 mobile:flex-col">
-            {router.locales?.sort().map((locale) => (
+            {languages.map((language) => (
               <Button
-                key={locale}
+                key={language.id}
-                active={locale === router.locale}
+                active={language.attributes.code === router.locale}
                 href={router.asPath}
-                locale={locale}
+                locale={language.attributes.code}
                 onClick={() => appLayout.setLanguagePanelOpen(false)}
               >
-                {prettyLanguage(locale)}
+                {language.attributes.localized_name}
               </Button>
             ))}
           </div>

src/graphql/operation.graphql

@@ -1100,3 +1100,16 @@ query getCurrencies {
     }
   }
 }
+
+query getLanguages {
+  languages {
+    data {
+      id
+      attributes {
+        name
+        code
+        localized_name
+      }
+    }
+  }
+}

src/graphql/operations-types.ts

@@ -1465,3 +1465,22 @@ export type GetCurrenciesQuery = {
     }>;
   };
 };
+
+export type GetLanguagesQueryVariables = Exact<{ [key: string]: never }>;
+
+export type GetLanguagesQuery = {
+  __typename: "Query";
+  languages: {
+    __typename: "LanguageEntityResponseCollection";
+    data: Array<{
+      __typename: "LanguageEntity";
+      id: string;
+      attributes: {
+        __typename: "Language";
+        name: string;
+        code: string;
+        localized_name: string;
+      };
+    }>;
+  };
+};

src/graphql/operations.ts

@@ -15,6 +15,8 @@ import {
   GetCurrenciesQueryVariables,
   GetErasQuery,
   GetErasQueryVariables,
+  GetLanguagesQuery,
+  GetLanguagesQueryVariables,
   GetLibraryItemQuery,
   GetLibraryItemQueryVariables,
   GetLibraryItemsPreviewQuery,
@@ -132,3 +134,10 @@ export async function getCurrencies(
   const query = getQueryFromOperations("getCurrencies");
   return await graphQL(query, JSON.stringify(variables));
 }
+
+export async function getLanguages(
+  variables: GetLanguagesQueryVariables
+): Promise<GetLanguagesQuery> {
+  const query = getQueryFromOperations("getLanguages");
+  return await graphQL(query, JSON.stringify(variables));
+}

src/pages/404.tsx

@@ -1,19 +1,15 @@
-import Link from "next/link";
 import ContentPanel from "components/Panels/ContentPanel";
-import { getWebsiteInterface } from "graphql/operations";
 import { GetStaticProps } from "next";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import AppLayout from "components/AppLayout";
 import ReturnButton, {
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type FourOhFourProps = {
+interface FourOhFourProps extends AppStaticProps {}
-  langui: GetWebsiteInterfaceQuery;
-};
 
 export default function FourOhFour(props: FourOhFourProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const contentPanel = (
     <ContentPanel>
       <h1>404 - {langui.page_not_found}</h1>
@@ -25,21 +21,14 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element {
       />
     </ContentPanel>
   );
-  return (
+  return <AppLayout navTitle="404" contentPanel={contentPanel} {...props} />;
-    <AppLayout navTitle="404" langui={langui} contentPanel={contentPanel} />
-  );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
+  const props: FourOhFourProps = {
-    const props: FourOhFourProps = {
+    ...(await getAppStaticProps(context)),
-      langui: await getWebsiteInterface({
+  };
-        language_code: context.locale,
+  return {
-      }),
+    props: props,
-    };
+  };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
 };

src/pages/_document.tsx

@@ -16,6 +16,7 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head>
+
           <link
             rel="apple-touch-icon"
             sizes="180x180"

src/pages/about-us/index.tsx

@@ -1,16 +1,13 @@
 import SubPanel from "components/Panels/SubPanel";
 import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
 import AppLayout from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type AboutUsProps = {
+interface AboutUsProps extends AppStaticProps {}
-  langui: GetWebsiteInterfaceQuery;
-};
 
 export default function AboutUs(props: AboutUsProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -21,24 +18,15 @@ export default function AboutUs(props: AboutUsProps): JSX.Element {
     </SubPanel>
   );
   return (
-    <AppLayout
+    <AppLayout navTitle={langui.about_us} subPanel={subPanel} {...props} />
-      navTitle={langui.about_us}
-      langui={langui}
-      subPanel={subPanel}
-    />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
+  const props: AboutUsProps = {
-    const props: AboutUsProps = {
+    ...(await getAppStaticProps(context)),
-      langui: await getWebsiteInterface({
+  };
-        language_code: context.locale,
+  return {
-      }),
+    props: props,
-    };
+  };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
 };

src/pages/archives/index.tsx

@@ -1,16 +1,13 @@
 import SubPanel from "components/Panels/SubPanel";
 import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
 import AppLayout from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type ArchivesProps = {
+interface ArchivesProps extends AppStaticProps {}
-  langui: GetWebsiteInterfaceQuery;
-};
 
 export default function Archives(props: ArchivesProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -21,24 +18,15 @@ export default function Archives(props: ArchivesProps): JSX.Element {
     </SubPanel>
   );
   return (
-    <AppLayout
+    <AppLayout navTitle={langui.archives} subPanel={subPanel} {...props} />
-      navTitle={langui.archives}
-      langui={langui}
-      subPanel={subPanel}
-    />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
+  const props: ArchivesProps = {
-    const props: ArchivesProps = {
+    ...(await getAppStaticProps(context)),
-      langui: await getWebsiteInterface({
+  };
-        language_code: context.locale,
+  return {
-      }),
+    props: props,
-    };
+  };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
 };

src/pages/chronicles/index.tsx

@@ -1,16 +1,13 @@
 import SubPanel from "components/Panels/SubPanel";
 import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
 import AppLayout from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type ChroniclesProps = {
+interface ChroniclesProps extends AppStaticProps {}
-  langui: GetWebsiteInterfaceQuery;
-};
 
 export default function Chronicles(props: ChroniclesProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -21,24 +18,15 @@ export default function Chronicles(props: ChroniclesProps): JSX.Element {
     </SubPanel>
   );
   return (
-    <AppLayout
+    <AppLayout navTitle={langui.chronicles} subPanel={subPanel} {...props} />
-      navTitle={langui.chronicles}
-      langui={langui}
-      subPanel={subPanel}
-    />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
+  const props: ChroniclesProps = {
-    const props: ChroniclesProps = {
+    ...(await getAppStaticProps(context)),
-      langui: await getWebsiteInterface({
+  };
-        language_code: context.locale,
+  return {
-      }),
+    props: props,
-    };
+  };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
 };

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

@@ -1,13 +1,6 @@
 import { GetStaticPaths, GetStaticProps } from "next";
-import {
+import { getContent, getContentsSlugs } from "graphql/operations";
-  getContent,
+import { GetContentQuery } from "graphql/operations-types";
-  getContentsSlugs,
-  getWebsiteInterface,
-} from "graphql/operations";
-import {
-  GetContentQuery,
-  GetWebsiteInterfaceQuery,
-} from "graphql/operations-types";
 import ContentPanel from "components/Panels/ContentPanel";
 import Button from "components/Button";
 import HorizontalLine from "components/HorizontalLine";
@@ -18,15 +11,14 @@ import ReturnButton, {
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
 import { prettyinlineTitle, prettySlug } from "queries/helpers";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type ContentIndexProps = {
+interface ContentIndexProps extends AppStaticProps {
-  content: GetContentQuery;
+  content: GetContentQuery["contents"]["data"][number]["attributes"];
-  langui: GetWebsiteInterfaceQuery;
+}
-};
 
 export default function ContentIndex(props: ContentIndexProps): JSX.Element {
-  const content = props.content.contents.data[0].attributes;
+  const { content, langui } = props;
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
   const subPanel = (
     <SubPanel>
       <ReturnButton
@@ -92,7 +84,6 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
           : prettySlug(content.slug)
       }
       thumbnail={content.thumbnail.data?.attributes}
-      langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}
       description={`${langui.type}: ${
@@ -111,40 +102,28 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
          
         ${content.titles.length > 0 ? content.titles[0].description : undefined}
         `}
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.params) {
+  const props: ContentIndexProps = {
-    if (context.params.slug && context.locale) {
+    ...(await getAppStaticProps(context)),
-      if (context.params.slug instanceof Array)
+    content: (
-        context.params.slug = context.params.slug.join("");
+      await getContent({
-
+        slug: context.params?.slug?.toString() || "",
-      const props: ContentIndexProps = {
+        language_code: context.locale || "en",
-        content: await getContent({
+      })
-          slug: context.params.slug,
+    ).contents.data[0].attributes,
-          language_code: context.locale,
+  };
-        }),
+  return {
-        langui: await getWebsiteInterface({
+    props: props,
-          language_code: context.locale,
+  };
-        }),
-      };
-      return {
-        props: props,
-      };
-    }
-  }
-  return { props: {} };
 };
 
 export const getStaticPaths: GetStaticPaths = async (context) => {
-  type Path = {
+  type Path = { params: { slug: string }; locale: string };
-    params: {
-      slug: string;
-    };
-    locale: string;
-  };
 
   const data = await getContentsSlugs({});
   const paths: Path[] = [];

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

@@ -1,13 +1,8 @@
 import { GetStaticPaths, GetStaticProps } from "next";
-import {
+import { getContentsSlugs, getContentText } from "graphql/operations";
-  getContentsSlugs,
-  getContentText,
-  getWebsiteInterface,
-} from "graphql/operations";
 import {
   Enum_Componentsetstextset_Status,
   GetContentTextQuery,
-  GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
 import ContentPanel from "components/Panels/ContentPanel";
 import HorizontalLine from "components/HorizontalLine";
@@ -30,16 +25,16 @@ import { useRouter } from "next/router";
 import Chip from "components/Chip";
 import ReactTooltip from "react-tooltip";
 import RecorderChip from "components/RecorderChip";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-interface ContentReadProps {
+interface ContentReadProps extends AppStaticProps {
-  content: GetContentTextQuery;
+  content: GetContentTextQuery["contents"]["data"][number]["attributes"];
-  langui: GetWebsiteInterfaceQuery;
+  contentId: GetContentTextQuery["contents"]["data"][number]["id"];
 }
 
 export default function ContentRead(props: ContentReadProps): JSX.Element {
   useTesting(props);
-  const content = props.content.contents.data[0].attributes;
+  const { langui, content } = props;
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
   const router = useRouter();
 
   const subPanel = (
@@ -212,7 +207,6 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
           : prettySlug(content.slug)
       }
       thumbnail={content.thumbnail.data?.attributes}
-      langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}
       extra={extra}
@@ -232,31 +226,26 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
          
         ${content.titles.length > 0 ? content.titles[0].description : undefined}
         `}
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.params) {
+  const content = (
-    if (context.params.slug && context.locale) {
+    await getContentText({
-      if (context.params.slug instanceof Array)
+      slug: context.params?.slug?.toString() || "",
-        context.params.slug = context.params.slug.join("");
+      language_code: context.locale || "en",
-
+    })
-      const props: ContentReadProps = {
+  ).contents.data[0];
-        content: await getContentText({
+  const props: ContentReadProps = {
-          slug: context.params.slug,
+    ...(await getAppStaticProps(context)),
-          language_code: context.locale,
+    content: content.attributes,
-        }),
+    contentId: content.id,
-        langui: await getWebsiteInterface({
+  };
-          language_code: context.locale,
+  return {
-        }),
+    props: props,
-      };
+  };
-      return {
-        props: props,
-      };
-    }
-  }
-  return { props: {} };
 };
 
 export const getStaticPaths: GetStaticPaths = async (context) => {
@@ -282,11 +271,10 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
 
 export function useTesting(props: ContentReadProps) {
   const router = useRouter();
-  const content = props.content.contents.data[0].attributes;
+  const { content, contentId } = props;
 
   const contentURL =
-    "/admin/content-manager/collectionType/api::content.content/" +
+    "/admin/content-manager/collectionType/api::content.content/" + contentId;
-    props.content.contents.data[0].id;
 
   if (router.locale === "en") {
     if (content.categories.data.length === 0) {

src/pages/contents/index.tsx

@@ -3,25 +3,56 @@ import SubPanel from "components/Panels/SubPanel";
 import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import {
+import { GetContentsQuery } from "graphql/operations-types";
-  GetContentsQuery,
+import { getContents } from "graphql/operations";
-  GetWebsiteInterfaceQuery,
-} from "graphql/operations-types";
-import { getContents, getWebsiteInterface } from "graphql/operations";
 import PanelHeader from "components/PanelComponents/PanelHeader";
 import AppLayout from "components/AppLayout";
 import LibraryContentPreview from "components/Library/LibraryContentPreview";
 import { prettyinlineTitle } from "queries/helpers";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type LibraryProps = {
+interface LibraryProps extends AppStaticProps {
-  contents: GetContentsQuery;
+  contents: GetContentsQuery["contents"]["data"];
-  langui: GetWebsiteInterfaceQuery;
+}
-};
 
 export default function Library(props: LibraryProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
+  const subPanel = (
+    <SubPanel>
+      <PanelHeader
+        icon="workspaces"
+        title={langui.contents}
+        description={langui.contents_description}
+      />
+    </SubPanel>
+  );
+  const contentPanel = (
+    <ContentPanel width={ContentPanelWidthSizes.large}>
+      <div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
+        {props.contents.map((item) => (
+          <LibraryContentPreview key={item.id} item={item.attributes} />
+        ))}
+      </div>
+    </ContentPanel>
+  );
+  return (
+    <AppLayout
+      navTitle={langui.contents}
+      subPanel={subPanel}
+      contentPanel={contentPanel}
+      {...props}
+    />
+  );
+}
 
-  props.contents.contents.data.sort((a, b) => {
+export const getStaticProps: GetStaticProps = async (context) => {
+  const contents = (
+    await getContents({
+      language_code: context.locale || "en",
+    })
+  ).contents.data;
+
+  contents.sort((a, b) => {
     const titleA =
       a.attributes.titles.length > 0
         ? prettyinlineTitle(
@@ -41,48 +72,11 @@ export default function Library(props: LibraryProps): JSX.Element {
     return titleA.localeCompare(titleB);
   });
 
-  const subPanel = (
+  const props: LibraryProps = {
-    <SubPanel>
+    ...(await getAppStaticProps(context)),
-      <PanelHeader
+    contents: contents,
-        icon="workspaces"
+  };
-        title="Contents"
+  return {
-        description="Laboriosam vitae velit quis. Non et dolor reiciendis officia earum et molestias excepturi. Cupiditate officiis quis qui reprehenderit. Ut neque eos ipsa corrupti autem mollitia inventore. Exercitationem iste magni vel harum."
+    props: props,
-      />
+  };
-    </SubPanel>
-  );
-  const contentPanel = (
-    <ContentPanel width={ContentPanelWidthSizes.large}>
-      <div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
-        {props.contents.contents.data.map((item) => (
-          <LibraryContentPreview key={item.id} item={item.attributes} />
-        ))}
-      </div>
-    </ContentPanel>
-  );
-  return (
-    <AppLayout
-      navTitle="Contents"
-      langui={langui}
-      subPanel={subPanel}
-      contentPanel={contentPanel}
-    />
-  );
-}
-
-export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: LibraryProps = {
-      contents: await getContents({
-        language_code: context.locale,
-      }),
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  } else {
-    return { props: {} };
-  }
 };

src/pages/editor.tsx

@@ -1,20 +1,17 @@
 import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import { getWebsiteInterface } from "graphql/operations";
 import { GetStaticProps } from "next";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import AppLayout from "components/AppLayout";
 import { useCallback, useState } from "react";
 import Markdawn from "components/Markdown/Markdawn";
 import Script from "next/script";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type EditorProps = {
+interface EditorProps extends AppStaticProps {}
-  langui: GetWebsiteInterfaceQuery;
-};
 
 export default function Editor(props: EditorProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
 
   const handleInput = useCallback((e) => {
     setMarkdown(e.target.value);
@@ -45,12 +42,14 @@ export default function Editor(props: EditorProps): JSX.Element {
             onInput={handleInput}
             className="bg-mid rounded-xl p-8 w-full font-monospace"
             value={markdown}
+            title="Input textarea"
           />
 
           <h2 className="mt-4">Convert text to markdown</h2>
           <textarea
             readOnly
             id="htmlMdTextArea"
+            title="Ouput textarea"
             onPaste={(event) => {
               const TurndownService = require("turndown").default;
               const turndownService = new TurndownService({
@@ -86,22 +85,17 @@ export default function Editor(props: EditorProps): JSX.Element {
   return (
     <AppLayout
       navTitle="Markdawn Editor"
-      langui={langui}
       contentPanel={contentPanel}
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
+  const props: EditorProps = {
-    const props: EditorProps = {
+    ...(await getAppStaticProps(context)),
-      langui: await getWebsiteInterface({
+  };
-        language_code: context.locale,
+  return {
-      }),
+    props: props,
-    };
+  };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
 };

src/pages/gallery/index.tsx

@@ -1,14 +1,11 @@
 import AppLayout from "components/AppLayout";
-import { getWebsiteInterface } from "graphql/operations";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type GalleryProps = {
+interface GalleryProps extends AppStaticProps {}
-  langui: GetWebsiteInterfaceQuery;
-};
 
 export default function Gallery(props: GalleryProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const contentPanel = (
     <iframe
       className="w-full h-screen"
@@ -19,22 +16,17 @@ export default function Gallery(props: GalleryProps): JSX.Element {
   return (
     <AppLayout
       navTitle={langui.gallery}
-      langui={langui}
       contentPanel={contentPanel}
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
+  const props: GalleryProps = {
-    const props: GalleryProps = {
+    ...(await getAppStaticProps(context)),
-      langui: await getWebsiteInterface({
+  };
-        language_code: context.locale,
+  return {
-      }),
+    props: props,
-    };
+  };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
 };

src/pages/index.tsx

@@ -1,16 +1,11 @@
 import AppLayout from "components/AppLayout";
 import ContentPanel from "components/Panels/ContentPanel";
-import SVG from "components/SVG";
-import { getWebsiteInterface } from "graphql/operations";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-type HomeProps = {
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-  langui: GetWebsiteInterfaceQuery;
+
-};
+interface HomeProps extends AppStaticProps {}
 
 export default function Home(props: HomeProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
-
   const contentPanel = (
     <ContentPanel autoformat>
       <div className="grid place-items-center place-content-center w-full gap-5 text-center">
@@ -140,26 +135,14 @@ export default function Home(props: HomeProps): JSX.Element {
     </ContentPanel>
   );
 
-  return (
+  return <AppLayout navTitle={"Home"} contentPanel={contentPanel} {...props} />;
-    <AppLayout
-      navTitle={"Home"}
-      langui={langui}
-      contentPanel={contentPanel}
-    />
-  );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
+  const props: HomeProps = {
-    const props: HomeProps = {
+    ...(await getAppStaticProps(context)),
-      langui: await getWebsiteInterface({
+  };
-        language_code: context.locale,
+  return {
-      }),
+    props: props,
-    };
+  };
-    return {
-      props: props,
-    };
-  } else {
-    return { props: {} };
-  }
 };

src/pages/library/[slug].tsx

@@ -2,18 +2,11 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import { GetStaticPaths, GetStaticProps } from "next";
-import {
+import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations";
-  getCurrencies,
-  getLibraryItem,
-  getLibraryItemsSlugs,
-  getWebsiteInterface,
-} from "graphql/operations";
 import {
   Enum_Componentmetadatabooks_Binding_Type,
   Enum_Componentmetadatabooks_Page_Order,
-  GetCurrenciesQuery,
   GetLibraryItemQuery,
-  GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
 import {
   convertMmToInch,
@@ -40,18 +33,16 @@ import Img, { ImageQuality } from "components/Img";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { useRouter } from "next/router";
 import ContentTOCLine from "components/Library/ContentTOCLine";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-interface LibrarySlugProps {
+interface LibrarySlugProps extends AppStaticProps {
-  libraryItem: GetLibraryItemQuery;
+  item: GetLibraryItemQuery["libraryItems"]["data"][number]["attributes"];
-  langui: GetWebsiteInterfaceQuery;
+  itemId: GetLibraryItemQuery["libraryItems"]["data"][number]["id"];
-  currencies: GetCurrenciesQuery;
 }
 
 export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
   useTesting(props);
-  const item = props.libraryItem.libraryItems.data[0].attributes;
+  const { item, langui, currencies } = props;
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
-  const currencies = props.currencies.currencies.data;
   const appLayout = useAppLayout();
 
   const isVariantSet =
@@ -396,7 +387,6 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
     <AppLayout
       navTitle={langui.library}
       title={prettyinlineTitle("", item.title, item.subtitle)}
-      langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}
       thumbnail={item.thumbnail.data?.attributes}
@@ -405,32 +395,26 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
           ? item.descriptions[0].description
           : undefined
       }
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.params) {
+  const item = (
-    if (context.params.slug && context.locale) {
+    await getLibraryItem({
-      if (context.params.slug instanceof Array)
+      slug: context.params?.slug?.toString() || "",
-        context.params.slug = context.params.slug.join("");
+      language_code: context.locale || "en",
-
+    })
-      const props: LibrarySlugProps = {
+  ).libraryItems.data[0];
-        libraryItem: await getLibraryItem({
+  const props: LibrarySlugProps = {
-          slug: context.params.slug,
+    ...(await getAppStaticProps(context)),
-          language_code: context.locale,
+    item: item.attributes,
-        }),
+    itemId: item.id,
-        langui: await getWebsiteInterface({
+  };
-          language_code: context.locale,
+  return {
-        }),
+    props: props,
-        currencies: await getCurrencies({}),
+  };
-      };
-      return {
-        props: props,
-      };
-    }
-  }
-  return { props: {} };
 };
 
 export const getStaticPaths: GetStaticPaths = async (context) => {
@@ -455,17 +439,17 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
 };
 
 function useTesting(props: LibrarySlugProps) {
-  const libraryItem = props.libraryItem.libraryItems.data[0].attributes;
+  const { item, itemId } = props;
   const router = useRouter();
 
   const libraryItemURL =
     "/admin/content-manager/collectionType/api::library-item.library-item/" +
-    props.libraryItem.libraryItems.data[0].id;
+    itemId;
 
-  sortContent(libraryItem.contents);
+  sortContent(item.contents);
 
   if (router.locale === "en") {
-    if (!libraryItem.thumbnail.data) {
+    if (!item.thumbnail.data) {
       prettyTestError(
         router,
         "Missing thumbnail",
@@ -473,7 +457,7 @@ function useTesting(props: LibrarySlugProps) {
         libraryItemURL
       );
     }
-    if (libraryItem.metadata.length === 0) {
+    if (item.metadata.length === 0) {
       prettyTestError(
         router,
         "Missing metadata",
@@ -482,14 +466,12 @@ function useTesting(props: LibrarySlugProps) {
       );
     } else {
       if (
-        libraryItem.metadata[0].__typename === "ComponentMetadataGroup" &&
+        item.metadata[0].__typename === "ComponentMetadataGroup" &&
-        (libraryItem.metadata[0].subtype.data.attributes.slug ===
+        (item.metadata[0].subtype.data.attributes.slug === "relation-set" ||
-          "relation-set" ||
+          item.metadata[0].subtype.data.attributes.slug === "variant-set")
-          libraryItem.metadata[0].subtype.data.attributes.slug ===
-            "variant-set")
       ) {
         // This is a group type item
-        if (libraryItem.price) {
+        if (item.price) {
           prettyTestError(
             router,
             "Group-type items shouldn't have price",
@@ -497,7 +479,7 @@ function useTesting(props: LibrarySlugProps) {
             libraryItemURL
           );
         }
-        if (libraryItem.size) {
+        if (item.size) {
           prettyTestError(
             router,
             "Group-type items shouldn't have size",
@@ -505,7 +487,7 @@ function useTesting(props: LibrarySlugProps) {
             libraryItemURL
           );
         }
-        if (libraryItem.release_date) {
+        if (item.release_date) {
           prettyTestError(
             router,
             "Group-type items shouldn't have release_date",
@@ -513,7 +495,7 @@ function useTesting(props: LibrarySlugProps) {
             libraryItemURL
           );
         }
-        if (libraryItem.contents.data.length > 0) {
+        if (item.contents.data.length > 0) {
           prettyTestError(
             router,
             "Group-type items shouldn't have contents",
@@ -521,7 +503,7 @@ function useTesting(props: LibrarySlugProps) {
             libraryItemURL
           );
         }
-        if (libraryItem.subitems.data.length === 0) {
+        if (item.subitems.data.length === 0) {
           prettyTestError(
             router,
             "Group-type items should have subitems",
@@ -532,8 +514,8 @@ function useTesting(props: LibrarySlugProps) {
       } else {
         // This is a normal item
 
-        if (libraryItem.metadata[0].__typename === "ComponentMetadataGroup") {
+        if (item.metadata[0].__typename === "ComponentMetadataGroup") {
-          if (libraryItem.subitems.data.length === 0) {
+          if (item.subitems.data.length === 0) {
             prettyTestError(
               router,
               "Group-type item should have subitems",
@@ -543,7 +525,7 @@ function useTesting(props: LibrarySlugProps) {
           }
         }
 
-        if (!libraryItem.price) {
+        if (!item.price) {
           prettyTestWarning(
             router,
             "Missing price",
@@ -551,7 +533,7 @@ function useTesting(props: LibrarySlugProps) {
             libraryItemURL
           );
         } else {
-          if (!libraryItem.price.amount) {
+          if (!item.price.amount) {
             prettyTestError(
               router,
               "Missing amount",
@@ -559,7 +541,7 @@ function useTesting(props: LibrarySlugProps) {
               libraryItemURL
             );
           }
-          if (!libraryItem.price.currency) {
+          if (!item.price.currency) {
             prettyTestError(
               router,
               "Missing currency",
@@ -569,8 +551,8 @@ function useTesting(props: LibrarySlugProps) {
           }
         }
 
-        if (!libraryItem.digital) {
+        if (!item.digital) {
-          if (!libraryItem.size) {
+          if (!item.size) {
             prettyTestWarning(
               router,
               "Missing size",
@@ -578,7 +560,7 @@ function useTesting(props: LibrarySlugProps) {
               libraryItemURL
             );
           } else {
-            if (!libraryItem.size.width) {
+            if (!item.size.width) {
               prettyTestWarning(
                 router,
                 "Missing width",
@@ -586,7 +568,7 @@ function useTesting(props: LibrarySlugProps) {
                 libraryItemURL
               );
             }
-            if (!libraryItem.size.height) {
+            if (!item.size.height) {
               prettyTestWarning(
                 router,
                 "Missing height",
@@ -594,7 +576,7 @@ function useTesting(props: LibrarySlugProps) {
                 libraryItemURL
               );
             }
-            if (!libraryItem.size.thickness) {
+            if (!item.size.thickness) {
               prettyTestWarning(
                 router,
                 "Missing thickness",
@@ -605,7 +587,7 @@ function useTesting(props: LibrarySlugProps) {
           }
         }
 
-        if (!libraryItem.release_date) {
+        if (!item.release_date) {
           prettyTestWarning(
             router,
             "Missing release_date",
@@ -613,7 +595,7 @@ function useTesting(props: LibrarySlugProps) {
             libraryItemURL
           );
         } else {
-          if (!libraryItem.release_date.year) {
+          if (!item.release_date.year) {
             prettyTestError(
               router,
               "Missing year",
@@ -621,7 +603,7 @@ function useTesting(props: LibrarySlugProps) {
               libraryItemURL
             );
           }
-          if (!libraryItem.release_date.month) {
+          if (!item.release_date.month) {
             prettyTestError(
               router,
               "Missing month",
@@ -629,7 +611,7 @@ function useTesting(props: LibrarySlugProps) {
               libraryItemURL
             );
           }
-          if (!libraryItem.release_date.day) {
+          if (!item.release_date.day) {
             prettyTestError(
               router,
               "Missing day",
@@ -639,7 +621,7 @@ function useTesting(props: LibrarySlugProps) {
           }
         }
 
-        if (libraryItem.contents.data.length === 0) {
+        if (item.contents.data.length === 0) {
           prettyTestWarning(
             router,
             "Missing contents",
@@ -648,7 +630,7 @@ function useTesting(props: LibrarySlugProps) {
           );
         } else {
           let currentRangePage = 0;
-          libraryItem.contents.data.map((content) => {
+          item.contents.data.map((content) => {
             const contentURL =
               "/admin/content-manager/collectionType/api::content.content/" +
               content.id;
@@ -709,26 +691,26 @@ function useTesting(props: LibrarySlugProps) {
             }
           });
 
-          if (libraryItem.metadata[0].__typename === "ComponentMetadataBooks") {
+          if (item.metadata[0].__typename === "ComponentMetadataBooks") {
-            if (currentRangePage < libraryItem.metadata[0].page_count) {
+            if (currentRangePage < item.metadata[0].page_count) {
               prettyTestError(
                 router,
                 `Missing pages ${currentRangePage + 1} to ${
-                  libraryItem.metadata[0].page_count
+                  item.metadata[0].page_count
                 }`,
                 ["libraryItem", "content"],
                 libraryItemURL
               );
-            } else if (currentRangePage > libraryItem.metadata[0].page_count) {
+            } else if (currentRangePage > item.metadata[0].page_count) {
               prettyTestError(
                 router,
-                `Page overflow, content references pages up to ${currentRangePage} when the highest expected was ${libraryItem.metadata[0].page_count}`,
+                `Page overflow, content references pages up to ${currentRangePage} when the highest expected was ${item.metadata[0].page_count}`,
                 ["libraryItem", "content"],
                 libraryItemURL
               );
             }
 
-            if (libraryItem.metadata[0].languages.data.length === 0) {
+            if (item.metadata[0].languages.data.length === 0) {
               prettyTestWarning(
                 router,
                 "Missing language",
@@ -737,7 +719,7 @@ function useTesting(props: LibrarySlugProps) {
               );
             }
 
-            if (!libraryItem.metadata[0].page_count) {
+            if (!item.metadata[0].page_count) {
               prettyTestWarning(
                 router,
                 "Missing page_count",
@@ -750,7 +732,7 @@ function useTesting(props: LibrarySlugProps) {
       }
     }
 
-    if (!libraryItem.root_item && libraryItem.subitem_of.data.length === 0) {
+    if (!item.root_item && item.subitem_of.data.length === 0) {
       prettyTestError(
         router,
         "This item is inaccessible (not root item and not subitem of another item)",
@@ -759,7 +741,7 @@ function useTesting(props: LibrarySlugProps) {
       );
     }
 
-    if (libraryItem.gallery.data.length === 0) {
+    if (item.gallery.data.length === 0) {
       prettyTestWarning(
         router,
         "Missing gallery",
@@ -769,7 +751,7 @@ function useTesting(props: LibrarySlugProps) {
     }
   }
 
-  if (libraryItem.descriptions.length === 0) {
+  if (item.descriptions.length === 0) {
     prettyTestWarning(
       router,
       "Missing description",

src/pages/library/index.tsx

@@ -4,15 +4,10 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import {
-  GetCurrenciesQuery,
   GetLibraryItemsPreviewQuery,
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
-import {
+import { getLibraryItemsPreview } from "graphql/operations";
-  getCurrencies,
-  getLibraryItemsPreview,
-  getWebsiteInterface,
-} from "graphql/operations";
 import PanelHeader from "components/PanelComponents/PanelHeader";
 import AppLayout from "components/AppLayout";
 import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
@@ -20,12 +15,11 @@ import Select from "components/Select";
 import { useEffect, useState } from "react";
 import { prettyDate, prettyinlineTitle } from "queries/helpers";
 import Switch from "components/Switch";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type LibraryProps = {
+interface LibraryProps extends AppStaticProps {
-  libraryItems: GetLibraryItemsPreviewQuery;
+  items: GetLibraryItemsPreviewQuery["libraryItems"]["data"];
-  langui: GetWebsiteInterfaceQuery;
+}
-  currencies: GetCurrenciesQuery;
-};
 
 type GroupLibraryItems = Map<
   string,
@@ -33,7 +27,7 @@ type GroupLibraryItems = Map<
 >;
 
 export default function Library(props: LibraryProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui, items } = props;
 
   const [showSubitems, setShowSubitems] = useState<boolean>(false);
   const [showPrimaryItems, setShowPrimaryItems] = useState<boolean>(true);
@@ -41,20 +35,13 @@ export default function Library(props: LibraryProps): JSX.Element {
   const [sortingMethod, setSortingMethod] = useState<number>(0);
   const [groupingMethod, setGroupingMethod] = useState<number>(-1);
 
-  const [filteredItems, setFilteredItems] = useState<
+  const [filteredItems, setFilteredItems] = useState<LibraryProps["items"]>(
-    LibraryProps["libraryItems"]["libraryItems"]["data"]
+    filterItems(showSubitems, showPrimaryItems, showSecondaryItems, items)
-  >(
-    filterItems(
-      showSubitems,
-      showPrimaryItems,
-      showSecondaryItems,
-      props.libraryItems.libraryItems.data
-    )
   );
 
-  const [sortedItems, setSortedItem] = useState<
+  const [sortedItems, setSortedItem] = useState<LibraryProps["items"]>(
-    LibraryProps["libraryItems"]["libraryItems"]["data"]
+    sortBy(groupingMethod, filteredItems)
-  >(sortBy(groupingMethod, filteredItems));
+  );
 
   const [groups, setGroups] = useState<GroupLibraryItems>(
     getGroups(langui, groupingMethod, sortedItems)
@@ -62,19 +49,9 @@ export default function Library(props: LibraryProps): JSX.Element {
 
   useEffect(() => {
     setFilteredItems(
-      filterItems(
+      filterItems(showSubitems, showPrimaryItems, showSecondaryItems, items)
-        showSubitems,
-        showPrimaryItems,
-        showSecondaryItems,
-        props.libraryItems.libraryItems.data
-      )
     );
-  }, [
+  }, [showSubitems, items, showPrimaryItems, showSecondaryItems]);
-    showSubitems,
-    props.libraryItems.libraryItems.data,
-    showPrimaryItems,
-    showSecondaryItems,
-  ]);
 
   useEffect(() => {
     setSortedItem(sortBy(sortingMethod, filteredItems));
@@ -144,7 +121,7 @@ export default function Library(props: LibraryProps): JSX.Element {
                   <LibraryItemsPreview
                     key={item.id}
                     item={item.attributes}
-                    currencies={props.currencies.currencies.data}
+                    currencies={props.currencies}
                   />
                 ))}
               </div>
@@ -157,36 +134,31 @@ export default function Library(props: LibraryProps): JSX.Element {
   return (
     <AppLayout
       navTitle={langui.library}
-      langui={langui}
       subPanel={subPanel}
       contentPanel={contentPanel}
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
+  const props: LibraryProps = {
-    const props: LibraryProps = {
+    ...(await getAppStaticProps(context)),
-      libraryItems: await getLibraryItemsPreview({
+    items: (
-        language_code: context.locale,
+      await getLibraryItemsPreview({
-      }),
+        language_code: context.locale || "en",
-      langui: await getWebsiteInterface({
+      })
-        language_code: context.locale,
+    ).libraryItems.data,
-      }),
+  };
-      currencies: await getCurrencies({}),
+  return {
-    };
+    props: props,
-    return {
+  };
-      props: props,
-    };
-  } else {
-    return { props: {} };
-  }
 };
 
 function getGroups(
   langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"],
   groupByType: number,
-  items: LibraryProps["libraryItems"]["libraryItems"]["data"]
+  items: LibraryProps["items"]
 ): GroupLibraryItems {
   switch (groupByType) {
     case 0:
@@ -284,8 +256,8 @@ function filterItems(
   showSubitems: boolean,
   showPrimaryItems: boolean,
   showSecondaryItems: boolean,
-  items: LibraryProps["libraryItems"]["libraryItems"]["data"]
+  items: LibraryProps["items"]
-): LibraryProps["libraryItems"]["libraryItems"]["data"] {
+): LibraryProps["items"] {
   return [...items].filter((item) => {
     if (!showSubitems && !item.attributes.root_item) return false;
     if (
@@ -306,8 +278,8 @@ function filterItems(
 
 function sortBy(
   orderByType: number,
-  items: LibraryProps["libraryItems"]["libraryItems"]["data"]
+  items: LibraryProps["items"]
-): LibraryProps["libraryItems"]["libraryItems"]["data"] {
+): LibraryProps["items"] {
   switch (orderByType) {
     case 0:
       return [...items].sort((a, b) => {

src/pages/merch/index.tsx

@@ -1,16 +1,12 @@
 import SubPanel from "components/Panels/SubPanel";
 import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
 import AppLayout from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type MerchProps = {
+interface MerchProps extends AppStaticProps {}
-  langui: GetWebsiteInterfaceQuery;
-};
-
 export default function Merch(props: MerchProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -21,25 +17,14 @@ export default function Merch(props: MerchProps): JSX.Element {
     </SubPanel>
   );
 
-  return (
+  return <AppLayout navTitle={langui.merch} subPanel={subPanel} {...props} />;
-    <AppLayout
-      navTitle={langui.merch}
-      langui={langui}
-      subPanel={subPanel}
-    />
-  );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
+  const props: MerchProps = {
-    const props: MerchProps = {
+    ...(await getAppStaticProps(context)),
-      langui: await getWebsiteInterface({
+  };
-        language_code: context.locale,
+  return {
-      }),
+    props: props,
-    };
+  };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
 };

src/pages/news/index.tsx

@@ -1,16 +1,13 @@
 import SubPanel from "components/Panels/SubPanel";
 import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
 import AppLayout from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type NewsProps = {
+interface NewsProps extends AppStaticProps {}
-  langui: GetWebsiteInterfaceQuery;
-};
 
 export default function News(props: NewsProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -21,25 +18,14 @@ export default function News(props: NewsProps): JSX.Element {
     </SubPanel>
   );
 
-  return (
+  return <AppLayout navTitle={langui.news} subPanel={subPanel} {...props} />;
-    <AppLayout
-      navTitle={langui.news}
-      langui={langui}
-      subPanel={subPanel}
-    />
-  );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
+  const props: NewsProps = {
-    const props: NewsProps = {
+    ...(await getAppStaticProps(context)),
-      langui: await getWebsiteInterface({
+  };
-        language_code: context.locale,
+  return {
-      }),
+    props: props,
-    };
+  };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
 };

src/pages/wiki/chronology.tsx

@@ -5,18 +5,9 @@ import ChronologyYearComponent from "components/Chronology/ChronologyYearCompone
 import {
   GetChronologyItemsQuery,
   GetErasQuery,
-  GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
-import {
+import { getEras, getChronologyItems } from "graphql/operations";
-  getEras,
-  getChronologyItems,
-  getWebsiteInterface,
-} from "graphql/operations";
 import NavOption from "components/PanelComponents/NavOption";
-import ReturnButton, {
-  ReturnButtonType,
-} from "components/PanelComponents/ReturnButton";
-import HorizontalLine from "components/HorizontalLine";
 import AppLayout from "components/AppLayout";
 import {
   prettySlug,
@@ -26,34 +17,32 @@ import {
 import InsetBox from "components/InsetBox";
 import { useRouter } from "next/router";
 import ReactTooltip from "react-tooltip";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-interface DataChronologyProps {
+interface DataChronologyProps extends AppStaticProps {
-  chronologyItems: GetChronologyItemsQuery;
+  chronologyItems: GetChronologyItemsQuery["chronologyItems"]["data"];
-  chronologyEras: GetErasQuery;
+  chronologyEras: GetErasQuery["chronologyEras"]["data"];
-  langui: GetWebsiteInterfaceQuery;
 }
 
 export default function DataChronology(
   props: DataChronologyProps
 ): JSX.Element {
   useTesting(props);
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { chronologyItems, chronologyEras } = props;
-  const chronologyItems = props.chronologyItems.chronologyItems;
-  const chronologyEras = props.chronologyEras.chronologyEras;
 
   // Group by year the Chronology items
   let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][][] =
     [];
 
-  chronologyEras.data.map(() => {
+  chronologyEras.map(() => {
     chronologyItemYearGroups.push([]);
   });
 
   let currentChronologyEraIndex = 0;
-  chronologyItems.data.map((item) => {
+  chronologyItems.map((item) => {
     if (
       item.attributes.year >
-      chronologyEras.data[currentChronologyEraIndex].attributes.ending_year
+      chronologyEras[currentChronologyEraIndex].attributes.ending_year
     ) {
       currentChronologyEraIndex++;
     }
@@ -74,7 +63,7 @@ export default function DataChronology(
 
   const subPanel = (
     <SubPanel>
-      {props.chronologyEras.chronologyEras.data.map((era) => (
+      {chronologyEras.map((era) => (
         <NavOption
           key={era.id}
           url={"#" + era.attributes.slug}
@@ -97,17 +86,17 @@ export default function DataChronology(
       {chronologyItemYearGroups.map((era, eraIndex) => (
         <>
           <InsetBox
-            id={chronologyEras.data[eraIndex].attributes.slug}
+            id={chronologyEras[eraIndex].attributes.slug}
             className="grid text-center my-8 gap-4"
           >
             <h2 className="text-2xl">
-              {chronologyEras.data[eraIndex].attributes.title.length > 0
+              {chronologyEras[eraIndex].attributes.title.length > 0
-                ? chronologyEras.data[eraIndex].attributes.title[0].title
+                ? chronologyEras[eraIndex].attributes.title[0].title
-                : prettySlug(chronologyEras.data[eraIndex].attributes.slug)}
+                : prettySlug(chronologyEras[eraIndex].attributes.slug)}
             </h2>
             <p className="whitespace-pre-line ">
-              {chronologyEras.data[eraIndex].attributes.title.length > 0
+              {chronologyEras[eraIndex].attributes.title.length > 0
-                ? chronologyEras.data[eraIndex].attributes.title[0].description
+                ? chronologyEras[eraIndex].attributes.title[0].description
                 : ""}
             </p>
           </InsetBox>
@@ -136,37 +125,36 @@ export default function DataChronology(
   return (
     <AppLayout
       navTitle="Chronology"
-      langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
+  const props: DataChronologyProps = {
-    const props: DataChronologyProps = {
+    ...(await getAppStaticProps(context)),
-      chronologyItems: await getChronologyItems({
+    chronologyItems: (
-        language_code: context.locale,
+      await getChronologyItems({
-      }),
+        language_code: context.locale || "en",
-      chronologyEras: await getEras({ language_code: context.locale }),
+      })
-      langui: await getWebsiteInterface({
+    ).chronologyItems.data,
-        language_code: context.locale,
+    chronologyEras: (await getEras({ language_code: context.locale || "en" }))
-      }),
+      .chronologyEras.data,
-    };
+  };
-    return {
+  return {
-      props: props,
+    props: props,
-    };
+  };
-  }
-  return { props: {} };
 };
 
-function useTesting({ chronologyItems, chronologyEras }: DataChronologyProps) {
+function useTesting(props: DataChronologyProps) {
   const router = useRouter();
-  chronologyEras.chronologyEras.data.map((era) => {
+  const { chronologyItems, chronologyEras } = props;
+  chronologyEras.map((era) => {
     const chronologyErasURL =
       "/admin/content-manager/collectionType/api::chronology-era.chronology-era/" +
-      chronologyItems.chronologyItems.data[0].id;
+      chronologyItems[0].id;
 
     if (era.attributes.title.length === 0) {
       prettyTestError(
@@ -200,10 +188,10 @@ function useTesting({ chronologyItems, chronologyEras }: DataChronologyProps) {
     }
   });
 
-  chronologyItems.chronologyItems.data.map((item) => {
+  chronologyItems.map((item) => {
     const chronologyItemsURL =
       "/admin/content-manager/collectionType/api::chronology-item.chronology-item/" +
-      chronologyItems.chronologyItems.data[0].id;
+      chronologyItems[0].id;
 
     const date = `${item.attributes.year}/${item.attributes.month}/${item.attributes.day}`;
 

src/pages/wiki/index.tsx

@@ -1,17 +1,13 @@
 import SubPanel from "components/Panels/SubPanel";
 import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
-import ContentPanel from "components/Panels/ContentPanel";
 import AppLayout from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type WikiProps = {
+interface WikiProps extends AppStaticProps {}
-  langui: GetWebsiteInterfaceQuery;
-};
 
 export default function Hubs(props: WikiProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -21,28 +17,15 @@ export default function Hubs(props: WikiProps): JSX.Element {
       />
     </SubPanel>
   );
-  const contentPanel = <ContentPanel>Hello</ContentPanel>;
 
-  return (
+  return <AppLayout navTitle={langui.wiki} subPanel={subPanel} {...props} />;
-    <AppLayout
-      navTitle={langui.wiki}
-      langui={langui}
-      contentPanel={contentPanel}
-      subPanel={subPanel}
-    />
-  );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
+  const props: WikiProps = {
-    const props: WikiProps = {
+    ...(await getAppStaticProps(context)),
-      langui: await getWebsiteInterface({
+  };
-        language_code: context.locale,
+  return {
-      }),
+    props: props,
-    };
+  };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
 };

src/queries/getAppStaticProps.ts

@@ -0,0 +1,44 @@
+import {
+  getCurrencies,
+  getLanguages,
+  getWebsiteInterface,
+} from "graphql/operations";
+import {
+  GetCurrenciesQuery,
+  GetLanguagesQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
+import { GetStaticPropsContext, PreviewData } from "next";
+import { ParsedUrlQuery } from "querystring";
+
+export interface AppStaticProps {
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
+  currencies: GetCurrenciesQuery["currencies"]["data"];
+  languages: GetLanguagesQuery["languages"]["data"];
+}
+
+export async function getAppStaticProps(
+  context: GetStaticPropsContext<ParsedUrlQuery, PreviewData>
+): Promise<AppStaticProps> {
+  const languages = (await getLanguages({})).languages.data;
+  languages.sort((a, b) => {
+    return a.attributes.localized_name.localeCompare(
+      b.attributes.localized_name
+    );
+  });
+
+  const currencies = (await getCurrencies({})).currencies.data;
+  currencies.sort((a, b) => {
+    return a.attributes.code.localeCompare(b.attributes.code);
+  });
+
+  return {
+    langui: (
+      await getWebsiteInterface({
+        language_code: context.locale || "en",
+      })
+    ).websiteInterfaces.data[0].attributes,
+    currencies: currencies,
+    languages: languages,
+  };
+}