dd3beff508
* Added search on most pages * Changed material icons to symbols and added wikipage search * Updated deps * Changed color of the play button on previewcard overlay * Updated search params * Updated deps * Audit fix * Removed unused graphql files
272 lines
10 KiB
TypeScript
272 lines
10 KiB
TypeScript
import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
|
|
import naturalCompare from "string-natural-compare";
|
|
import { AppLayout, AppLayoutRequired } from "components/AppLayout";
|
|
import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
|
|
import { getOpenGraph } from "helpers/openGraph";
|
|
import { getReadySdk } from "graphql/sdk";
|
|
import { filterHasAttributes } from "helpers/asserts";
|
|
import { GetContentsFolderQuery } from "graphql/generated";
|
|
import { getDefaultPreferredLanguages, staticSmartLanguage } from "helpers/locales";
|
|
import { prettySlug } from "helpers/formatters";
|
|
import { SmartList } from "components/SmartList";
|
|
import { Ico } from "components/Ico";
|
|
import { Button, TranslatedButton } from "components/Inputs/Button";
|
|
import { PanelHeader } from "components/PanelComponents/PanelHeader";
|
|
import { SubPanel } from "components/Containers/SubPanel";
|
|
import { TranslatedPreviewCard } from "components/PreviewCard";
|
|
import { HorizontalLine } from "components/HorizontalLine";
|
|
import { cJoin, cIf } from "helpers/className";
|
|
import { getLangui } from "graphql/fetchLocalData";
|
|
import { atoms } from "contexts/atoms";
|
|
import { useAtomGetter } from "helpers/atoms";
|
|
import { TranslatedPreviewFolder } from "components/Contents/PreviewFolder";
|
|
|
|
/*
|
|
* ╭────────╮
|
|
* ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
|
|
*/
|
|
|
|
interface Props extends AppLayoutRequired {
|
|
folder: NonNullable<
|
|
NonNullable<GetContentsFolderQuery["contentsFolders"]>["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 = (
|
|
<SubPanel>
|
|
<PanelHeader
|
|
icon="workspaces"
|
|
title={langui.contents}
|
|
description={langui.contents_description}
|
|
/>
|
|
|
|
<HorizontalLine />
|
|
|
|
<Button href="/contents/all" text={langui.switch_to_grid_view} icon="apps" />
|
|
</SubPanel>
|
|
);
|
|
|
|
const contentPanel = (
|
|
<ContentPanel width={ContentPanelWidthSizes.Full}>
|
|
<div className="mb-10 grid grid-flow-col place-items-center justify-start gap-x-2">
|
|
{folder.parent_folder?.data?.attributes && (
|
|
<>
|
|
{folder.parent_folder.data.attributes.slug === "root" ? (
|
|
<Button href="/contents" icon="home" />
|
|
) : (
|
|
<TranslatedButton
|
|
href={`/contents/folder/${folder.parent_folder.data.attributes.slug}`}
|
|
translations={filterHasAttributes(folder.parent_folder.data.attributes.titles, [
|
|
"language.data.attributes.code",
|
|
] as const).map((title) => ({
|
|
language: title.language.data.attributes.code,
|
|
text: title.title,
|
|
}))}
|
|
fallback={{
|
|
text: prettySlug(folder.parent_folder.data.attributes.slug),
|
|
}}
|
|
/>
|
|
)}
|
|
<Ico icon="chevron_right" />
|
|
</>
|
|
)}
|
|
|
|
{folder.slug === "root" ? (
|
|
<Button href="/contents" icon="home" active />
|
|
) : (
|
|
<TranslatedButton
|
|
translations={filterHasAttributes(folder.titles, [
|
|
"language.data.attributes.code",
|
|
] as const).map((title) => ({
|
|
language: title.language.data.attributes.code,
|
|
text: title.title,
|
|
}))}
|
|
fallback={{
|
|
text: prettySlug(folder.slug),
|
|
}}
|
|
active
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<SmartList
|
|
items={filterHasAttributes(folder.subfolders?.data, ["id", "attributes"] as const)}
|
|
getItemId={(item) => item.id}
|
|
renderItem={({ item }) => (
|
|
<TranslatedPreviewFolder
|
|
href={`/contents/folder/${item.attributes.slug}`}
|
|
translations={filterHasAttributes(item.attributes.titles, [
|
|
"language.data.attributes.code",
|
|
] as const).map((title) => ({
|
|
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"]}
|
|
/>
|
|
|
|
<SmartList
|
|
items={filterHasAttributes(folder.contents?.data, ["id", "attributes"] as const)}
|
|
getItemId={(item) => item.id}
|
|
renderItem={({ item }) => (
|
|
<TranslatedPreviewCard
|
|
href={`/contents/${item.attributes.slug}`}
|
|
translations={filterHasAttributes(item.attributes.translations, [
|
|
"language.data.attributes.code",
|
|
] as const).map((translation) => ({
|
|
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 && (
|
|
<NoContentNorFolderMessage />
|
|
)}
|
|
</ContentPanel>
|
|
);
|
|
|
|
return (
|
|
<AppLayout
|
|
subPanel={subPanel}
|
|
contentPanel={contentPanel}
|
|
openGraph={openGraph}
|
|
{...otherProps}
|
|
/>
|
|
);
|
|
};
|
|
export default ContentsFolder;
|
|
|
|
/*
|
|
* ╭──────────────────────╮
|
|
* ───────────────────────────────────╯ NEXT DATA FETCHING ╰──────────────────────────────────────
|
|
*/
|
|
|
|
export const getStaticProps: GetStaticProps = async (context) => {
|
|
const sdk = getReadySdk();
|
|
const langui = getLangui(context.locale);
|
|
const slug = context.params?.slug ? context.params.slug.toString() : "";
|
|
const contentsFolder = await sdk.getContentsFolder({
|
|
slug: slug,
|
|
language_code: context.locale ?? "en",
|
|
});
|
|
if (!contentsFolder.contentsFolders?.data[0]?.attributes) {
|
|
return { notFound: true };
|
|
}
|
|
|
|
const folder = contentsFolder.contentsFolders.data[0].attributes;
|
|
|
|
folder.subfolders?.data.sort((a, b) =>
|
|
a.attributes && b.attributes ? naturalCompare(a.attributes.slug, b.attributes.slug) : 0
|
|
);
|
|
|
|
folder.contents?.data.sort((a, b) =>
|
|
a.attributes && b.attributes ? naturalCompare(a.attributes.slug, b.attributes.slug) : 0
|
|
);
|
|
|
|
const title = (() => {
|
|
if (slug === "root") {
|
|
return langui.contents ?? "Contents";
|
|
}
|
|
if (context.locale && context.locales) {
|
|
const selectedTranslation = staticSmartLanguage({
|
|
items: folder.titles,
|
|
languageExtractor: (item) => item.language?.data?.attributes?.code,
|
|
preferredLanguages: getDefaultPreferredLanguages(context.locale, context.locales),
|
|
});
|
|
if (selectedTranslation) {
|
|
return selectedTranslation.title;
|
|
}
|
|
}
|
|
return prettySlug(folder.slug);
|
|
})();
|
|
|
|
const props: Props = {
|
|
openGraph: getOpenGraph(langui, title),
|
|
folder,
|
|
};
|
|
return {
|
|
props: props,
|
|
};
|
|
};
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
export const getStaticPaths: GetStaticPaths = async (context) => {
|
|
const sdk = getReadySdk();
|
|
const contents = await sdk.getContentsFoldersSlugs();
|
|
const paths: GetStaticPathsResult["paths"] = [];
|
|
filterHasAttributes(contents.contentsFolders?.data, ["attributes"] as const).map((item) => {
|
|
context.locales?.map((local) => {
|
|
paths.push({
|
|
params: { slug: item.attributes.slug },
|
|
locale: local,
|
|
});
|
|
});
|
|
});
|
|
return {
|
|
paths,
|
|
fallback: "blocking",
|
|
};
|
|
};
|
|
|
|
/*
|
|
* ╭──────────────────────╮
|
|
* ───────────────────────────────────╯ PRIVATE COMPONENTS ╰──────────────────────────────────────
|
|
*/
|
|
|
|
const NoContentNorFolderMessage = () => {
|
|
const langui = useAtomGetter(atoms.localData.langui);
|
|
return (
|
|
<div className="grid place-content-center">
|
|
<div
|
|
className="grid grid-flow-col place-items-center gap-9 rounded-2xl border-2 border-dotted
|
|
border-dark p-8 text-dark opacity-40">
|
|
<p className="max-w-xs text-2xl">{langui.empty_folder_message}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|