Replaced Data and Hubs with Wiki

src/components/Library/LibraryContentPreview.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import { GetContentsQuery } from "graphql/operations-types";
+import { getAssetURL, prettySlug } from "queries/helpers";
+import Image from "next/image";
+
+export type LibraryContentPreviewProps = {
+  item: {
+    slug: GetContentsQuery["contents"]["data"][number]["attributes"]["slug"];
+    thumbnail: GetContentsQuery["contents"]["data"][number]["attributes"]["thumbnail"];
+    titles: GetContentsQuery["contents"]["data"][number]["attributes"]["titles"];
+  };
+};
+
+export default function LibraryContentPreview(
+  props: LibraryContentPreviewProps
+): JSX.Element {
+  const item = props.item;
+
+  return (
+    <Link href={"/library/media/" + item.slug} passHref>
+      <div className="drop-shadow-dark-xl cursor-pointer grid items-end hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
+        {item.thumbnail.data ? (
+          <Image
+            src={getAssetURL(item.thumbnail.data.attributes.url)}
+            alt={item.thumbnail.data.attributes.alternativeText}
+            height={item.thumbnail.data.attributes.height}
+            width={item.thumbnail.data.attributes.width}
+          />
+        ) : (
+          <div className="w-full aspect-[3/2] bg-light rounded-lg"></div>
+        )}
+        <div className="linearbg-1 drop-shadow-dark-lg absolute bottom-2 inset-x-[-0.15rem] opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-4 text-left">
+          <div>
+          {item.titles.length > 0 ? (
+            <>
+              <p>{item.titles[0].pre_title}</p>
+              <h1 className="text-lg">{item.titles[0].title}</h1>
+              <h2>{item.titles[0].subtitle}</h2>
+            </>
+          ) : (
+            <h1 className="text-3xl">{prettySlug(item.slug)}</h1>
+          )}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}

src/components/Library/LibraryItemsPreview.tsx

@@ -3,7 +3,7 @@ import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
 import { getAssetURL, prettyDate, prettyPrice } from "queries/helpers";
 import Image from "next/image";
 
-export type LibraryItemComponentProps = {
+export type LibraryItemsPreviewProps = {
   item: {
     slug: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["slug"];
     thumbnail: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["thumbnail"];
@@ -14,13 +14,13 @@ export type LibraryItemComponentProps = {
   };
 };
 
-export default function LibraryItemComponent(
+export default function LibraryItemsPreview(
-  props: LibraryItemComponentProps
+  props: LibraryItemsPreviewProps
 ): JSX.Element {
   const item = props.item;
 
   return (
-    <Link href={"/library/" + item.slug} passHref>
+    <Link href={"/library/items/" + item.slug} passHref>
       <div className="drop-shadow-dark-xl cursor-pointer grid items-end hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
         {item.thumbnail.data ? (
           <Image
@@ -38,12 +38,12 @@ export default function LibraryItemComponent(
             <h3 className="leading-3">{item.subtitle}</h3>
           </div>
           <div className="grid grid-flow-col">
-            {item.price ? (
+            {item.release_date ? (
               <p className="text-sm">
                 <span className="material-icons !text-base translate-y-[.15em] mr-1">
                   event
                 </span>
-                {item.release_date ? prettyDate(item.release_date) : ""}
+                {prettyDate(item.release_date)}
               </p>
             ) : (
               ""
@@ -64,3 +64,4 @@ export default function LibraryItemComponent(
     </Link>
   );
 }
+

src/components/Library/LibraryMediaPreview.tsx

@@ -0,0 +1,67 @@
+import Link from "next/link";
+import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
+import { getAssetURL, prettyDate, prettyPrice } from "queries/helpers";
+import Image from "next/image";
+
+export type LibraryContentPreviewProps = {
+  item: {
+    slug: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["slug"];
+    thumbnail: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["thumbnail"];
+    title: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["title"];
+    subtitle: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["subtitle"];
+    price?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"];
+    release_date?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"];
+  };
+};
+
+export default function LibraryContentPreview(
+  props: LibraryContentPreviewProps
+): JSX.Element {
+  const item = props.item;
+
+  return (
+    <Link href={"/library/media/" + item.slug} passHref>
+      <div className="drop-shadow-dark-xl cursor-pointer grid items-end hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
+        {item.thumbnail.data ? (
+          <Image
+            src={getAssetURL(item.thumbnail.data.attributes.url)}
+            alt={item.thumbnail.data.attributes.alternativeText}
+            height={item.thumbnail.data.attributes.height}
+            width={item.thumbnail.data.attributes.width}
+          />
+        ) : (
+          <div className="w-full aspect-[21/29.7] bg-light rounded-lg"></div>
+        )}
+        <div className="linearbg-1 drop-shadow-dark-lg absolute bottom-2 inset-x-[-0.15rem] opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-4 text-left">
+          <div>
+            <h2 className="text-lg leading-7">{item.title}</h2>
+            <h3 className="leading-3">{item.subtitle}</h3>
+          </div>
+          <div className="grid grid-flow-col">
+            {item.release_date ? (
+              <p className="text-sm">
+                <span className="material-icons !text-base translate-y-[.15em] mr-1">
+                  event
+                </span>
+                {prettyDate(item.release_date)}
+              </p>
+            ) : (
+              ""
+            )}
+            {item.price ? (
+              <p className="text-sm justify-self-end">
+                <span className="material-icons !text-base translate-y-[.15em] mr-1">
+                  shopping_cart
+                </span>
+                {prettyPrice(item.price)}
+              </p>
+            ) : (
+              ""
+            )}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+

src/components/Panels/MainPanel.tsx

@@ -49,10 +49,10 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
       />
 
       <NavOption
-        url="/hubs"
+        url="/wiki"
-        icon="workspaces"
+        icon="travel_explore"
-        title={langui.main_hub}
+        title="Wiki"
-        subtitle={langui.main_hub_description}
+        subtitle="Explore all content of a specific game/series"
       />
 
       <NavOption
@@ -65,7 +65,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
       <HorizontalLine />
 
       <NavOption url="/news" icon="feed" title={langui.main_news} />
-      <NavOption url="/data" icon="travel_explore" title={langui.main_data} />
       <NavOption url="/merch" icon="store" title={langui.main_merch} />
       <NavOption
         url="/gallery"

src/components/Panels/SubPanel.tsx

@@ -4,7 +4,7 @@ type SubPanelProps = {
 
 export default function SubPanel(props: SubPanelProps): JSX.Element {
   return (
-    <div className="grid justify-center content-start p-8 gap-y-2 justify-items-center text-center">
+    <div className="grid p-8 gap-y-2 justify-items-center text-center">
       {props.children}
     </div>
   );

src/graphql/operation.graphql

@@ -478,6 +478,94 @@ query getContentsSlugs {
   }
 }
 
+query getContents($language_code: String) {
+	contents(pagination: { limit: -1 }) {
+		data {
+      id
+			attributes {
+				slug
+				titles(filters: { language: { code: { eq: $language_code } } }) {
+					pre_title
+					title
+					subtitle
+				}
+				categories {
+					data {
+						id
+						attributes {
+							short
+						}
+					}
+				}
+				type {
+					data {
+						attributes {
+							slug
+							titles(filters: { language: { code: { eq: $language_code } } }) {
+								title
+							}
+						}
+					}
+				}
+				ranged_contents {
+					data {
+						id
+						attributes {
+							slug
+							scan_set {
+								id
+							}
+							library_item {
+								data {
+									attributes {
+										slug
+										title
+										subtitle
+										thumbnail {
+											data {
+												attributes {
+													name
+													alternativeText
+													caption
+													width
+													height
+													url
+												}
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+				text_set {
+					id
+				}
+				video_set {
+					id
+				}
+				audio_set {
+					id
+				}
+				thumbnail {
+					data {
+						attributes {
+							name
+							alternativeText
+							caption
+							width
+							height
+							url
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+
 query getContent($slug: String, $language_code: String) {
   contents(filters: { slug: { eq: $slug } }) {
     data {

src/graphql/operations-types.ts

@@ -673,6 +673,122 @@ export type GetContentQueryVariables = Exact<{
   language_code: InputMaybe<Scalars["String"]>;
 }>;
 
+export type GetContentsQueryVariables = Exact<{
+  language_code: InputMaybe<Scalars["String"]>;
+}>;
+
+export type GetContentsQuery = {
+  __typename: "Query";
+  contents: {
+    __typename: "ContentEntityResponseCollection";
+    data: Array<{
+      __typename: "ContentEntity";
+      id: string;
+      attributes: {
+        __typename: "Content";
+        slug: string;
+        titles: Array<{
+          __typename: "ComponentTranslationsTitle";
+          pre_title: string ;
+          title: string;
+          subtitle: string ;
+        } > ;
+        categories: {
+          __typename: "CategoryRelationResponseCollection";
+          data: Array<{
+            __typename: "CategoryEntity";
+            id: string ;
+            attributes: { __typename: "Category"; short: string } ;
+          }>;
+        } ;
+        type: {
+          __typename: "ContentTypeEntityResponse";
+          data: {
+            __typename: "ContentTypeEntity";
+            attributes: {
+              __typename: "ContentType";
+              slug: string;
+              titles: Array<{
+                __typename: "ComponentTranslationsSimpleTitle";
+                title: string;
+              } > ;
+            } ;
+          } ;
+        } ;
+        ranged_contents: {
+          __typename: "RangedContentRelationResponseCollection";
+          data: Array<{
+            __typename: "RangedContentEntity";
+            id: string ;
+            attributes: {
+              __typename: "RangedContent";
+              slug: string;
+              scan_set: Array<{
+                __typename: "ComponentSetsScanSet";
+                id: string;
+              } > ;
+              library_item: {
+                __typename: "LibraryItemEntityResponse";
+                data: {
+                  __typename: "LibraryItemEntity";
+                  attributes: {
+                    __typename: "LibraryItem";
+                    slug: string;
+                    title: string;
+                    subtitle: string ;
+                    thumbnail: {
+                      __typename: "UploadFileEntityResponse";
+                      data: {
+                        __typename: "UploadFileEntity";
+                        attributes: {
+                          __typename: "UploadFile";
+                          name: string;
+                          alternativeText: string ;
+                          caption: string ;
+                          width: number ;
+                          height: number ;
+                          url: string;
+                        } ;
+                      } ;
+                    } ;
+                  } ;
+                } ;
+              } ;
+            } ;
+          }>;
+        } ;
+        text_set: Array<{
+          __typename: "ComponentSetsTextSet";
+          id: string;
+        } > ;
+        video_set: Array<{
+          __typename: "ComponentSetsVideoSet";
+          id: string;
+        } > ;
+        audio_set: Array<{
+          __typename: "ComponentSetsAudioSet";
+          id: string;
+        } > ;
+        thumbnail: {
+          __typename: "UploadFileEntityResponse";
+          data: {
+            __typename: "UploadFileEntity";
+            attributes: {
+              __typename: "UploadFile";
+              name: string;
+              alternativeText: string ;
+              caption: string ;
+              width: number ;
+              height: number ;
+              url: string;
+            } ;
+          } ;
+        } ;
+      } ;
+    }>;
+  } ;
+};
+
 export type GetContentQuery = {
   __typename: "Query";
   contents: {

src/graphql/operations.ts

@@ -5,6 +5,8 @@ import {
   GetChronologyItemsQueryVariables,
   GetContentQuery,
   GetContentQueryVariables,
+  GetContentsQuery,
+  GetContentsQueryVariables,
   GetContentsSlugsQuery,
   GetContentsSlugsQueryVariables,
   GetContentTextQuery,
@@ -101,6 +103,14 @@ export async function getContentsSlugs(
   return await graphQL(query, JSON.stringify(variables));
 }
 
+
+export async function getContents(
+  variables: GetContentsQueryVariables
+): Promise<GetContentsQuery> {
+  const query = getQueryFromOperations("getContents");
+  return await graphQL(query, JSON.stringify(variables));
+}
+
 export async function getContent(
   variables: GetContentQueryVariables
 ): Promise<GetContentQuery> {

src/pages/library/content/index.tsx

@@ -0,0 +1,74 @@
+import { GetStaticProps } from "next";
+import SubPanel from "components/Panels/SubPanel";
+import ContentPanel, {
+  ContentPanelWidthSizes,
+} from "components/Panels/ContentPanel";
+import {
+  GetContentsQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
+import { getContents, getWebsiteInterface } from "graphql/operations";
+import PanelHeader from "components/PanelComponents/PanelHeader";
+import AppLayout from "components/AppLayout";
+import ReturnButton from "components/PanelComponents/ReturnButton";
+import HorizontalLine from "components/HorizontalLine";
+import LibraryContentPreview from "components/Library/LibraryContentPreview";
+
+type LibraryProps = {
+  contents: GetContentsQuery;
+  langui: GetWebsiteInterfaceQuery;
+};
+
+export default function Library(props: LibraryProps): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const subPanel = (
+    <SubPanel>
+      <ReturnButton
+        href="/library"
+        title={langui.main_library}
+        langui={langui}
+      />
+      <HorizontalLine />
+      <PanelHeader
+        icon="library_books"
+        title="Content"
+        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>
+  );
+  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
+      title="Library"
+      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/library/index.tsx

@@ -1,22 +1,16 @@
 import { GetStaticProps } from "next";
 import SubPanel from "components/Panels/SubPanel";
-import ContentPanel, {
-  ContentPanelWidthSizes,
-} from "components/Panels/ContentPanel";
-import LibraryItemComponent from "components/Library/LibraryItemComponent";
 import {
-  GetLibraryItemsPreviewQuery,
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
 import {
-  getLibraryItemsPreview,
   getWebsiteInterface,
 } from "graphql/operations";
 import PanelHeader from "components/PanelComponents/PanelHeader";
 import AppLayout from "components/AppLayout";
+import NavOption from "components/PanelComponents/NavOption";
 
 type LibraryProps = {
-  libraryItems: GetLibraryItemsPreviewQuery;
   langui: GetWebsiteInterfaceQuery;
 };
 
@@ -27,35 +21,29 @@ export default function Library(props: LibraryProps): JSX.Element {
       <PanelHeader
         icon="library_books"
         title={langui.main_library}
-        description={langui.library_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="/library/items"
+        title="Items"
+        subtitle="A comprehensive list of all Yokoverse’s physical or digital items"
+        border={true}
+      />
+      <NavOption
+        url="/library/content"
+        title="Content"
+        subtitle="Search for a specific content depending on its type or category"
+        border={true}
       />
     </SubPanel>
   );
-  const contentPanel = (
+
-    <ContentPanel width={ContentPanelWidthSizes.large}>
+  return <AppLayout title="Library" langui={langui} subPanel={subPanel} />;
-      <div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(14rem,1fr))]">
-        {props.libraryItems.libraryItems.data.map((item) => (
-          <LibraryItemComponent key={item.id} item={item.attributes} />
-        ))}
-      </div>
-    </ContentPanel>
-  );
-  return (
-    <AppLayout
-      title="Library"
-      langui={langui}
-      subPanel={subPanel}
-      contentPanel={contentPanel}
-    />
-  );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
   if (context.locale) {
     const props: LibraryProps = {
-      libraryItems: await getLibraryItemsPreview({
-        language_code: context.locale,
-      }),
       langui: await getWebsiteInterface({
         language_code: context.locale,
       }),

src/pages/library/items/[slug].tsx

@@ -25,11 +25,11 @@ import {
 import SubPanel from "components/Panels/SubPanel";
 import ReturnButton from "components/PanelComponents/ReturnButton";
 import NavOption from "components/PanelComponents/NavOption";
-import LibraryItemComponent from "components/Library/LibraryItemComponent";
 import Chip from "components/Chip";
 import Button from "components/Button";
 import HorizontalLine from "components/HorizontalLine";
 import AppLayout from "components/AppLayout";
+import LibraryMediaPreview from "components/Library/LibraryItemsPreview";
 
 type LibrarySlugProps = {
   libraryItem: GetLibraryItemQuery;
@@ -42,8 +42,8 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
   const subPanel = (
     <SubPanel>
       <ReturnButton
-        title={langui.main_library}
+        href="/library/items"
-        href="/library"
+        title="Media"
         langui={langui}
       />
       <HorizontalLine />
@@ -370,7 +370,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
               <h2 className="text-2xl">{langui.library_item_variants}</h2>
               <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
                 {item.subitems.data.map((variant) => (
-                  <LibraryItemComponent
+                  <LibraryMediaPreview
                     key={variant.id}
                     item={variant.attributes}
                   />
@@ -382,7 +382,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
               <h2 className="text-2xl">{langui.library_item_subitems}</h2>
               <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
                 {item.subitems.data.map((subitem) => (
-                  <LibraryItemComponent
+                  <LibraryMediaPreview
                     key={subitem.id}
                     item={subitem.attributes}
                   />

src/pages/library/items/index.tsx

@@ -0,0 +1,77 @@
+import { GetStaticProps } from "next";
+import SubPanel from "components/Panels/SubPanel";
+import ContentPanel, {
+  ContentPanelWidthSizes,
+} from "components/Panels/ContentPanel";
+import {
+  GetLibraryItemsPreviewQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
+import {
+  getLibraryItemsPreview,
+  getWebsiteInterface,
+} from "graphql/operations";
+import PanelHeader from "components/PanelComponents/PanelHeader";
+import AppLayout from "components/AppLayout";
+import ReturnButton from "components/PanelComponents/ReturnButton";
+import HorizontalLine from "components/HorizontalLine";
+import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
+
+type LibraryProps = {
+  libraryItems: GetLibraryItemsPreviewQuery;
+  langui: GetWebsiteInterfaceQuery;
+};
+
+export default function Library(props: LibraryProps): JSX.Element {
+  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const subPanel = (
+    <SubPanel>
+      <ReturnButton
+        href="/library"
+        title={langui.main_library}
+        langui={langui}
+      />
+      <HorizontalLine />
+      <PanelHeader
+        icon="library_books"
+        title="Media"
+        description="A comprehensive list of all Yokoverse’s side materials (books, novellas, artbooks, stage plays, manga, drama CDs, and comics). For each, we provide photos and/or scans of the content, information about what it is, when and how it was released, size, initial price…"
+      />
+    </SubPanel>
+  );
+  const contentPanel = (
+    <ContentPanel width={ContentPanelWidthSizes.large}>
+      <div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]">
+        {props.libraryItems.libraryItems.data.map((item) => (
+          <LibraryItemsPreview key={item.id} item={item.attributes} />
+        ))}
+      </div>
+    </ContentPanel>
+  );
+  return (
+    <AppLayout
+      title="Library"
+      langui={langui}
+      subPanel={subPanel}
+      contentPanel={contentPanel}
+    />
+  );
+}
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  if (context.locale) {
+    const props: LibraryProps = {
+      libraryItems: await getLibraryItemsPreview({
+        language_code: context.locale,
+      }),
+      langui: await getWebsiteInterface({
+        language_code: context.locale,
+      }),
+    };
+    return {
+      props: props,
+    };
+  } else {
+    return { props: {} };
+  }
+};

src/pages/wiki/index.tsx

@@ -1,61 +1,41 @@
 import SubPanel from "components/Panels/SubPanel";
-import NavOption from "components/PanelComponents/NavOption";
 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";
 
-type DataProps = {
+type WikiProps = {
   langui: GetWebsiteInterfaceQuery;
 };
 
-export default function Data(props: DataProps): JSX.Element {
+export default function Hubs(props: WikiProps): JSX.Element {
   const langui = props.langui.websiteInterfaces.data[0].attributes;
   const subPanel = (
     <SubPanel>
       <PanelHeader
         icon="travel_explore"
-        title={langui.main_data}
+        title="Wiki"
         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="/data/timelines"
-        title={langui.chronology_timelines}
-        subtitle={langui.chronology_timelines_description}
-        border={true}
-      />
-
-      <NavOption
-        url="/data/chronology"
-        title="Chronology"
-        subtitle={langui.chronology_overview_description}
-        border={true}
-      />
-
-      <NavOption
-        url="/data/weapon-stories"
-        title="Weapon Stories"
-        subtitle="Reiciendis id reiciendis at ullam."
-        border={true}
-      />
-
-      <NavOption
-        url="/data/glossary"
-        title="Glossary"
-        subtitle="Reiciendis id reiciendis at ullam."
-        border={true}
-      />
     </SubPanel>
   );
+  const contentPanel = <ContentPanel>Hello</ContentPanel>;
 
-  return <AppLayout title="Content" langui={langui} subPanel={subPanel} />;
+  return (
+    <AppLayout
+      title="Wiki"
+      langui={langui}
+      contentPanel={contentPanel}
+      subPanel={subPanel}
+    />
+  );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
   if (context.locale) {
-    const props: DataProps = {
+    const props: WikiProps = {
       langui: await getWebsiteInterface({
         language_code: context.locale,
       }),