107 lines
2.9 KiB
Plaintext
107 lines
2.9 KiB
Plaintext
---
|
|
import AppLayout from "components/AppLayout/AppLayout.astro";
|
|
import { payload } from "src/shared/payload/payload-sdk";
|
|
import RichText from "components/RichText/RichText.astro";
|
|
import FoldersSection from "./_components/FoldersSection.astro";
|
|
import { fetchOr404 } from "src/utils/responses";
|
|
import ErrorMessage from "components/ErrorMessage.astro";
|
|
import { getI18n } from "src/i18n/i18n";
|
|
import CollectiblePreview from "components/Previews/CollectiblePreview.astro";
|
|
import PagePreview from "components/Previews/PagePreview.astro";
|
|
import { formatRichTextToString } from "src/utils/format";
|
|
|
|
const { slug } = Astro.params;
|
|
|
|
const folder = await fetchOr404(() => payload.getFolder(slug!));
|
|
if (folder instanceof Response) {
|
|
return folder;
|
|
}
|
|
|
|
const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
|
|
const meta = getLocalizedMatch(folder.translations);
|
|
|
|
// TODO: handle light and dark illustration for applayout
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
<AppLayout
|
|
title={meta.name}
|
|
openGraph={{
|
|
title: meta.name,
|
|
description: meta.description && formatRichTextToString(meta.description),
|
|
thumbnail: folder.lightThumbnail?.url ?? folder.darkThumbnail?.url,
|
|
}}>
|
|
{
|
|
meta.description && (
|
|
<div slot="header-description">
|
|
<RichText content={meta.description} />
|
|
</div>
|
|
)
|
|
}
|
|
<div id="main">
|
|
{
|
|
folder.sections.type === "single" ? (
|
|
<FoldersSection folders={folder.sections.subfolders} />
|
|
) : (
|
|
<div id="sections">
|
|
{folder.sections.sections.map(({ subfolders, translations }) => (
|
|
<FoldersSection
|
|
folders={subfolders}
|
|
title={
|
|
getLocalizedMatch<{
|
|
language: string;
|
|
name: string | undefined;
|
|
}>(translations).name
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<div id="files">
|
|
{
|
|
folder.files.map(({ relationTo, value }) => {
|
|
switch (relationTo) {
|
|
case "collectibles":
|
|
return <CollectiblePreview collectible={value} />;
|
|
|
|
case "pages":
|
|
return <PagePreview page={value} />;
|
|
|
|
default:
|
|
return (
|
|
<ErrorMessage
|
|
title={`Unknown file type: ${relationTo}`}
|
|
description="Please contact website technical administrator."
|
|
/>
|
|
);
|
|
}
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
|
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
|
|
<style>
|
|
#main {
|
|
display: grid;
|
|
gap: 4em;
|
|
|
|
& > #sections {
|
|
display: grid;
|
|
gap: 2.5em;
|
|
}
|
|
|
|
& > #files {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: clamp(6px, 2vmin, 16px);
|
|
place-items: start;
|
|
}
|
|
}
|
|
</style>
|