Use pages from Strapi instead of hardcoded ones

src/graphql/operation.graphql

@@ -109,6 +109,12 @@ query getWebsiteInterface($language_code: String) {
         translation_notice
         source_language
         pronouns
+        no_category
+        item
+        items
+        content
+        result
+        results
       }
     }
   }
@@ -1142,3 +1148,77 @@ query getLanguages {
     }
   }
 }
+
+query getPost($slug: String, $language_code: String) {
+  posts(filters: { slug: { eq: $slug } }) {
+    data {
+      id
+      attributes {
+        slug
+        publishedAt
+        updatedAt
+        authors {
+          data {
+            id
+            attributes {
+              username
+              anonymize
+              anonymous_code
+              pronouns
+              bio(filters: { language: { code: { eq: $language_code } } }) {
+                bio
+              }
+              languages {
+                data {
+                  attributes {
+                    code
+                  }
+                }
+              }
+              avatar {
+                data {
+                  attributes {
+                    name
+                    alternativeText
+                    caption
+                    width
+                    height
+                    url
+                  }
+                }
+              }
+            }
+          }
+        }
+        categories {
+          data {
+            id
+            attributes {
+              name
+              short
+            }
+          }
+        }
+        hidden
+        translations(filters: { language: { code: { eq: $language_code } } }) {
+          Status
+          title
+          excerpt
+          thumbnail {
+            data {
+              attributes {
+                name
+                alternativeText
+                caption
+                width
+                height
+                url
+              }
+            }
+          }
+          body
+        }
+      }
+    }
+  }
+}

src/graphql/operations-types.ts

@@ -48,6 +48,13 @@ export enum Enum_Componentmetadatavideo_Resolution {
   QuadHd_2160p = "QuadHD_2160p",
 }
 
+export enum Enum_Componenttranslationsposts_Status {
+  Incomplete = "Incomplete",
+  Draft = "Draft",
+  Review = "Review",
+  Done = "Done",
+}
+
 export enum Enum_Componenttranslationschronologyitem_Status {
   Incomplete = "Incomplete",
   Draft = "Draft",
@@ -191,6 +198,12 @@ export type GetWebsiteInterfaceQuery = {
         translation_notice: string;
         source_language: string;
         pronouns: string;
+        no_category: string;
+        item: string;
+        items: string;
+        content: string;
+        result: string;
+        results: string;
       };
     }>;
   };
@@ -1525,3 +1538,100 @@ export type GetLanguagesQuery = {
     }>;
   };
 };
+
+export type GetPostQueryVariables = Exact<{
+  slug: InputMaybe<Scalars["String"]>;
+  language_code: InputMaybe<Scalars["String"]>;
+}>;
+
+export type GetPostQuery = {
+  __typename: "Query";
+  posts: {
+    __typename: "PostEntityResponseCollection";
+    data: Array<{
+      __typename: "PostEntity";
+      id: string;
+      attributes: {
+        __typename: "Post";
+        slug: string;
+        publishedAt: any;
+        updatedAt: any;
+        hidden: boolean;
+        authors: {
+          __typename: "RecorderRelationResponseCollection";
+          data: Array<{
+            __typename: "RecorderEntity";
+            id: string;
+            attributes: {
+              __typename: "Recorder";
+              username: string;
+              anonymize: boolean;
+              anonymous_code: string;
+              pronouns: string;
+              bio: Array<{
+                __typename: "ComponentTranslationsBio";
+                bio: string;
+              }>;
+              languages: {
+                __typename: "LanguageRelationResponseCollection";
+                data: Array<{
+                  __typename: "LanguageEntity";
+                  attributes: { __typename: "Language"; code: string };
+                }>;
+              };
+              avatar: {
+                __typename: "UploadFileEntityResponse";
+                data: {
+                  __typename: "UploadFileEntity";
+                  attributes: {
+                    __typename: "UploadFile";
+                    name: string;
+                    alternativeText: string;
+                    caption: string;
+                    width: number;
+                    height: number;
+                    url: string;
+                  };
+                };
+              };
+            };
+          }>;
+        };
+        categories: {
+          __typename: "CategoryRelationResponseCollection";
+          data: Array<{
+            __typename: "CategoryEntity";
+            id: string;
+            attributes: {
+              __typename: "Category";
+              name: string;
+              short: string;
+            };
+          }>;
+        };
+        translations: Array<{
+          __typename: "ComponentTranslationsPosts";
+          Status: Enum_Componenttranslationsposts_Status;
+          title: string;
+          excerpt: string;
+          body: string;
+          thumbnail: {
+            __typename: "UploadFileEntityResponse";
+            data: {
+              __typename: "UploadFileEntity";
+              attributes: {
+                __typename: "UploadFile";
+                name: string;
+                alternativeText: string;
+                caption: string;
+                width: number;
+                height: number;
+                url: string;
+              };
+            };
+          };
+        }>;
+      };
+    }>;
+  };
+};

