Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Support for mobile view, new app layout system

This commit is contained in:
DrMint 2022-02-15 15:50:51 +01:00
parent cc9bed6667
commit f13b93887f
33 changed files with 1175 additions and 1111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/AppLayout.tsx Normal file
View File

@ -0,0 +1,108 @@
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import MainPanel from "./Panels/MainPanel";
import { useState } from "react";
import Head from "next/head";
type AppLayoutProps = {
subPanel?: React.ReactNode;
subPanelIcon?: string;
contentPanel?: React.ReactNode;
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
title: string;
};
export default function AppLayout(props: AppLayoutProps): JSX.Element {
const titlePrefix = "Accord’s Library";
const [mainPanelOpen, setMainPanelOpen] = useState(false);
const [subPanelOpen, setsubPanelOpen] = useState(false);
const mainPanelClass =
"fixed desktop:left-0 desktop:top-0 desktop:bottom-0 desktop:w-[20rem]";
const subPanelClass =
"fixed desktop:left-[20rem] desktop:top-0 desktop:bottom-0 desktop:w-[20rem]";
let contentPanelClass = "";
if (props.subPanel && props.contentPanel) {
contentPanelClass =
"fixed desktop:left-[40rem] desktop:top-0 desktop:bottom-0 desktop:right-0";
} else if (props.contentPanel) {
contentPanelClass =
"fixed desktop:left-[20rem] desktop:top-0 desktop:bottom-0 desktop:right-0";
}
return (
<>
<Head>
<title>
{props.title ? `${titlePrefix} - ${props.title}` : titlePrefix}
</title>
</Head>
{/* Navbar */}
<div className="fixed bottom-0 left-0 right-0 h-20 bg-light border-t-[1px] border-dark grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden">
<span
id="navbar-main-button"
className="material-icons mt-[.1em] cursor-pointer"
onClick={() => setMainPanelOpen(true)}
>
menu
</span>
<p className="text-2xl font-black font-headers">{props.title}</p>
<span
className="material-icons mt-[.1em] cursor-pointer"
onClick={() => setsubPanelOpen(true)}
>
{props.subPanel
? props.subPanelIcon
? props.subPanelIcon
: "tune"
: ""}
</span>
</div>
{/* Content panel */}
{props.contentPanel ? (
<div
className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll ${contentPanelClass}`}
>
{props.contentPanel}
</div>
) : (
""
)}
{/* Background when navbar is opened */}
<div
className={`fixed bg-dark inset-0 transition-opacity duration-500 ${
mainPanelOpen || subPanelOpen
? " opacity-50"
: "opacity-0 translate-x-full"
}`}
onClick={() => {
setMainPanelOpen(false);
setsubPanelOpen(false);
}}
></div>
{/* Main panel */}
<div
className={`${mainPanelClass} border-r-[1px] border-black top-0 bottom-0 left-0 right-12 bg-light overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-500
${mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
>
<MainPanel langui={props.langui} />
</div>
{/* Sub panel */}
{props.subPanel ? (
<div
className={`${subPanelClass} border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black top-0 bottom-0 right-0 left-12 bg-light overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-500
${subPanelOpen ? "" : "mobile:translate-x-full"}`}
>
{props.subPanel}
</div>
) : (
""
)}
</>
);
}

11
src/components/Chronology/ChronologyItemComponent.tsx
View File

@ -104,9 +104,14 @@ export default function ChronologyItemComponent(
))} ))}
<p className="text-dark text-xs inline-grid place-items-center grid-flow-col gap-1"> <p className="text-dark text-xs inline-grid place-items-center grid-flow-col gap-1">
{event.source.data {event.source.data ? (
? "(" + event.source.data.attributes.name + ")" "(" + event.source.data.attributes.name + ")"
: <><span className="material-icons !text-sm">warning</span>No sources!</>} ) : (
<>
<span className="material-icons !text-sm">warning</span>No
sources!
</>
)}
</p> </p>
</div> </div>
))} ))}

6
src/components/Content/ThumbnailHeader.tsx
View File

