diff --git a/.gitignore b/.gitignore
index c1491a3..b78acfb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,7 @@ src/graphql/generated.ts
# next.js
/.next/
/out/
+src/pages.old
# production
/build
diff --git a/next.config.js b/next.config.js
index 50cd568..809ac5a 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,17 +1,9 @@
-/* CONFIG */
-
-const locales = ["en", "es", "fr", "pt-br", "ja"];
-
-/* END CONFIG */
-
/* @type {import('next').NextConfig} */
module.exports = {
- swcMinify: true,
reactStrictMode: true,
poweredByHeader: false,
- i18n: {
- locales: locales,
- defaultLocale: "en",
+ experimental: {
+ appDir: true,
},
images: {
domains: ["img.accords-library.com", "watch.accords-library.com"],
diff --git a/src/app/[locale]/contents/page.tsx b/src/app/[locale]/contents/page.tsx
new file mode 100644
index 0000000..9affc90
--- /dev/null
+++ b/src/app/[locale]/contents/page.tsx
@@ -0,0 +1,2 @@
+const Page: Page = () => <>Hello from contents;
+export default Page;
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
new file mode 100644
index 0000000..410f6b9
--- /dev/null
+++ b/src/app/[locale]/page.tsx
@@ -0,0 +1,8 @@
+export const generateStaticParams: GenerateStaticParams = () =>
+ ["en", "es", "fr", "pt-br", "ja", ""].map((locale) => ({ locale }));
+
+// Disabled using locales other than the one defined
+export const dynamicParams = false;
+
+const Page: Page = () => <>Hello from within locale;
+export default Page;
diff --git a/src/app/head.tsx b/src/app/head.tsx
new file mode 100644
index 0000000..c9b2864
--- /dev/null
+++ b/src/app/head.tsx
@@ -0,0 +1,19 @@
+const Head: Head = () => (
+ <>
+
-
{langui.languages}
- {preferredLanguages.length > 0 && (
- ({
- code: locale,
- name: prettyLanguage(locale, languages),
- }))}
- insertLabels={[
- {
- insertAt: 0,
- name: langui.primary_language ?? "Primary language",
- },
- {
- insertAt: 1,
- name: langui.secondary_language ?? "Secondary languages",
- },
- ]}
- onChange={(items) => {
- const newPreferredLanguages = items.map((item) => item.code);
- setPreferredLanguages(newPreferredLanguages);
- sendAnalytics("Settings", "Change preferred languages");
- }}
- />
- )}
-
- )}
void;
- }>({ showLightBox: () => null })
-);
-
-export const lightBox = lightBoxAtom[0];
+import { useAtomSetter } from "helpers/atoms";
+import { lightBox } from "contexts/atoms";
export const LightBoxProvider = (): JSX.Element => {
const [isLightBoxVisible, setLightBoxVisibility] = useState(false);
const [lightBoxImages, setLightBoxImages] = useState<(UploadImageFragment | string)[]>([]);
const [lightBoxIndex, setLightBoxIndex] = useState(0);
- const setShowLightBox = useAtomSetter(lightBoxAtom);
+ const setShowLightBox = useAtomSetter(lightBox);
useEffectOnce(() =>
setShowLightBox({
diff --git a/src/contexts/appLayout.ts b/src/contexts/appLayout.ts
index 506ccdf..467860c 100644
--- a/src/contexts/appLayout.ts
+++ b/src/contexts/appLayout.ts
@@ -1,8 +1,8 @@
import { useRouter } from "next/router";
import { useEffect } from "react";
-import { useScrollIntoView } from "hooks/useScrollIntoView";
import { useAtomSetter } from "helpers/atoms";
import { atoms } from "contexts/atoms";
+import { useScrollIntoView } from "hooks/useScrollIntoView";
export const useAppLayout = (): void => {
const router = useRouter();
diff --git a/src/contexts/atoms.ts b/src/contexts/atoms.ts
index 8c2d790..cd446c9 100644
--- a/src/contexts/atoms.ts
+++ b/src/contexts/atoms.ts
@@ -4,13 +4,24 @@ import { localData } from "contexts/localData";
import { containerQueries } from "contexts/containerQueries";
import { atomPairing } from "helpers/atoms";
import { settings } from "contexts/settings";
-import { lightBox } from "contexts/LightBoxProvider";
+import { UploadImageFragment } from "graphql/generated";
/*
* I'm getting a weird error if I put those atoms in appLayout.ts
* So I'm putting the atoms here. Sucks, I know.
*/
+/* [ LIGHTBOX ] */
+
+export const lightBox = atomPairing(
+ atom<{
+ showLightBox: (
+ images: (UploadImageFragment | string | null | undefined)[],
+ index?: number
+ ) => void;
+ }>({ showLightBox: () => null })
+);
+
/* [ APPLAYOUT ATOMS ] */
const mainPanelReduced = atomPairing(atomWithStorage("isMainPanelReduced", false));
@@ -44,6 +55,6 @@ export const atoms = {
layout,
terminal,
localData,
- lightBox,
+ lightBox: lightBox[0],
containerQueries,
};
diff --git a/src/contexts/localData.ts b/src/contexts/localData.ts
index be54704..f94b65b 100644
--- a/src/contexts/localData.ts
+++ b/src/contexts/localData.ts
@@ -35,7 +35,6 @@ export const useLocalData = (): void => {
const setCurrencies = useAtomSetter(currencies);
const setLangui = useAtomSetter(langui);
- const { locale } = useRouter();
const { data: rawLanguages } = useFetch
(getFileName("languages"));
const { data: rawCurrencies } = useFetch(getFileName("currencies"));
const { data: rawLangui } = useFetch(
@@ -54,6 +53,6 @@ export const useLocalData = (): void => {
useEffect(() => {
console.log("[useLocalData] Refresh langui");
- setLangui(processLangui(rawLangui, locale));
- }, [locale, rawLangui, setLangui]);
+ setLangui(processLangui(rawLangui, "en"));
+ }, [rawLangui, setLangui]);
};
diff --git a/src/contexts/settings.ts b/src/contexts/settings.ts
index fe98769..f129b35 100644
--- a/src/contexts/settings.ts
+++ b/src/contexts/settings.ts
@@ -1,11 +1,12 @@
-import { useRouter } from "next/router";
+// import { useRouter } from "next/router";
import { useLayoutEffect, useEffect } from "react";
import { atom } from "jotai";
import { atomWithStorage } from "jotai/utils";
-import { atomPairing, useAtomGetter, useAtomPair } from "helpers/atoms";
+import { atomPairing, useAtomGetter, useAtomPair, useAtomSetter } from "helpers/atoms";
import { getDefaultPreferredLanguages } from "helpers/locales";
import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
import { usePrefersDarkMode } from "hooks/useMediaQuery";
+import { Ids } from "types/ids";
export enum ThemeMode {
Dark = "dark",
@@ -32,11 +33,10 @@ export const settings = {
};
export const useSettings = (): void => {
- const router = useRouter();
- const [preferredLanguages, setPreferredLanguages] = useAtomPair(preferredLanguagesAtom);
+ // const router = useRouter();
+ // const [preferredLanguages, setPreferredLanguages] = useAtomPair(preferredLanguagesAtom);
const fontSize = useAtomGetter(fontSizeAtom);
- const isDyslexic = useAtomGetter(dyslexicAtom);
- const [isDarkMode, setDarkMode] = useAtomPair(darkModeAtom);
+ const setDarkMode = useAtomSetter(darkModeAtom);
const themeMode = useAtomGetter(themeModeAtom);
useLayoutEffect(() => {
@@ -46,19 +46,6 @@ export const useSettings = (): void => {
}
}, [fontSize]);
- useLayoutEffect(() => {
- const next = document.getElementById("__next");
- if (isDefined(next)) {
- if (isDyslexic) {
- next.classList.add("set-theme-font-dyslexic");
- next.classList.remove("set-theme-font-standard");
- } else {
- next.classList.add("set-theme-font-standard");
- next.classList.remove("set-theme-font-dyslexic");
- }
- }
- }, [isDyslexic]);
-
/* DARK MODE */
const prefersDarkMode = usePrefersDarkMode();
@@ -66,31 +53,21 @@ export const useSettings = (): void => {
setDarkMode(themeMode === ThemeMode.Auto ? prefersDarkMode : themeMode === ThemeMode.Dark);
}, [prefersDarkMode, setDarkMode, themeMode]);
- useLayoutEffect(() => {
- const next = document.getElementById("__next");
- if (isDefined(next)) {
- if (isDarkMode) {
- next.classList.add("set-theme-dark");
- next.classList.remove("set-theme-light");
- } else {
- next.classList.add("set-theme-light");
- next.classList.remove("set-theme-dark");
- }
- }
- }, [isDarkMode]);
-
/* PREFERRED LANGUAGES */
+ /*
useEffect(() => {
if (preferredLanguages.length === 0) {
if (isDefinedAndNotEmpty(router.locale) && router.locales) {
setPreferredLanguages(getDefaultPreferredLanguages(router.locale, router.locales));
}
} else if (router.locale !== preferredLanguages[0]) {
- /*
- * Using a timeout to the code getting stuck into a loop when reaching the website with a
- * different preferredLanguages[0] from router.locale
- */
+ */
+ /*
+ * Using a timeout to the code getting stuck into a loop when reaching the website with a
+ * different preferredLanguages[0] from router.locale
+ */
+ /*
setTimeout(
async () =>
router.replace(router.asPath, router.asPath, {
@@ -100,4 +77,5 @@ export const useSettings = (): void => {
);
}
}, [preferredLanguages, router, setPreferredLanguages]);
+ */
};
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
deleted file mode 100644
index 3112b18..0000000
--- a/src/pages/404.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { GetStaticProps } from "next";
-import { AppLayout, AppLayoutRequired } from "components/AppLayout";
-import { ReturnButton } from "components/PanelComponents/ReturnButton";
-import { ContentPanel } from "components/Containers/ContentPanel";
-import { getOpenGraph } from "helpers/openGraph";
-import { getLangui } from "graphql/fetchLocalData";
-import { Img } from "components/Img";
-import { atoms } from "contexts/atoms";
-import { useAtomGetter } from "helpers/atoms";
-
-/*
- * ╭────────╮
- * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
- */
-
-interface Props extends AppLayoutRequired {}
-
-const FourOhFour = ({ openGraph, ...otherProps }: Props): JSX.Element => {
- const langui = useAtomGetter(atoms.localData.langui);
- return (
-
-
-
{langui.page_not_found}
-
-
-
{langui.page_not_found}
- {
- const initialProps = await Document.getInitialProps(ctx);
- return { ...initialProps };
- }
-
- render(): JSX.Element {
- return (
-
-
-
-
-
-
- {formResponse && (
-
- {formResponse}
-
- )}
-
-
-
-): Promise => {
- if (req.method === "POST") {
- const body = req.body as RequestMailProps;
-
- const transporter = nodemailer.createTransport({
- host: process.env.SMTP_HOST,
- port: 587,
- secure: false,
- auth: {
- user: process.env.SMTP_USER,
- pass: process.env.SMTP_PASSWORD,
- },
- });
-
- // send mail with defined transport object
- await transporter
- .sendMail({
- from: `"${body.name}" <${body.email}>`,
- to: "contact@accords-library.com",
- subject: `New ${body.formName} from ${body.name}`,
- text: body.message,
- })
- .catch((reason: SMTPError) => {
- res.status(reason.responseCode ?? 500).json({
- code: reason.code,
- message: reason.response,
- });
- });
- }
-
- res.status(200).json({ code: "OKAY" });
-};
-export default Mail;
diff --git a/src/pages/api/revalidate.ts b/src/pages/api/revalidate.ts
deleted file mode 100644
index ae162b5..0000000
--- a/src/pages/api/revalidate.ts
+++ /dev/null
@@ -1,253 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { i18n } from "../../../next.config";
-import { cartesianProduct } from "helpers/others";
-
-type CRUDEvents = "entry.create" | "entry.delete" | "entry.update";
-
-type StrapiEvent = {
- event: CRUDEvents;
- model: string;
- entry: Record;
-};
-
-type RequestProps =
- | CustomRequest
- | StrapiChronicle
- | StrapiChronicleChapter
- | StrapiChronology
- | StrapiContent
- | StrapiContentFolder
- | StrapiLibraryItem
- | StrapiPostContent
- | StrapiRangedContent
- | StrapiWiki;
-
-interface CustomRequest {
- model: "custom";
- path: string;
-}
-
-interface StrapiRangedContent extends StrapiEvent {
- event: CRUDEvents;
- model: "ranged-content";
- entry: {
- library_item?: {
- slug: string;
- };
- content?: {
- slug: string;
- };
- };
-}
-
-interface StrapiContent extends StrapiEvent {
- model: "content";
- entry: {
- slug: string;
- folder?: {
- slug: string;
- };
- ranged_contents: {
- slug: string;
- }[];
- };
-}
-
-interface StrapiPostContent extends StrapiEvent {
- event: CRUDEvents;
- model: "post";
- entry: {
- slug: string;
- };
-}
-
-interface StrapiLibraryItem extends StrapiEvent {
- event: CRUDEvents;
- model: "library-item";
- entry: {
- slug: string;
- subitem_of: [
- {
- slug: string;
- }
- ];
- };
-}
-
-interface StrapiContentFolder extends StrapiEvent {
- event: CRUDEvents;
- model: "contents-folder";
- entry: {
- slug: string;
- parent_folder?: {
- slug: string;
- };
- subfolders: { slug: string }[];
- contents: {
- slug: string;
- }[];
- };
-}
-
-interface StrapiChronology extends StrapiEvent {
- event: CRUDEvents;
- model: "chronology-era" | "chronology-item";
-}
-
-interface StrapiWiki extends StrapiEvent {
- event: CRUDEvents;
- model: "wiki-page";
- entry: {
- slug: string;
- };
-}
-
-interface StrapiChronicle extends StrapiEvent {
- event: CRUDEvents;
- model: "chronicle";
- entry: {
- slug: string;
- };
-}
-
-interface StrapiChronicleChapter extends StrapiEvent {
- event: CRUDEvents;
- model: "chronicles-chapter";
- entry: {
- chronicles: { slug: string }[];
- };
-}
-
-type ResponseMailProps = {
- message: string;
- revalidated: boolean;
-};
-
-const Revalidate = (req: NextApiRequest, res: NextApiResponse): void => {
- const body = req.body as RequestProps;
-
- // Check for secret to confirm this is a valid request
- if (req.headers.authorization !== `Bearer ${process.env.REVALIDATION_TOKEN}`) {
- res.status(401).json({ message: "Invalid token", revalidated: false });
- return;
- }
-
- const paths: string[] = [];
-
- switch (body.model) {
- case "post": {
- paths.push(`/news`);
- paths.push(`/news/${body.entry.slug}`);
- break;
- }
-
- case "library-item": {
- paths.push(`/library`);
- paths.push(`/library/${body.entry.slug}`);
- paths.push(`/library/${body.entry.slug}/reader`);
- body.entry.subitem_of.forEach((parentItem) => {
- paths.push(`/library/${parentItem.slug}`);
- });
- break;
- }
-
- case "content": {
- paths.push(`/contents`);
- paths.push(`/contents/all`);
- paths.push(`/contents/${body.entry.slug}`);
- if (body.entry.folder?.slug) {
- paths.push(`/contents/folder/${body.entry.folder.slug}`);
- }
- if (body.entry.ranged_contents.length > 0) {
- body.entry.ranged_contents.forEach((ranged_content) => {
- const parentSlug = ranged_content.slug.slice(
- 0,
- ranged_content.slug.length - body.entry.slug.length - 1
- );
- paths.push(`/library/${parentSlug}`);
- paths.push(`/library/${parentSlug}/reader`);
- });
- }
- break;
- }
-
- case "chronology-era":
- case "chronology-item": {
- paths.push(`/wiki/chronology`);
- break;
- }
-
- case "ranged-content": {
- if (body.entry.library_item) {
- paths.push(`/library/${body.entry.library_item.slug}`);
- paths.push(`/library/${body.entry.library_item.slug}/reader`);
- }
- if (body.entry.content) {
- paths.push(`/contents/${body.entry.content.slug}`);
- }
- break;
- }
-
- case "contents-folder": {
- if (body.entry.slug === "root") {
- paths.push(`/contents`);
- }
- paths.push(`/contents/folder/${body.entry.slug}`);
- if (body.entry.parent_folder) {
- paths.push(`/contents/folder/${body.entry.parent_folder.slug}`);
- }
- body.entry.subfolders.forEach((subfolder) =>
- paths.push(`/contents/folder/${subfolder.slug}`)
- );
- body.entry.contents.forEach((content) => paths.push(`/contents/${content.slug}`));
- break;
- }
-
- case "wiki-page": {
- paths.push(`/wiki`);
- paths.push(`/wiki/${body.entry.slug}`);
- break;
- }
-
- case "chronicle": {
- paths.push(`/chronicles`);
- paths.push(`/chronicles/${body.entry.slug}`);
- break;
- }
-
- case "chronicles-chapter": {
- paths.push(`/chronicles`);
- body.entry.chronicles.forEach((chronicle) => {
- paths.push(`/chronicles/${chronicle.slug}`);
- });
- break;
- }
-
- case "custom": {
- paths.push(`${body.path}`);
- break;
- }
-
- default:
- console.log(body);
- break;
- }
-
- const localizedPaths = cartesianProduct(i18n.locales, paths).map(
- ([locale, path]) => `/${locale}${path}`
- );
- console.table(localizedPaths);
-
- try {
- Promise.all(
- localizedPaths.map(async (path) => {
- await res.revalidate(path);
- })
- );
- res.json({ message: "Success!", revalidated: true });
- return;
- } catch (error) {
- res.status(500).send({ message: `Error revalidating: ${error}`, revalidated: false });
- }
-};
-export default Revalidate;
diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx
deleted file mode 100644
index e6cd447..0000000
--- a/src/pages/archives/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { GetStaticProps } from "next";
-import { useMemo } from "react";
-import { AppLayout, AppLayoutRequired } from "components/AppLayout";
-import { NavOption } from "components/PanelComponents/NavOption";
-import { PanelHeader } from "components/PanelComponents/PanelHeader";
-import { SubPanel } from "components/Containers/SubPanel";
-import { Icon } from "components/Ico";
-import { getOpenGraph } from "helpers/openGraph";
-import { HorizontalLine } from "components/HorizontalLine";
-import { getLangui } from "graphql/fetchLocalData";
-import { atoms } from "contexts/atoms";
-import { useAtomGetter } from "helpers/atoms";
-
-/*
- * ╭────────╮
- * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
- */
-
-interface Props extends AppLayoutRequired {}
-
-const Archives = (props: Props): JSX.Element => {
- const langui = useAtomGetter(atoms.localData.langui);
- const subPanel = useMemo(
- () => (
-
-
- ),
- [langui]
- );
- return ["data"][number]["attributes"];
-}
-
-const Channel = ({ channel, ...otherProps }: Props): JSX.Element => {
- const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(true);
- const langui = useAtomGetter(atoms.localData.langui);
- const hoverable = useDeviceSupportsHover();
- const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
-
- const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
-
- const subPanel = useMemo(
- () => (
-
-
-
- )}
-
- ),
- [hoverable, keepInfoVisible, langui, searchName, toggleKeepInfoVisible]
- );
-
- const contentPanel = useMemo(
- () => (
-
- item.id}
- renderItem={({ item }) => (
-
- ),
- [channel?.title, channel?.videos?.data, isContentPanelAtLeast4xl, keepInfoVisible, searchName]
- );
-
- return ["data"];
-}
-
-const Videos = ({ videos, ...otherProps }: Props): JSX.Element => {
- const langui = useAtomGetter(atoms.localData.langui);
- const hoverable = useDeviceSupportsHover();
- const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
-
- const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(true);
-
- const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
-
- const subPanel = useMemo(
- () => (
-
-
-
- )}
-
- ),
- [hoverable, keepInfoVisible, langui, searchName, toggleKeepInfoVisible]
- );
-
- const contentPanel = useMemo(
- () => (
-
- item.id}
- renderItem={({ item }) => (
-
- ),
- [isContentPanelAtLeast4xl, keepInfoVisible, searchName, videos]
- );
- return ["data"][number]["attributes"]>;
-}
-
-const Video = ({ video, ...otherProps }: Props): JSX.Element => {
- const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
- const langui = useAtomGetter(atoms.localData.langui);
- const router = useRouter();
-
- const subPanel = useMemo(
- () => (
-
-
- ),
- [langui]
- );
-
- const contentPanel = useMemo(
- () => (
-
-
-
- {video.gone ? (
-
- ) : (
-
- )}
-
-
-
{video.title}
-
-
-
-
-
- {video.channel?.data?.attributes && (
-
-
- )}
-
-
-
-
-
-
- {video.channel?.data?.attributes && (
-
-
-
{langui.channel}
-
-
-
- {`${video.channel.data.attributes.subscribers.toLocaleString()}
- ${langui.subscribers?.toLowerCase()}`}
-
-
-
- )}
-
-
-
-
{langui.description}
-
{video.description}
-
-
- ),
- [
- isContentPanelAtLeast4xl,
- langui,
- router.locale,
- video.channel?.data?.attributes,
- video.description,
- video.gone,
- video.likes,
- video.published_date,
- video.source,
- video.title,
- video.uid,
- video.views,
- ]
- );
-
- return ["data"];
-}
-
-const Chronicle = ({ chronicle, chapters, ...otherProps }: Props): JSX.Element => {
- const langui = useAtomGetter(atoms.localData.langui);
- const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
- items: chronicle.translations,
- languageExtractor: useCallback(
- (item: ChronicleWithTranslations["translations"][number]) =>
- item?.language?.data?.attributes?.code,
- []
- ),
- });
-
- const primaryContent = useMemo<
- NonNullable["data"][number]["attributes"]
- >(
- () =>
- filterHasAttributes(chronicle.contents?.data, ["attributes.translations"] as const)[0]
- ?.attributes,
- [chronicle.contents?.data]
- );
-
- const [selectedContentTranslation, ContentLanguageSwitcher, ContentLanguageSwitcherProps] =
- useSmartLanguage({
- items: primaryContent?.translations ?? [],
- languageExtractor: useCallback(
- (
- item: NonNullable<
- NonNullable<
- NonNullable["data"][number]["attributes"]
- >["translations"]
- >[number]
- ) => item?.language?.data?.attributes?.code,
- []
- ),
- });
-
- const contentPanel = useMemo(
- () => (
-
- {selectedTranslation.title}
-
- {languageSwitcherProps.locales.size > 1 && (
- 1 ? (
-
- ),
- [
- selectedTranslation,
- languageSwitcherProps,
- LanguageSwitcher,
- selectedContentTranslation,
- ContentLanguageSwitcherProps,
- ContentLanguageSwitcher,
- primaryContent?.categories,
- primaryContent?.type,
- primaryContent?.thumbnail?.data?.attributes,
- langui,
- ]
- );
-
- const subPanel = useMemo(
- () => (
-
-
- {filterHasAttributes(chapters, ["attributes.chronicles", "id"] as const).map(
- (chapter) => (
- ({
- title: translation.title,
- language: translation.language.data.attributes.code,
- }))}
- fallback={{ title: prettySlug(chapter.attributes.slug) }}
- currentSlug={chronicle.slug}
- />
- )
- )}
-
-
- ),
- [chapters, chronicle.slug, langui]
- );
-
- return (
- ["data"];
-}
-
-const Chronicles = ({ chapters, ...otherProps }: Props): JSX.Element => {
- const langui = useAtomGetter(atoms.localData.langui);
- const subPanel = useMemo(
- () => (
-
-
- {filterHasAttributes(chapters, ["attributes.chronicles", "id"] as const).map(
- (chapter) => (
- ({
- title: translation.title,
- language: translation.language.data.attributes.code,
- }))}
- fallback={{ title: prettySlug(chapter.attributes.slug) }}
- />
- )
- )}
-
-
- ),
- [chapters, langui]
- );
-
- return ) =>
- item.language?.data?.attributes?.code,
- []
- ),
- });
-
- useScrollTopOnChange(Ids.ContentPanel, [selectedTranslation]);
-
- const { previousContent, nextContent } = useMemo(
- () => ({
- previousContent:
- content.folder?.data?.attributes?.contents && content.folder.data.attributes.sequence
- ? getPreviousContent(content.folder.data.attributes.contents.data, content.slug)
- : undefined,
- nextContent:
- content.folder?.data?.attributes?.contents && content.folder.data.attributes.sequence
- ? getNextContent(content.folder.data.attributes.contents.data, content.slug)
- : undefined,
- }),
- [content.folder, content.slug]
- );
-
- const returnButtonProps = useMemo(
- () => ({
- href: content.folder?.data?.attributes
- ? `/contents/folder/${content.folder.data.attributes.slug}`
- : "/contents",
-
- translations: filterHasAttributes(content.folder?.data?.attributes?.titles, [
- "language.data.attributes.code",
- ] as const).map((title) => ({
- language: title.language.data.attributes.code,
- title: title.title,
- })),
- fallback: {
- title: content.folder?.data?.attributes
- ? prettySlug(content.folder.data.attributes.slug)
- : langui.contents,
- },
- langui,
- }),
- [content.folder?.data?.attributes, langui]
- );
-
- const subPanel = useMemo(
- () => (
-
-
-
- {selectedTranslation.text_set.source_language.data.attributes.code ===
- selectedTranslation.language?.data?.attributes?.code
- ? langui.transcript_notice
- : langui.translation_notice}
-
-
- {selectedTranslation.text_set.source_language.data.attributes.code !==
- selectedTranslation.language?.data?.attributes?.code && (
-
-
{langui.source_language}:
-
-
- )}
-
-
-
{langui.status}:
-
-
-
-
-
- {selectedTranslation.text_set.transcribers &&
- selectedTranslation.text_set.transcribers.data.length > 0 && (
-
-
{langui.transcribers}:
-
- {filterHasAttributes(selectedTranslation.text_set.transcribers.data, [
- "attributes",
- "id",
- ] as const).map((recorder) => (
-
-
- ))}
-
-
- )}
-
- {selectedTranslation.text_set.translators &&
- selectedTranslation.text_set.translators.data.length > 0 && (
-
-
{langui.translators}:
-
- {filterHasAttributes(selectedTranslation.text_set.translators.data, [
- "attributes",
- "id",
- ] as const).map((recorder) => (
-
-
- ))}
-
-
- )}
-
- {selectedTranslation.text_set.proofreaders &&
- selectedTranslation.text_set.proofreaders.data.length > 0 && (
-
-
{langui.proofreaders}:
-
- {filterHasAttributes(selectedTranslation.text_set.proofreaders.data, [
- "attributes",
- "id",
- ] as const).map((recorder) => (
-
-
- ))}
-
-
- )}
-
- {isDefinedAndNotEmpty(selectedTranslation.text_set.notes) && (
-
-
{langui.notes}:
-
-
-
- )}
-
-
{langui.source}
-
- {filterHasAttributes(content.ranged_contents.data, [
- "attributes.library_item.data.attributes",
- "attributes.library_item.data.id",
- ] as const).map((rangedContent) => {
- const libraryItem = rangedContent.attributes.library_item.data;
- return (
-
-
0 &&
- libraryItem.attributes.metadata[0]
- ? [prettyItemSubType(libraryItem.attributes.metadata[0])]
- : []
- }
- bottomChips={filterHasAttributes(libraryItem.attributes.categories?.data, [
- "attributes",
- ] as const).map((category) => category.attributes.short)}
- metadata={{
- releaseDate: libraryItem.attributes.release_date,
- price: libraryItem.attributes.price,
- position: "Bottom",
- }}
- infoAppend={
- !isUntangibleGroupItem(libraryItem.attributes.metadata?.[0]) && (
-
- );
- })}
-
-
- ),
- [
- content.ranged_contents?.data,
- languages,
- langui,
- returnButtonProps,
- selectedTranslation,
- is1ColumnLayout,
- ]
- );
-
- const contentPanel = useMemo(
- () => (
-
-
-
1 ? (
-
-
{langui.previous_content}
- ({
- pre_title: translation.pre_title,
- title: translation.title,
- subtitle: translation.subtitle,
- language: translation.language.data.attributes.code,
- }))}
- fallback={{
- title: prettySlug(previousContent.attributes.slug),
- }}
- thumbnail={previousContent.attributes.thumbnail?.data?.attributes}
- topChips={
- isContentPanelAtLeast2xl && previousContent.attributes.type?.data?.attributes
- ? [
- previousContent.attributes.type.data.attributes.titles?.[0]
- ? previousContent.attributes.type.data.attributes.titles[0]?.title
- : prettySlug(previousContent.attributes.type.data.attributes.slug),
- ]
- : undefined
- }
- bottomChips={
- isContentPanelAtLeast2xl
- ? previousContent.attributes.categories?.data.map(
- (category) => category.attributes?.short ?? ""
- )
- : undefined
- }
- />
-
- )}
-
- {selectedTranslation?.text_set?.text && (
- <>
- {langui.followup_content}
- ({
- pre_title: translation.pre_title,
- title: translation.title,
- subtitle: translation.subtitle,
- language: translation.language.data.attributes.code,
- }))}
- fallback={{ title: nextContent.attributes.slug }}
- thumbnail={nextContent.attributes.thumbnail?.data?.attributes}
- topChips={
- isContentPanelAtLeast2xl && nextContent.attributes.type?.data?.attributes
- ? [
- nextContent.attributes.type.data.attributes.titles?.[0]
- ? nextContent.attributes.type.data.attributes.titles[0]?.title
- : prettySlug(nextContent.attributes.type.data.attributes.slug),
- ]
- : undefined
- }
- bottomChips={
- isContentPanelAtLeast2xl
- ? nextContent.attributes.categories?.data.map(
- (category) => category.attributes?.short ?? ""
- )
- : undefined
- }
- />
-
- )}
-
- ),
- [
- LanguageSwitcher,
- content.categories,
- content.thumbnail?.data?.attributes,
- content.type,
- isContentPanelAtLeast2xl,
- languageSwitcherProps,
- langui,
- nextContent?.attributes,
- previousContent?.attributes,
- returnButtonProps,
- selectedTranslation?.description,
- selectedTranslation?.pre_title,
- selectedTranslation?.subtitle,
- selectedTranslation?.text_set?.text,
- selectedTranslation?.title,
- ]
- );
-
- return ["data"]>["attributes"]
- >["contents"]
->["data"];
-
-const getPreviousContent = (contents: FolderContents, currentSlug: string) => {
- for (let index = 0; index < contents.length; index++) {
- const content = contents[index];
- if (content.attributes?.slug === currentSlug && index > 0) {
- return contents[index - 1];
- }
- }
- return undefined;
-};
-
-// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
-
-const getNextContent = (contents: FolderContents, currentSlug: string) => {
- for (let index = 0; index < contents.length; index++) {
- const content = contents[index];
- if (content.attributes?.slug === currentSlug && index < contents.length - 1) {
- return contents[index + 1];
- }
- }
- return undefined;
-};
diff --git a/src/pages/contents/all.tsx b/src/pages/contents/all.tsx
deleted file mode 100644
index 1525854..0000000
--- a/src/pages/contents/all.tsx
+++ /dev/null
@@ -1,315 +0,0 @@
-import { GetStaticProps } from "next";
-import { useState, useMemo, useCallback } from "react";
-import { useBoolean } from "usehooks-ts";
-import naturalCompare from "string-natural-compare";
-import { AppLayout, AppLayoutRequired } from "components/AppLayout";
-import { Select } from "components/Inputs/Select";
-import { Switch } from "components/Inputs/Switch";
-import { PanelHeader } from "components/PanelComponents/PanelHeader";
-import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
-import { SubPanel } from "components/Containers/SubPanel";
-import { getReadySdk } from "graphql/sdk";
-import { prettyInlineTitle, prettySlug } from "helpers/formatters";
-import { TextInput } from "components/Inputs/TextInput";
-import { WithLabel } from "components/Inputs/WithLabel";
-import { Button } from "components/Inputs/Button";
-import { useDeviceSupportsHover } from "hooks/useMediaQuery";
-import { Icon } from "components/Ico";
-import { filterDefined, filterHasAttributes, isDefinedAndNotEmpty } from "helpers/others";
-import { GetContentsQuery } from "graphql/generated";
-import { SmartList } from "components/SmartList";
-import { SelectiveNonNullable } from "types/SelectiveNonNullable";
-import { getOpenGraph } from "helpers/openGraph";
-import { HorizontalLine } from "components/HorizontalLine";
-import { TranslatedPreviewCard } from "components/PreviewCard";
-import { cJoin, cIf } from "helpers/className";
-import { getLangui } from "graphql/fetchLocalData";
-import { sendAnalytics } from "helpers/analytics";
-import { atoms } from "contexts/atoms";
-import { useAtomGetter } from "helpers/atoms";
-
-/*
- * ╭─────────────╮
- * ────────────────────────────────────────╯ CONSTANTS ╰──────────────────────────────────────────
- */
-
-const DEFAULT_FILTERS_STATE = {
- groupingMethod: -1,
- keepInfoVisible: false,
- searchName: "",
-};
-
-/*
- * ╭────────╮
- * ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
- */
-
-interface Props extends AppLayoutRequired {
- contents: NonNullable["data"];
-}
-
-const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
- const hoverable = useDeviceSupportsHover();
- const langui = useAtomGetter(atoms.localData.langui);
- const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
-
- const [groupingMethod, setGroupingMethod] = useState(
- DEFAULT_FILTERS_STATE.groupingMethod
- );
- const {
- value: keepInfoVisible,
- toggle: toggleKeepInfoVisible,
- setValue: setKeepInfoVisible,
- } = useBoolean(DEFAULT_FILTERS_STATE.keepInfoVisible);
-
- const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
-
- const groupingFunction = useCallback(
- (
- item: SelectiveNonNullable<
- NonNullable["data"][number],
- "attributes" | "id"
- >
- ): string[] => {
- switch (groupingMethod) {
- case 0: {
- const categories = filterHasAttributes(item.attributes.categories?.data, [
- "attributes",
- ] as const);
- if (categories.length > 0) {
- return categories.map((category) => category.attributes.name);
- }
- return [langui.no_category ?? "No category"];
- }
- case 1: {
- return [
- item.attributes.type?.data?.attributes?.titles?.[0]?.title ??
- item.attributes.type?.data?.attributes?.slug
- ? prettySlug(item.attributes.type.data.attributes.slug)
- : langui.no_type ?? "No type",
- ];
- }
- default: {
- return [""];
- }
- }
- },
- [groupingMethod, langui]
- );
-
- const filteringFunction = useCallback(
- (item: SelectiveNonNullable) => {
- if (searchName.length > 1) {
- if (
- filterDefined(item.attributes.translations).find((translation) =>
- prettyInlineTitle(translation.pre_title, translation.title, translation.subtitle)
- .toLowerCase()
- .includes(searchName.toLowerCase())
- )
- ) {
- return true;
- }
- return false;
- }
- return true;
- },
- [searchName]
- );
-
- const subPanel = useMemo(
- () => (
-
- {
- setSearchName(name);
- if (isDefinedAndNotEmpty(name)) {
- sendAnalytics("Contents/All", "Change search term");
- } else {
- sendAnalytics("Contents/All", "Clear search term");
- }
- }}
- />
-
-
- {
- setGroupingMethod(value);
- sendAnalytics(
- "Contents/All",
- `Change grouping method (${["none", "category", "type"][value + 1]})`
- );
- }}
- allowEmpty
- />
-
-
- {hoverable && (
-
- {
- toggleKeepInfoVisible();
- sendAnalytics("Contents/All", `Always ${keepInfoVisible ? "hide" : "show"} info`);
- }}
- />
-
- )}
-
- {
- setSearchName(DEFAULT_FILTERS_STATE.searchName);
- setGroupingMethod(DEFAULT_FILTERS_STATE.groupingMethod);
- setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
- sendAnalytics("Contents/All", "Reset all filters");
- }}
- />
-
- ),
- [
- groupingMethod,
- hoverable,
- keepInfoVisible,
- langui.always_show_info,
- langui.category,
- langui.contents,
- langui.contents_description,
- langui.group_by,
- langui.reset_all_filters,
- langui.search_title,
- langui.switch_to_folder_view,
- langui.type,
- searchName,
- setKeepInfoVisible,
- toggleKeepInfoVisible,
- ]
- );
-
- const contentPanel = useMemo(
- () => (
-
- item.id}
- renderItem={({ item }) => (
- ({
- pre_title: translation.pre_title,
- title: translation.title,
- subtitle: translation.subtitle,
- language: translation.language.data.attributes.code,
- }))}
- fallback={{ title: prettySlug(item.attributes.slug) }}
- thumbnail={item.attributes.thumbnail?.data?.attributes}
- thumbnailAspectRatio="3/2"
- thumbnailForceAspectRatio
- topChips={
- item.attributes.type?.data?.attributes
- ? [
- item.attributes.type.data.attributes.titles?.[0]
- ? item.attributes.type.data.attributes.titles[0]?.title
- : prettySlug(item.attributes.type.data.attributes.slug),
- ]
- : undefined
- }
- bottomChips={item.attributes.categories?.data.map(
- (category) => category.attributes?.short ?? ""
- )}
- keepInfoVisible={keepInfoVisible}
- />
- )}
- className={cJoin(
- "items-end",
- cIf(
- isContentPanelAtLeast4xl,
- "grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8",
- "grid-cols-2 gap-x-3 gap-y-5"
- )
- )}
- groupingFunction={groupingFunction}
- filteringFunction={filteringFunction}
- searchingTerm={searchName}
- searchingBy={(item) =>
- `
- ${item.attributes.slug}
- ${filterDefined(item.attributes.translations)
- .map((translation) =>
- prettyInlineTitle(translation.pre_title, translation.title, translation.subtitle)
- )
- .join(" ")}`
- }
- paginationItemPerPage={50}
- />
-
- ),
- [
- isContentPanelAtLeast4xl,
- contents,
- filteringFunction,
- groupingFunction,
- keepInfoVisible,
- searchName,
- ]
- );
-
- return (
- ["data"][number]["attributes"]
- >;
-}
-
-const ContentsFolder = ({ openGraph, folder, ...otherProps }: Props): JSX.Element => {
- const langui = useAtomGetter(atoms.localData.langui);
- const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
-
- const subPanel = useMemo(
- () => (
-
-
- ),
- [langui.contents, langui.contents_description, langui.switch_to_grid_view]
- );
-
- const contentPanel = useMemo(
- () => (
-
-
- {folder.parent_folder?.data?.attributes && (
- <>
- {folder.parent_folder.data.attributes.slug === "root" ? (
- ({
- language: title.language.data.attributes.code,
- text: title.title,
- }))}
- fallback={{
- text: prettySlug(folder.parent_folder.data.attributes.slug),
- }}
- />
- )}
- ({
- language: title.language.data.attributes.code,
- text: title.title,
- }))}
- fallback={{
- text: prettySlug(folder.slug),
- }}
- active
- />
- )}
-
-
- item.id}
- renderItem={({ item }) => (
- ({
- title: title.title,
- language: title.language.data.attributes.code,
- }))}
- fallback={{ title: prettySlug(item.attributes.slug) }}
- />
- )}
- className={cJoin(
- "items-end",
- cIf(
- isContentPanelAtLeast4xl,
- "grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8",
- "grid-cols-2 gap-4"
- )
- )}
- renderWhenEmpty={() => <>}
- groupingFunction={() => [langui.folders ?? "Folders"]}
- />
-
- item.id}
- renderItem={({ item }) => (
- ({
- pre_title: translation.pre_title,
- title: translation.title,
- subtitle: translation.subtitle,
- language: translation.language.data.attributes.code,
- }))}
- fallback={{ title: prettySlug(item.attributes.slug) }}
- thumbnail={item.attributes.thumbnail?.data?.attributes}
- thumbnailAspectRatio="3/2"
- thumbnailForceAspectRatio
- topChips={
- item.attributes.type?.data?.attributes
- ? [
- item.attributes.type.data.attributes.titles?.[0]
- ? item.attributes.type.data.attributes.titles[0]?.title
- : prettySlug(item.attributes.type.data.attributes.slug),
- ]
- : undefined
- }
- bottomChips={item.attributes.categories?.data.map(
- (category) => category.attributes?.short ?? ""
- )}
- keepInfoVisible
- />
- )}
- className={cIf(
- isContentPanelAtLeast4xl,
- "grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8",
- "grid-cols-2 gap-x-3 gap-y-5"
- )}
- renderWhenEmpty={() => <>}
- groupingFunction={() => [langui.contents ?? "Contents"]}
- />
-
- {folder.contents?.data.length === 0 && folder.subfolders?.data.length === 0 && (
-
- ),
- [
- folder.contents?.data,
- folder.parent_folder?.data?.attributes,
- folder.slug,
- folder.subfolders?.data,
- folder.titles,
- isContentPanelAtLeast4xl,
- langui,
- ]
- );
-
- return (
-
-
-
{langui.empty_folder_message}
-
-
[0]): JSX.Element => (
-
- {{testReport.title} }
-
-
-
-
-
Ref
-
Name
-
Type
-
Severity
-
Description
-
-
-
-
{line.subitems.join(" -> ")}
-
{line.name}
-
-
-
- {line.description}
-
-
- ),
- [testReport.lines, testReport.title]
- );
-
- return
- {{testReport.title} }
-
-
-
-
-
Ref
-
Name
-
Type
-
Severity
-
Description
-
-
-
-
{line.subitems.join(" -> ")}
-
{line.name}
-
-
-
- {line.description}
-
-
- ),
- [testReport.lines, testReport.title]
- );
-
- return (null);
-
- const transformationWrapper = useCallback(
- (
- transformation: (
- value: string,
- selectionStart: number,
- selectedEnd: number
- ) => { prependLength: number; transformedValue: string }
- ) => {
- if (textAreaRef.current) {
- const { value, selectionStart, selectionEnd } = textAreaRef.current;
-
- const { prependLength, transformedValue } = transformation(
- value,
- selectionStart,
- selectionEnd
- );
-
- textAreaRef.current.value = transformedValue;
- handleInput(textAreaRef.current.value);
-
- textAreaRef.current.focus();
- textAreaRef.current.selectionStart = selectionStart + prependLength;
- textAreaRef.current.selectionEnd = selectionEnd + prependLength;
- }
- },
- [handleInput]
- );
-
- const wrap = useCallback(
- (wrapper: string, properties?: Record, addInnerNewLines?: boolean) => {
- transformationWrapper((value, selectionStart, selectionEnd) => {
- let prepend = wrapper;
- let append = wrapper;
-
- if (properties) {
- prepend = `<${wrapper}${Object.entries(properties).map(
- ([propertyName, propertyValue]) => ` ${propertyName}="${propertyValue}"`
- )}>`;
- append = ``;
- }
-
- if (addInnerNewLines === true) {
- prepend = `${prepend}\n`;
- append = `\n${append}`;
- }
-
- let newValue = "";
- newValue += value.slice(0, selectionStart);
- newValue += prepend;
- newValue += value.slice(selectionStart, selectionEnd);
- newValue += append;
- newValue += value.slice(selectionEnd);
- return { prependLength: prepend.length, transformedValue: newValue };
- });
- },
- [transformationWrapper]
- );
-
- const unwrap = useCallback(
- (wrapper: string) => {
- transformationWrapper((value, selectionStart, selectionEnd) => {
- let newValue = "";
- newValue += value.slice(0, selectionStart - wrapper.length);
- newValue += value.slice(selectionStart, selectionEnd);
- newValue += value.slice(wrapper.length + selectionEnd);
- return { prependLength: -wrapper.length, transformedValue: newValue };
- });
- },
- [transformationWrapper]
- );
-
- const toggleWrap = useCallback(
- (wrapper: string, properties?: Record, addInnerNewLines?: boolean) => {
- if (textAreaRef.current) {
- const { value, selectionStart, selectionEnd } = textAreaRef.current;
-
- if (
- value.slice(selectionStart - wrapper.length, selectionStart) === wrapper &&
- value.slice(selectionEnd, selectionEnd + wrapper.length) === wrapper
- ) {
- unwrap(wrapper);
- } else {
- wrap(wrapper, properties, addInnerNewLines);
- }
- }
- },
- [unwrap, wrap]
- );
-
- const preline = useCallback(
- (prepend: string) => {
- transformationWrapper((value, selectionStart) => {
- const lastNewLine = value.slice(0, selectionStart).lastIndexOf("\n") + 1;
-
- let newValue = "";
- newValue += value.slice(0, lastNewLine);
- newValue += prepend;
- newValue += value.slice(lastNewLine);
-
- return { prependLength: prepend.length, transformedValue: newValue };
- });
- },
- [transformationWrapper]
- );
-
- const insert = useCallback(
- (prepend: string) => {
- transformationWrapper((value, selectionStart) => {
- let newValue = "";
- newValue += value.slice(0, selectionStart);
- newValue += prepend;
- newValue += value.slice(selectionStart);
-
- return { prependLength: prepend.length, transformedValue: newValue };
- });
- },
- [transformationWrapper]
- );
-
- const appendDoc = useCallback(
- (append: string) => {
- transformationWrapper((value) => {
- const newValue = value + append;
- return { prependLength: 0, transformedValue: newValue };
- });
- },
- [transformationWrapper]
- );
-
- const contentPanel = useMemo(
- () => (
-
- setConverterOpened(false)}>
-
-
Convert HTML to markdown
-
- Copy and paste any HTML content (content from web pages) here.
-
-
![]({"/gameover_cards.webp"})
-