src/graphql/operations.ts

@@ -23,6 +23,8 @@ import {
   GetLibraryItemsPreviewQueryVariables,
   GetLibraryItemsSlugsQuery,
   GetLibraryItemsSlugsQueryVariables,
+  GetPostQuery,
+  GetPostQueryVariables,
   GetWebsiteInterfaceQuery,
   GetWebsiteInterfaceQueryVariables,
 } from "graphql/operations-types";
@@ -141,3 +143,10 @@ export async function getLanguages(
   const query = getQueryFromOperations("getLanguages");
   return await graphQL(query, JSON.stringify(variables));
 }
+
+export async function getPost(
+  variables: GetPostQueryVariables
+): Promise<GetPostQuery> {
+  const query = getQueryFromOperations("getPost");
+  return await graphQL(query, JSON.stringify(variables));
+}

src/graphql/schema.graphql

@@ -1060,6 +1060,8 @@ input ComponentTranslationsPostsFiltersInput {
   Status: StringFilterInput
   title: StringFilterInput
   excerpt: StringFilterInput
+  body: StringFilterInput
+  language: LanguageFiltersInput
   and: [ComponentTranslationsPostsFiltersInput]
   or: [ComponentTranslationsPostsFiltersInput]
   not: ComponentTranslationsPostsFiltersInput
@@ -1071,6 +1073,8 @@ input ComponentTranslationsPostsInput {
   title: String
   excerpt: String
   thumbnail: ID
+  body: String
+  language: ID
 }
 
 type ComponentTranslationsPosts {
@@ -1079,6 +1083,8 @@ type ComponentTranslationsPosts {
   title: String!
   excerpt: String
   thumbnail: UploadFileEntityResponse
+  body: String
+  language: LanguageEntityResponse
 }
 
 enum ENUM_COMPONENTTRANSLATIONSSCANSET_STATUS {
@@ -1648,6 +1654,7 @@ input CurrencyFiltersInput {
   symbol: StringFilterInput
   code: StringFilterInput
   rate_to_usd: FloatFilterInput
+  display_decimals: BooleanFilterInput
   createdAt: DateTimeFilterInput
   updatedAt: DateTimeFilterInput
   and: [CurrencyFiltersInput]
@@ -1659,12 +1666,14 @@ input CurrencyInput {
   symbol: String
   code: String
   rate_to_usd: Float
+  display_decimals: Boolean
 }
 
 type Currency {
   symbol: String!
   code: String!
-  rate_to_usd: Float
+  rate_to_usd: Float!
+  display_decimals: Boolean!
   createdAt: DateTime
   updatedAt: DateTime
 }
@@ -1916,6 +1925,7 @@ input LibraryItemFiltersInput {
   digital: BooleanFilterInput
   primary: BooleanFilterInput
   submerchs: MerchItemFiltersInput
+  categories: CategoryFiltersInput
   createdAt: DateTimeFilterInput
   updatedAt: DateTimeFilterInput
   and: [LibraryItemFiltersInput]
@@ -1942,6 +1952,7 @@ input LibraryItemInput {
   digital: Boolean
   primary: Boolean
   submerchs: [ID]
+  categories: [ID]
 }
 
 type LibraryItem {
@@ -1987,6 +1998,11 @@ type LibraryItem {
     pagination: PaginationArg = {}
     sort: [String] = []
   ): MerchItemRelationResponseCollection
+  categories(
+    filters: CategoryFiltersInput
+    pagination: PaginationArg = {}
+    sort: [String] = []
+  ): CategoryRelationResponseCollection
   createdAt: DateTime
   updatedAt: DateTime
 }
@@ -2107,6 +2123,7 @@ input PostFiltersInput {
   authors: RecorderFiltersInput
   slug: StringFilterInput
   categories: CategoryFiltersInput
+  hidden: BooleanFilterInput
   createdAt: DateTimeFilterInput
   updatedAt: DateTimeFilterInput
   publishedAt: DateTimeFilterInput
@@ -2120,6 +2137,7 @@ input PostInput {
   slug: String
   categories: [ID]
   translations: [ComponentTranslationsPostsInput]
+  hidden: Boolean
   publishedAt: DateTime
 }
 
@@ -2140,6 +2158,7 @@ type Post {
     pagination: PaginationArg = {}
     sort: [String] = []
   ): [ComponentTranslationsPosts]
+  hidden: Boolean!
   createdAt: DateTime
   updatedAt: DateTime
   publishedAt: DateTime
@@ -2619,6 +2638,38 @@ input WebsiteInterfaceFiltersInput {
   group_by: StringFilterInput
   select_option_sidebar: StringFilterInput
   group: StringFilterInput
+  settings: StringFilterInput
+  theme: StringFilterInput
+  light: StringFilterInput
+  auto: StringFilterInput
+  dark: StringFilterInput
+  font_size: StringFilterInput
+  player_name: StringFilterInput
+  currency: StringFilterInput
+  font: StringFilterInput
+  calculated: StringFilterInput
+  status_incomplete: StringFilterInput
+  status_draft: StringFilterInput
+  status_review: StringFilterInput
+  status_done: StringFilterInput
+  incomplete: StringFilterInput
+  draft: StringFilterInput
+  review: StringFilterInput
+  done: StringFilterInput
+  status: StringFilterInput
+  transcribers: StringFilterInput
+  translators: StringFilterInput
+  proofreaders: StringFilterInput
+  transcript_notice: StringFilterInput
+  translation_notice: StringFilterInput
+  source_language: StringFilterInput
+  pronouns: StringFilterInput
+  no_category: StringFilterInput
+  item: StringFilterInput
+  items: StringFilterInput
+  content: StringFilterInput
+  result: StringFilterInput
+  results: StringFilterInput
   createdAt: DateTimeFilterInput
   updatedAt: DateTimeFilterInput
   and: [WebsiteInterfaceFiltersInput]
@@ -2707,6 +2758,38 @@ input WebsiteInterfaceInput {
   group_by: String
   select_option_sidebar: String
   group: String
+  settings: String
+  theme: String
+  light: String
+  auto: String
+  dark: String
+  font_size: String
+  player_name: String
+  currency: String
+  font: String
+  calculated: String
+  status_incomplete: String
+  status_draft: String
+  status_review: String
+  status_done: String
+  incomplete: String
+  draft: String
+  review: String
+  done: String
+  status: String
+  transcribers: String
+  translators: String
+  proofreaders: String
+  transcript_notice: String
+  translation_notice: String
+  source_language: String
+  pronouns: String
+  no_category: String
+  item: String
+  items: String
+  content: String
+  result: String
+  results: String
 }
 
 type WebsiteInterface {
@@ -2790,6 +2873,38 @@ type WebsiteInterface {
   group_by: String
   select_option_sidebar: String
   group: String
+  settings: String
+  theme: String
+  light: String
+  auto: String
+  dark: String
+  font_size: String
+  player_name: String
+  currency: String
+  font: String
+  calculated: String
+  status_incomplete: String
+  status_draft: String
+  status_review: String
+  status_done: String
+  incomplete: String
+  draft: String
+  review: String
+  done: String
+  status: String
+  transcribers: String
+  translators: String
+  proofreaders: String
+  transcript_notice: String
+  translation_notice: String
+  source_language: String
+  pronouns: String
+  no_category: String
+  item: String
+  items: String
+  content: String
+  result: String
+  results: String
   createdAt: DateTime
   updatedAt: DateTime
 }

src/pages/about-us/index.tsx

@@ -3,6 +3,7 @@ import PanelHeader from "components/PanelComponents/PanelHeader";
 import { GetStaticProps } from "next";
 import AppLayout from "components/AppLayout";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
+import NavOption from "components/PanelComponents/NavOption";
 
 interface AboutUsProps extends AppStaticProps {}
 
@@ -15,6 +16,15 @@ export default function AboutUs(props: AboutUsProps): JSX.Element {
         title={langui.about_us}
         description={langui.about_us_description}
       />
+      <NavOption title="Accord’s Handbook" url="/about-us/handbook" border />
+      <NavOption
+        title="Site information"
+        url="/about-us/site-information"
+        border
+      />
+      <NavOption title="FAQ" url="/about-us/faq" border />
+      <NavOption title="Sharing Policy" url="/about-us/sharing-policy" border />
+      <NavOption title="Contact us" url="/about-us/contact" border />
     </SubPanel>
   );
   return (

src/pages/about-us/site-information.tsx

@@ -0,0 +1,60 @@
+import AppLayout from "components/AppLayout";
+import Markdawn from "components/Markdown/Markdawn";
+import ReturnButton, {
+  ReturnButtonType,
+} from "components/PanelComponents/ReturnButton";
+import ContentPanel from "components/Panels/ContentPanel";
+import { getPost } from "graphql/operations";
+import { GetPostQuery } from "graphql/operations-types";
+import { GetStaticProps } from "next";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
+import { prettySlug } from "queries/helpers";
+
+interface SiteInfoProps extends AppStaticProps {
+  post: GetPostQuery["posts"]["data"][number]["attributes"];
+}
+
+export default function SiteInformation(props: SiteInfoProps): JSX.Element {
+  const { langui, post } = props;
+  const contentPanel = (
+    <ContentPanel>
+      <ReturnButton
+        href="/about-us"
+        displayOn={ReturnButtonType.Both}
+        langui={langui}
+        title={langui.about_us}
+        className="mb-10"
+      />
+      {post.translations.length > 0 && (
+        <Markdawn text={post.translations[0].body} />
+      )}
+    </ContentPanel>
+  );
+
+  return (
+    <AppLayout
+      navTitle={
+        post.translations.length > 0
+          ? post.translations[0].title
+          : prettySlug(post.slug)
+      }
+      contentPanel={contentPanel}
+      {...props}
+    />
+  );
+}
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  const props: SiteInfoProps = {
+    ...(await getAppStaticProps(context)),
+    post: (
+      await getPost({
+        slug: "site-information",
+        language_code: context.locale || "en",
+      })
+    ).posts.data[0].attributes,
+  };
+  return {
+    props: props,
+  };
+};

src/pages/index.tsx

@@ -1,146 +1,48 @@
 import AppLayout from "components/AppLayout";
+import Markdawn from "components/Markdown/Markdawn";
 import ContentPanel from "components/Panels/ContentPanel";
+import { getPost } from "graphql/operations";
+import { GetPostQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
+import { prettySlug } from "queries/helpers";
 
-interface HomeProps extends AppStaticProps {}
+interface HomeProps extends AppStaticProps {
+  post: GetPostQuery["posts"]["data"][number]["attributes"];
+}
 
 export default function Home(props: HomeProps): JSX.Element {
+  const { post } = props;
   const contentPanel = (
-    <ContentPanel autoformat>
+    <ContentPanel>
-      <div className="grid place-items-center place-content-center w-full gap-5 text-center">
+      {post.translations.length > 0 && (
-        <div className="[mask:url('/icons/accords.svg')] [mask-size:contain] [mask-repeat:no-repeat] [mask-position:center] w-32 aspect-square mobile:w-[50vw] bg-black" />
+        <Markdawn text={post.translations[0].body} />
-        <h1 className="text-5xl mb-0">Accord&rsquo;s Library</h1>
+      )}
-        <h2 className="mt-0">Discover • Analyse • Translate • Archive</h2>
-      </div>
-
-      <h2>What is this?</h2>
-      <p>
-        Accord&rsquo;s Library aims at gathering and archiving all of Yoko
-        Taro&rsquo;s work. Yoko Taro is a Japanese video game director and
-        scenario writer. He is best-known for his work on the NieR and
-        Drakengard (Drag-on Dragoon) franchises. To complement his games, Yoko
-        Taro likes to publish side materials in the form of books, novellas,
-        artbooks, stage plays, manga, drama CDs, and comics. Those side
-        materials can be very difficult to find. His work goes all the way back
-        to 2003, and most of them are out of print after having been released
-        solely in Japan, sometimes in limited quantities. Their prices on the
-        second hand market have skyrocketed, ranging all the way to hundreds if
-        not thousand of dollars for the rarest items.&nbsp;
-      </p>
-      <p>
-        This is where this library takes its meaning, in trying to help the
-        community grow by providing translators, writers, and wiki&rsquo;s
-        contributors a simple way to access these records filled with stories,
-        artworks, and knowledge.
-      </p>
-      <p>
-        We are a small group of Yoko Taro&rsquo;s fans that decided to join
-        forces and create a website and a community. Our motto is{" "}
-        <strong>Discover • Analyze • Translate • Archive</strong> (D.A.T.A. for
-        short). We started with the goal of gathering and archiving as much
-        side-materials/merch as possible. But since then, our ambition grew and
-        we decided to create a full-fledged website that will also include news
-        articles, lore, summaries, translations, and transcriptions. Hopefully
-        one day, we will be up there in the list of notable resources for
-        Drakengard and NieR fans.
-      </p>
-      <h2>What&rsquo;s on this website?</h2>
-      <p>
-        <strong>
-          <a href="https://accords-library.com/compendium/">The Compendium</a>
-        </strong>
-        : This is where we will list every NieR/DOD/other Yoko Tato merch,
-        games, books, novel, stage play, CD... well everything! For each, we
-        will provide photos and/or scans of the content, information about what
-        it is, when and how it was released, size, initial price...
-      </p>
-      <p>
-        <strong>
-          <a href="https://accords-library.com/news/">News</a>
-        </strong>
-        : Yes because we also want to create our own content! So there you will
-        find translations, transcriptions, unboxing, news about future
-        merch/game releases, maybe some guides. We don&rsquo;t see this website
-        as being purely a showcase of our work, but also of the community, and
-        as such, we will be accepting applications for becoming contributors on
-        the website. For the applicant, there is no deadline or article quota,
-        it merely means that we will have access to the website Post Writing
-        tools and will be able to submit a draft that can be published once
-        verified by an editor. Anyway, that&rsquo;s at least the plan, we will
-        think more about this until the website&rsquo;s official launch.
-      </p>
-      <p>
-        <strong>
-          <a href="https://accords-library.com/data/">Data</a>
-        </strong>
-        : There we will publish lore/knowledge about the Yokoverse: Dictionary,
-        Timeline, Weapons Stories, Game summaries... We have not yet decided how
-        deep we want to go as they are already quite a few resources out there.{" "}
-      </p>
-      <p>
-        <strong>
-          <a
-            href="https://gallery.accords-library.com/posts"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            Gallery
-          </a>
-        </strong>
-        : A fully tagged Danbooru-styled gallery with currently more than a
-        thousand unique artworks. If you are unfamiliar with this kind of
-        gallery, it comes with a powerful search function that allows you to
-        search for specific images: want to search for images with both Caim and
-        Inuart, just type{" "}
-        <kbd>
-          <a
-            href="https://gallery.accords-library.com/posts/query=Caim%20Inuart"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            Caim Inuart
-          </a>
-        </kbd>
-        . If you want images of Devola OR Popola, you can use a comma{" "}
-        <kbd>
-          <a
-            href="https://gallery.accords-library.com/posts/query=Popola%2CDevola"
-            data-type="URL"
-            data-id="https://gallery.accords-library.com/posts/query=Popola%2CDevola"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            Popola,Devola
-          </a>
-        </kbd>
-        . You can also negate a tag: i.e. images of 9S without any pods around,
-        search for{" "}
-        <kbd>
-          <a
-            href="https://gallery.accords-library.com/posts/query=9S%20-Pods"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            9S -Pods
-          </a>
-        </kbd>
-        . Anyway, there is a lot more to it, you can click on &quot;Syntax
-        help&quot; next to the Search button for even neater functions. Btw, you
-        can create an account to favorite, upvote/downvote posts, or if you want
-        to help tagging them. There isn&rsquo;t currently a way for new users to
-        upload images, you&rsquo;ll have to contact us first and we can decide
-        to enable this function on your account.
-      </p>
     </ContentPanel>
   );
 
-  return <AppLayout navTitle={"Home"} contentPanel={contentPanel} {...props} />;
+  return (
+    <AppLayout
+      navTitle={
+        post.translations.length > 0
+          ? post.translations[0].title
+          : prettySlug(post.slug)
+      }
+      contentPanel={contentPanel}
+      {...props}
+    />
+  );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
   const props: HomeProps = {
     ...(await getAppStaticProps(context)),
+    post: (
+      await getPost({
+        slug: "home",
+        language_code: context.locale || "en",
+      })
+    ).posts.data[0].attributes,
   };
   return {
     props: props,