Merge pull request #7 from Accords-Library/develop
Added a config menu with multiple options for the visitors + globally loaded props
This commit is contained in:
commit
a70246344a
|
@ -8,6 +8,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource/material-icons": "^4.5.2",
|
"@fontsource/material-icons": "^4.5.2",
|
||||||
"@fontsource/material-icons-rounded": "^4.5.2",
|
"@fontsource/material-icons-rounded": "^4.5.2",
|
||||||
|
"@fontsource/opendyslexic": "^4.5.2",
|
||||||
"@fontsource/vollkorn": "^4.5.4",
|
"@fontsource/vollkorn": "^4.5.4",
|
||||||
"@fontsource/zen-maru-gothic": "^4.5.5",
|
"@fontsource/zen-maru-gothic": "^4.5.5",
|
||||||
"markdown-to-jsx": "^7.1.6",
|
"markdown-to-jsx": "^7.1.6",
|
||||||
|
@ -199,6 +200,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz",
|
||||||
"integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w=="
|
"integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@fontsource/opendyslexic": {
|
||||||
|
"version": "4.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.2.tgz",
|
||||||
|
"integrity": "sha512-vW+A3Bd1ZEG6nAZuix0OhbS0ygMlhvtc3RvLlDXrTAinrAZHQ0bOGUJRN2iaGbQ1kWNP8/7A+AKMFH5FM/pjKA=="
|
||||||
|
},
|
||||||
"node_modules/@fontsource/vollkorn": {
|
"node_modules/@fontsource/vollkorn": {
|
||||||
"version": "4.5.4",
|
"version": "4.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz",
|
"resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz",
|
||||||
|
@ -3800,6 +3806,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz",
|
||||||
"integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w=="
|
"integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w=="
|
||||||
},
|
},
|
||||||
|
"@fontsource/opendyslexic": {
|
||||||
|
"version": "4.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.2.tgz",
|
||||||
|
"integrity": "sha512-vW+A3Bd1ZEG6nAZuix0OhbS0ygMlhvtc3RvLlDXrTAinrAZHQ0bOGUJRN2iaGbQ1kWNP8/7A+AKMFH5FM/pjKA=="
|
||||||
|
},
|
||||||
"@fontsource/vollkorn": {
|
"@fontsource/vollkorn": {
|
||||||
"version": "4.5.4",
|
"version": "4.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz",
|
"resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz",
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource/material-icons": "^4.5.2",
|
"@fontsource/material-icons": "^4.5.2",
|
||||||
"@fontsource/material-icons-rounded": "^4.5.2",
|
"@fontsource/material-icons-rounded": "^4.5.2",
|
||||||
|
"@fontsource/opendyslexic": "^4.5.2",
|
||||||
"@fontsource/vollkorn": "^4.5.4",
|
"@fontsource/vollkorn": "^4.5.4",
|
||||||
"@fontsource/zen-maru-gothic": "^4.5.5",
|
"@fontsource/zen-maru-gothic": "^4.5.5",
|
||||||
"markdown-to-jsx": "^7.1.6",
|
"markdown-to-jsx": "^7.1.6",
|
||||||
|
|
|
@ -13,20 +13,23 @@ import ReactTooltip from "react-tooltip";
|
||||||
import { useAppLayout } from "contexts/AppLayoutContext";
|
import { useAppLayout } from "contexts/AppLayoutContext";
|
||||||
import { ImageQuality } from "./Img";
|
import { ImageQuality } from "./Img";
|
||||||
import Popup from "./Popup";
|
import Popup from "./Popup";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import Select from "./Select";
|
||||||
|
import { AppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type AppLayoutProps = {
|
interface AppLayoutProps extends AppStaticProps {
|
||||||
subPanel?: React.ReactNode;
|
subPanel?: React.ReactNode;
|
||||||
subPanelIcon?: string;
|
subPanelIcon?: string;
|
||||||
contentPanel?: React.ReactNode;
|
contentPanel?: React.ReactNode;
|
||||||
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
|
|
||||||
title?: string;
|
title?: string;
|
||||||
navTitle: string;
|
navTitle: string;
|
||||||
thumbnail?: StrapiImage;
|
thumbnail?: StrapiImage;
|
||||||
description?: string;
|
description?: string;
|
||||||
extra?: React.ReactNode;
|
extra?: React.ReactNode;
|
||||||
};
|
}
|
||||||
|
|
||||||
export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
|
const { langui, currencies, languages, subPanel, contentPanel } = props;
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const isMobile = useMediaMobile();
|
const isMobile = useMediaMobile();
|
||||||
const isCoarse = useMediaCoarse();
|
const isCoarse = useMediaCoarse();
|
||||||
|
@ -39,7 +42,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
if (SwipeEventData.velocity < sensibilitySwipe) return;
|
if (SwipeEventData.velocity < sensibilitySwipe) return;
|
||||||
if (appLayout.mainPanelOpen) {
|
if (appLayout.mainPanelOpen) {
|
||||||
appLayout.setMainPanelOpen(false);
|
appLayout.setMainPanelOpen(false);
|
||||||
} else if (props.subPanel && props.contentPanel) {
|
} else if (subPanel && contentPanel) {
|
||||||
appLayout.setSubPanelOpen(true);
|
appLayout.setSubPanelOpen(true);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -60,13 +63,13 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
appLayout.mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]"
|
appLayout.mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]"
|
||||||
}`;
|
}`;
|
||||||
let contentPanelClass = "";
|
let contentPanelClass = "";
|
||||||
if (props.subPanel) {
|
if (subPanel) {
|
||||||
contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
|
contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
|
||||||
appLayout.mainPanelReduced
|
appLayout.mainPanelReduced
|
||||||
? "desktop:left-[26rem]"
|
? "desktop:left-[26rem]"
|
||||||
: "desktop:left-[40rem]"
|
: "desktop:left-[40rem]"
|
||||||
}`;
|
}`;
|
||||||
} else if (props.contentPanel) {
|
} else if (contentPanel) {
|
||||||
contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
|
contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
|
||||||
appLayout.mainPanelReduced
|
appLayout.mainPanelReduced
|
||||||
? "desktop:left-[6rem]"
|
? "desktop:left-[6rem]"
|
||||||
|
@ -74,7 +77,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
}`;
|
}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const turnSubIntoContent = props.subPanel && !props.contentPanel;
|
const turnSubIntoContent = subPanel && !contentPanel;
|
||||||
|
|
||||||
const titlePrefix = "Accord’s Library";
|
const titlePrefix = "Accord’s Library";
|
||||||
const metaImage: OgImage = props.thumbnail
|
const metaImage: OgImage = props.thumbnail
|
||||||
|
@ -89,10 +92,41 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
|
|
||||||
const metaDescription = props.description
|
const metaDescription = props.description
|
||||||
? props.description
|
? props.description
|
||||||
: props.langui.default_description;
|
: langui.default_description;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.getElementsByTagName("html")[0].style.fontSize = `${
|
||||||
|
(appLayout.fontSize || 1) * 100
|
||||||
|
}%`;
|
||||||
|
}, [appLayout.fontSize]);
|
||||||
|
|
||||||
|
const currencyOptions = currencies.map((currency) => {
|
||||||
|
return currency.attributes.code;
|
||||||
|
});
|
||||||
|
const [currencySelect, setCurrencySelect] = useState<number>(-1);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
appLayout.currency &&
|
||||||
|
setCurrencySelect(currencyOptions.indexOf(appLayout.currency));
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [appLayout.currency]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
currencySelect >= 0 &&
|
||||||
|
appLayout.setCurrency(currencyOptions[currencySelect]);
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [currencySelect]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={appLayout.darkMode ? "set-theme-dark" : "set-theme-light"}>
|
<div
|
||||||
|
className={`${
|
||||||
|
appLayout.darkMode ? "set-theme-dark" : "set-theme-light"
|
||||||
|
} ${
|
||||||
|
appLayout.dyslexic
|
||||||
|
? "set-theme-font-dyslexic"
|
||||||
|
: "set-theme-font-standard"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
{...handlers}
|
{...handlers}
|
||||||
className="fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black"
|
className="fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black"
|
||||||
|
@ -129,15 +163,13 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
<div
|
<div
|
||||||
className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll bg-light texture-paper-dots ${contentPanelClass}`}
|
className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll bg-light texture-paper-dots ${contentPanelClass}`}
|
||||||
>
|
>
|
||||||
{props.contentPanel ? (
|
{contentPanel ? (
|
||||||
props.contentPanel
|
contentPanel
|
||||||
) : (
|
) : (
|
||||||
<div className="grid place-content-center h-full">
|
<div className="grid place-content-center h-full">
|
||||||
<div className="text-dark border-dark border-2 border-dotted rounded-2xl p-8 grid grid-flow-col place-items-center gap-9 opacity-40">
|
<div className="text-dark border-dark border-2 border-dotted rounded-2xl p-8 grid grid-flow-col place-items-center gap-9 opacity-40">
|
||||||
<p className="text-4xl">❮</p>
|
<p className="text-4xl">❮</p>
|
||||||
<p className="text-2xl w-64">
|
<p className="text-2xl w-64">{langui.select_option_sidebar}</p>
|
||||||
{props.langui.select_option_sidebar}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -145,21 +177,29 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
|
|
||||||
{/* Background when navbar is opened */}
|
{/* Background when navbar is opened */}
|
||||||
<div
|
<div
|
||||||
className={`fixed bg-shade inset-0 transition-opacity duration-500
|
className={`fixed inset-0 transition-[backdrop-filter] duration-500 ${
|
||||||
|
(appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
|
||||||
|
? "[backdrop-filter:blur(2px)]"
|
||||||
|
: "pointer-events-none touch-none "
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`fixed bg-shade inset-0 transition-opacity duration-500
|
||||||
${turnSubIntoContent ? "z-10" : ""}
|
${turnSubIntoContent ? "z-10" : ""}
|
||||||
${
|
${
|
||||||
(appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
|
(appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
|
||||||
? "opacity-60"
|
? "opacity-60"
|
||||||
: "opacity-0 pointer-events-none touch-none"
|
: "opacity-0"
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
appLayout.setMainPanelOpen(false);
|
appLayout.setMainPanelOpen(false);
|
||||||
appLayout.setSubPanelOpen(false);
|
appLayout.setSubPanelOpen(false);
|
||||||
}}
|
}}
|
||||||
></div>
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Sub panel */}
|
{/* Sub panel */}
|
||||||
{props.subPanel ? (
|
{subPanel ? (
|
||||||
<div
|
<div
|
||||||
className={`${subPanelClass} border-r-[1px] mobile:bottom-20 mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
|
className={`${subPanelClass} border-r-[1px] mobile:bottom-20 mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
|
||||||
${
|
${
|
||||||
|
@ -170,7 +210,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
: ""
|
: ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{props.subPanel}
|
{subPanel}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
|
@ -181,7 +221,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
className={`${mainPanelClass} border-r-[1px] mobile:bottom-20 border-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light texture-paper-dots
|
className={`${mainPanelClass} border-r-[1px] mobile:bottom-20 border-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light texture-paper-dots
|
||||||
${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
|
${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
|
||||||
>
|
>
|
||||||
<MainPanel langui={props.langui} />
|
<MainPanel langui={langui} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main panel minimize button*/}
|
{/* Main panel minimize button*/}
|
||||||
|
@ -217,7 +257,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
appLayout.setMainPanelOpen(false);
|
appLayout.setMainPanelOpen(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{props.subPanel && !turnSubIntoContent
|
{subPanel && !turnSubIntoContent
|
||||||
? appLayout.subPanelOpen
|
? appLayout.subPanelOpen
|
||||||
? "close"
|
? "close"
|
||||||
: props.subPanelIcon
|
: props.subPanelIcon
|
||||||
|
@ -231,22 +271,151 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
state={appLayout.languagePanelOpen}
|
state={appLayout.languagePanelOpen}
|
||||||
setState={appLayout.setLanguagePanelOpen}
|
setState={appLayout.setLanguagePanelOpen}
|
||||||
>
|
>
|
||||||
<h2 className="text-2xl">{props.langui.select_language}</h2>
|
<h2 className="text-2xl">{langui.select_language}</h2>
|
||||||
<div className="flex flex-wrap flex-row gap-2">
|
<div className="flex flex-wrap flex-row gap-2 mobile:flex-col">
|
||||||
{router.locales?.sort().map((locale) => (
|
{languages.map((language) => (
|
||||||
<Button
|
<Button
|
||||||
key={locale}
|
key={language.id}
|
||||||
active={locale === router.locale}
|
active={language.attributes.code === router.locale}
|
||||||
href={router.asPath}
|
href={router.asPath}
|
||||||
locale={locale}
|
locale={language.attributes.code}
|
||||||
onClick={() => appLayout.setLanguagePanelOpen(false)}
|
onClick={() => appLayout.setLanguagePanelOpen(false)}
|
||||||
>
|
>
|
||||||
{prettyLanguage(locale)}
|
{language.attributes.localized_name}
|
||||||
</Button>
|
</Button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Popup>
|
</Popup>
|
||||||
|
|
||||||
|
<Popup
|
||||||
|
state={appLayout.configPanelOpen}
|
||||||
|
setState={appLayout.setConfigPanelOpen}
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl">{langui.settings}</h2>
|
||||||
|
|
||||||
|
<div className="mt-4 grid gap-8 place-items-center text-center desktop:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl">{langui.theme}</h3>
|
||||||
|
<div className="flex flex-row">
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
appLayout.setDarkMode(false);
|
||||||
|
appLayout.setSelectedThemeMode(true);
|
||||||
|
}}
|
||||||
|
active={
|
||||||
|
appLayout.selectedThemeMode === true &&
|
||||||
|
appLayout.darkMode === false
|
||||||
|
}
|
||||||
|
className="rounded-r-none"
|
||||||
|
>
|
||||||
|
{langui.light}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
appLayout.setSelectedThemeMode(false);
|
||||||
|
}}
|
||||||
|
active={appLayout.selectedThemeMode === false}
|
||||||
|
className="rounded-l-none rounded-r-none border-x-0"
|
||||||
|
>
|
||||||
|
{langui.auto}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
appLayout.setDarkMode(true);
|
||||||
|
appLayout.setSelectedThemeMode(true);
|
||||||
|
}}
|
||||||
|
active={
|
||||||
|
appLayout.selectedThemeMode === true &&
|
||||||
|
appLayout.darkMode === true
|
||||||
|
}
|
||||||
|
className="rounded-l-none"
|
||||||
|
>
|
||||||
|
{langui.dark}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl">{langui.currency}</h3>
|
||||||
|
<div>
|
||||||
|
<Select
|
||||||
|
options={currencyOptions}
|
||||||
|
state={currencySelect}
|
||||||
|
setState={setCurrencySelect}
|
||||||
|
className="w-28"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl">{langui.font_size}</h3>
|
||||||
|
<div className="flex flex-row">
|
||||||
|
<Button
|
||||||
|
className="rounded-r-none"
|
||||||
|
onClick={() =>
|
||||||
|
appLayout.setFontSize(
|
||||||
|
appLayout.fontSize ? appLayout.fontSize / 1.05 : 1 / 1.05
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span className="material-icons">text_decrease</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="rounded-l-none rounded-r-none border-x-0"
|
||||||
|
onClick={() => appLayout.setFontSize(1)}
|
||||||
|
>
|
||||||
|
{((appLayout.fontSize || 1) * 100).toLocaleString(undefined, {
|
||||||
|
maximumFractionDigits: 0,
|
||||||
|
})}
|
||||||
|
%
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="rounded-l-none"
|
||||||
|
onClick={() =>
|
||||||
|
appLayout.setFontSize(
|
||||||
|
appLayout.fontSize ? appLayout.fontSize * 1.05 : 1 * 1.05
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span className="material-icons">text_increase</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl">{langui.font}</h3>
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Button
|
||||||
|
active={appLayout.dyslexic === false}
|
||||||
|
onClick={() => appLayout.setDyslexic(false)}
|
||||||
|
className="font-zenMaruGothic"
|
||||||
|
>
|
||||||
|
Zen Maru Gothic
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
active={appLayout.dyslexic === true}
|
||||||
|
onClick={() => appLayout.setDyslexic(true)}
|
||||||
|
className="font-openDyslexic"
|
||||||
|
>
|
||||||
|
OpenDyslexic
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl">{langui.player_name}</h3>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="<player>"
|
||||||
|
className="w-48"
|
||||||
|
onInput={(e) =>
|
||||||
|
appLayout.setPlayerName((e.target as HTMLInputElement).value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Popup>
|
||||||
|
|
||||||
<ReactTooltip
|
<ReactTooltip
|
||||||
id="MainPanelTooltip"
|
id="MainPanelTooltip"
|
||||||
place="right"
|
place="right"
|
||||||
|
|
|
@ -1,8 +1,12 @@
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
|
import {
|
||||||
|
GetCurrenciesQuery,
|
||||||
|
GetLibraryItemsPreviewQuery,
|
||||||
|
} from "graphql/operations-types";
|
||||||
import { prettyDate, prettyPrice, prettyItemSubType } from "queries/helpers";
|
import { prettyDate, prettyPrice, prettyItemSubType } from "queries/helpers";
|
||||||
import Chip from "components/Chip";
|
import Chip from "components/Chip";
|
||||||
import Img, { ImageQuality } from "components/Img";
|
import Img, { ImageQuality } from "components/Img";
|
||||||
|
import { useAppLayout } from "contexts/AppLayoutContext";
|
||||||
|
|
||||||
export type LibraryItemsPreviewProps = {
|
export type LibraryItemsPreviewProps = {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -15,12 +19,14 @@ export type LibraryItemsPreviewProps = {
|
||||||
release_date?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"];
|
release_date?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"];
|
||||||
metadata?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["metadata"];
|
metadata?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["metadata"];
|
||||||
};
|
};
|
||||||
|
currencies?: GetCurrenciesQuery["currencies"]["data"];
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function LibraryItemsPreview(
|
export default function LibraryItemsPreview(
|
||||||
props: LibraryItemsPreviewProps
|
props: LibraryItemsPreviewProps
|
||||||
): JSX.Element {
|
): JSX.Element {
|
||||||
const item = props.item;
|
const item = props.item;
|
||||||
|
const appLayout = useAppLayout();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link href={"/library/" + item.slug} passHref>
|
<Link href={"/library/" + item.slug} passHref>
|
||||||
|
@ -61,12 +67,16 @@ export default function LibraryItemsPreview(
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
{item.price ? (
|
{item.price && props.currencies ? (
|
||||||
<p className="mobile:text-xs text-sm justify-self-end">
|
<p className="mobile:text-xs text-sm justify-self-end">
|
||||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||||
shopping_cart
|
shopping_cart
|
||||||
</span>
|
</span>
|
||||||
{prettyPrice(item.price)}
|
{prettyPrice(
|
||||||
|
item.price,
|
||||||
|
props.currencies,
|
||||||
|
appLayout.currency
|
||||||
|
)}
|
||||||
</p>
|
</p>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { useAppLayout } from "contexts/AppLayoutContext";
|
||||||
import Markdown from "markdown-to-jsx";
|
import Markdown from "markdown-to-jsx";
|
||||||
import SceneBreak from "./SceneBreak";
|
import SceneBreak from "./SceneBreak";
|
||||||
|
|
||||||
|
@ -7,6 +8,8 @@ type ScenBreakProps = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Markdawn(props: ScenBreakProps): JSX.Element {
|
export default function Markdawn(props: ScenBreakProps): JSX.Element {
|
||||||
|
const appLayout = useAppLayout();
|
||||||
|
|
||||||
if (props.text) {
|
if (props.text) {
|
||||||
return (
|
return (
|
||||||
<Markdown
|
<Markdown
|
||||||
|
@ -17,7 +20,13 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
|
||||||
component: SceneBreak,
|
component: SceneBreak,
|
||||||
},
|
},
|
||||||
player: {
|
player: {
|
||||||
component: () => {return <span className="text-dark opacity-70">{"<player>"}</span>}
|
component: () => {
|
||||||
|
return (
|
||||||
|
<span className="text-dark opacity-70">
|
||||||
|
{appLayout.playerName ? appLayout.playerName : "<player>"}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
|
@ -27,4 +36,4 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return <></>;
|
return <></>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -49,16 +49,19 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
||||||
} flex-wrap gap-2`}
|
} flex-wrap gap-2`}
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
|
||||||
appLayout.setDarkMode(!appLayout.darkMode);
|
|
||||||
appLayout.setSelectedThemeMode(true);
|
|
||||||
}}
|
|
||||||
className={
|
className={
|
||||||
appLayout.mainPanelReduced && isDesktop ? "" : "!py-0.5 !px-2.5"
|
appLayout.mainPanelReduced && isDesktop ? "" : "!py-0.5 !px-2.5"
|
||||||
}
|
}
|
||||||
|
onClick={() => {
|
||||||
|
appLayout.setConfigPanelOpen(true);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<span className="material-icons !text-sm">
|
<span
|
||||||
{appLayout.darkMode ? "dark_mode" : "light_mode"}
|
className={`material-icons ${
|
||||||
|
!(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
|
||||||
|
} `}
|
||||||
|
>
|
||||||
|
settings
|
||||||
</span>
|
</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
@ -74,6 +77,20 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
||||||
{router.locale.toUpperCase()}
|
{router.locale.toUpperCase()}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
className={
|
||||||
|
appLayout.mainPanelReduced && isDesktop ? "" : "!py-0.5 !px-2.5"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`material-icons ${
|
||||||
|
!(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
|
||||||
|
} `}
|
||||||
|
>
|
||||||
|
search
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { Dispatch, SetStateAction } from "react";
|
import { Dispatch, SetStateAction } from "react";
|
||||||
|
import Button from "./Button";
|
||||||
|
|
||||||
export type PopupProps = {
|
export type PopupProps = {
|
||||||
setState: Dispatch<SetStateAction<boolean | undefined>>;
|
setState: Dispatch<SetStateAction<boolean | undefined>>;
|
||||||
|
@ -9,23 +10,29 @@ export type PopupProps = {
|
||||||
export default function Popup(props: PopupProps): JSX.Element {
|
export default function Popup(props: PopupProps): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`fixed inset-0 z-20 grid place-content-center ${
|
className={`fixed inset-0 z-50 grid place-content-center transition-[backdrop-filter] duration-500 ${
|
||||||
props.state ? "" : "pointer-events-none touch-none"
|
props.state ? "[backdrop-filter:blur(2px)]" : "pointer-events-none touch-none"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`fixed bg-shade inset-0 transition-all duration-500 ${
|
className={`fixed bg-shade inset-0 transition-all duration-500 ${
|
||||||
props.state ? "bg-opacity-60" : "bg-opacity-0"
|
props.state ? "bg-opacity-50" : "bg-opacity-0"
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
props.setState(false);
|
props.setState(false);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
className={`p-10 bg-light rounded-lg shadow-2xl shadow-shade grid gap-4 place-items-center transition-transform ${
|
className={`relative p-10 bg-light rounded-lg shadow-2xl shadow-shade grid gap-4 place-items-center transition-transform ${
|
||||||
props.state ? "scale-100" : "scale-0"
|
props.state ? "scale-100" : "scale-0"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
<Button
|
||||||
|
className="!p-1 absolute -top-16 bg-light border-light border-4"
|
||||||
|
onClick={() => props.setState(false)}
|
||||||
|
>
|
||||||
|
<span className="material-icons p-1">close</span>
|
||||||
|
</Button>
|
||||||
{props.children}
|
{props.children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,15 +1,20 @@
|
||||||
import Chip from "components/Chip";
|
import Chip from "components/Chip";
|
||||||
import { GetContentTextQuery } from "graphql/operations-types";
|
import {
|
||||||
|
GetContentTextQuery,
|
||||||
|
GetWebsiteInterfaceQuery,
|
||||||
|
} from "graphql/operations-types";
|
||||||
import Img, { ImageQuality } from "./Img";
|
import Img, { ImageQuality } from "./Img";
|
||||||
import ReactDOMServer from "react-dom/server";
|
import ReactDOMServer from "react-dom/server";
|
||||||
|
|
||||||
type RecorderChipProps = {
|
type RecorderChipProps = {
|
||||||
className?: string;
|
className?: string;
|
||||||
recorder: GetContentTextQuery["contents"]["data"][number]["attributes"]["text_set"][number]["transcribers"]["data"][number];
|
recorder: GetContentTextQuery["contents"]["data"][number]["attributes"]["text_set"][number]["transcribers"]["data"][number];
|
||||||
|
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RecorderChip(props: RecorderChipProps): JSX.Element {
|
export default function RecorderChip(props: RecorderChipProps): JSX.Element {
|
||||||
const recorder = props.recorder;
|
const recorder = props.recorder;
|
||||||
|
const langui = props.langui;
|
||||||
return (
|
return (
|
||||||
<Chip
|
<Chip
|
||||||
key={recorder.id}
|
key={recorder.id}
|
||||||
|
@ -28,7 +33,7 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
|
||||||
</div>
|
</div>
|
||||||
{recorder.attributes.languages.data.length > 0 && (
|
{recorder.attributes.languages.data.length > 0 && (
|
||||||
<div className="flex flex-row flex-wrap gap-1">
|
<div className="flex flex-row flex-wrap gap-1">
|
||||||
<p>Languages:</p>
|
<p>{langui.languages}:</p>
|
||||||
{recorder.attributes.languages.data.map((language) => (
|
{recorder.attributes.languages.data.map((language) => (
|
||||||
<Chip key={language.attributes.code}>
|
<Chip key={language.attributes.code}>
|
||||||
{language.attributes.code.toUpperCase()}
|
{language.attributes.code.toUpperCase()}
|
||||||
|
@ -38,7 +43,7 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
|
||||||
)}
|
)}
|
||||||
{recorder.attributes.pronouns && (
|
{recorder.attributes.pronouns && (
|
||||||
<div className="flex flex-row flex-wrap gap-1">
|
<div className="flex flex-row flex-wrap gap-1">
|
||||||
<p>Pronouns:</p>
|
<p>{langui.pronouns}:</p>
|
||||||
<Chip>{recorder.attributes.pronouns}</Chip>
|
<Chip>{recorder.attributes.pronouns}</Chip>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -15,7 +15,7 @@ export default function Select(props: SelectProps): JSX.Element {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`relative transition-[filter] ${
|
className={`relative text-center transition-[filter] ${
|
||||||
opened && "drop-shadow-shade-lg z-10"
|
opened && "drop-shadow-shade-lg z-10"
|
||||||
} ${props.className}`}
|
} ${props.className}`}
|
||||||
>
|
>
|
||||||
|
@ -49,7 +49,7 @@ export default function Select(props: SelectProps): JSX.Element {
|
||||||
{index !== props.state && (
|
{index !== props.state && (
|
||||||
<div
|
<div
|
||||||
className="bg-light hover:bg-mid transition-colors cursor-pointer p-1 last-of-type:rounded-b-[1em]"
|
className="bg-light hover:bg-mid transition-colors cursor-pointer p-1 last-of-type:rounded-b-[1em]"
|
||||||
key={option}
|
key={index}
|
||||||
id={option}
|
id={option}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setOpened(false);
|
setOpened(false);
|
||||||
|
|
|
@ -5,13 +5,20 @@ import React, { ReactNode, useContext } from "react";
|
||||||
export interface AppLayoutState {
|
export interface AppLayoutState {
|
||||||
subPanelOpen: boolean | undefined;
|
subPanelOpen: boolean | undefined;
|
||||||
languagePanelOpen: boolean | undefined;
|
languagePanelOpen: boolean | undefined;
|
||||||
|
configPanelOpen: boolean | undefined;
|
||||||
mainPanelReduced: boolean | undefined;
|
mainPanelReduced: boolean | undefined;
|
||||||
mainPanelOpen: boolean | undefined;
|
mainPanelOpen: boolean | undefined;
|
||||||
darkMode: boolean | undefined;
|
darkMode: boolean | undefined;
|
||||||
|
selectedThemeMode: boolean | undefined;
|
||||||
|
fontSize: number | undefined;
|
||||||
|
dyslexic: boolean | undefined;
|
||||||
|
currency: string | undefined;
|
||||||
|
playerName: string | undefined;
|
||||||
setSubPanelOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
|
setSubPanelOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
|
||||||
setLanguagePanelOpen: React.Dispatch<
|
setLanguagePanelOpen: React.Dispatch<
|
||||||
React.SetStateAction<boolean | undefined>
|
React.SetStateAction<boolean | undefined>
|
||||||
>;
|
>;
|
||||||
|
setConfigPanelOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
|
||||||
setMainPanelReduced: React.Dispatch<
|
setMainPanelReduced: React.Dispatch<
|
||||||
React.SetStateAction<boolean | undefined>
|
React.SetStateAction<boolean | undefined>
|
||||||
>;
|
>;
|
||||||
|
@ -20,20 +27,35 @@ export interface AppLayoutState {
|
||||||
setSelectedThemeMode: React.Dispatch<
|
setSelectedThemeMode: React.Dispatch<
|
||||||
React.SetStateAction<boolean | undefined>
|
React.SetStateAction<boolean | undefined>
|
||||||
>;
|
>;
|
||||||
|
setFontSize: React.Dispatch<React.SetStateAction<number | undefined>>;
|
||||||
|
setDyslexic: React.Dispatch<React.SetStateAction<boolean | undefined>>;
|
||||||
|
setCurrency: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||||
|
setPlayerName: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const initialState: AppLayoutState = {
|
const initialState: AppLayoutState = {
|
||||||
subPanelOpen: false,
|
subPanelOpen: false,
|
||||||
languagePanelOpen: false,
|
languagePanelOpen: false,
|
||||||
|
configPanelOpen: false,
|
||||||
mainPanelReduced: false,
|
mainPanelReduced: false,
|
||||||
mainPanelOpen: false,
|
mainPanelOpen: false,
|
||||||
darkMode: false,
|
darkMode: false,
|
||||||
|
selectedThemeMode: false,
|
||||||
|
fontSize: 1,
|
||||||
|
dyslexic: false,
|
||||||
|
currency: "USD",
|
||||||
|
playerName: "",
|
||||||
setSubPanelOpen: () => {},
|
setSubPanelOpen: () => {},
|
||||||
setLanguagePanelOpen: () => {},
|
setLanguagePanelOpen: () => {},
|
||||||
setMainPanelReduced: () => {},
|
setMainPanelReduced: () => {},
|
||||||
setMainPanelOpen: () => {},
|
setMainPanelOpen: () => {},
|
||||||
setDarkMode: () => {},
|
setDarkMode: () => {},
|
||||||
setSelectedThemeMode: () => {},
|
setSelectedThemeMode: () => {},
|
||||||
|
setConfigPanelOpen: () => {},
|
||||||
|
setFontSize: () => {},
|
||||||
|
setDyslexic: () => {},
|
||||||
|
setCurrency: () => {},
|
||||||
|
setPlayerName: () => {},
|
||||||
};
|
};
|
||||||
|
|
||||||
const AppContext = React.createContext<AppLayoutState>(initialState);
|
const AppContext = React.createContext<AppLayoutState>(initialState);
|
||||||
|
@ -57,6 +79,10 @@ export const AppContextProvider = (props: Props) => {
|
||||||
boolean | undefined
|
boolean | undefined
|
||||||
>("languagePanelOpen", initialState.languagePanelOpen);
|
>("languagePanelOpen", initialState.languagePanelOpen);
|
||||||
|
|
||||||
|
const [configPanelOpen, setConfigPanelOpen] = useStateWithLocalStorage<
|
||||||
|
boolean | undefined
|
||||||
|
>("configPanelOpen", initialState.configPanelOpen);
|
||||||
|
|
||||||
const [mainPanelReduced, setMainPanelReduced] = useStateWithLocalStorage<
|
const [mainPanelReduced, setMainPanelReduced] = useStateWithLocalStorage<
|
||||||
boolean | undefined
|
boolean | undefined
|
||||||
>("mainPanelReduced", initialState.mainPanelReduced);
|
>("mainPanelReduced", initialState.mainPanelReduced);
|
||||||
|
@ -65,25 +91,53 @@ export const AppContextProvider = (props: Props) => {
|
||||||
boolean | undefined
|
boolean | undefined
|
||||||
>("mainPanelOpen", initialState.mainPanelOpen);
|
>("mainPanelOpen", initialState.mainPanelOpen);
|
||||||
|
|
||||||
const [darkMode, setDarkMode, setSelectedThemeMode] = useDarkMode(
|
const [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode] =
|
||||||
"darkMode",
|
useDarkMode("darkMode", initialState.darkMode);
|
||||||
initialState.darkMode
|
|
||||||
|
const [fontSize, setFontSize] = useStateWithLocalStorage<number | undefined>(
|
||||||
|
"fontSize",
|
||||||
|
initialState.fontSize
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const [dyslexic, setDyslexic] = useStateWithLocalStorage<boolean | undefined>(
|
||||||
|
"dyslexic",
|
||||||
|
initialState.dyslexic
|
||||||
|
);
|
||||||
|
|
||||||
|
const [currency, setCurrency] = useStateWithLocalStorage<string | undefined>(
|
||||||
|
"currency",
|
||||||
|
initialState.currency
|
||||||
|
);
|
||||||
|
|
||||||
|
const [playerName, setPlayerName] = useStateWithLocalStorage<
|
||||||
|
string | undefined
|
||||||
|
>("playerName", initialState.playerName);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppContext.Provider
|
<AppContext.Provider
|
||||||
value={{
|
value={{
|
||||||
subPanelOpen,
|
subPanelOpen,
|
||||||
languagePanelOpen,
|
languagePanelOpen,
|
||||||
|
configPanelOpen,
|
||||||
mainPanelReduced,
|
mainPanelReduced,
|
||||||
mainPanelOpen,
|
mainPanelOpen,
|
||||||
darkMode,
|
darkMode,
|
||||||
|
selectedThemeMode,
|
||||||
|
fontSize,
|
||||||
|
dyslexic,
|
||||||
|
currency,
|
||||||
|
playerName,
|
||||||
setSubPanelOpen,
|
setSubPanelOpen,
|
||||||
setLanguagePanelOpen,
|
setLanguagePanelOpen,
|
||||||
|
setConfigPanelOpen,
|
||||||
setMainPanelReduced,
|
setMainPanelReduced,
|
||||||
setMainPanelOpen,
|
setMainPanelOpen,
|
||||||
setDarkMode,
|
setDarkMode,
|
||||||
setSelectedThemeMode,
|
setSelectedThemeMode,
|
||||||
|
setFontSize,
|
||||||
|
setDyslexic,
|
||||||
|
setCurrency,
|
||||||
|
setPlayerName,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{props.children}
|
{props.children}
|
||||||
|
|
|
@ -83,6 +83,32 @@ query getWebsiteInterface($language_code: String) {
|
||||||
group_by
|
group_by
|
||||||
select_option_sidebar
|
select_option_sidebar
|
||||||
group
|
group
|
||||||
|
settings
|
||||||
|
theme
|
||||||
|
light
|
||||||
|
auto
|
||||||
|
dark
|
||||||
|
font_size
|
||||||
|
player_name
|
||||||
|
currency
|
||||||
|
font
|
||||||
|
calculated
|
||||||
|
status_incomplete
|
||||||
|
status_draft
|
||||||
|
status_review
|
||||||
|
status_done
|
||||||
|
incomplete
|
||||||
|
draft
|
||||||
|
review
|
||||||
|
done
|
||||||
|
status
|
||||||
|
transcribers
|
||||||
|
translators
|
||||||
|
proofreaders
|
||||||
|
transcript_notice
|
||||||
|
translation_notice
|
||||||
|
source_language
|
||||||
|
pronouns
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -174,6 +200,7 @@ query getLibraryItemsPreview($language_code: String) {
|
||||||
attributes {
|
attributes {
|
||||||
symbol
|
symbol
|
||||||
code
|
code
|
||||||
|
rate_to_usd
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -322,6 +349,7 @@ query getLibraryItem($slug: String, $language_code: String) {
|
||||||
attributes {
|
attributes {
|
||||||
symbol
|
symbol
|
||||||
code
|
code
|
||||||
|
rate_to_usd
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -490,6 +518,7 @@ query getLibraryItem($slug: String, $language_code: String) {
|
||||||
attributes {
|
attributes {
|
||||||
symbol
|
symbol
|
||||||
code
|
code
|
||||||
|
rate_to_usd
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1057,3 +1086,30 @@ query getContentText($slug: String, $language_code: String) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
query getCurrencies {
|
||||||
|
currencies {
|
||||||
|
data {
|
||||||
|
id
|
||||||
|
attributes {
|
||||||
|
code
|
||||||
|
symbol
|
||||||
|
rate_to_usd
|
||||||
|
display_decimals
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
query getLanguages {
|
||||||
|
languages {
|
||||||
|
data {
|
||||||
|
id
|
||||||
|
attributes {
|
||||||
|
name
|
||||||
|
code
|
||||||
|
localized_name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -165,6 +165,32 @@ export type GetWebsiteInterfaceQuery = {
|
||||||
group_by: string;
|
group_by: string;
|
||||||
select_option_sidebar: string;
|
select_option_sidebar: string;
|
||||||
group: string;
|
group: string;
|
||||||
|
settings: string;
|
||||||
|
theme: string;
|
||||||
|
light: string;
|
||||||
|
auto: string;
|
||||||
|
dark: string;
|
||||||
|
font_size: string;
|
||||||
|
player_name: string;
|
||||||
|
currency: string;
|
||||||
|
font: string;
|
||||||
|
calculated: string;
|
||||||
|
status_incomplete: string;
|
||||||
|
status_draft: string;
|
||||||
|
status_review: string;
|
||||||
|
status_done: string;
|
||||||
|
incomplete: string;
|
||||||
|
draft: string;
|
||||||
|
review: string;
|
||||||
|
done: string;
|
||||||
|
status: string;
|
||||||
|
transcribers: string;
|
||||||
|
translators: string;
|
||||||
|
proofreaders: string;
|
||||||
|
transcript_notice: string;
|
||||||
|
translation_notice: string;
|
||||||
|
source_language: string;
|
||||||
|
pronouns: string;
|
||||||
};
|
};
|
||||||
}>;
|
}>;
|
||||||
};
|
};
|
||||||
|
@ -286,6 +312,7 @@ export type GetLibraryItemsPreviewQuery = {
|
||||||
__typename: "Currency";
|
__typename: "Currency";
|
||||||
symbol: string;
|
symbol: string;
|
||||||
code: string;
|
code: string;
|
||||||
|
rate_to_usd: number;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -478,6 +505,7 @@ export type GetLibraryItemQuery = {
|
||||||
__typename: "Currency";
|
__typename: "Currency";
|
||||||
symbol: string;
|
symbol: string;
|
||||||
code: string;
|
code: string;
|
||||||
|
rate_to_usd: number;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -693,6 +721,7 @@ export type GetLibraryItemQuery = {
|
||||||
__typename: "Currency";
|
__typename: "Currency";
|
||||||
symbol: string;
|
symbol: string;
|
||||||
code: string;
|
code: string;
|
||||||
|
rate_to_usd: number;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -1416,3 +1445,42 @@ export type GetContentTextQuery = {
|
||||||
}>;
|
}>;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type GetCurrenciesQueryVariables = Exact<{ [key: string]: never }>;
|
||||||
|
|
||||||
|
export type GetCurrenciesQuery = {
|
||||||
|
__typename: "Query";
|
||||||
|
currencies: {
|
||||||
|
__typename: "CurrencyEntityResponseCollection";
|
||||||
|
data: Array<{
|
||||||
|
__typename: "CurrencyEntity";
|
||||||
|
id: string;
|
||||||
|
attributes: {
|
||||||
|
__typename: "Currency";
|
||||||
|
code: string;
|
||||||
|
symbol: string;
|
||||||
|
rate_to_usd: number;
|
||||||
|
display_decimals: boolean;
|
||||||
|
};
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type GetLanguagesQueryVariables = Exact<{ [key: string]: never }>;
|
||||||
|
|
||||||
|
export type GetLanguagesQuery = {
|
||||||
|
__typename: "Query";
|
||||||
|
languages: {
|
||||||
|
__typename: "LanguageEntityResponseCollection";
|
||||||
|
data: Array<{
|
||||||
|
__typename: "LanguageEntity";
|
||||||
|
id: string;
|
||||||
|
attributes: {
|
||||||
|
__typename: "Language";
|
||||||
|
name: string;
|
||||||
|
code: string;
|
||||||
|
localized_name: string;
|
||||||
|
};
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
|
@ -11,8 +11,12 @@ import {
|
||||||
GetContentsSlugsQueryVariables,
|
GetContentsSlugsQueryVariables,
|
||||||
GetContentTextQuery,
|
GetContentTextQuery,
|
||||||
GetContentTextQueryVariables,
|
GetContentTextQueryVariables,
|
||||||
|
GetCurrenciesQuery,
|
||||||
|
GetCurrenciesQueryVariables,
|
||||||
GetErasQuery,
|
GetErasQuery,
|
||||||
GetErasQueryVariables,
|
GetErasQueryVariables,
|
||||||
|
GetLanguagesQuery,
|
||||||
|
GetLanguagesQueryVariables,
|
||||||
GetLibraryItemQuery,
|
GetLibraryItemQuery,
|
||||||
GetLibraryItemQueryVariables,
|
GetLibraryItemQueryVariables,
|
||||||
GetLibraryItemsPreviewQuery,
|
GetLibraryItemsPreviewQuery,
|
||||||
|
@ -123,3 +127,17 @@ export async function getContentText(
|
||||||
const query = getQueryFromOperations("getContentText");
|
const query = getQueryFromOperations("getContentText");
|
||||||
return await graphQL(query, JSON.stringify(variables));
|
return await graphQL(query, JSON.stringify(variables));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function getCurrencies(
|
||||||
|
variables: GetCurrenciesQueryVariables
|
||||||
|
): Promise<GetCurrenciesQuery> {
|
||||||
|
const query = getQueryFromOperations("getCurrencies");
|
||||||
|
return await graphQL(query, JSON.stringify(variables));
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getLanguages(
|
||||||
|
variables: GetLanguagesQueryVariables
|
||||||
|
): Promise<GetLanguagesQuery> {
|
||||||
|
const query = getQueryFromOperations("getLanguages");
|
||||||
|
return await graphQL(query, JSON.stringify(variables));
|
||||||
|
}
|
||||||
|
|
|
@ -1647,6 +1647,7 @@ input CurrencyFiltersInput {
|
||||||
id: IDFilterInput
|
id: IDFilterInput
|
||||||
symbol: StringFilterInput
|
symbol: StringFilterInput
|
||||||
code: StringFilterInput
|
code: StringFilterInput
|
||||||
|
rate_to_usd: FloatFilterInput
|
||||||
createdAt: DateTimeFilterInput
|
createdAt: DateTimeFilterInput
|
||||||
updatedAt: DateTimeFilterInput
|
updatedAt: DateTimeFilterInput
|
||||||
and: [CurrencyFiltersInput]
|
and: [CurrencyFiltersInput]
|
||||||
|
@ -1657,11 +1658,13 @@ input CurrencyFiltersInput {
|
||||||
input CurrencyInput {
|
input CurrencyInput {
|
||||||
symbol: String
|
symbol: String
|
||||||
code: String
|
code: String
|
||||||
|
rate_to_usd: Float
|
||||||
}
|
}
|
||||||
|
|
||||||
type Currency {
|
type Currency {
|
||||||
symbol: String!
|
symbol: String!
|
||||||
code: String!
|
code: String!
|
||||||
|
rate_to_usd: Float
|
||||||
createdAt: DateTime
|
createdAt: DateTime
|
||||||
updatedAt: DateTime
|
updatedAt: DateTime
|
||||||
}
|
}
|
||||||
|
@ -2099,46 +2102,6 @@ type MetadataTypeEntityResponseCollection {
|
||||||
meta: ResponseCollectionMeta!
|
meta: ResponseCollectionMeta!
|
||||||
}
|
}
|
||||||
|
|
||||||
input OtherSubtypeFiltersInput {
|
|
||||||
id: IDFilterInput
|
|
||||||
slug: StringFilterInput
|
|
||||||
createdAt: DateTimeFilterInput
|
|
||||||
updatedAt: DateTimeFilterInput
|
|
||||||
and: [OtherSubtypeFiltersInput]
|
|
||||||
or: [OtherSubtypeFiltersInput]
|
|
||||||
not: OtherSubtypeFiltersInput
|
|
||||||
}
|
|
||||||
|
|
||||||
input OtherSubtypeInput {
|
|
||||||
slug: String
|
|
||||||
titles: [ComponentTranslationsSimpleTitleInput]
|
|
||||||
}
|
|
||||||
|
|
||||||
type OtherSubtype {
|
|
||||||
slug: String!
|
|
||||||
titles(
|
|
||||||
filters: ComponentTranslationsSimpleTitleFiltersInput
|
|
||||||
pagination: PaginationArg = {}
|
|
||||||
sort: [String] = []
|
|
||||||
): [ComponentTranslationsSimpleTitle]
|
|
||||||
createdAt: DateTime
|
|
||||||
updatedAt: DateTime
|
|
||||||
}
|
|
||||||
|
|
||||||
type OtherSubtypeEntity {
|
|
||||||
id: ID
|
|
||||||
attributes: OtherSubtype
|
|
||||||
}
|
|
||||||
|
|
||||||
type OtherSubtypeEntityResponse {
|
|
||||||
data: OtherSubtypeEntity
|
|
||||||
}
|
|
||||||
|
|
||||||
type OtherSubtypeEntityResponseCollection {
|
|
||||||
data: [OtherSubtypeEntity!]!
|
|
||||||
meta: ResponseCollectionMeta!
|
|
||||||
}
|
|
||||||
|
|
||||||
input PostFiltersInput {
|
input PostFiltersInput {
|
||||||
id: IDFilterInput
|
id: IDFilterInput
|
||||||
authors: RecorderFiltersInput
|
authors: RecorderFiltersInput
|
||||||
|
@ -2655,6 +2618,7 @@ input WebsiteInterfaceFiltersInput {
|
||||||
order_by: StringFilterInput
|
order_by: StringFilterInput
|
||||||
group_by: StringFilterInput
|
group_by: StringFilterInput
|
||||||
select_option_sidebar: StringFilterInput
|
select_option_sidebar: StringFilterInput
|
||||||
|
group: StringFilterInput
|
||||||
createdAt: DateTimeFilterInput
|
createdAt: DateTimeFilterInput
|
||||||
updatedAt: DateTimeFilterInput
|
updatedAt: DateTimeFilterInput
|
||||||
and: [WebsiteInterfaceFiltersInput]
|
and: [WebsiteInterfaceFiltersInput]
|
||||||
|
@ -2742,6 +2706,7 @@ input WebsiteInterfaceInput {
|
||||||
order_by: String
|
order_by: String
|
||||||
group_by: String
|
group_by: String
|
||||||
select_option_sidebar: String
|
select_option_sidebar: String
|
||||||
|
group: String
|
||||||
}
|
}
|
||||||
|
|
||||||
type WebsiteInterface {
|
type WebsiteInterface {
|
||||||
|
@ -2824,6 +2789,7 @@ type WebsiteInterface {
|
||||||
order_by: String
|
order_by: String
|
||||||
group_by: String
|
group_by: String
|
||||||
select_option_sidebar: String
|
select_option_sidebar: String
|
||||||
|
group: String
|
||||||
createdAt: DateTime
|
createdAt: DateTime
|
||||||
updatedAt: DateTime
|
updatedAt: DateTime
|
||||||
}
|
}
|
||||||
|
@ -2997,7 +2963,6 @@ union GenericMorph =
|
||||||
| LibraryItem
|
| LibraryItem
|
||||||
| MerchItem
|
| MerchItem
|
||||||
| MetadataType
|
| MetadataType
|
||||||
| OtherSubtype
|
|
||||||
| Post
|
| Post
|
||||||
| RangedContent
|
| RangedContent
|
||||||
| Recorder
|
| Recorder
|
||||||
|
@ -3121,12 +3086,6 @@ type Query {
|
||||||
pagination: PaginationArg = {}
|
pagination: PaginationArg = {}
|
||||||
sort: [String] = []
|
sort: [String] = []
|
||||||
): MetadataTypeEntityResponseCollection
|
): MetadataTypeEntityResponseCollection
|
||||||
otherSubtype(id: ID): OtherSubtypeEntityResponse
|
|
||||||
otherSubtypes(
|
|
||||||
filters: OtherSubtypeFiltersInput
|
|
||||||
pagination: PaginationArg = {}
|
|
||||||
sort: [String] = []
|
|
||||||
): OtherSubtypeEntityResponseCollection
|
|
||||||
post(id: ID): PostEntityResponse
|
post(id: ID): PostEntityResponse
|
||||||
posts(
|
posts(
|
||||||
filters: PostFiltersInput
|
filters: PostFiltersInput
|
||||||
|
@ -3277,12 +3236,6 @@ type Mutation {
|
||||||
data: MetadataTypeInput!
|
data: MetadataTypeInput!
|
||||||
): MetadataTypeEntityResponse
|
): MetadataTypeEntityResponse
|
||||||
deleteMetadataType(id: ID!): MetadataTypeEntityResponse
|
deleteMetadataType(id: ID!): MetadataTypeEntityResponse
|
||||||
createOtherSubtype(data: OtherSubtypeInput!): OtherSubtypeEntityResponse
|
|
||||||
updateOtherSubtype(
|
|
||||||
id: ID!
|
|
||||||
data: OtherSubtypeInput!
|
|
||||||
): OtherSubtypeEntityResponse
|
|
||||||
deleteOtherSubtype(id: ID!): OtherSubtypeEntityResponse
|
|
||||||
createPost(data: PostInput!): PostEntityResponse
|
createPost(data: PostInput!): PostEntityResponse
|
||||||
updatePost(id: ID!, data: PostInput!): PostEntityResponse
|
updatePost(id: ID!, data: PostInput!): PostEntityResponse
|
||||||
deletePost(id: ID!): PostEntityResponse
|
deletePost(id: ID!): PostEntityResponse
|
||||||
|
|
|
@ -6,6 +6,7 @@ export default function useDarkMode(
|
||||||
key: string,
|
key: string,
|
||||||
initialValue: boolean | undefined
|
initialValue: boolean | undefined
|
||||||
): [
|
): [
|
||||||
|
boolean | undefined,
|
||||||
boolean | undefined,
|
boolean | undefined,
|
||||||
React.Dispatch<React.SetStateAction<boolean | undefined>>,
|
React.Dispatch<React.SetStateAction<boolean | undefined>>,
|
||||||
React.Dispatch<React.SetStateAction<boolean | undefined>>
|
React.Dispatch<React.SetStateAction<boolean | undefined>>
|
||||||
|
@ -23,5 +24,5 @@ export default function useDarkMode(
|
||||||
if (selectedThemeMode === false) setDarkMode(prefersDarkMode);
|
if (selectedThemeMode === false) setDarkMode(prefersDarkMode);
|
||||||
}, [selectedThemeMode, prefersDarkMode, setDarkMode]);
|
}, [selectedThemeMode, prefersDarkMode, setDarkMode]);
|
||||||
|
|
||||||
return [darkMode, setDarkMode, setSelectedThemeMode];
|
return [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode];
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,19 +1,15 @@
|
||||||
import Link from "next/link";
|
|
||||||
import ContentPanel from "components/Panels/ContentPanel";
|
import ContentPanel from "components/Panels/ContentPanel";
|
||||||
import { getWebsiteInterface } from "graphql/operations";
|
|
||||||
import { GetStaticProps } from "next";
|
import { GetStaticProps } from "next";
|
||||||
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
|
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
import ReturnButton, {
|
import ReturnButton, {
|
||||||
ReturnButtonType,
|
ReturnButtonType,
|
||||||
} from "components/PanelComponents/ReturnButton";
|
} from "components/PanelComponents/ReturnButton";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type FourOhFourProps = {
|
interface FourOhFourProps extends AppStaticProps {}
|
||||||
langui: GetWebsiteInterfaceQuery;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function FourOhFour(props: FourOhFourProps): JSX.Element {
|
export default function FourOhFour(props: FourOhFourProps): JSX.Element {
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
const { langui } = props;
|
||||||
const contentPanel = (
|
const contentPanel = (
|
||||||
<ContentPanel>
|
<ContentPanel>
|
||||||
<h1>404 - {langui.page_not_found}</h1>
|
<h1>404 - {langui.page_not_found}</h1>
|
||||||
|
@ -25,21 +21,14 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element {
|
||||||
/>
|
/>
|
||||||
</ContentPanel>
|
</ContentPanel>
|
||||||
);
|
);
|
||||||
return (
|
return <AppLayout navTitle="404" contentPanel={contentPanel} {...props} />;
|
||||||
<AppLayout navTitle="404" langui={langui} contentPanel={contentPanel} />
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.locale) {
|
const props: FourOhFourProps = {
|
||||||
const props: FourOhFourProps = {
|
...(await getAppStaticProps(context)),
|
||||||
langui: await getWebsiteInterface({
|
};
|
||||||
language_code: context.locale,
|
return {
|
||||||
}),
|
props: props,
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,14 +2,15 @@ import type { AppProps } from "next/app";
|
||||||
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/opendyslexic/400.css"
|
||||||
import "@fontsource/material-icons";
|
import "@fontsource/material-icons";
|
||||||
|
|
||||||
import { AppContextProvider } from "contexts/AppLayoutContext";
|
import { AppContextProvider } from "contexts/AppLayoutContext";
|
||||||
|
|
||||||
export default function AccordsLibraryApp(appProps: AppProps) {
|
export default function AccordsLibraryApp(props: AppProps) {
|
||||||
return (
|
return (
|
||||||
<AppContextProvider>
|
<AppContextProvider>
|
||||||
<appProps.Component {...appProps.pageProps} />
|
<props.Component {...props.pageProps} />
|
||||||
</AppContextProvider>
|
</AppContextProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,6 +16,7 @@ class MyDocument extends Document {
|
||||||
return (
|
return (
|
||||||
<Html>
|
<Html>
|
||||||
<Head>
|
<Head>
|
||||||
|
|
||||||
<link
|
<link
|
||||||
rel="apple-touch-icon"
|
rel="apple-touch-icon"
|
||||||
sizes="180x180"
|
sizes="180x180"
|
||||||
|
|
|
@ -1,16 +1,13 @@
|
||||||
import SubPanel from "components/Panels/SubPanel";
|
import SubPanel from "components/Panels/SubPanel";
|
||||||
import PanelHeader from "components/PanelComponents/PanelHeader";
|
import PanelHeader from "components/PanelComponents/PanelHeader";
|
||||||
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
|
|
||||||
import { GetStaticProps } from "next";
|
import { GetStaticProps } from "next";
|
||||||
import { getWebsiteInterface } from "graphql/operations";
|
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type AboutUsProps = {
|
interface AboutUsProps extends AppStaticProps {}
|
||||||
langui: GetWebsiteInterfaceQuery;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function AboutUs(props: AboutUsProps): JSX.Element {
|
export default function AboutUs(props: AboutUsProps): JSX.Element {
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
const { langui } = props;
|
||||||
const subPanel = (
|
const subPanel = (
|
||||||
<SubPanel>
|
<SubPanel>
|
||||||
<PanelHeader
|
<PanelHeader
|
||||||
|
@ -21,24 +18,15 @@ export default function AboutUs(props: AboutUsProps): JSX.Element {
|
||||||
</SubPanel>
|
</SubPanel>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<AppLayout
|
<AppLayout navTitle={langui.about_us} subPanel={subPanel} {...props} />
|
||||||
navTitle={langui.about_us}
|
|
||||||
langui={langui}
|
|
||||||
subPanel={subPanel}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.locale) {
|
const props: AboutUsProps = {
|
||||||
const props: AboutUsProps = {
|
...(await getAppStaticProps(context)),
|
||||||
langui: await getWebsiteInterface({
|
};
|
||||||
language_code: context.locale,
|
return {
|
||||||
}),
|
props: props,
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,16 +1,13 @@
|
||||||
import SubPanel from "components/Panels/SubPanel";
|
import SubPanel from "components/Panels/SubPanel";
|
||||||
import PanelHeader from "components/PanelComponents/PanelHeader";
|
import PanelHeader from "components/PanelComponents/PanelHeader";
|
||||||
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
|
|
||||||
import { GetStaticProps } from "next";
|
import { GetStaticProps } from "next";
|
||||||
import { getWebsiteInterface } from "graphql/operations";
|
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type ArchivesProps = {
|
interface ArchivesProps extends AppStaticProps {}
|
||||||
langui: GetWebsiteInterfaceQuery;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Archives(props: ArchivesProps): JSX.Element {
|
export default function Archives(props: ArchivesProps): JSX.Element {
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
const { langui } = props;
|
||||||
const subPanel = (
|
const subPanel = (
|
||||||
<SubPanel>
|
<SubPanel>
|
||||||
<PanelHeader
|
<PanelHeader
|
||||||
|
@ -21,24 +18,15 @@ export default function Archives(props: ArchivesProps): JSX.Element {
|
||||||
</SubPanel>
|
</SubPanel>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<AppLayout
|
<AppLayout navTitle={langui.archives} subPanel={subPanel} {...props} />
|
||||||
navTitle={langui.archives}
|
|
||||||
langui={langui}
|
|
||||||
subPanel={subPanel}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.locale) {
|
const props: ArchivesProps = {
|
||||||
const props: ArchivesProps = {
|
...(await getAppStaticProps(context)),
|
||||||
langui: await getWebsiteInterface({
|
};
|
||||||
language_code: context.locale,
|
return {
|
||||||
}),
|
props: props,
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,16 +1,13 @@
|
||||||
import SubPanel from "components/Panels/SubPanel";
|
import SubPanel from "components/Panels/SubPanel";
|
||||||
import PanelHeader from "components/PanelComponents/PanelHeader";
|
import PanelHeader from "components/PanelComponents/PanelHeader";
|
||||||
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
|
|
||||||
import { GetStaticProps } from "next";
|
import { GetStaticProps } from "next";
|
||||||
import { getWebsiteInterface } from "graphql/operations";
|
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type ChroniclesProps = {
|
interface ChroniclesProps extends AppStaticProps {}
|
||||||
langui: GetWebsiteInterfaceQuery;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Chronicles(props: ChroniclesProps): JSX.Element {
|
export default function Chronicles(props: ChroniclesProps): JSX.Element {
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
const { langui } = props;
|
||||||
const subPanel = (
|
const subPanel = (
|
||||||
<SubPanel>
|
<SubPanel>
|
||||||
<PanelHeader
|
<PanelHeader
|
||||||
|
@ -21,24 +18,15 @@ export default function Chronicles(props: ChroniclesProps): JSX.Element {
|
||||||
</SubPanel>
|
</SubPanel>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<AppLayout
|
<AppLayout navTitle={langui.chronicles} subPanel={subPanel} {...props} />
|
||||||
navTitle={langui.chronicles}
|
|
||||||
langui={langui}
|
|
||||||
subPanel={subPanel}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.locale) {
|
const props: ChroniclesProps = {
|
||||||
const props: ChroniclesProps = {
|
...(await getAppStaticProps(context)),
|
||||||
langui: await getWebsiteInterface({
|
};
|
||||||
language_code: context.locale,
|
return {
|
||||||
}),
|
props: props,
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,13 +1,6 @@
|
||||||
import { GetStaticPaths, GetStaticProps } from "next";
|
import { GetStaticPaths, GetStaticProps } from "next";
|
||||||
import {
|
import { getContent, getContentsSlugs } from "graphql/operations";
|
||||||
getContent,
|
import { GetContentQuery } from "graphql/operations-types";
|
||||||
getContentsSlugs,
|
|
||||||
getWebsiteInterface,
|
|
||||||
} from "graphql/operations";
|
|
||||||
import {
|
|
||||||
GetContentQuery,
|
|
||||||
GetWebsiteInterfaceQuery,
|
|
||||||
} from "graphql/operations-types";
|
|
||||||
import ContentPanel from "components/Panels/ContentPanel";
|
import ContentPanel from "components/Panels/ContentPanel";
|
||||||
import Button from "components/Button";
|
import Button from "components/Button";
|
||||||
import HorizontalLine from "components/HorizontalLine";
|
import HorizontalLine from "components/HorizontalLine";
|
||||||
|
@ -18,15 +11,14 @@ import ReturnButton, {
|
||||||
ReturnButtonType,
|
ReturnButtonType,
|
||||||
} from "components/PanelComponents/ReturnButton";
|
} from "components/PanelComponents/ReturnButton";
|
||||||
import { prettyinlineTitle, prettySlug } from "queries/helpers";
|
import { prettyinlineTitle, prettySlug } from "queries/helpers";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type ContentIndexProps = {
|
interface ContentIndexProps extends AppStaticProps {
|
||||||
content: GetContentQuery;
|
content: GetContentQuery["contents"]["data"][number]["attributes"];
|
||||||
langui: GetWebsiteInterfaceQuery;
|
}
|
||||||
};
|
|
||||||
|
|
||||||
export default function ContentIndex(props: ContentIndexProps): JSX.Element {
|
export default function ContentIndex(props: ContentIndexProps): JSX.Element {
|
||||||
const content = props.content.contents.data[0].attributes;
|
const { content, langui } = props;
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
|
||||||
const subPanel = (
|
const subPanel = (
|
||||||
<SubPanel>
|
<SubPanel>
|
||||||
<ReturnButton
|
<ReturnButton
|
||||||
|
@ -36,7 +28,6 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
|
||||||
displayOn={ReturnButtonType.Desktop}
|
displayOn={ReturnButtonType.Desktop}
|
||||||
horizontalLine
|
horizontalLine
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</SubPanel>
|
</SubPanel>
|
||||||
);
|
);
|
||||||
const contentPanel = (
|
const contentPanel = (
|
||||||
|
@ -93,46 +84,46 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
|
||||||
: prettySlug(content.slug)
|
: prettySlug(content.slug)
|
||||||
}
|
}
|
||||||
thumbnail={content.thumbnail.data?.attributes}
|
thumbnail={content.thumbnail.data?.attributes}
|
||||||
langui={langui}
|
|
||||||
contentPanel={contentPanel}
|
contentPanel={contentPanel}
|
||||||
subPanel={subPanel}
|
subPanel={subPanel}
|
||||||
description={
|
description={`${langui.type}: ${
|
||||||
content.titles.length > 0 ? content.titles[0].description : undefined
|
content.type.data.attributes.titles.length > 0
|
||||||
|
? content.type.data.attributes.titles[0].title
|
||||||
|
: prettySlug(content.type.data.attributes.slug)
|
||||||
}
|
}
|
||||||
|
${langui.categories}: ${
|
||||||
|
content.categories.data.length > 0 &&
|
||||||
|
content.categories.data
|
||||||
|
.map((category) => {
|
||||||
|
return category.attributes.short;
|
||||||
|
})
|
||||||
|
.join(" | ")
|
||||||
|
}
|
||||||
|
|
||||||
|
${content.titles.length > 0 ? content.titles[0].description : undefined}
|
||||||
|
`}
|
||||||
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.params) {
|
const props: ContentIndexProps = {
|
||||||
if (context.params.slug && context.locale) {
|
...(await getAppStaticProps(context)),
|
||||||
if (context.params.slug instanceof Array)
|
content: (
|
||||||
context.params.slug = context.params.slug.join("");
|
await getContent({
|
||||||
|
slug: context.params?.slug?.toString() || "",
|
||||||
const props: ContentIndexProps = {
|
language_code: context.locale || "en",
|
||||||
content: await getContent({
|
})
|
||||||
slug: context.params.slug,
|
).contents.data[0].attributes,
|
||||||
language_code: context.locale,
|
};
|
||||||
}),
|
return {
|
||||||
langui: await getWebsiteInterface({
|
props: props,
|
||||||
language_code: context.locale,
|
};
|
||||||
}),
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getStaticPaths: GetStaticPaths = async (context) => {
|
export const getStaticPaths: GetStaticPaths = async (context) => {
|
||||||
type Path = {
|
type Path = { params: { slug: string }; locale: string };
|
||||||
params: {
|
|
||||||
slug: string;
|
|
||||||
};
|
|
||||||
locale: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const data = await getContentsSlugs({});
|
const data = await getContentsSlugs({});
|
||||||
const paths: Path[] = [];
|
const paths: Path[] = [];
|
||||||
|
|
|
@ -1,13 +1,8 @@
|
||||||
import { GetStaticPaths, GetStaticProps } from "next";
|
import { GetStaticPaths, GetStaticProps } from "next";
|
||||||
import {
|
import { getContentsSlugs, getContentText } from "graphql/operations";
|
||||||
getContentsSlugs,
|
|
||||||
getContentText,
|
|
||||||
getWebsiteInterface,
|
|
||||||
} from "graphql/operations";
|
|
||||||
import {
|
import {
|
||||||
Enum_Componentsetstextset_Status,
|
Enum_Componentsetstextset_Status,
|
||||||
GetContentTextQuery,
|
GetContentTextQuery,
|
||||||
GetWebsiteInterfaceQuery,
|
|
||||||
} from "graphql/operations-types";
|
} from "graphql/operations-types";
|
||||||
import ContentPanel from "components/Panels/ContentPanel";
|
import ContentPanel from "components/Panels/ContentPanel";
|
||||||
import HorizontalLine from "components/HorizontalLine";
|
import HorizontalLine from "components/HorizontalLine";
|
||||||
|
@ -30,16 +25,16 @@ import { useRouter } from "next/router";
|
||||||
import Chip from "components/Chip";
|
import Chip from "components/Chip";
|
||||||
import ReactTooltip from "react-tooltip";
|
import ReactTooltip from "react-tooltip";
|
||||||
import RecorderChip from "components/RecorderChip";
|
import RecorderChip from "components/RecorderChip";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
interface ContentReadProps {
|
interface ContentReadProps extends AppStaticProps {
|
||||||
content: GetContentTextQuery;
|
content: GetContentTextQuery["contents"]["data"][number]["attributes"];
|
||||||
langui: GetWebsiteInterfaceQuery;
|
contentId: GetContentTextQuery["contents"]["data"][number]["id"];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ContentRead(props: ContentReadProps): JSX.Element {
|
export default function ContentRead(props: ContentReadProps): JSX.Element {
|
||||||
useTesting(props);
|
useTesting(props);
|
||||||
const content = props.content.contents.data[0].attributes;
|
const { langui, content } = props;
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const subPanel = (
|
const subPanel = (
|
||||||
|
@ -57,14 +52,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
|
||||||
<h2 className="text-xl">
|
<h2 className="text-xl">
|
||||||
{content.text_set[0].source_language.data.attributes.code ===
|
{content.text_set[0].source_language.data.attributes.code ===
|
||||||
router.locale
|
router.locale
|
||||||
? "This content is a transcript"
|
? langui.transcript_notice
|
||||||
: "This content is a fan-translation"}
|
: langui.translation_notice}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
{content.text_set[0].source_language.data.attributes.code !==
|
{content.text_set[0].source_language.data.attributes.code !==
|
||||||
router.locale && (
|
router.locale && (
|
||||||
<div className="grid place-items-center gap-2">
|
<div className="grid place-items-center gap-2">
|
||||||
<p className="font-headers">Source language:</p>
|
<p className="font-headers">{langui.source_language}:</p>
|
||||||
<Button
|
<Button
|
||||||
href={router.asPath}
|
href={router.asPath}
|
||||||
locale={
|
locale={
|
||||||
|
@ -79,20 +74,20 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="grid grid-flow-col place-items-center place-content-center gap-2">
|
<div className="grid grid-flow-col place-items-center place-content-center gap-2">
|
||||||
<p className="font-headers">Status:</p>
|
<p className="font-headers">{langui.status}:</p>
|
||||||
|
|
||||||
<Chip
|
<Chip
|
||||||
data-tip={
|
data-tip={
|
||||||
content.text_set[0].status ===
|
content.text_set[0].status ===
|
||||||
Enum_Componentsetstextset_Status.Incomplete
|
Enum_Componentsetstextset_Status.Incomplete
|
||||||
? "This entry is only partially translated/transcribed."
|
? langui.status_incomplete
|
||||||
: content.text_set[0].status ===
|
: content.text_set[0].status ===
|
||||||
Enum_Componentsetstextset_Status.Draft
|
Enum_Componentsetstextset_Status.Draft
|
||||||
? "This entry is just a draft. It usually means that this is a work-in-progress. Translation/transcription might be poor and/or computer-generated."
|
? langui.status_draft
|
||||||
: content.text_set[0].status ===
|
: content.text_set[0].status ===
|
||||||
Enum_Componentsetstextset_Status.Review
|
Enum_Componentsetstextset_Status.Review
|
||||||
? "This entry has not yet being proofread. The content should still be accurate."
|
? langui.status_review
|
||||||
: "This entry has been checked and proofread. If you notice any translation errors or typos, please contact us so we can fix it!"
|
: langui.status_done
|
||||||
}
|
}
|
||||||
data-for={"StatusTooltip"}
|
data-for={"StatusTooltip"}
|
||||||
>
|
>
|
||||||
|
@ -102,10 +97,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
|
||||||
|
|
||||||
{content.text_set[0].transcribers.data.length > 0 && (
|
{content.text_set[0].transcribers.data.length > 0 && (
|
||||||
<div>
|
<div>
|
||||||
<p className="font-headers">Transcribers:</p>
|
<p className="font-headers">{langui.transcribers}:</p>
|
||||||
<div className="grid place-items-center place-content-center gap-2">
|
<div className="grid place-items-center place-content-center gap-2">
|
||||||
{content.text_set[0].transcribers.data.map((recorder) => (
|
{content.text_set[0].transcribers.data.map((recorder) => (
|
||||||
<RecorderChip key={recorder.id} recorder={recorder} />
|
<RecorderChip
|
||||||
|
key={recorder.id}
|
||||||
|
langui={langui}
|
||||||
|
recorder={recorder}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -113,10 +112,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
|
||||||
|
|
||||||
{content.text_set[0].translators.data.length > 0 && (
|
{content.text_set[0].translators.data.length > 0 && (
|
||||||
<div>
|
<div>
|
||||||
<p className="font-headers">Translators:</p>
|
<p className="font-headers">{langui.translators}:</p>
|
||||||
<div className="grid place-items-center place-content-center gap-2">
|
<div className="grid place-items-center place-content-center gap-2">
|
||||||
{content.text_set[0].translators.data.map((recorder) => (
|
{content.text_set[0].translators.data.map((recorder) => (
|
||||||
<RecorderChip key={recorder.id} recorder={recorder} />
|
<RecorderChip
|
||||||
|
key={recorder.id}
|
||||||
|
langui={langui}
|
||||||
|
recorder={recorder}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -124,10 +127,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
|
||||||
|
|
||||||
{content.text_set[0].proofreaders.data.length > 0 && (
|
{content.text_set[0].proofreaders.data.length > 0 && (
|
||||||
<div>
|
<div>
|
||||||
<p className="font-headers">Proofreaders:</p>
|
<p className="font-headers">{langui.proofreaders}:</p>
|
||||||
<div className="grid place-items-center place-content-center gap-2">
|
<div className="grid place-items-center place-content-center gap-2">
|
||||||
{content.text_set[0].proofreaders.data.map((recorder) => (
|
{content.text_set[0].proofreaders.data.map((recorder) => (
|
||||||
<RecorderChip key={recorder.id} recorder={recorder} />
|
<RecorderChip
|
||||||
|
key={recorder.id}
|
||||||
|
langui={langui}
|
||||||
|
recorder={recorder}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -200,35 +207,45 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
|
||||||
: prettySlug(content.slug)
|
: prettySlug(content.slug)
|
||||||
}
|
}
|
||||||
thumbnail={content.thumbnail.data?.attributes}
|
thumbnail={content.thumbnail.data?.attributes}
|
||||||
langui={langui}
|
|
||||||
contentPanel={contentPanel}
|
contentPanel={contentPanel}
|
||||||
subPanel={subPanel}
|
subPanel={subPanel}
|
||||||
extra={extra}
|
extra={extra}
|
||||||
|
description={`${langui.type}: ${
|
||||||
|
content.type.data.attributes.titles.length > 0
|
||||||
|
? content.type.data.attributes.titles[0].title
|
||||||
|
: prettySlug(content.type.data.attributes.slug)
|
||||||
|
}
|
||||||
|
${langui.categories}: ${
|
||||||
|
content.categories.data.length > 0 &&
|
||||||
|
content.categories.data
|
||||||
|
.map((category) => {
|
||||||
|
return category.attributes.short;
|
||||||
|
})
|
||||||
|
.join(" | ")
|
||||||
|
}
|
||||||
|
|
||||||
|
${content.titles.length > 0 ? content.titles[0].description : undefined}
|
||||||
|
`}
|
||||||
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.params) {
|
const content = (
|
||||||
if (context.params.slug && context.locale) {
|
await getContentText({
|
||||||
if (context.params.slug instanceof Array)
|
slug: context.params?.slug?.toString() || "",
|
||||||
context.params.slug = context.params.slug.join("");
|
language_code: context.locale || "en",
|
||||||
|
})
|
||||||
const props: ContentReadProps = {
|
).contents.data[0];
|
||||||
content: await getContentText({
|
const props: ContentReadProps = {
|
||||||
slug: context.params.slug,
|
...(await getAppStaticProps(context)),
|
||||||
language_code: context.locale,
|
content: content.attributes,
|
||||||
}),
|
contentId: content.id,
|
||||||
langui: await getWebsiteInterface({
|
};
|
||||||
language_code: context.locale,
|
return {
|
||||||
}),
|
props: props,
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getStaticPaths: GetStaticPaths = async (context) => {
|
export const getStaticPaths: GetStaticPaths = async (context) => {
|
||||||
|
@ -254,11 +271,10 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
|
||||||
|
|
||||||
export function useTesting(props: ContentReadProps) {
|
export function useTesting(props: ContentReadProps) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const content = props.content.contents.data[0].attributes;
|
const { content, contentId } = props;
|
||||||
|
|
||||||
const contentURL =
|
const contentURL =
|
||||||
"/admin/content-manager/collectionType/api::content.content/" +
|
"/admin/content-manager/collectionType/api::content.content/" + contentId;
|
||||||
props.content.contents.data[0].id;
|
|
||||||
|
|
||||||
if (router.locale === "en") {
|
if (router.locale === "en") {
|
||||||
if (content.categories.data.length === 0) {
|
if (content.categories.data.length === 0) {
|
||||||
|
|
|
@ -3,25 +3,56 @@ import SubPanel from "components/Panels/SubPanel";
|
||||||
import ContentPanel, {
|
import ContentPanel, {
|
||||||
ContentPanelWidthSizes,
|
ContentPanelWidthSizes,
|
||||||
} from "components/Panels/ContentPanel";
|
} from "components/Panels/ContentPanel";
|
||||||
import {
|
import { GetContentsQuery } from "graphql/operations-types";
|
||||||
GetContentsQuery,
|
import { getContents } from "graphql/operations";
|
||||||
GetWebsiteInterfaceQuery,
|
|
||||||
} from "graphql/operations-types";
|
|
||||||
import { getContents, getWebsiteInterface } from "graphql/operations";
|
|
||||||
import PanelHeader from "components/PanelComponents/PanelHeader";
|
import PanelHeader from "components/PanelComponents/PanelHeader";
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
import LibraryContentPreview from "components/Library/LibraryContentPreview";
|
import LibraryContentPreview from "components/Library/LibraryContentPreview";
|
||||||
import { prettyinlineTitle } from "queries/helpers";
|
import { prettyinlineTitle } from "queries/helpers";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type LibraryProps = {
|
interface LibraryProps extends AppStaticProps {
|
||||||
contents: GetContentsQuery;
|
contents: GetContentsQuery["contents"]["data"];
|
||||||
langui: GetWebsiteInterfaceQuery;
|
}
|
||||||
};
|
|
||||||
|
|
||||||
export default function Library(props: LibraryProps): JSX.Element {
|
export default function Library(props: LibraryProps): JSX.Element {
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
const { langui } = props;
|
||||||
|
const subPanel = (
|
||||||
|
<SubPanel>
|
||||||
|
<PanelHeader
|
||||||
|
icon="workspaces"
|
||||||
|
title={langui.contents}
|
||||||
|
description={langui.contents_description}
|
||||||
|
/>
|
||||||
|
</SubPanel>
|
||||||
|
);
|
||||||
|
const contentPanel = (
|
||||||
|
<ContentPanel width={ContentPanelWidthSizes.large}>
|
||||||
|
<div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
|
||||||
|
{props.contents.map((item) => (
|
||||||
|
<LibraryContentPreview key={item.id} item={item.attributes} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ContentPanel>
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<AppLayout
|
||||||
|
navTitle={langui.contents}
|
||||||
|
subPanel={subPanel}
|
||||||
|
contentPanel={contentPanel}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
props.contents.contents.data.sort((a, b) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
|
const contents = (
|
||||||
|
await getContents({
|
||||||
|
language_code: context.locale || "en",
|
||||||
|
})
|
||||||
|
).contents.data;
|
||||||
|
|
||||||
|
contents.sort((a, b) => {
|
||||||
const titleA =
|
const titleA =
|
||||||
a.attributes.titles.length > 0
|
a.attributes.titles.length > 0
|
||||||
? prettyinlineTitle(
|
? prettyinlineTitle(
|
||||||
|
@ -41,48 +72,11 @@ export default function Library(props: LibraryProps): JSX.Element {
|
||||||
return titleA.localeCompare(titleB);
|
return titleA.localeCompare(titleB);
|
||||||
});
|
});
|
||||||
|
|
||||||
const subPanel = (
|
const props: LibraryProps = {
|
||||||
<SubPanel>
|
...(await getAppStaticProps(context)),
|
||||||
<PanelHeader
|
contents: contents,
|
||||||
icon="workspaces"
|
};
|
||||||
title="Contents"
|
return {
|
||||||
description="Laboriosam vitae velit quis. Non et dolor reiciendis officia earum et molestias excepturi. Cupiditate officiis quis qui reprehenderit. Ut neque eos ipsa corrupti autem mollitia inventore. Exercitationem iste magni vel harum."
|
props: props,
|
||||||
/>
|
};
|
||||||
</SubPanel>
|
|
||||||
);
|
|
||||||
const contentPanel = (
|
|
||||||
<ContentPanel width={ContentPanelWidthSizes.large}>
|
|
||||||
<div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
|
|
||||||
{props.contents.contents.data.map((item) => (
|
|
||||||
<LibraryContentPreview key={item.id} item={item.attributes} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</ContentPanel>
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<AppLayout
|
|
||||||
navTitle="Contents"
|
|
||||||
langui={langui}
|
|
||||||
subPanel={subPanel}
|
|
||||||
contentPanel={contentPanel}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
|
||||||
if (context.locale) {
|
|
||||||
const props: LibraryProps = {
|
|
||||||
contents: await getContents({
|
|
||||||
language_code: context.locale,
|
|
||||||
}),
|
|
||||||
langui: await getWebsiteInterface({
|
|
||||||
language_code: context.locale,
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
return { props: {} };
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,20 +1,17 @@
|
||||||
import ContentPanel, {
|
import ContentPanel, {
|
||||||
ContentPanelWidthSizes,
|
ContentPanelWidthSizes,
|
||||||
} from "components/Panels/ContentPanel";
|
} from "components/Panels/ContentPanel";
|
||||||
import { getWebsiteInterface } from "graphql/operations";
|
|
||||||
import { GetStaticProps } from "next";
|
import { GetStaticProps } from "next";
|
||||||
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
|
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
import { useCallback, useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
import Markdawn from "components/Markdown/Markdawn";
|
import Markdawn from "components/Markdown/Markdawn";
|
||||||
import Script from "next/script";
|
import Script from "next/script";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type EditorProps = {
|
interface EditorProps extends AppStaticProps {}
|
||||||
langui: GetWebsiteInterfaceQuery;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Editor(props: EditorProps): JSX.Element {
|
export default function Editor(props: EditorProps): JSX.Element {
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
const { langui } = props;
|
||||||
|
|
||||||
const handleInput = useCallback((e) => {
|
const handleInput = useCallback((e) => {
|
||||||
setMarkdown(e.target.value);
|
setMarkdown(e.target.value);
|
||||||
|
@ -45,12 +42,14 @@ export default function Editor(props: EditorProps): JSX.Element {
|
||||||
onInput={handleInput}
|
onInput={handleInput}
|
||||||
className="bg-mid rounded-xl p-8 w-full font-monospace"
|
className="bg-mid rounded-xl p-8 w-full font-monospace"
|
||||||
value={markdown}
|
value={markdown}
|
||||||
|
title="Input textarea"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<h2 className="mt-4">Convert text to markdown</h2>
|
<h2 className="mt-4">Convert text to markdown</h2>
|
||||||
<textarea
|
<textarea
|
||||||
readOnly
|
readOnly
|
||||||
id="htmlMdTextArea"
|
id="htmlMdTextArea"
|
||||||
|
title="Ouput textarea"
|
||||||
onPaste={(event) => {
|
onPaste={(event) => {
|
||||||
const TurndownService = require("turndown").default;
|
const TurndownService = require("turndown").default;
|
||||||
const turndownService = new TurndownService({
|
const turndownService = new TurndownService({
|
||||||
|
@ -86,22 +85,17 @@ export default function Editor(props: EditorProps): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<AppLayout
|
<AppLayout
|
||||||
navTitle="Markdawn Editor"
|
navTitle="Markdawn Editor"
|
||||||
langui={langui}
|
|
||||||
contentPanel={contentPanel}
|
contentPanel={contentPanel}
|
||||||
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.locale) {
|
const props: EditorProps = {
|
||||||
const props: EditorProps = {
|
...(await getAppStaticProps(context)),
|
||||||
langui: await getWebsiteInterface({
|
};
|
||||||
language_code: context.locale,
|
return {
|
||||||
}),
|
props: props,
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,14 +1,11 @@
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
import { getWebsiteInterface } from "graphql/operations";
|
|
||||||
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
|
|
||||||
import { GetStaticProps } from "next";
|
import { GetStaticProps } from "next";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type GalleryProps = {
|
interface GalleryProps extends AppStaticProps {}
|
||||||
langui: GetWebsiteInterfaceQuery;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Gallery(props: GalleryProps): JSX.Element {
|
export default function Gallery(props: GalleryProps): JSX.Element {
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
const { langui } = props;
|
||||||
const contentPanel = (
|
const contentPanel = (
|
||||||
<iframe
|
<iframe
|
||||||
className="w-full h-screen"
|
className="w-full h-screen"
|
||||||
|
@ -19,22 +16,17 @@ export default function Gallery(props: GalleryProps): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<AppLayout
|
<AppLayout
|
||||||
navTitle={langui.gallery}
|
navTitle={langui.gallery}
|
||||||
langui={langui}
|
|
||||||
contentPanel={contentPanel}
|
contentPanel={contentPanel}
|
||||||
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.locale) {
|
const props: GalleryProps = {
|
||||||
const props: GalleryProps = {
|
...(await getAppStaticProps(context)),
|
||||||
langui: await getWebsiteInterface({
|
};
|
||||||
language_code: context.locale,
|
return {
|
||||||
}),
|
props: props,
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,16 +1,11 @@
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
import ContentPanel from "components/Panels/ContentPanel";
|
import ContentPanel from "components/Panels/ContentPanel";
|
||||||
import SVG from "components/SVG";
|
|
||||||
import { getWebsiteInterface } from "graphql/operations";
|
|
||||||
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
|
|
||||||
import { GetStaticProps } from "next";
|
import { GetStaticProps } from "next";
|
||||||
type HomeProps = {
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
langui: GetWebsiteInterfaceQuery;
|
|
||||||
};
|
interface HomeProps extends AppStaticProps {}
|
||||||
|
|
||||||
export default function Home(props: HomeProps): JSX.Element {
|
export default function Home(props: HomeProps): JSX.Element {
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
|
||||||
|
|
||||||
const contentPanel = (
|
const contentPanel = (
|
||||||
<ContentPanel autoformat>
|
<ContentPanel autoformat>
|
||||||
<div className="grid place-items-center place-content-center w-full gap-5 text-center">
|
<div className="grid place-items-center place-content-center w-full gap-5 text-center">
|
||||||
|
@ -140,26 +135,14 @@ export default function Home(props: HomeProps): JSX.Element {
|
||||||
</ContentPanel>
|
</ContentPanel>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return <AppLayout navTitle={"Home"} contentPanel={contentPanel} {...props} />;
|
||||||
<AppLayout
|
|
||||||
navTitle={"Home"}
|
|
||||||
langui={langui}
|
|
||||||
contentPanel={contentPanel}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.locale) {
|
const props: HomeProps = {
|
||||||
const props: HomeProps = {
|
...(await getAppStaticProps(context)),
|
||||||
langui: await getWebsiteInterface({
|
};
|
||||||
language_code: context.locale,
|
return {
|
||||||
}),
|
props: props,
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
return { props: {} };
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,16 +2,11 @@ import ContentPanel, {
|
||||||
ContentPanelWidthSizes,
|
ContentPanelWidthSizes,
|
||||||
} from "components/Panels/ContentPanel";
|
} from "components/Panels/ContentPanel";
|
||||||
import { GetStaticPaths, GetStaticProps } from "next";
|
import { GetStaticPaths, GetStaticProps } from "next";
|
||||||
import {
|
import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations";
|
||||||
getLibraryItem,
|
|
||||||
getLibraryItemsSlugs,
|
|
||||||
getWebsiteInterface,
|
|
||||||
} from "graphql/operations";
|
|
||||||
import {
|
import {
|
||||||
Enum_Componentmetadatabooks_Binding_Type,
|
Enum_Componentmetadatabooks_Binding_Type,
|
||||||
Enum_Componentmetadatabooks_Page_Order,
|
Enum_Componentmetadatabooks_Page_Order,
|
||||||
GetLibraryItemQuery,
|
GetLibraryItemQuery,
|
||||||
GetWebsiteInterfaceQuery,
|
|
||||||
} from "graphql/operations-types";
|
} from "graphql/operations-types";
|
||||||
import {
|
import {
|
||||||
convertMmToInch,
|
convertMmToInch,
|
||||||
|
@ -20,7 +15,6 @@ import {
|
||||||
prettyItemType,
|
prettyItemType,
|
||||||
prettyItemSubType,
|
prettyItemSubType,
|
||||||
prettyPrice,
|
prettyPrice,
|
||||||
prettySlug,
|
|
||||||
prettyTestError,
|
prettyTestError,
|
||||||
prettyTestWarning,
|
prettyTestWarning,
|
||||||
sortContent,
|
sortContent,
|
||||||
|
@ -32,7 +26,6 @@ import ReturnButton, {
|
||||||
import NavOption from "components/PanelComponents/NavOption";
|
import NavOption from "components/PanelComponents/NavOption";
|
||||||
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 AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
|
import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
|
||||||
import InsetBox from "components/InsetBox";
|
import InsetBox from "components/InsetBox";
|
||||||
|
@ -40,16 +33,16 @@ import Img, { ImageQuality } from "components/Img";
|
||||||
import { useAppLayout } from "contexts/AppLayoutContext";
|
import { useAppLayout } from "contexts/AppLayoutContext";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import ContentTOCLine from "components/Library/ContentTOCLine";
|
import ContentTOCLine from "components/Library/ContentTOCLine";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
interface LibrarySlugProps {
|
interface LibrarySlugProps extends AppStaticProps {
|
||||||
libraryItem: GetLibraryItemQuery;
|
item: GetLibraryItemQuery["libraryItems"]["data"][number]["attributes"];
|
||||||
langui: GetWebsiteInterfaceQuery;
|
itemId: GetLibraryItemQuery["libraryItems"]["data"][number]["id"];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
useTesting(props);
|
useTesting(props);
|
||||||
const item = props.libraryItem.libraryItems.data[0].attributes;
|
const { item, langui, currencies } = props;
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
|
||||||
const appLayout = useAppLayout();
|
const appLayout = useAppLayout();
|
||||||
|
|
||||||
const isVariantSet =
|
const isVariantSet =
|
||||||
|
@ -202,7 +195,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
<h2 className="text-2xl text-center">{langui.details}</h2>
|
<h2 className="text-2xl text-center">{langui.details}</h2>
|
||||||
<div className="grid grid-flow-col w-full place-content-between">
|
<div className="grid grid-flow-col w-full place-content-between">
|
||||||
{item.metadata.length > 0 ? (
|
{item.metadata.length > 0 ? (
|
||||||
<div className="grid place-items-center">
|
<div className="grid place-items-center place-content-start">
|
||||||
<h3 className="text-xl">{langui.type}</h3>
|
<h3 className="text-xl">{langui.type}</h3>
|
||||||
<div className="grid grid-flow-col gap-1">
|
<div className="grid grid-flow-col gap-1">
|
||||||
<Chip>{prettyItemType(item.metadata[0], langui)}</Chip>
|
<Chip>{prettyItemType(item.metadata[0], langui)}</Chip>
|
||||||
|
@ -215,7 +208,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{item.release_date ? (
|
{item.release_date ? (
|
||||||
<div className="grid place-items-center">
|
<div className="grid place-items-center place-content-start">
|
||||||
<h3 className="text-xl">{langui.release_date}</h3>
|
<h3 className="text-xl">{langui.release_date}</h3>
|
||||||
<p>{prettyDate(item.release_date)}</p>
|
<p>{prettyDate(item.release_date)}</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -224,9 +217,22 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{item.price ? (
|
{item.price ? (
|
||||||
<div className="grid place-items-center">
|
<div className="grid place-items-center text-center place-content-start">
|
||||||
<h3 className="text-xl">{langui.price}</h3>
|
<h3 className="text-xl">{langui.price}</h3>
|
||||||
<p>{prettyPrice(item.price)}</p>
|
<p>
|
||||||
|
{prettyPrice(
|
||||||
|
item.price,
|
||||||
|
currencies,
|
||||||
|
item.price.currency.data.attributes.code
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
{item.price.currency.data.attributes.code !==
|
||||||
|
appLayout.currency && (
|
||||||
|
<p>
|
||||||
|
{prettyPrice(item.price, currencies, appLayout.currency)}{" "}
|
||||||
|
<br />({langui.calculated?.toLowerCase()})
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
|
@ -267,7 +273,9 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{item.metadata.length > 0 ? (
|
{item.metadata.length > 0 &&
|
||||||
|
item.metadata[0].__typename !== "ComponentMetadataGroup" &&
|
||||||
|
item.metadata[0].__typename !== "ComponentMetadataOther" ? (
|
||||||
<>
|
<>
|
||||||
<h3 className="text-xl">{langui.type_information}</h3>
|
<h3 className="text-xl">{langui.type_information}</h3>
|
||||||
<div className="grid grid-cols-2 w-full place-content-between">
|
<div className="grid grid-cols-2 w-full place-content-between">
|
||||||
|
@ -322,9 +330,6 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
) : item.metadata[0].__typename ===
|
) : item.metadata[0].__typename ===
|
||||||
"ComponentMetadataGame" ? (
|
"ComponentMetadataGame" ? (
|
||||||
<></>
|
<></>
|
||||||
) : item.metadata[0].__typename ===
|
|
||||||
"ComponentMetadataGroup" ? (
|
|
||||||
<></>
|
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
)}
|
)}
|
||||||
|
@ -382,7 +387,6 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
<AppLayout
|
<AppLayout
|
||||||
navTitle={langui.library}
|
navTitle={langui.library}
|
||||||
title={prettyinlineTitle("", item.title, item.subtitle)}
|
title={prettyinlineTitle("", item.title, item.subtitle)}
|
||||||
langui={langui}
|
|
||||||
contentPanel={contentPanel}
|
contentPanel={contentPanel}
|
||||||
subPanel={subPanel}
|
subPanel={subPanel}
|
||||||
thumbnail={item.thumbnail.data?.attributes}
|
thumbnail={item.thumbnail.data?.attributes}
|
||||||
|
@ -391,31 +395,26 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
? item.descriptions[0].description
|
? item.descriptions[0].description
|
||||||
: undefined
|
: undefined
|
||||||
}
|
}
|
||||||
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.params) {
|
const item = (
|
||||||
if (context.params.slug && context.locale) {
|
await getLibraryItem({
|
||||||
if (context.params.slug instanceof Array)
|
slug: context.params?.slug?.toString() || "",
|
||||||
context.params.slug = context.params.slug.join("");
|
language_code: context.locale || "en",
|
||||||
|
})
|
||||||
const props: LibrarySlugProps = {
|
).libraryItems.data[0];
|
||||||
libraryItem: await getLibraryItem({
|
const props: LibrarySlugProps = {
|
||||||
slug: context.params.slug,
|
...(await getAppStaticProps(context)),
|
||||||
language_code: context.locale,
|
item: item.attributes,
|
||||||
}),
|
itemId: item.id,
|
||||||
langui: await getWebsiteInterface({
|
};
|
||||||
language_code: context.locale,
|
return {
|
||||||
}),
|
props: props,
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getStaticPaths: GetStaticPaths = async (context) => {
|
export const getStaticPaths: GetStaticPaths = async (context) => {
|
||||||
|
@ -440,17 +439,17 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
function useTesting(props: LibrarySlugProps) {
|
function useTesting(props: LibrarySlugProps) {
|
||||||
const libraryItem = props.libraryItem.libraryItems.data[0].attributes;
|
const { item, itemId } = props;
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const libraryItemURL =
|
const libraryItemURL =
|
||||||
"/admin/content-manager/collectionType/api::library-item.library-item/" +
|
"/admin/content-manager/collectionType/api::library-item.library-item/" +
|
||||||
props.libraryItem.libraryItems.data[0].id;
|
itemId;
|
||||||
|
|
||||||
sortContent(libraryItem.contents);
|
sortContent(item.contents);
|
||||||
|
|
||||||
if (router.locale === "en") {
|
if (router.locale === "en") {
|
||||||
if (!libraryItem.thumbnail.data) {
|
if (!item.thumbnail.data) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Missing thumbnail",
|
"Missing thumbnail",
|
||||||
|
@ -458,7 +457,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (libraryItem.metadata.length === 0) {
|
if (item.metadata.length === 0) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Missing metadata",
|
"Missing metadata",
|
||||||
|
@ -467,14 +466,12 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
if (
|
if (
|
||||||
libraryItem.metadata[0].__typename === "ComponentMetadataGroup" &&
|
item.metadata[0].__typename === "ComponentMetadataGroup" &&
|
||||||
(libraryItem.metadata[0].subtype.data.attributes.slug ===
|
(item.metadata[0].subtype.data.attributes.slug === "relation-set" ||
|
||||||
"relation-set" ||
|
item.metadata[0].subtype.data.attributes.slug === "variant-set")
|
||||||
libraryItem.metadata[0].subtype.data.attributes.slug ===
|
|
||||||
"variant-set")
|
|
||||||
) {
|
) {
|
||||||
// This is a group type item
|
// This is a group type item
|
||||||
if (libraryItem.price) {
|
if (item.price) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Group-type items shouldn't have price",
|
"Group-type items shouldn't have price",
|
||||||
|
@ -482,7 +479,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (libraryItem.size) {
|
if (item.size) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Group-type items shouldn't have size",
|
"Group-type items shouldn't have size",
|
||||||
|
@ -490,7 +487,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (libraryItem.release_date) {
|
if (item.release_date) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Group-type items shouldn't have release_date",
|
"Group-type items shouldn't have release_date",
|
||||||
|
@ -498,7 +495,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (libraryItem.contents.data.length > 0) {
|
if (item.contents.data.length > 0) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Group-type items shouldn't have contents",
|
"Group-type items shouldn't have contents",
|
||||||
|
@ -506,7 +503,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (libraryItem.subitems.data.length === 0) {
|
if (item.subitems.data.length === 0) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Group-type items should have subitems",
|
"Group-type items should have subitems",
|
||||||
|
@ -517,8 +514,8 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
} else {
|
} else {
|
||||||
// This is a normal item
|
// This is a normal item
|
||||||
|
|
||||||
if (libraryItem.metadata[0].__typename === "ComponentMetadataGroup") {
|
if (item.metadata[0].__typename === "ComponentMetadataGroup") {
|
||||||
if (libraryItem.subitems.data.length === 0) {
|
if (item.subitems.data.length === 0) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Group-type item should have subitems",
|
"Group-type item should have subitems",
|
||||||
|
@ -528,7 +525,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!libraryItem.price) {
|
if (!item.price) {
|
||||||
prettyTestWarning(
|
prettyTestWarning(
|
||||||
router,
|
router,
|
||||||
"Missing price",
|
"Missing price",
|
||||||
|
@ -536,7 +533,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
if (!libraryItem.price.amount) {
|
if (!item.price.amount) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Missing amount",
|
"Missing amount",
|
||||||
|
@ -544,7 +541,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (!libraryItem.price.currency) {
|
if (!item.price.currency) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Missing currency",
|
"Missing currency",
|
||||||
|
@ -554,8 +551,8 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!libraryItem.digital) {
|
if (!item.digital) {
|
||||||
if (!libraryItem.size) {
|
if (!item.size) {
|
||||||
prettyTestWarning(
|
prettyTestWarning(
|
||||||
router,
|
router,
|
||||||
"Missing size",
|
"Missing size",
|
||||||
|
@ -563,7 +560,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
if (!libraryItem.size.width) {
|
if (!item.size.width) {
|
||||||
prettyTestWarning(
|
prettyTestWarning(
|
||||||
router,
|
router,
|
||||||
"Missing width",
|
"Missing width",
|
||||||
|
@ -571,7 +568,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (!libraryItem.size.height) {
|
if (!item.size.height) {
|
||||||
prettyTestWarning(
|
prettyTestWarning(
|
||||||
router,
|
router,
|
||||||
"Missing height",
|
"Missing height",
|
||||||
|
@ -579,7 +576,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (!libraryItem.size.thickness) {
|
if (!item.size.thickness) {
|
||||||
prettyTestWarning(
|
prettyTestWarning(
|
||||||
router,
|
router,
|
||||||
"Missing thickness",
|
"Missing thickness",
|
||||||
|
@ -590,7 +587,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!libraryItem.release_date) {
|
if (!item.release_date) {
|
||||||
prettyTestWarning(
|
prettyTestWarning(
|
||||||
router,
|
router,
|
||||||
"Missing release_date",
|
"Missing release_date",
|
||||||
|
@ -598,7 +595,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
if (!libraryItem.release_date.year) {
|
if (!item.release_date.year) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Missing year",
|
"Missing year",
|
||||||
|
@ -606,7 +603,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (!libraryItem.release_date.month) {
|
if (!item.release_date.month) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Missing month",
|
"Missing month",
|
||||||
|
@ -614,7 +611,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (!libraryItem.release_date.day) {
|
if (!item.release_date.day) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"Missing day",
|
"Missing day",
|
||||||
|
@ -624,7 +621,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (libraryItem.contents.data.length === 0) {
|
if (item.contents.data.length === 0) {
|
||||||
prettyTestWarning(
|
prettyTestWarning(
|
||||||
router,
|
router,
|
||||||
"Missing contents",
|
"Missing contents",
|
||||||
|
@ -633,7 +630,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
let currentRangePage = 0;
|
let currentRangePage = 0;
|
||||||
libraryItem.contents.data.map((content) => {
|
item.contents.data.map((content) => {
|
||||||
const contentURL =
|
const contentURL =
|
||||||
"/admin/content-manager/collectionType/api::content.content/" +
|
"/admin/content-manager/collectionType/api::content.content/" +
|
||||||
content.id;
|
content.id;
|
||||||
|
@ -694,26 +691,26 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (libraryItem.metadata[0].__typename === "ComponentMetadataBooks") {
|
if (item.metadata[0].__typename === "ComponentMetadataBooks") {
|
||||||
if (currentRangePage < libraryItem.metadata[0].page_count) {
|
if (currentRangePage < item.metadata[0].page_count) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
`Missing pages ${currentRangePage + 1} to ${
|
`Missing pages ${currentRangePage + 1} to ${
|
||||||
libraryItem.metadata[0].page_count
|
item.metadata[0].page_count
|
||||||
}`,
|
}`,
|
||||||
["libraryItem", "content"],
|
["libraryItem", "content"],
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
} else if (currentRangePage > libraryItem.metadata[0].page_count) {
|
} else if (currentRangePage > item.metadata[0].page_count) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
`Page overflow, content references pages up to ${currentRangePage} when the highest expected was ${libraryItem.metadata[0].page_count}`,
|
`Page overflow, content references pages up to ${currentRangePage} when the highest expected was ${item.metadata[0].page_count}`,
|
||||||
["libraryItem", "content"],
|
["libraryItem", "content"],
|
||||||
libraryItemURL
|
libraryItemURL
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (libraryItem.metadata[0].languages.data.length === 0) {
|
if (item.metadata[0].languages.data.length === 0) {
|
||||||
prettyTestWarning(
|
prettyTestWarning(
|
||||||
router,
|
router,
|
||||||
"Missing language",
|
"Missing language",
|
||||||
|
@ -722,7 +719,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!libraryItem.metadata[0].page_count) {
|
if (!item.metadata[0].page_count) {
|
||||||
prettyTestWarning(
|
prettyTestWarning(
|
||||||
router,
|
router,
|
||||||
"Missing page_count",
|
"Missing page_count",
|
||||||
|
@ -735,7 +732,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!libraryItem.root_item && libraryItem.subitem_of.data.length === 0) {
|
if (!item.root_item && item.subitem_of.data.length === 0) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
router,
|
router,
|
||||||
"This item is inaccessible (not root item and not subitem of another item)",
|
"This item is inaccessible (not root item and not subitem of another item)",
|
||||||
|
@ -744,7 +741,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (libraryItem.gallery.data.length === 0) {
|
if (item.gallery.data.length === 0) {
|
||||||
prettyTestWarning(
|
prettyTestWarning(
|
||||||
router,
|
router,
|
||||||
"Missing gallery",
|
"Missing gallery",
|
||||||
|
@ -754,7 +751,7 @@ function useTesting(props: LibrarySlugProps) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (libraryItem.descriptions.length === 0) {
|
if (item.descriptions.length === 0) {
|
||||||
prettyTestWarning(
|
prettyTestWarning(
|
||||||
router,
|
router,
|
||||||
"Missing description",
|
"Missing description",
|
||||||
|
|
|
@ -7,10 +7,7 @@ import {
|
||||||
GetLibraryItemsPreviewQuery,
|
GetLibraryItemsPreviewQuery,
|
||||||
GetWebsiteInterfaceQuery,
|
GetWebsiteInterfaceQuery,
|
||||||
} from "graphql/operations-types";
|
} from "graphql/operations-types";
|
||||||
import {
|
import { getLibraryItemsPreview } from "graphql/operations";
|
||||||
getLibraryItemsPreview,
|
|
||||||
getWebsiteInterface,
|
|
||||||
} from "graphql/operations";
|
|
||||||
import PanelHeader from "components/PanelComponents/PanelHeader";
|
import PanelHeader from "components/PanelComponents/PanelHeader";
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
|
import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
|
||||||
|
@ -18,11 +15,11 @@ import Select from "components/Select";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { prettyDate, prettyinlineTitle } from "queries/helpers";
|
import { prettyDate, prettyinlineTitle } from "queries/helpers";
|
||||||
import Switch from "components/Switch";
|
import Switch from "components/Switch";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type LibraryProps = {
|
interface LibraryProps extends AppStaticProps {
|
||||||
libraryItems: GetLibraryItemsPreviewQuery;
|
items: GetLibraryItemsPreviewQuery["libraryItems"]["data"];
|
||||||
langui: GetWebsiteInterfaceQuery;
|
}
|
||||||
};
|
|
||||||
|
|
||||||
type GroupLibraryItems = Map<
|
type GroupLibraryItems = Map<
|
||||||
string,
|
string,
|
||||||
|
@ -30,7 +27,7 @@ type GroupLibraryItems = Map<
|
||||||
>;
|
>;
|
||||||
|
|
||||||
export default function Library(props: LibraryProps): JSX.Element {
|
export default function Library(props: LibraryProps): JSX.Element {
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
const { langui, items } = props;
|
||||||
|
|
||||||
const [showSubitems, setShowSubitems] = useState<boolean>(false);
|
const [showSubitems, setShowSubitems] = useState<boolean>(false);
|
||||||
const [showPrimaryItems, setShowPrimaryItems] = useState<boolean>(true);
|
const [showPrimaryItems, setShowPrimaryItems] = useState<boolean>(true);
|
||||||
|
@ -38,20 +35,13 @@ export default function Library(props: LibraryProps): JSX.Element {
|
||||||
const [sortingMethod, setSortingMethod] = useState<number>(0);
|
const [sortingMethod, setSortingMethod] = useState<number>(0);
|
||||||
const [groupingMethod, setGroupingMethod] = useState<number>(-1);
|
const [groupingMethod, setGroupingMethod] = useState<number>(-1);
|
||||||
|
|
||||||
const [filteredItems, setFilteredItems] = useState<
|
const [filteredItems, setFilteredItems] = useState<LibraryProps["items"]>(
|
||||||
LibraryProps["libraryItems"]["libraryItems"]["data"]
|
filterItems(showSubitems, showPrimaryItems, showSecondaryItems, items)
|
||||||
>(
|
|
||||||
filterItems(
|
|
||||||
showSubitems,
|
|
||||||
showPrimaryItems,
|
|
||||||
showSecondaryItems,
|
|
||||||
props.libraryItems.libraryItems.data
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const [sortedItems, setSortedItem] = useState<
|
const [sortedItems, setSortedItem] = useState<LibraryProps["items"]>(
|
||||||
LibraryProps["libraryItems"]["libraryItems"]["data"]
|
sortBy(groupingMethod, filteredItems)
|
||||||
>(sortBy(groupingMethod, filteredItems));
|
);
|
||||||
|
|
||||||
const [groups, setGroups] = useState<GroupLibraryItems>(
|
const [groups, setGroups] = useState<GroupLibraryItems>(
|
||||||
getGroups(langui, groupingMethod, sortedItems)
|
getGroups(langui, groupingMethod, sortedItems)
|
||||||
|
@ -59,19 +49,9 @@ export default function Library(props: LibraryProps): JSX.Element {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setFilteredItems(
|
setFilteredItems(
|
||||||
filterItems(
|
filterItems(showSubitems, showPrimaryItems, showSecondaryItems, items)
|
||||||
showSubitems,
|
|
||||||
showPrimaryItems,
|
|
||||||
showSecondaryItems,
|
|
||||||
props.libraryItems.libraryItems.data
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
}, [
|
}, [showSubitems, items, showPrimaryItems, showSecondaryItems]);
|
||||||
showSubitems,
|
|
||||||
props.libraryItems.libraryItems.data,
|
|
||||||
showPrimaryItems,
|
|
||||||
showSecondaryItems,
|
|
||||||
]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setSortedItem(sortBy(sortingMethod, filteredItems));
|
setSortedItem(sortBy(sortingMethod, filteredItems));
|
||||||
|
@ -138,7 +118,11 @@ export default function Library(props: LibraryProps): JSX.Element {
|
||||||
className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||||
>
|
>
|
||||||
{items.map((item) => (
|
{items.map((item) => (
|
||||||
<LibraryItemsPreview key={item.id} item={item.attributes} />
|
<LibraryItemsPreview
|
||||||
|
key={item.id}
|
||||||
|
item={item.attributes}
|
||||||
|
currencies={props.currencies}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
@ -150,35 +134,31 @@ export default function Library(props: LibraryProps): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<AppLayout
|
<AppLayout
|
||||||
navTitle={langui.library}
|
navTitle={langui.library}
|
||||||
langui={langui}
|
|
||||||
subPanel={subPanel}
|
subPanel={subPanel}
|
||||||
contentPanel={contentPanel}
|
contentPanel={contentPanel}
|
||||||
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.locale) {
|
const props: LibraryProps = {
|
||||||
const props: LibraryProps = {
|
...(await getAppStaticProps(context)),
|
||||||
libraryItems: await getLibraryItemsPreview({
|
items: (
|
||||||
language_code: context.locale,
|
await getLibraryItemsPreview({
|
||||||
}),
|
language_code: context.locale || "en",
|
||||||
langui: await getWebsiteInterface({
|
})
|
||||||
language_code: context.locale,
|
).libraryItems.data,
|
||||||
}),
|
};
|
||||||
};
|
return {
|
||||||
return {
|
props: props,
|
||||||
props: props,
|
};
|
||||||
};
|
|
||||||
} else {
|
|
||||||
return { props: {} };
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function getGroups(
|
function getGroups(
|
||||||
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"],
|
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"],
|
||||||
groupByType: number,
|
groupByType: number,
|
||||||
items: LibraryProps["libraryItems"]["libraryItems"]["data"]
|
items: LibraryProps["items"]
|
||||||
): GroupLibraryItems {
|
): GroupLibraryItems {
|
||||||
switch (groupByType) {
|
switch (groupByType) {
|
||||||
case 0:
|
case 0:
|
||||||
|
@ -276,8 +256,8 @@ function filterItems(
|
||||||
showSubitems: boolean,
|
showSubitems: boolean,
|
||||||
showPrimaryItems: boolean,
|
showPrimaryItems: boolean,
|
||||||
showSecondaryItems: boolean,
|
showSecondaryItems: boolean,
|
||||||
items: LibraryProps["libraryItems"]["libraryItems"]["data"]
|
items: LibraryProps["items"]
|
||||||
): LibraryProps["libraryItems"]["libraryItems"]["data"] {
|
): LibraryProps["items"] {
|
||||||
return [...items].filter((item) => {
|
return [...items].filter((item) => {
|
||||||
if (!showSubitems && !item.attributes.root_item) return false;
|
if (!showSubitems && !item.attributes.root_item) return false;
|
||||||
if (
|
if (
|
||||||
|
@ -298,8 +278,8 @@ function filterItems(
|
||||||
|
|
||||||
function sortBy(
|
function sortBy(
|
||||||
orderByType: number,
|
orderByType: number,
|
||||||
items: LibraryProps["libraryItems"]["libraryItems"]["data"]
|
items: LibraryProps["items"]
|
||||||
): LibraryProps["libraryItems"]["libraryItems"]["data"] {
|
): LibraryProps["items"] {
|
||||||
switch (orderByType) {
|
switch (orderByType) {
|
||||||
case 0:
|
case 0:
|
||||||
return [...items].sort((a, b) => {
|
return [...items].sort((a, b) => {
|
||||||
|
|
|
@ -1,16 +1,12 @@
|
||||||
import SubPanel from "components/Panels/SubPanel";
|
import SubPanel from "components/Panels/SubPanel";
|
||||||
import PanelHeader from "components/PanelComponents/PanelHeader";
|
import PanelHeader from "components/PanelComponents/PanelHeader";
|
||||||
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
|
|
||||||
import { GetStaticProps } from "next";
|
import { GetStaticProps } from "next";
|
||||||
import { getWebsiteInterface } from "graphql/operations";
|
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type MerchProps = {
|
interface MerchProps extends AppStaticProps {}
|
||||||
langui: GetWebsiteInterfaceQuery;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Merch(props: MerchProps): JSX.Element {
|
export default function Merch(props: MerchProps): JSX.Element {
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
const { langui } = props;
|
||||||
const subPanel = (
|
const subPanel = (
|
||||||
<SubPanel>
|
<SubPanel>
|
||||||
<PanelHeader
|
<PanelHeader
|
||||||
|
@ -21,25 +17,14 @@ export default function Merch(props: MerchProps): JSX.Element {
|
||||||
</SubPanel>
|
</SubPanel>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return <AppLayout navTitle={langui.merch} subPanel={subPanel} {...props} />;
|
||||||
<AppLayout
|
|
||||||
navTitle={langui.merch}
|
|
||||||
langui={langui}
|
|
||||||
subPanel={subPanel}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.locale) {
|
const props: MerchProps = {
|
||||||
const props: MerchProps = {
|
...(await getAppStaticProps(context)),
|
||||||
langui: await getWebsiteInterface({
|
};
|
||||||
language_code: context.locale,
|
return {
|
||||||
}),
|
props: props,
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,16 +1,13 @@
|
||||||
import SubPanel from "components/Panels/SubPanel";
|
import SubPanel from "components/Panels/SubPanel";
|
||||||
import PanelHeader from "components/PanelComponents/PanelHeader";
|
import PanelHeader from "components/PanelComponents/PanelHeader";
|
||||||
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
|
|
||||||
import { GetStaticProps } from "next";
|
import { GetStaticProps } from "next";
|
||||||
import { getWebsiteInterface } from "graphql/operations";
|
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type NewsProps = {
|
interface NewsProps extends AppStaticProps {}
|
||||||
langui: GetWebsiteInterfaceQuery;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function News(props: NewsProps): JSX.Element {
|
export default function News(props: NewsProps): JSX.Element {
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
const { langui } = props;
|
||||||
const subPanel = (
|
const subPanel = (
|
||||||
<SubPanel>
|
<SubPanel>
|
||||||
<PanelHeader
|
<PanelHeader
|
||||||
|
@ -21,25 +18,14 @@ export default function News(props: NewsProps): JSX.Element {
|
||||||
</SubPanel>
|
</SubPanel>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return <AppLayout navTitle={langui.news} subPanel={subPanel} {...props} />;
|
||||||
<AppLayout
|
|
||||||
navTitle={langui.news}
|
|
||||||
langui={langui}
|
|
||||||
subPanel={subPanel}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.locale) {
|
const props: NewsProps = {
|
||||||
const props: NewsProps = {
|
...(await getAppStaticProps(context)),
|
||||||
langui: await getWebsiteInterface({
|
};
|
||||||
language_code: context.locale,
|
return {
|
||||||
}),
|
props: props,
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -5,18 +5,9 @@ import ChronologyYearComponent from "components/Chronology/ChronologyYearCompone
|
||||||
import {
|
import {
|
||||||
GetChronologyItemsQuery,
|
GetChronologyItemsQuery,
|
||||||
GetErasQuery,
|
GetErasQuery,
|
||||||
GetWebsiteInterfaceQuery,
|
|
||||||
} from "graphql/operations-types";
|
} from "graphql/operations-types";
|
||||||
import {
|
import { getEras, getChronologyItems } from "graphql/operations";
|
||||||
getEras,
|
|
||||||
getChronologyItems,
|
|
||||||
getWebsiteInterface,
|
|
||||||
} from "graphql/operations";
|
|
||||||
import NavOption from "components/PanelComponents/NavOption";
|
import NavOption from "components/PanelComponents/NavOption";
|
||||||
import ReturnButton, {
|
|
||||||
ReturnButtonType,
|
|
||||||
} from "components/PanelComponents/ReturnButton";
|
|
||||||
import HorizontalLine from "components/HorizontalLine";
|
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
import {
|
import {
|
||||||
prettySlug,
|
prettySlug,
|
||||||
|
@ -26,34 +17,32 @@ import {
|
||||||
import InsetBox from "components/InsetBox";
|
import InsetBox from "components/InsetBox";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import ReactTooltip from "react-tooltip";
|
import ReactTooltip from "react-tooltip";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
interface DataChronologyProps {
|
interface DataChronologyProps extends AppStaticProps {
|
||||||
chronologyItems: GetChronologyItemsQuery;
|
chronologyItems: GetChronologyItemsQuery["chronologyItems"]["data"];
|
||||||
chronologyEras: GetErasQuery;
|
chronologyEras: GetErasQuery["chronologyEras"]["data"];
|
||||||
langui: GetWebsiteInterfaceQuery;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function DataChronology(
|
export default function DataChronology(
|
||||||
props: DataChronologyProps
|
props: DataChronologyProps
|
||||||
): JSX.Element {
|
): JSX.Element {
|
||||||
useTesting(props);
|
useTesting(props);
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
const { chronologyItems, chronologyEras } = props;
|
||||||
const chronologyItems = props.chronologyItems.chronologyItems;
|
|
||||||
const chronologyEras = props.chronologyEras.chronologyEras;
|
|
||||||
|
|
||||||
// Group by year the Chronology items
|
// Group by year the Chronology items
|
||||||
let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][][] =
|
let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][][] =
|
||||||
[];
|
[];
|
||||||
|
|
||||||
chronologyEras.data.map(() => {
|
chronologyEras.map(() => {
|
||||||
chronologyItemYearGroups.push([]);
|
chronologyItemYearGroups.push([]);
|
||||||
});
|
});
|
||||||
|
|
||||||
let currentChronologyEraIndex = 0;
|
let currentChronologyEraIndex = 0;
|
||||||
chronologyItems.data.map((item) => {
|
chronologyItems.map((item) => {
|
||||||
if (
|
if (
|
||||||
item.attributes.year >
|
item.attributes.year >
|
||||||
chronologyEras.data[currentChronologyEraIndex].attributes.ending_year
|
chronologyEras[currentChronologyEraIndex].attributes.ending_year
|
||||||
) {
|
) {
|
||||||
currentChronologyEraIndex++;
|
currentChronologyEraIndex++;
|
||||||
}
|
}
|
||||||
|
@ -74,7 +63,7 @@ export default function DataChronology(
|
||||||
|
|
||||||
const subPanel = (
|
const subPanel = (
|
||||||
<SubPanel>
|
<SubPanel>
|
||||||
{props.chronologyEras.chronologyEras.data.map((era) => (
|
{chronologyEras.map((era) => (
|
||||||
<NavOption
|
<NavOption
|
||||||
key={era.id}
|
key={era.id}
|
||||||
url={"#" + era.attributes.slug}
|
url={"#" + era.attributes.slug}
|
||||||
|
@ -97,17 +86,17 @@ export default function DataChronology(
|
||||||
{chronologyItemYearGroups.map((era, eraIndex) => (
|
{chronologyItemYearGroups.map((era, eraIndex) => (
|
||||||
<>
|
<>
|
||||||
<InsetBox
|
<InsetBox
|
||||||
id={chronologyEras.data[eraIndex].attributes.slug}
|
id={chronologyEras[eraIndex].attributes.slug}
|
||||||
className="grid text-center my-8 gap-4"
|
className="grid text-center my-8 gap-4"
|
||||||
>
|
>
|
||||||
<h2 className="text-2xl">
|
<h2 className="text-2xl">
|
||||||
{chronologyEras.data[eraIndex].attributes.title.length > 0
|
{chronologyEras[eraIndex].attributes.title.length > 0
|
||||||
? chronologyEras.data[eraIndex].attributes.title[0].title
|
? chronologyEras[eraIndex].attributes.title[0].title
|
||||||
: prettySlug(chronologyEras.data[eraIndex].attributes.slug)}
|
: prettySlug(chronologyEras[eraIndex].attributes.slug)}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="whitespace-pre-line ">
|
<p className="whitespace-pre-line ">
|
||||||
{chronologyEras.data[eraIndex].attributes.title.length > 0
|
{chronologyEras[eraIndex].attributes.title.length > 0
|
||||||
? chronologyEras.data[eraIndex].attributes.title[0].description
|
? chronologyEras[eraIndex].attributes.title[0].description
|
||||||
: ""}
|
: ""}
|
||||||
</p>
|
</p>
|
||||||
</InsetBox>
|
</InsetBox>
|
||||||
|
@ -136,37 +125,36 @@ export default function DataChronology(
|
||||||
return (
|
return (
|
||||||
<AppLayout
|
<AppLayout
|
||||||
navTitle="Chronology"
|
navTitle="Chronology"
|
||||||
langui={langui}
|
|
||||||
contentPanel={contentPanel}
|
contentPanel={contentPanel}
|
||||||
subPanel={subPanel}
|
subPanel={subPanel}
|
||||||
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.locale) {
|
const props: DataChronologyProps = {
|
||||||
const props: DataChronologyProps = {
|
...(await getAppStaticProps(context)),
|
||||||
chronologyItems: await getChronologyItems({
|
chronologyItems: (
|
||||||
language_code: context.locale,
|
await getChronologyItems({
|
||||||
}),
|
language_code: context.locale || "en",
|
||||||
chronologyEras: await getEras({ language_code: context.locale }),
|
})
|
||||||
langui: await getWebsiteInterface({
|
).chronologyItems.data,
|
||||||
language_code: context.locale,
|
chronologyEras: (await getEras({ language_code: context.locale || "en" }))
|
||||||
}),
|
.chronologyEras.data,
|
||||||
};
|
};
|
||||||
return {
|
return {
|
||||||
props: props,
|
props: props,
|
||||||
};
|
};
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function useTesting({ chronologyItems, chronologyEras }: DataChronologyProps) {
|
function useTesting(props: DataChronologyProps) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
chronologyEras.chronologyEras.data.map((era) => {
|
const { chronologyItems, chronologyEras } = props;
|
||||||
|
chronologyEras.map((era) => {
|
||||||
const chronologyErasURL =
|
const chronologyErasURL =
|
||||||
"/admin/content-manager/collectionType/api::chronology-era.chronology-era/" +
|
"/admin/content-manager/collectionType/api::chronology-era.chronology-era/" +
|
||||||
chronologyItems.chronologyItems.data[0].id;
|
chronologyItems[0].id;
|
||||||
|
|
||||||
if (era.attributes.title.length === 0) {
|
if (era.attributes.title.length === 0) {
|
||||||
prettyTestError(
|
prettyTestError(
|
||||||
|
@ -200,10 +188,10 @@ function useTesting({ chronologyItems, chronologyEras }: DataChronologyProps) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
chronologyItems.chronologyItems.data.map((item) => {
|
chronologyItems.map((item) => {
|
||||||
const chronologyItemsURL =
|
const chronologyItemsURL =
|
||||||
"/admin/content-manager/collectionType/api::chronology-item.chronology-item/" +
|
"/admin/content-manager/collectionType/api::chronology-item.chronology-item/" +
|
||||||
chronologyItems.chronologyItems.data[0].id;
|
chronologyItems[0].id;
|
||||||
|
|
||||||
const date = `${item.attributes.year}/${item.attributes.month}/${item.attributes.day}`;
|
const date = `${item.attributes.year}/${item.attributes.month}/${item.attributes.day}`;
|
||||||
|
|
||||||
|
|
|
@ -1,17 +1,13 @@
|
||||||
import SubPanel from "components/Panels/SubPanel";
|
import SubPanel from "components/Panels/SubPanel";
|
||||||
import PanelHeader from "components/PanelComponents/PanelHeader";
|
import PanelHeader from "components/PanelComponents/PanelHeader";
|
||||||
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
|
|
||||||
import { GetStaticProps } from "next";
|
import { GetStaticProps } from "next";
|
||||||
import { getWebsiteInterface } from "graphql/operations";
|
|
||||||
import ContentPanel from "components/Panels/ContentPanel";
|
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
type WikiProps = {
|
interface WikiProps extends AppStaticProps {}
|
||||||
langui: GetWebsiteInterfaceQuery;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Hubs(props: WikiProps): JSX.Element {
|
export default function Hubs(props: WikiProps): JSX.Element {
|
||||||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
const { langui } = props;
|
||||||
const subPanel = (
|
const subPanel = (
|
||||||
<SubPanel>
|
<SubPanel>
|
||||||
<PanelHeader
|
<PanelHeader
|
||||||
|
@ -21,28 +17,15 @@ export default function Hubs(props: WikiProps): JSX.Element {
|
||||||
/>
|
/>
|
||||||
</SubPanel>
|
</SubPanel>
|
||||||
);
|
);
|
||||||
const contentPanel = <ContentPanel>Hello</ContentPanel>;
|
|
||||||
|
|
||||||
return (
|
return <AppLayout navTitle={langui.wiki} subPanel={subPanel} {...props} />;
|
||||||
<AppLayout
|
|
||||||
navTitle={langui.wiki}
|
|
||||||
langui={langui}
|
|
||||||
contentPanel={contentPanel}
|
|
||||||
subPanel={subPanel}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (context) => {
|
export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
if (context.locale) {
|
const props: WikiProps = {
|
||||||
const props: WikiProps = {
|
...(await getAppStaticProps(context)),
|
||||||
langui: await getWebsiteInterface({
|
};
|
||||||
language_code: context.locale,
|
return {
|
||||||
}),
|
props: props,
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
props: props,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return { props: {} };
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,44 @@
|
||||||
|
import {
|
||||||
|
getCurrencies,
|
||||||
|
getLanguages,
|
||||||
|
getWebsiteInterface,
|
||||||
|
} from "graphql/operations";
|
||||||
|
import {
|
||||||
|
GetCurrenciesQuery,
|
||||||
|
GetLanguagesQuery,
|
||||||
|
GetWebsiteInterfaceQuery,
|
||||||
|
} from "graphql/operations-types";
|
||||||
|
import { GetStaticPropsContext, PreviewData } from "next";
|
||||||
|
import { ParsedUrlQuery } from "querystring";
|
||||||
|
|
||||||
|
export interface AppStaticProps {
|
||||||
|
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
|
||||||
|
currencies: GetCurrenciesQuery["currencies"]["data"];
|
||||||
|
languages: GetLanguagesQuery["languages"]["data"];
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getAppStaticProps(
|
||||||
|
context: GetStaticPropsContext<ParsedUrlQuery, PreviewData>
|
||||||
|
): Promise<AppStaticProps> {
|
||||||
|
const languages = (await getLanguages({})).languages.data;
|
||||||
|
languages.sort((a, b) => {
|
||||||
|
return a.attributes.localized_name.localeCompare(
|
||||||
|
b.attributes.localized_name
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const currencies = (await getCurrencies({})).currencies.data;
|
||||||
|
currencies.sort((a, b) => {
|
||||||
|
return a.attributes.code.localeCompare(b.attributes.code);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
langui: (
|
||||||
|
await getWebsiteInterface({
|
||||||
|
language_code: context.locale || "en",
|
||||||
|
})
|
||||||
|
).websiteInterfaces.data[0].attributes,
|
||||||
|
currencies: currencies,
|
||||||
|
languages: languages,
|
||||||
|
};
|
||||||
|
}
|
|
@ -4,6 +4,7 @@ import {
|
||||||
ImageQuality,
|
ImageQuality,
|
||||||
} from "components/Img";
|
} from "components/Img";
|
||||||
import {
|
import {
|
||||||
|
GetCurrenciesQuery,
|
||||||
GetLibraryItemQuery,
|
GetLibraryItemQuery,
|
||||||
GetLibraryItemsPreviewQuery,
|
GetLibraryItemsPreviewQuery,
|
||||||
GetWebsiteInterfaceQuery,
|
GetWebsiteInterfaceQuery,
|
||||||
|
@ -24,12 +25,27 @@ export function prettyDate(
|
||||||
}
|
}
|
||||||
|
|
||||||
export function prettyPrice(
|
export function prettyPrice(
|
||||||
pricePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"]
|
pricePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"],
|
||||||
|
currencies: GetCurrenciesQuery["currencies"]["data"],
|
||||||
|
targetCurrencyCode?: string
|
||||||
): string {
|
): string {
|
||||||
return (
|
if (!targetCurrencyCode) return "";
|
||||||
pricePicker.currency.data.attributes.symbol +
|
let result = "";
|
||||||
pricePicker.amount.toLocaleString()
|
currencies.map((currency) => {
|
||||||
);
|
if (currency.attributes.code === targetCurrencyCode) {
|
||||||
|
let amountInUSD =
|
||||||
|
pricePicker.amount * pricePicker.currency.data.attributes.rate_to_usd;
|
||||||
|
let amountInTargetCurrency =
|
||||||
|
amountInUSD / currency.attributes.rate_to_usd;
|
||||||
|
result =
|
||||||
|
currency.attributes.symbol +
|
||||||
|
amountInTargetCurrency.toLocaleString(undefined, {
|
||||||
|
minimumFractionDigits: currency.attributes.display_decimals ? 2 : 0,
|
||||||
|
maximumFractionDigits: currency.attributes.display_decimals ? 2 : 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function prettySlug(slug?: string, parentSlug?: string): string {
|
export function prettySlug(slug?: string, parentSlug?: string): string {
|
||||||
|
|
|
@ -78,9 +78,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.prose blockquote {
|
.prose blockquote {
|
||||||
@apply border-l-dark
|
@apply border-l-dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* INPUT */
|
||||||
|
|
||||||
|
input {
|
||||||
|
@apply rounded-full p-2 text-center bg-light outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent] text-dark hover:bg-mid transition-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder {
|
||||||
|
@apply text-dark opacity-60;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus-visible {
|
||||||
|
@apply outline-none bg-mid shadow-inner-sm;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
|
|
|
@ -18,6 +18,17 @@ const breakDektop = { min: "60rem" };
|
||||||
const breakMobile = { max: "60rem" };
|
const breakMobile = { max: "60rem" };
|
||||||
const breakThin = { max: "25rem" };
|
const breakThin = { max: "25rem" };
|
||||||
|
|
||||||
|
const fontStandard = {
|
||||||
|
body: "Zen Maru Gothic",
|
||||||
|
headers: "Vollkorn",
|
||||||
|
monospace: "monospace",
|
||||||
|
};
|
||||||
|
const fontDyslexic = {
|
||||||
|
body: "OpenDyslexic",
|
||||||
|
headers: "OpenDyslexic",
|
||||||
|
monospace: "monospace",
|
||||||
|
};
|
||||||
|
|
||||||
/* END CONFIG */
|
/* END CONFIG */
|
||||||
|
|
||||||
function withOpacity(variableName) {
|
function withOpacity(variableName) {
|
||||||
|
@ -41,9 +52,11 @@ module.exports = {
|
||||||
black: withOpacity("--theme-color-black"),
|
black: withOpacity("--theme-color-black"),
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
body: ["Zen Maru Gothic"],
|
body: ["var(--theme-font-body)"],
|
||||||
headers: ["Vollkorn"],
|
headers: ["var(--theme-font-headers)"],
|
||||||
monospace: ["monospace"],
|
monospace: ["var(--theme-font-monospace)"],
|
||||||
|
openDyslexic: ["OpenDyslexic"],
|
||||||
|
zenMaruGothic: ["Zen Maru Gothic"],
|
||||||
},
|
},
|
||||||
screens: {
|
screens: {
|
||||||
desktop: breakDektop,
|
desktop: breakDektop,
|
||||||
|
@ -61,7 +74,6 @@ module.exports = {
|
||||||
plugins: [
|
plugins: [
|
||||||
require("@tailwindcss/typography"),
|
require("@tailwindcss/typography"),
|
||||||
|
|
||||||
// Colored Dropshadow
|
|
||||||
plugin(function ({ addUtilities }) {
|
plugin(function ({ addUtilities }) {
|
||||||
addUtilities({
|
addUtilities({
|
||||||
".set-theme-light": {
|
".set-theme-light": {
|
||||||
|
@ -85,6 +97,21 @@ module.exports = {
|
||||||
});
|
});
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
plugin(function ({ addUtilities }) {
|
||||||
|
addUtilities({
|
||||||
|
".set-theme-font-standard": {
|
||||||
|
"--theme-font-body": fontStandard.body,
|
||||||
|
"--theme-font-headers": fontStandard.headers,
|
||||||
|
"--theme-font-monospace": fontStandard.monospace,
|
||||||
|
},
|
||||||
|
".set-theme-font-dyslexic": {
|
||||||
|
"--theme-font-body": fontDyslexic.body,
|
||||||
|
"--theme-font-headers": fontDyslexic.headers,
|
||||||
|
"--theme-font-monospace": fontStandard.monospace,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
|
||||||
plugin(function ({ addVariant, e }) {
|
plugin(function ({ addVariant, e }) {
|
||||||
addVariant("webkit-scrollbar", ({ modifySelectors, separator }) => {
|
addVariant("webkit-scrollbar", ({ modifySelectors, separator }) => {
|
||||||
modifySelectors(({ className }) => {
|
modifySelectors(({ className }) => {
|
||||||
|
|
Loading…
Reference in New Issue