@ -6,7 +6,7 @@ import { getAssetURL, prettySlug } from "queries/helpers";
import Image from "next/image"; import Image from "next/image";
import Button from "components/Button"; import Button from "components/Button";
export type Props = { export type ThumbnailHeaderProps = {
content: { content: {
slug: GetContentQuery["contents"]["data"][number]["attributes"]["slug"]; slug: GetContentQuery["contents"]["data"][number]["attributes"]["slug"];
thumbnail: GetContentQuery["contents"]["data"][number]["attributes"]["thumbnail"]; thumbnail: GetContentQuery["contents"]["data"][number]["attributes"]["thumbnail"];
@ -17,7 +17,9 @@ export type Props = {
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
}; };
export default function ThumbnailHeader(props: Props): JSX.Element { export default function ThumbnailHeader(
props: ThumbnailHeaderProps
): JSX.Element {
const content = props.content; const content = props.content;
const langui = props.langui; const langui = props.langui;

6
src/components/HorizontalLine.tsx
View File

@ -7,11 +7,7 @@ export default function HorizontalLine(
): JSX.Element { ): JSX.Element {
return ( return (
<div <div
className={ className={`h-0 w-full my-8 border-t-[3px] border-dotted border-black ${props.className}`}
"h-0 w-full my-8 border-t-[3px] border-dotted border-black" +
" " +
props.className
}
></div> ></div>
); );
} }

10
src/components/Markdown/SceneBreak.tsx
View File

@ -3,5 +3,13 @@ type ScenBreakProps = {
}; };
export default function SceneBreak(props: ScenBreakProps): JSX.Element { export default function SceneBreak(props: ScenBreakProps): JSX.Element {
return <div className={"h-0 text-center text-3xl text-dark mt-16 mb-20" + " " + props.className}>* * *</div>; return (
<div
className={
"h-0 text-center text-3xl text-dark mt-16 mb-20" + " " + props.className
}
>
* * *
</div>
);
} }

6
src/components/PanelComponents/NavOption.tsx
View File

@ -12,9 +12,11 @@ type NavOptionProps = {
export default function NavOption(props: NavOptionProps): JSX.Element { export default function NavOption(props: NavOptionProps): JSX.Element {
const router = useRouter(); const router = useRouter();
const isActive = router.asPath.startsWith(props.url); const isActive = router.asPath.startsWith(props.url);
const divActive = "bg-mid" const divActive = "bg-mid";
const border = "border-2 border-mid"; const border = "border-2 border-mid";
const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid transition-colors ${props.border ? border: ""} ${isActive ? divActive : ""}`; const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid transition-colors ${
props.border ? border : ""
} ${isActive ? divActive : ""}`;
if (props.icon) { if (props.icon) {
return ( return (

4
src/components/PanelComponents/PanelHeader.tsx
View File

@ -1,12 +1,12 @@
import HorizontalLine from "components/HorizontalLine"; import HorizontalLine from "components/HorizontalLine";
type NavOptionProps = { type PanelHeaderProps = {
icon?: string; icon?: string;
title: string; title: string;
description?: string; description?: string;
}; };
export default function PanelHeader(props: NavOptionProps): JSX.Element { export default function PanelHeader(props: PanelHeaderProps): JSX.Element {
return ( return (
<div className="w-full grid place-items-center"> <div className="w-full grid place-items-center">
{props.icon ? ( {props.icon ? (

6
src/components/PanelComponents/ReturnButton.tsx
View File

@ -8,5 +8,9 @@ type ReturnButtonProps = {
}; };
export default function ReturnButton(props: ReturnButtonProps): JSX.Element { export default function ReturnButton(props: ReturnButtonProps): JSX.Element {
return <Button href={props.href}>❮&emsp;{props.langui.global_return_label} {props.title}</Button>; return (
<Button href={props.href}>
❮&emsp;{props.langui.global_return_label} {props.title}
</Button>
);
} }

5
src/components/Panels/ContentPanel.tsx
View File

@ -11,11 +11,12 @@ export enum ContentPanelWidthSizes {
export default function ContentPanel(props: ContentPanelProps): JSX.Element { export default function ContentPanel(props: ContentPanelProps): JSX.Element {
const width = props.width ? props.width : ContentPanelWidthSizes.default; const width = props.width ? props.width : ContentPanelWidthSizes.default;
const widthCSS = width === ContentPanelWidthSizes.default ? "w-[45rem]" : "w-full"; const widthCSS =
width === ContentPanelWidthSizes.default ? "max-w-[45rem]" : "w-full";
const prose = props.autoformat ? "prose" : ""; const prose = props.autoformat ? "prose" : "";
return ( return (
<div className={`grid overflow-y-scroll max-h-screen h-screen py-20 px-10`}> <div className={`grid pt-10 pb-20 px-6 desktop:py-20 desktop:px-10`}>
<main className={`${prose} ${widthCSS} place-self-center text-justify`}> <main className={`${prose} ${widthCSS} place-self-center text-justify`}>
{props.children} {props.children}
</main> </main>

6
src/components/Panels/MainPanel.tsx
View File

@ -7,15 +7,15 @@ import HorizontalLine from "components/HorizontalLine";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import Markdown from "markdown-to-jsx"; import Markdown from "markdown-to-jsx";
type Props = { type MainPanelProps = {
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
}; };
export default function MainPanel(props: Props): JSX.Element { export default function MainPanel(props: MainPanelProps): JSX.Element {
const langui = props.langui; const langui = props.langui;
const router = useRouter(); const router = useRouter();
return ( return (
<div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] overflow-y-scroll border-r-[1px] border-black max-h-screen h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center"> <div className="grid justify-center content-start p-8 gap-y-2 justify-items-center text-center">
<div className=""> <div className="">
<div className="grid place-items-center"> <div className="grid place-items-center">
<Link href="/" passHref> <Link href="/" passHref>

2
src/components/Panels/SubPanel.tsx
View File

@ -4,7 +4,7 @@ type SubPanelProps = {
export default function SubPanel(props: SubPanelProps): JSX.Element { export default function SubPanel(props: SubPanelProps): JSX.Element {
return ( return (
<div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] overflow-y-scroll border-r-[1px] border-black max-h-screen h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center"> <div className="grid justify-center content-start p-8 gap-y-2 justify-items-center text-center">
{props.children} {props.children}
</div> </div>
); );

7
src/components/SVG.tsx
View File

@ -9,12 +9,7 @@ export type SVGProps = {
export default function SVG(props: SVGProps): JSX.Element { export default function SVG(props: SVGProps): JSX.Element {
return ( return (
<div className={props.className}> <div className={props.className}>
<Image <Image src={props.src} alt={props.src} height={1000} width={1000} />
src={props.src}
alt={props.src}
height={1000}
width={1000}
/>
</div> </div>
); );
} }

18
src/graphql/operation.graphql
View File

@ -268,12 +268,14 @@ query getLibraryItem($slug: String, $language_code: String) {
} }
} }
... on ComponentMetadataVideo { ... on ComponentMetadataVideo {
resolution subtype {
audio_languages {
data { data {
attributes { attributes {
code titles(
name filters: { language: { code: { eq: $language_code } } }
) {
title
}
} }
} }
} }
@ -324,14 +326,6 @@ query getLibraryItem($slug: String, $language_code: String) {
} }
} }
} }
languages {
data {
attributes {
code
name
}
}
}
} }
... on ComponentMetadataOther { ... on ComponentMetadataOther {
subtype { subtype {

30
src/graphql/operations-types.ts
View File

@ -403,18 +403,19 @@ export type GetLibraryItemQuery = {
} }
| { | {
__typename: "ComponentMetadataVideo"; __typename: "ComponentMetadataVideo";
resolution: Enum_Componentmetadatavideo_Resolution; subtype: {
audio_languages: { __typename: "VideoSubtypeEntityResponse";
__typename: "LanguageRelationResponseCollection"; data: {
data: Array<{ __typename: "VideoSubtypeEntity";
__typename: "LanguageEntity";
attributes: { attributes: {
__typename: "Language"; __typename: "VideoSubtype";
code: string; titles: Array<{
name: string; __typename: "ComponentTranslationsSimpleTitle";
}; title: string;
}>; }>;
}; };
};
};
} }
| { | {
__typename: "ComponentMetadataGame"; __typename: "ComponentMetadataGame";
@ -478,17 +479,6 @@ export type GetLibraryItemQuery = {
}; };
}; };
}; };
languages: {
__typename: "LanguageRelationResponseCollection";
data: Array<{
__typename: "LanguageEntity";
attributes: {
__typename: "Language";
code: string;
name: string;
};
}>;
};
} }
| { | {
__typename: "ComponentMetadataOther"; __typename: "ComponentMetadataOther";

127
src/graphql/schema.graphql
View File

@ -430,11 +430,6 @@ type ComponentCollectionsComponentWeaponStory {
type ComponentMetadataAudio { type ComponentMetadataAudio {
id: ID! id: ID!
languages(
filters: LanguageFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): LanguageRelationResponseCollection
subtype: AudioSubtypeEntityResponse subtype: AudioSubtypeEntityResponse
} }
@ -492,22 +487,9 @@ type ComponentMetadataOther {
subtype: OtherSubtypeEntityResponse subtype: OtherSubtypeEntityResponse
} }
enum ENUM_COMPONENTMETADATAVIDEO_RESOLUTION {
SD_480p
HD_720p
FullHD_1080p
QuadHD_2160p
}
type ComponentMetadataVideo { type ComponentMetadataVideo {
id: ID! id: ID!
resolution: ENUM_COMPONENTMETADATAVIDEO_RESOLUTION subtype: VideoSubtypeEntityResponse
audio_languages(
filters: LanguageFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): LanguageRelationResponseCollection
sub_languages: LanguageEntityResponse
} }
input ComponentPageBuilderComponentPaneFiltersInput { input ComponentPageBuilderComponentPaneFiltersInput {
@ -2193,6 +2175,46 @@ type TextualSubtypeEntityResponseCollection {
meta: ResponseCollectionMeta! meta: ResponseCollectionMeta!
} }
input VideoSubtypeFiltersInput {
id: IDFilterInput
slug: StringFilterInput
createdAt: DateTimeFilterInput
updatedAt: DateTimeFilterInput
and: [VideoSubtypeFiltersInput]
or: [VideoSubtypeFiltersInput]
not: VideoSubtypeFiltersInput
}
input VideoSubtypeInput {
slug: String
titles: [ComponentTranslationsSimpleTitleInput]
}
type VideoSubtype {
slug: String!
titles(
filters: ComponentTranslationsSimpleTitleFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): [ComponentTranslationsSimpleTitle]
createdAt: DateTime
updatedAt: DateTime
}
type VideoSubtypeEntity {
id: ID
attributes: VideoSubtype
}
type VideoSubtypeEntityResponse {
data: VideoSubtypeEntity
}
type VideoSubtypeEntityResponseCollection {
data: [VideoSubtypeEntity!]!
meta: ResponseCollectionMeta!
}
input WeaponStoryFiltersInput { input WeaponStoryFiltersInput {
id: IDFilterInput id: IDFilterInput
slug: StringFilterInput slug: StringFilterInput
@ -2379,6 +2401,24 @@ input WebsiteInterfaceFiltersInput {
chronology_overview_description: StringFilterInput chronology_overview_description: StringFilterInput
chronology_walkthrough: StringFilterInput chronology_walkthrough: StringFilterInput
chronology_walkthrough_description: StringFilterInput chronology_walkthrough_description: StringFilterInput
library_item_front_matter: StringFilterInput
library_item_back_matter: StringFilterInput
library_item_type_textual: StringFilterInput
library_item_type_audio: StringFilterInput
library_item_type_game: StringFilterInput
library_item_type_video: StringFilterInput
library_item_type_other: StringFilterInput
library_item_open_content: StringFilterInput
library_item_view_scans: StringFilterInput
content_read_content: StringFilterInput
content_watch_content: StringFilterInput
content_listen_content: StringFilterInput
global_category: StringFilterInput
global_categories: StringFilterInput
global_paperback: StringFilterInput
global_hardcover: StringFilterInput
global_left_to_right: StringFilterInput
global_right_to_left: StringFilterInput
createdAt: DateTimeFilterInput createdAt: DateTimeFilterInput
updatedAt: DateTimeFilterInput updatedAt: DateTimeFilterInput
and: [WebsiteInterfaceFiltersInput] and: [WebsiteInterfaceFiltersInput]
@ -2432,6 +2472,24 @@ input WebsiteInterfaceInput {
chronology_overview_description: String chronology_overview_description: String
chronology_walkthrough: String chronology_walkthrough: String
chronology_walkthrough_description: String chronology_walkthrough_description: String
library_item_front_matter: String
library_item_back_matter: String
library_item_type_textual: String
library_item_type_audio: String
library_item_type_game: String
library_item_type_video: String
library_item_type_other: String
library_item_open_content: String
library_item_view_scans: String
content_read_content: String
content_watch_content: String
content_listen_content: String
global_category: String
global_categories: String
global_paperback: String
global_hardcover: String
global_left_to_right: String
global_right_to_left: String
} }
type WebsiteInterface { type WebsiteInterface {
@ -2480,6 +2538,24 @@ type WebsiteInterface {
chronology_overview_description: String chronology_overview_description: String
chronology_walkthrough: String chronology_walkthrough: String
chronology_walkthrough_description: String chronology_walkthrough_description: String
library_item_front_matter: String
library_item_back_matter: String
library_item_type_textual: String
library_item_type_audio: String
library_item_type_game: String
library_item_type_video: String
library_item_type_other: String
library_item_open_content: String
library_item_view_scans: String
content_read_content: String
content_watch_content: String
content_listen_content: String
global_category: String
global_categories: String
global_paperback: String
global_hardcover: String
global_left_to_right: String
global_right_to_left: String
createdAt: DateTime createdAt: DateTime
updatedAt: DateTime updatedAt: DateTime
} }
@ -2567,6 +2643,7 @@ union GenericMorph =
| Recorder | Recorder
| Source | Source
| TextualSubtype | TextualSubtype
| VideoSubtype
| WeaponStory | WeaponStory
| WeaponStoryGroup | WeaponStoryGroup
| WeaponStoryType | WeaponStoryType
@ -2707,6 +2784,12 @@ type Query {
pagination: PaginationArg = {} pagination: PaginationArg = {}
sort: [String] = [] sort: [String] = []
): TextualSubtypeEntityResponseCollection ): TextualSubtypeEntityResponseCollection
videoSubtype(id: ID): VideoSubtypeEntityResponse
videoSubtypes(
filters: VideoSubtypeFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): VideoSubtypeEntityResponseCollection
weaponStory(id: ID): WeaponStoryEntityResponse weaponStory(id: ID): WeaponStoryEntityResponse
weaponStories( weaponStories(
filters: WeaponStoryFiltersInput filters: WeaponStoryFiltersInput
@ -2823,6 +2906,12 @@ type Mutation {
data: TextualSubtypeInput! data: TextualSubtypeInput!
): TextualSubtypeEntityResponse ): TextualSubtypeEntityResponse
deleteTextualSubtype(id: ID!): TextualSubtypeEntityResponse deleteTextualSubtype(id: ID!): TextualSubtypeEntityResponse
createVideoSubtype(data: VideoSubtypeInput!): VideoSubtypeEntityResponse
updateVideoSubtype(
id: ID!
data: VideoSubtypeInput!
): VideoSubtypeEntityResponse
deleteVideoSubtype(id: ID!): VideoSubtypeEntityResponse
createWeaponStory(data: WeaponStoryInput!): WeaponStoryEntityResponse createWeaponStory(data: WeaponStoryInput!): WeaponStoryEntityResponse
updateWeaponStory(id: ID!, data: WeaponStoryInput!): WeaponStoryEntityResponse updateWeaponStory(id: ID!, data: WeaponStoryInput!): WeaponStoryEntityResponse
deleteWeaponStory(id: ID!): WeaponStoryEntityResponse deleteWeaponStory(id: ID!): WeaponStoryEntityResponse

24
src/pages/404.tsx
View File

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

30
src/pages/_app.tsx
View File

@ -1,37 +1,9 @@
import type { AppProps } from "next/app"; import type { AppProps } from "next/app";
import MainPanel from "components/Panels/MainPanel";
import "tailwind.css"; import "tailwind.css";
import "@fontsource/zen-maru-gothic/500.css"; import "@fontsource/zen-maru-gothic/500.css";
import "@fontsource/vollkorn/700.css"; import "@fontsource/vollkorn/700.css";
import "@fontsource/material-icons"; import "@fontsource/material-icons";
export type CustomAppProps = {
useSubPanel: boolean;
useContentPanel: boolean;
};
export function applyCustomAppProps(
page: Function,
customAppProps: CustomAppProps
) {
page.customAppProps = customAppProps;
}
export default function AccordsLibraryApp(appProps: AppProps) { export default function AccordsLibraryApp(appProps: AppProps) {
return ( return <appProps.Component {...appProps.pageProps} />;
<div
className={
appProps.Component.customAppProps.useSubPanel &&
appProps.Component.customAppProps.useContentPanel
? "grid grid-cols-[20rem_20rem_1fr]"
: appProps.Component.customAppProps.useSubPanel
? "grid grid-cols-[20rem_20rem]"
: appProps.Component.customAppProps.useContentPanel
? "grid grid-cols-[20rem_1fr]"
: "grid grid-cols-[20rem]"
}
>
<appProps.Component {...appProps.pageProps} />
</div>
);
} }

22
src/pages/about-us/index.tsx
View File

@ -1,26 +1,17 @@
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import { applyCustomAppProps } from "pages/_app";
import PanelHeader from "components/PanelComponents/PanelHeader"; import PanelHeader from "components/PanelComponents/PanelHeader";
import MainPanel from "components/Panels/MainPanel";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next"; import { GetStaticProps } from "next";
import { getWebsiteInterface } from "graphql/operations"; import { getWebsiteInterface } from "graphql/operations";
import ContentPanel from "components/Panels/ContentPanel"; import AppLayout from "components/AppLayout";
applyCustomAppProps(AboutUs, { type AboutUsProps = {
useSubPanel: true,
useContentPanel: true,
});
type Props = {
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
}; };
export default function AboutUs(props: Props): JSX.Element { export default function AboutUs(props: AboutUsProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
return ( const subPanel = (
<>
<MainPanel langui={langui} />
<SubPanel> <SubPanel>
<PanelHeader <PanelHeader
icon="info" icon="info"
@ -28,14 +19,13 @@ export default function AboutUs(props: Props): JSX.Element {
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." 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> </SubPanel>
<ContentPanel>Hello</ContentPanel>
</>
); );
return <AppLayout title="404" langui={langui} subPanel={subPanel} />;
} }
export const getStaticProps: GetStaticProps = async (context) => { export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) { if (context.locale) {
const props: Props = { const props: AboutUsProps = {
langui: await getWebsiteInterface({ langui: await getWebsiteInterface({
language_code: context.locale, language_code: context.locale,
}), }),

22
src/pages/archives/index.tsx
View File

@ -1,26 +1,17 @@
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import { applyCustomAppProps } from "pages/_app";
import PanelHeader from "components/PanelComponents/PanelHeader"; import PanelHeader from "components/PanelComponents/PanelHeader";
import MainPanel from "components/Panels/MainPanel";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next"; import { GetStaticProps } from "next";
import { getWebsiteInterface } from "graphql/operations"; import { getWebsiteInterface } from "graphql/operations";
import ContentPanel from "components/Panels/ContentPanel"; import AppLayout from "components/AppLayout";
applyCustomAppProps(Archives, { type ArchivesProps = {
useSubPanel: true,
useContentPanel: true,
});
type Props = {
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
}; };
export default function Archives(props: Props): JSX.Element { export default function Archives(props: ArchivesProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
return ( const subPanel = (
<>
<MainPanel langui={langui} />
<SubPanel> <SubPanel>
<PanelHeader <PanelHeader
icon="inventory" icon="inventory"
@ -28,14 +19,13 @@ export default function Archives(props: Props): JSX.Element {
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." 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> </SubPanel>
<ContentPanel>Hello</ContentPanel>
</>
); );
return <AppLayout title="Archives" langui={langui} subPanel={subPanel} />;
} }
export const getStaticProps: GetStaticProps = async (context) => { export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) { if (context.locale) {
const props: Props = { const props: ArchivesProps = {
langui: await getWebsiteInterface({ langui: await getWebsiteInterface({
language_code: context.locale, language_code: context.locale,
}), }),

22
src/pages/chronicles/index.tsx
View File

@ -1,26 +1,17 @@
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import { applyCustomAppProps } from "pages/_app";
import PanelHeader from "components/PanelComponents/PanelHeader"; import PanelHeader from "components/PanelComponents/PanelHeader";
import MainPanel from "components/Panels/MainPanel";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next"; import { GetStaticProps } from "next";
import { getWebsiteInterface } from "graphql/operations"; import { getWebsiteInterface } from "graphql/operations";
import ContentPanel from "components/Panels/ContentPanel"; import AppLayout from "components/AppLayout";
applyCustomAppProps(Chronicles, { type ChroniclesProps = {
useSubPanel: true,
useContentPanel: true,
});
type Props = {
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
}; };
export default function Chronicles(props: Props): JSX.Element { export default function Chronicles(props: ChroniclesProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
return ( const subPanel = (
<>
<MainPanel langui={langui} />
<SubPanel> <SubPanel>
<PanelHeader <PanelHeader
icon="watch_later" icon="watch_later"
@ -28,14 +19,13 @@ export default function Chronicles(props: Props): JSX.Element {
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." 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> </SubPanel>
<ContentPanel>Hello</ContentPanel>
</>
); );
return <AppLayout title="Chronicles" langui={langui} subPanel={subPanel} />;
} }
export const getStaticProps: GetStaticProps = async (context) => { export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) { if (context.locale) {
const props: Props = { const props: ChroniclesProps = {
langui: await getWebsiteInterface({ langui: await getWebsiteInterface({
language_code: context.locale, language_code: context.locale,
}), }),

26
src/pages/content/[slug]/index.tsx
View File

@ -1,5 +1,4 @@
import { GetStaticPaths, GetStaticProps } from "next"; import { GetStaticPaths, GetStaticProps } from "next";
import { applyCustomAppProps } from "pages/_app";
import { import {
getContent, getContent,
getContentsSlugs, getContentsSlugs,
@ -10,30 +9,20 @@ import {
GetWebsiteInterfaceQuery, GetWebsiteInterfaceQuery,
} from "graphql/operations-types"; } from "graphql/operations-types";
import ContentPanel from "components/Panels/ContentPanel"; import ContentPanel from "components/Panels/ContentPanel";
import Image from "next/image";
import { getAssetURL, prettySlug } from "queries/helpers";
import Button from "components/Button"; import Button from "components/Button";
import HorizontalLine from "components/HorizontalLine"; import HorizontalLine from "components/HorizontalLine";
import ThumbnailHeader from "components/Content/ThumbnailHeader"; import ThumbnailHeader from "components/Content/ThumbnailHeader";
import MainPanel from "components/Panels/MainPanel"; import AppLayout from "components/AppLayout";
type Props = { type ContentIndexProps = {
content: GetContentQuery; content: GetContentQuery;
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
}; };
applyCustomAppProps(Library, { export default function ContentIndex(props: ContentIndexProps): JSX.Element {
useSubPanel: false,
useContentPanel: true,
});
export default function Library(props: Props): JSX.Element {
const content = props.content.contents.data[0].attributes; const content = props.content.contents.data[0].attributes;
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
const contentPanel = (
return (
<>
<MainPanel langui={langui} />
<ContentPanel> <ContentPanel>
<div className="grid place-items-center"> <div className="grid place-items-center">
<ThumbnailHeader content={content} langui={langui} /> <ThumbnailHeader content={content} langui={langui} />
@ -65,7 +54,10 @@ export default function Library(props: Props): JSX.Element {
)} )}
</div> </div>
</ContentPanel> </ContentPanel>
</> );
return (
<AppLayout title="Content" langui={langui} contentPanel={contentPanel} />
); );
} }
@ -75,7 +67,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
if (context.params.slug instanceof Array) if (context.params.slug instanceof Array)
context.params.slug = context.params.slug.join(""); context.params.slug = context.params.slug.join("");
const props: Props = { const props: ContentIndexProps = {
content: await getContent({ content: await getContent({
slug: context.params.slug, slug: context.params.slug,
language_code: context.locale, language_code: context.locale,

34
src/pages/content/[slug]/read.tsx
View File

@ -1,5 +1,4 @@
import { GetStaticPaths, GetStaticProps } from "next"; import { GetStaticPaths, GetStaticProps } from "next";
import { applyCustomAppProps } from "pages/_app";
import { import {
getContentsSlugs, getContentsSlugs,
getContentText, getContentText,
@ -10,34 +9,23 @@ import {
GetWebsiteInterfaceQuery, GetWebsiteInterfaceQuery,
} from "graphql/operations-types"; } from "graphql/operations-types";
import ContentPanel from "components/Panels/ContentPanel"; import ContentPanel from "components/Panels/ContentPanel";
import Image from "next/image";
import { getAssetURL, prettySlug } from "queries/helpers";
import Button from "components/Button";
import HorizontalLine from "components/HorizontalLine"; import HorizontalLine from "components/HorizontalLine";
import Markdown from "markdown-to-jsx"; import Markdown from "markdown-to-jsx";
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import ReturnButton from "components/PanelComponents/ReturnButton"; import ReturnButton from "components/PanelComponents/ReturnButton";
import SceneBreak from "components/Markdown/SceneBreak"; import SceneBreak from "components/Markdown/SceneBreak";
import ThumbnailHeader from "components/Content/ThumbnailHeader"; import ThumbnailHeader from "components/Content/ThumbnailHeader";
import MainPanel from "components/Panels/MainPanel"; import AppLayout from "components/AppLayout";
type Props = { type ContentReadProps = {
content: GetContentTextQuery; content: GetContentTextQuery;
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
}; };
applyCustomAppProps(Library, { export default function ContentRead(props: ContentReadProps): JSX.Element {
useSubPanel: true,
useContentPanel: true,
});
export default function Library(props: Props): JSX.Element {
const content = props.content.contents.data[0].attributes; const content = props.content.contents.data[0].attributes;
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
const subPanel = (
return (
<>
<MainPanel langui={langui} />
<SubPanel> <SubPanel>
<ReturnButton <ReturnButton
href={`/content/${content.slug}`} href={`/content/${content.slug}`}
@ -45,6 +33,8 @@ export default function Library(props: Props): JSX.Element {
langui={langui} langui={langui}
/> />
</SubPanel> </SubPanel>
);
const contentPanel = (
<ContentPanel> <ContentPanel>
<div className="grid place-items-center"> <div className="grid place-items-center">
<ThumbnailHeader content={content} langui={langui} /> <ThumbnailHeader content={content} langui={langui} />
@ -63,7 +53,15 @@ export default function Library(props: Props): JSX.Element {
)} )}
</div> </div>
</ContentPanel> </ContentPanel>
</> );
return (
<AppLayout
title="Read"
langui={langui}
contentPanel={contentPanel}
subPanel={subPanel}
/>
); );
} }
@ -73,7 +71,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
if (context.params.slug instanceof Array) if (context.params.slug instanceof Array)
context.params.slug = context.params.slug.join(""); context.params.slug = context.params.slug.join("");
const props: Props = { const props: ContentReadProps = {
content: await getContentText({ content: await getContentText({
slug: context.params.slug, slug: context.params.slug,
language_code: context.locale, language_code: context.locale,

35
src/pages/data/chronology.tsx
View File

@ -2,7 +2,6 @@ import { GetStaticProps } from "next";
import ContentPanel from "components/Panels/ContentPanel"; import ContentPanel from "components/Panels/ContentPanel";
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import ChronologyYearComponent from "components/Chronology/ChronologyYearComponent"; import ChronologyYearComponent from "components/Chronology/ChronologyYearComponent";
import { applyCustomAppProps } from "pages/_app";
import { import {
GetChronologyItemsQuery, GetChronologyItemsQuery,
GetErasQuery, GetErasQuery,
@ -16,22 +15,20 @@ import {
import NavOption from "components/PanelComponents/NavOption"; import NavOption from "components/PanelComponents/NavOption";
import ReturnButton from "components/PanelComponents/ReturnButton"; import ReturnButton from "components/PanelComponents/ReturnButton";
import HorizontalLine from "components/HorizontalLine"; import HorizontalLine from "components/HorizontalLine";
import MainPanel from "components/Panels/MainPanel"; import AppLayout from "components/AppLayout";
interface Props { interface DataChronologyProps {
chronologyItems: GetChronologyItemsQuery; chronologyItems: GetChronologyItemsQuery;
chronologyEras: GetErasQuery; chronologyEras: GetErasQuery;
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
} }
applyCustomAppProps(ChronologyOverview, { export default function DataChronology(
useSubPanel: true, props: DataChronologyProps
useContentPanel: true, ): JSX.Element {
});
export default function ChronologyOverview(props: Props): JSX.Element {
// Group by year the Chronology items
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
// Group by year the Chronology items
let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][] = let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][] =
[]; [];
@ -45,9 +42,7 @@ export default function ChronologyOverview(props: Props): JSX.Element {
}); });
} }
return ( const subPanel = (
<>
<MainPanel langui={langui} />
<SubPanel> <SubPanel>
<ReturnButton href="/data" title="Data" langui={langui} /> <ReturnButton href="/data" title="Data" langui={langui} />
<HorizontalLine /> <HorizontalLine />
@ -64,7 +59,9 @@ export default function ChronologyOverview(props: Props): JSX.Element {
/> />
))} ))}
</SubPanel> </SubPanel>
);
const contentPanel = (
<ContentPanel> <ContentPanel>
{chronologyItemYearGroups.map((items, index: number) => { {chronologyItemYearGroups.map((items, index: number) => {
if (items && items[0].attributes.year) { if (items && items[0].attributes.year) {
@ -78,13 +75,21 @@ export default function ChronologyOverview(props: Props): JSX.Element {
} }
})} })}
</ContentPanel> </ContentPanel>
</> );
return (
<AppLayout
title="Chronology"
langui={langui}
contentPanel={contentPanel}
subPanel={subPanel}
/>
); );
} }
export const getStaticProps: GetStaticProps = async (context) => { export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) { if (context.locale) {
const props: Props = { const props: DataChronologyProps = {
chronologyItems: await getChronologyItems({ chronologyItems: await getChronologyItems({
language_code: context.locale, language_code: context.locale,
}), }),

21
src/pages/data/index.tsx
View File

@ -1,26 +1,18 @@
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import NavOption from "components/PanelComponents/NavOption"; import NavOption from "components/PanelComponents/NavOption";
import { applyCustomAppProps } from "pages/_app";
import PanelHeader from "components/PanelComponents/PanelHeader"; import PanelHeader from "components/PanelComponents/PanelHeader";
import MainPanel from "components/Panels/MainPanel";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next"; import { GetStaticProps } from "next";
import { getWebsiteInterface } from "graphql/operations"; import { getWebsiteInterface } from "graphql/operations";
import AppLayout from "components/AppLayout";
applyCustomAppProps(Data, { type DataProps = {
useSubPanel: true,
useContentPanel: false,
});
type Props = {
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
}; };
export default function Data(props: Props): JSX.Element { export default function Data(props: DataProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
return ( const subPanel = (
<>
<MainPanel langui={langui} />
<SubPanel> <SubPanel>
<PanelHeader <PanelHeader
icon="travel_explore" icon="travel_explore"
@ -56,13 +48,14 @@ export default function Data(props: Props): JSX.Element {
border={true} border={true}
/> />
</SubPanel> </SubPanel>
</>
); );
return <AppLayout title="Content" langui={langui} subPanel={subPanel} />;
} }
export const getStaticProps: GetStaticProps = async (context) => { export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) { if (context.locale) {
const props: Props = { const props: DataProps = {
langui: await getWebsiteInterface({ langui: await getWebsiteInterface({
language_code: context.locale, language_code: context.locale,
}), }),

23
src/pages/gallery/index.tsx
View File

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

30
src/pages/hubs/index.tsx
View File

@ -1,26 +1,18 @@
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import { applyCustomAppProps } from "pages/_app";
import PanelHeader from "components/PanelComponents/PanelHeader"; import PanelHeader from "components/PanelComponents/PanelHeader";
import MainPanel from "components/Panels/MainPanel";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next"; import { GetStaticProps } from "next";
import { getWebsiteInterface } from "graphql/operations"; import { getWebsiteInterface } from "graphql/operations";
import ContentPanel from "components/Panels/ContentPanel"; import ContentPanel from "components/Panels/ContentPanel";
import AppLayout from "components/AppLayout";
applyCustomAppProps(Hubs, { type HubsProps = {
useSubPanel: true,
useContentPanel: true,
});
type Props = {
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
}; };
export default function Hubs(props: Props): JSX.Element { export default function Hubs(props: HubsProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
return ( const subPanel = (
<>
<MainPanel langui={langui} />
<SubPanel> <SubPanel>
<PanelHeader <PanelHeader
icon="workspaces" icon="workspaces"
@ -28,14 +20,22 @@ export default function Hubs(props: Props): JSX.Element {
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." 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> </SubPanel>
<ContentPanel>Hello</ContentPanel> );
</> const contentPanel = <ContentPanel>Hello</ContentPanel>;
return (
<AppLayout
title="Hub"
langui={langui}
contentPanel={contentPanel}
subPanel={subPanel}
/>
); );
} }
export const getStaticProps: GetStaticProps = async (context) => { export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) { if (context.locale) {
const props: Props = { const props: HubsProps = {
langui: await getWebsiteInterface({ langui: await getWebsiteInterface({
language_code: context.locale, language_code: context.locale,
}), }),

102
src/pages/index.tsx
View File

@ -1,30 +1,17 @@
import AppLayout from "components/AppLayout";
import ContentPanel from "components/Panels/ContentPanel"; import ContentPanel from "components/Panels/ContentPanel";
import MainPanel from "components/Panels/MainPanel";
import { getWebsiteInterface } from "graphql/operations"; import { getWebsiteInterface } from "graphql/operations";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next"; import { GetStaticProps } from "next";
import Head from "next/head"; import Head from "next/head";
import { applyCustomAppProps } from "./_app"; type HomeProps = {
applyCustomAppProps(Home, {
useSubPanel: false,
useContentPanel: true,
});
type Props = {
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
}; };
export default function Home(props: Props): JSX.Element { export default function Home(props: HomeProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
return (
<>
<Head>
<title>Accord&rsquo;s Library - Home</title>
</Head>
<MainPanel langui={langui} />
const contentPanel = (
<ContentPanel autoformat={true}> <ContentPanel autoformat={true}>
<h2>Discover • Analyse • Translate • Archive</h2> <h2>Discover • Analyse • Translate • Archive</h2>
<h2>What is this?</h2> <h2>What is this?</h2>
@ -35,11 +22,11 @@ export default function Home(props: Props): JSX.Element {
Drakengard (Drag-on Dragoon) franchises. To complement his games, Yoko Drakengard (Drag-on Dragoon) franchises. To complement his games, Yoko
Taro likes to publish side materials in the form of books, novellas, Taro likes to publish side materials in the form of books, novellas,
artbooks, stage plays, manga, drama CDs, and comics. Those side artbooks, stage plays, manga, drama CDs, and comics. Those side
materials can be very difficult to find. His work goes all the way materials can be very difficult to find. His work goes all the way back
back to 2003, and most of them are out of print after having been to 2003, and most of them are out of print after having been released
released solely in Japan, sometimes in limited quantities. Their solely in Japan, sometimes in limited quantities. Their prices on the
prices on the second hand market have skyrocketed, ranging all the way second hand market have skyrocketed, ranging all the way to hundreds if
to hundreds if not thousand of dollars for the rarest items.&nbsp; not thousand of dollars for the rarest items.&nbsp;
</p> </p>
<p> <p>
This is where this library takes its meaning, in trying to help the This is where this library takes its meaning, in trying to help the
@ -50,13 +37,13 @@ export default function Home(props: Props): JSX.Element {
<p> <p>
We are a small group of Yoko Taro&rsquo;s fans that decided to join 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{" "} forces and create a website and a community. Our motto is{" "}
<strong>Discover • Analyze • Translate • Archive</strong> (D.A.T.A. <strong>Discover • Analyze • Translate • Archive</strong> (D.A.T.A. for
for short). We started with the goal of gathering and archiving as short). We started with the goal of gathering and archiving as much
much side-materials/merch as possible. But since then, our ambition side-materials/merch as possible. But since then, our ambition grew and
grew and we decided to create a full-fledged website that will also we decided to create a full-fledged website that will also include news
include news articles, lore, summaries, translations, and articles, lore, summaries, translations, and transcriptions. Hopefully
transcriptions. Hopefully one day, we will be up there in the list of one day, we will be up there in the list of notable resources for
notable resources for Drakengard and NieR fans. Drakengard and NieR fans.
</p> </p>
<h2>What&rsquo;s on this website?</h2> <h2>What&rsquo;s on this website?</h2>
<p> <p>
@ -65,33 +52,31 @@ export default function Home(props: Props): JSX.Element {
</strong> </strong>
: This is where we will list every NieR/DOD/other Yoko Tato merch, : This is where we will list every NieR/DOD/other Yoko Tato merch,
games, books, novel, stage play, CD... well everything! For each, we games, books, novel, stage play, CD... well everything! For each, we
will provide photos and/or scans of the content, information about will provide photos and/or scans of the content, information about what
what it is, when and how it was released, size, initial price... it is, when and how it was released, size, initial price...
</p> </p>
<p> <p>
<strong> <strong>
<a href="https://accords-library.com/news/">News</a> <a href="https://accords-library.com/news/">News</a>
</strong> </strong>
: Yes because we also want to create our own content! So there you : Yes because we also want to create our own content! So there you will
will find translations, transcriptions, unboxing, news about future find translations, transcriptions, unboxing, news about future
merch/game releases, maybe some guides. We don&rsquo;t see this merch/game releases, maybe some guides. We don&rsquo;t see this website
website as being purely a showcase of our work, but also of the as being purely a showcase of our work, but also of the community, and
community, and as such, we will be accepting applications for becoming as such, we will be accepting applications for becoming contributors on
contributors on the website. For the applicant, there is no deadline the website. For the applicant, there is no deadline or article quota,
or article quota, it merely means that we will have access to the it merely means that we will have access to the website Post Writing
website Post Writing tools and will be able to submit a draft that can tools and will be able to submit a draft that can be published once
be published once verified by an editor. Anyway, that&rsquo;s at least verified by an editor. Anyway, that&rsquo;s at least the plan, we will
the plan, we will think more about this until the website&rsquo;s think more about this until the website&rsquo;s official launch.
official launch.
</p> </p>
<p> <p>
<strong> <strong>
<a href="https://accords-library.com/data/">Data</a> <a href="https://accords-library.com/data/">Data</a>
</strong> </strong>
: There we will publish lore/knowledge about the Yokoverse: : There we will publish lore/knowledge about the Yokoverse: Dictionary,
Dictionary, Timeline, Weapons Stories, Game summaries... We have not Timeline, Weapons Stories, Game summaries... We have not yet decided how
yet decided how deep we want to go as they are already quite a few deep we want to go as they are already quite a few resources out there.{" "}
resources out there.{" "}
</p> </p>
<p> <p>
<strong> <strong>
@ -106,8 +91,8 @@ export default function Home(props: Props): JSX.Element {
: A fully tagged Danbooru-styled gallery with currently more than a : A fully tagged Danbooru-styled gallery with currently more than a
thousand unique artworks. If you are unfamiliar with this kind of thousand unique artworks. If you are unfamiliar with this kind of
gallery, it comes with a powerful search function that allows you to gallery, it comes with a powerful search function that allows you to
search for specific images: want to search for images with both Caim search for specific images: want to search for images with both Caim and
and Inuart, just type{" "} Inuart, just type{" "}
<kbd> <kbd>
<a <a
href="https://gallery.accords-library.com/posts/query=Caim%20Inuart" href="https://gallery.accords-library.com/posts/query=Caim%20Inuart"
@ -129,8 +114,8 @@ export default function Home(props: Props): JSX.Element {
Popola,Devola Popola,Devola
</a> </a>
</kbd> </kbd>
. You can also negate a tag: i.e. images of 9S without any pods . You can also negate a tag: i.e. images of 9S without any pods around,
around, search for{" "} search for{" "}
<kbd> <kbd>
<a <a
href="https://gallery.accords-library.com/posts/query=9S%20-Pods" href="https://gallery.accords-library.com/posts/query=9S%20-Pods"
@ -141,20 +126,25 @@ export default function Home(props: Props): JSX.Element {
</a> </a>
</kbd> </kbd>
. Anyway, there is a lot more to it, you can click on &quot;Syntax . 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, help&quot; next to the Search button for even neater functions. Btw, you
you can create an account to favorite, upvote/downvote posts, or if can create an account to favorite, upvote/downvote posts, or if you want
you want to help tagging them. There isn&rsquo;t currently a way for to help tagging them. There isn&rsquo;t currently a way for new users to
new users to upload images, you&rsquo;ll have to contact us first and upload images, you&rsquo;ll have to contact us first and we can decide
we can decide to enable this function on your account. to enable this function on your account.
</p> </p>
</ContentPanel> </ContentPanel>
);
return (
<>
<AppLayout title="Home" langui={langui} contentPanel={contentPanel} />
</> </>
); );
} }
export const getStaticProps: GetStaticProps = async (context) => { export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) { if (context.locale) {
const props: Props = { const props: HomeProps = {
langui: await getWebsiteInterface({ langui: await getWebsiteInterface({
language_code: context.locale, language_code: context.locale,
}), }),

107
src/pages/library/[slug].tsx
View File

@ -3,7 +3,6 @@ import ContentPanel, {
} from "components/Panels/ContentPanel"; } from "components/Panels/ContentPanel";
import Image from "next/image"; import Image from "next/image";
import { GetStaticPaths, GetStaticProps } from "next"; import { GetStaticPaths, GetStaticProps } from "next";
import { applyCustomAppProps } from "pages/_app";
import { import {
getLibraryItem, getLibraryItem,
getLibraryItemsSlugs, getLibraryItemsSlugs,
@ -30,38 +29,17 @@ import LibraryItemComponent from "components/Library/LibraryItemComponent";
import Chip from "components/Chip"; import Chip from "components/Chip";
import Button from "components/Button"; import Button from "components/Button";
import HorizontalLine from "components/HorizontalLine"; import HorizontalLine from "components/HorizontalLine";
import MainPanel from "components/Panels/MainPanel"; import AppLayout from "components/AppLayout";
type Props = { type LibrarySlugProps = {
libraryItem: GetLibraryItemQuery; libraryItem: GetLibraryItemQuery;
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
}; };
applyCustomAppProps(Library, { export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
useSubPanel: true,
useContentPanel: true,
});
export default function Library(props: Props): JSX.Element {
const item = props.libraryItem.libraryItems.data[0].attributes; const item = props.libraryItem.libraryItems.data[0].attributes;
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
const subPanel = (
item.contents.data.sort((a, b) => {
if (
a.attributes.range[0].__typename === "ComponentRangePageRange" &&
b.attributes.range[0].__typename === "ComponentRangePageRange"
) {
return (
a.attributes.range[0].starting_page -
b.attributes.range[0].starting_page
);
}
return 0;
});
return (
<>
<MainPanel langui={langui} />
<SubPanel> <SubPanel>
<ReturnButton <ReturnButton
title={langui.main_library} title={langui.main_library}
@ -122,6 +100,9 @@ export default function Library(props: Props): JSX.Element {
"" ""
)} )}
</SubPanel> </SubPanel>
);
const contentPanel = (
<ContentPanel width={ContentPanelWidthSizes.large}> <ContentPanel width={ContentPanelWidthSizes.large}>
<div className="grid place-items-center gap-12"> <div className="grid place-items-center gap-12">
<div className="drop-shadow-dark-xl w-96 max-w-full mb-16"> <div className="drop-shadow-dark-xl w-96 max-w-full mb-16">
@ -216,17 +197,13 @@ export default function Library(props: Props): JSX.Element {
<Button> <Button>
{item.metadata[0].__typename === "ComponentMetadataAudio" {item.metadata[0].__typename === "ComponentMetadataAudio"
? langui.library_item_type_audio ? langui.library_item_type_audio
: item.metadata[0].__typename === : item.metadata[0].__typename === "ComponentMetadataBooks"
"ComponentMetadataBooks"
? langui.library_item_type_textual ? langui.library_item_type_textual
: item.metadata[0].__typename === : item.metadata[0].__typename === "ComponentMetadataGame"
"ComponentMetadataGame"
? langui.library_item_type_game ? langui.library_item_type_game
: item.metadata[0].__typename === : item.metadata[0].__typename === "ComponentMetadataOther"
"ComponentMetadataOther"
? langui.library_item_type_game ? langui.library_item_type_game
: item.metadata[0].__typename === : item.metadata[0].__typename === "ComponentMetadataVideo"
"ComponentMetadataVideo"
? langui.library_item_type_video ? langui.library_item_type_video
: ""} : ""}
</Button> </Button>
@ -255,9 +232,7 @@ export default function Library(props: Props): JSX.Element {
</div> </div>
{item.size ? ( {item.size ? (
<> <>
<h3 className="text-xl"> <h3 className="text-xl">{langui.library_item_physical_size}</h3>
{langui.library_item_physical_size}
</h3>
<div className="grid grid-flow-col w-full place-content-between"> <div className="grid grid-flow-col w-full place-content-between">
<div className="grid place-items-start grid-flow-col gap-4"> <div className="grid place-items-start grid-flow-col gap-4">
<p className="font-bold">{langui.global_width}:</p> <p className="font-bold">{langui.global_width}:</p>
@ -296,16 +271,15 @@ export default function Library(props: Props): JSX.Element {
{langui.library_item_type_information} {langui.library_item_type_information}
</h3> </h3>
<div className="grid grid-cols-2 w-full place-content-between"> <div className="grid grid-cols-2 w-full place-content-between">
{item.metadata[0].__typename === {item.metadata[0].__typename === "ComponentMetadataBooks" ? (
"ComponentMetadataBooks" ? (
<> <>
<div className="grid place-content-start grid-flow-col gap-4"> <div className="grid place-content-start grid-flow-col gap-4">
<p className="font-bold">{langui.global_type}:</p> <p className="font-bold">{langui.global_type}:</p>
<Chip> <Chip>
{item.metadata[0].subtype.data.attributes.titles {item.metadata[0].subtype.data.attributes.titles
.length > 0 .length > 0
? item.metadata[0].subtype.data.attributes ? item.metadata[0].subtype.data.attributes.titles[0]
.titles[0].title .title
: prettySlug( : prettySlug(
item.metadata[0].subtype.data.attributes.slug item.metadata[0].subtype.data.attributes.slug
)} )}
@ -331,9 +305,7 @@ export default function Library(props: Props): JSX.Element {
</div> </div>
<div className="grid place-content-start grid-flow-col gap-4"> <div className="grid place-content-start grid-flow-col gap-4">
<p className="font-bold"> <p className="font-bold">{langui.global_page_order}:</p>
{langui.global_page_order}:
</p>
<p> <p>
{item.metadata[0].page_order === {item.metadata[0].page_order ===
Enum_Componentmetadatabooks_Page_Order.LeftToRight Enum_Componentmetadatabooks_Page_Order.LeftToRight
@ -346,9 +318,7 @@ export default function Library(props: Props): JSX.Element {
</div> </div>
<div className="grid place-content-start grid-flow-col gap-4"> <div className="grid place-content-start grid-flow-col gap-4">
<p className="font-bold"> <p className="font-bold">{langui.global_languages}:</p>
{langui.global_languages}:
</p>
{item.metadata[0].languages.data.map((lang) => ( {item.metadata[0].languages.data.map((lang) => (
<p key={lang.attributes.code}> <p key={lang.attributes.code}>
{lang.attributes.name} {lang.attributes.name}
@ -373,8 +343,8 @@ export default function Library(props: Props): JSX.Element {
<Chip> <Chip>
{item.metadata[0].subtype.data.attributes.titles {item.metadata[0].subtype.data.attributes.titles
.length > 0 .length > 0
? item.metadata[0].subtype.data.attributes ? item.metadata[0].subtype.data.attributes.titles[0]
.titles[0].title .title
: prettySlug( : prettySlug(
item.metadata[0].subtype.data.attributes.slug item.metadata[0].subtype.data.attributes.slug
)} )}
@ -396,10 +366,7 @@ export default function Library(props: Props): JSX.Element {
item.metadata.length > 0 && item.metadata.length > 0 &&
item.metadata[0].__typename === "ComponentMetadataOther" && item.metadata[0].__typename === "ComponentMetadataOther" &&
item.metadata[0].subtype.data.attributes.slug === "variant-set" ? ( item.metadata[0].subtype.data.attributes.slug === "variant-set" ? (
<div <div id="variants" className="grid place-items-center gap-8 w-full">
id="variants"
className="grid place-items-center gap-8 w-full"
>
<h2 className="text-2xl">{langui.library_item_variants}</h2> <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"> <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
{item.subitems.data.map((variant) => ( {item.subitems.data.map((variant) => (
@ -411,10 +378,7 @@ export default function Library(props: Props): JSX.Element {
</div> </div>
</div> </div>
) : ( ) : (
<div <div id="subitems" className="grid place-items-center gap-8 w-full">
id="subitems"
className="grid place-items-center gap-8 w-full"
>
<h2 className="text-2xl">{langui.library_item_subitems}</h2> <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"> <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
{item.subitems.data.map((subitem) => ( {item.subitems.data.map((subitem) => (
@ -477,8 +441,8 @@ export default function Library(props: Props): JSX.Element {
<Chip className="place-self-end"> <Chip className="place-self-end">
{content.attributes.content.data.attributes.type.data {content.attributes.content.data.attributes.type.data
.attributes.titles.length > 0 .attributes.titles.length > 0
? content.attributes.content.data.attributes.type ? content.attributes.content.data.attributes.type.data
.data.attributes.titles[0].title .attributes.titles[0].title
: prettySlug( : prettySlug(
content.attributes.content.data.attributes.type content.attributes.content.data.attributes.type
.data.attributes.slug .data.attributes.slug
@ -527,7 +491,28 @@ export default function Library(props: Props): JSX.Element {
)} )}
</div> </div>
</ContentPanel> </ContentPanel>
</> );
item.contents.data.sort((a, b) => {
if (
a.attributes.range[0].__typename === "ComponentRangePageRange" &&
b.attributes.range[0].__typename === "ComponentRangePageRange"
) {
return (
a.attributes.range[0].starting_page -
b.attributes.range[0].starting_page
);
}
return 0;
});
return (
<AppLayout
title="Library"
langui={langui}
contentPanel={contentPanel}
subPanel={subPanel}
/>
); );
} }
@ -537,7 +522,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
if (context.params.slug instanceof Array) if (context.params.slug instanceof Array)
context.params.slug = context.params.slug.join(""); context.params.slug = context.params.slug.join("");
const props: Props = { const props: LibrarySlugProps = {
libraryItem: await getLibraryItem({ libraryItem: await getLibraryItem({
slug: context.params.slug, slug: context.params.slug,
language_code: context.locale, language_code: context.locale,

34
src/pages/library/index.tsx
View File

@ -4,7 +4,6 @@ import ContentPanel, {
ContentPanelWidthSizes, ContentPanelWidthSizes,
} from "components/Panels/ContentPanel"; } from "components/Panels/ContentPanel";
import LibraryItemComponent from "components/Library/LibraryItemComponent"; import LibraryItemComponent from "components/Library/LibraryItemComponent";
import { applyCustomAppProps } from "pages/_app";
import { import {
GetLibraryItemsPreviewQuery, GetLibraryItemsPreviewQuery,
GetWebsiteInterfaceQuery, GetWebsiteInterfaceQuery,
@ -14,27 +13,16 @@ import {
getWebsiteInterface, getWebsiteInterface,
} from "graphql/operations"; } from "graphql/operations";
import PanelHeader from "components/PanelComponents/PanelHeader"; import PanelHeader from "components/PanelComponents/PanelHeader";
import MainPanel from "components/Panels/MainPanel"; import AppLayout from "components/AppLayout";
import Head from "next/head";
type Props = { type LibraryProps = {
libraryItems: GetLibraryItemsPreviewQuery; libraryItems: GetLibraryItemsPreviewQuery;
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
}; };
applyCustomAppProps(Library, { export default function Library(props: LibraryProps): JSX.Element {
useSubPanel: true,
useContentPanel: true,
});
export default function Library(props: Props): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
return ( const subPanel = (
<>
<Head>
<title>Accord&rsquo;s Library - Library</title>
</Head>
<MainPanel langui={langui} />
<SubPanel> <SubPanel>
<PanelHeader <PanelHeader
icon="library_books" icon="library_books"
@ -42,7 +30,8 @@ export default function Library(props: Props): JSX.Element {
description={langui.library_description} description={langui.library_description}
/> />
</SubPanel> </SubPanel>
);
const contentPanel = (
<ContentPanel width={ContentPanelWidthSizes.large}> <ContentPanel width={ContentPanelWidthSizes.large}>
<div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"> <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
{props.libraryItems.libraryItems.data.map((item) => ( {props.libraryItems.libraryItems.data.map((item) => (
@ -50,13 +39,20 @@ export default function Library(props: Props): JSX.Element {
))} ))}
</div> </div>
</ContentPanel> </ContentPanel>
</> );
return (
<AppLayout
title="Library"
langui={langui}
subPanel={subPanel}
contentPanel={contentPanel}
/>
); );
} }
export const getStaticProps: GetStaticProps = async (context) => { export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) { if (context.locale) {
const props: Props = { const props: LibraryProps = {
libraryItems: await getLibraryItemsPreview({ libraryItems: await getLibraryItemsPreview({
language_code: context.locale, language_code: context.locale,
}), }),

23
src/pages/merch/index.tsx
View File

@ -1,26 +1,17 @@
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import { applyCustomAppProps } from "pages/_app";
import PanelHeader from "components/PanelComponents/PanelHeader"; import PanelHeader from "components/PanelComponents/PanelHeader";
import MainPanel from "components/Panels/MainPanel";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next"; import { GetStaticProps } from "next";
import { getWebsiteInterface } from "graphql/operations"; import { getWebsiteInterface } from "graphql/operations";
import ContentPanel from "components/Panels/ContentPanel"; import AppLayout from "components/AppLayout";
applyCustomAppProps(Merch, { type MerchProps = {
useSubPanel: true,
useContentPanel: true,
});
type Props = {
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
}; };
export default function Merch(props: Props): JSX.Element { export default function Merch(props: MerchProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
return ( const subPanel = (
<>
<MainPanel langui={langui} />
<SubPanel> <SubPanel>
<PanelHeader <PanelHeader
icon="store" icon="store"
@ -28,14 +19,14 @@ export default function Merch(props: Props): JSX.Element {
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." 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> </SubPanel>
<ContentPanel>Hello</ContentPanel>
</>
); );
return <AppLayout title="Merch" langui={langui} subPanel={subPanel} />;
} }
export const getStaticProps: GetStaticProps = async (context) => { export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) { if (context.locale) {
const props: Props = { const props: MerchProps = {
langui: await getWebsiteInterface({ langui: await getWebsiteInterface({
language_code: context.locale, language_code: context.locale,
}), }),

23
src/pages/news/index.tsx
View File

@ -1,26 +1,17 @@
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import { applyCustomAppProps } from "pages/_app";
import PanelHeader from "components/PanelComponents/PanelHeader"; import PanelHeader from "components/PanelComponents/PanelHeader";
import MainPanel from "components/Panels/MainPanel";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next"; import { GetStaticProps } from "next";
import { getWebsiteInterface } from "graphql/operations"; import { getWebsiteInterface } from "graphql/operations";
import ContentPanel from "components/Panels/ContentPanel"; import AppLayout from "components/AppLayout";
applyCustomAppProps(News, { type NewsProps = {
useSubPanel: true,
useContentPanel: true,
});
type Props = {
langui: GetWebsiteInterfaceQuery; langui: GetWebsiteInterfaceQuery;
}; };
export default function News(props: Props): JSX.Element { export default function News(props: NewsProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes; const langui = props.langui.websiteInterfaces.data[0].attributes;
return ( const subPanel = (
<>
<MainPanel langui={langui} />
<SubPanel> <SubPanel>
<PanelHeader <PanelHeader
icon="feed" icon="feed"
@ -28,14 +19,14 @@ export default function News(props: Props): JSX.Element {
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." 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> </SubPanel>
<ContentPanel>Hello</ContentPanel>
</>
); );
return <AppLayout title="Merch" langui={langui} subPanel={subPanel} />;
} }
export const getStaticProps: GetStaticProps = async (context) => { export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) { if (context.locale) {
const props: Props = { const props: NewsProps = {
langui: await getWebsiteInterface({ langui: await getWebsiteInterface({
language_code: context.locale, language_code: context.locale,
}), }),

4
tailwind.config.js
View File

@ -13,6 +13,10 @@ module.exports = {
body: ["Zen Maru Gothic"], body: ["Zen Maru Gothic"],
headers: ["Vollkorn"], headers: ["Vollkorn"],
}, },
screens: {
desktop: {'min': '70rem'},
mobile: {'max': '70rem'},
}
}, },
plugins: [ plugins: [
require("@tailwindcss/typography"), require("@tailwindcss/typography"),