94 lines
2.5 KiB
Plaintext
94 lines
2.5 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";
|
|
|
|
const { slug } = Astro.params;
|
|
const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|
|
|
const folder = await fetchOr404(() => payload.getFolder(slug!));
|
|
if (folder instanceof Response) {
|
|
return folder;
|
|
}
|
|
const meta = getLocalizedMatch(folder.translations);
|
|
|
|
// TODO: handle light and dark illustration for applayout
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
<AppLayout title={meta.name}>
|
|
{
|
|
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>
|
|
{
|
|
folder.files.map(({ relationTo, value }) => {
|
|
switch (relationTo) {
|
|
case "library-items":
|
|
return <p>Library item not supported yet! {value.slug}</p>;
|
|
|
|
case "pages":
|
|
return (
|
|
<a class="pressable" href={getLocalizedUrl(`/pages/${value.slug}`)}>
|
|
{value.slug}
|
|
</a>
|
|
);
|
|
|
|
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;
|
|
}
|
|
}
|
|
</style>
|