134 lines
4.0 KiB
Plaintext
134 lines
4.0 KiB
Plaintext
---
|
|
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";
|
|
import ImagePreview from "components/Previews/ImagePreview.astro";
|
|
import AudioPreview from "components/Previews/AudioPreview.astro";
|
|
import VideoPreview from "components/Previews/VideoPreview.astro";
|
|
import AppLayout from "components/AppLayout/AppLayout.astro";
|
|
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
|
|
import { payload } from "src/services";
|
|
import RichText from "components/RichText/RichText.astro";
|
|
import FilePreview from "components/Previews/FilePreview.astro";
|
|
import { Collections } from "src/shared/payload/constants";
|
|
|
|
const slug = Astro.params.slug!;
|
|
|
|
const response = await fetchOr404(() => payload.getFolder(slug));
|
|
if (response instanceof Response) {
|
|
return response;
|
|
}
|
|
Astro.locals.sdkCalls.add(response.endpointCalled);
|
|
const { files, parentPages, sections, translations } = response.data;
|
|
|
|
const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
|
|
const { language, title, description } = getLocalizedMatch(translations);
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
<AppLayout
|
|
openGraph={{
|
|
title: title,
|
|
description: description && formatRichTextToString(description),
|
|
}}
|
|
parentPages={parentPages}
|
|
class="app">
|
|
<AppLayoutTitle title={title} lang={language} />
|
|
{description && <RichText content={description} context={{ lang: language }} />}
|
|
|
|
<div id="main" class:list={{ complex: sections.type === "multiple" }}>
|
|
{
|
|
sections.type === "single" && sections.subfolders.length > 0 ? (
|
|
<FoldersSection folders={sections.subfolders} />
|
|
) : (
|
|
sections.type === "multiple" &&
|
|
sections.sections.length > 0 && (
|
|
<div id="sections">
|
|
{sections.sections.map(({ subfolders, translations }) => {
|
|
const { language, name } = getLocalizedMatch(translations);
|
|
return <FoldersSection folders={subfolders} title={name} lang={language} />;
|
|
})}
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
|
|
<div id="files">
|
|
{
|
|
files.map(({ relationTo, value }) => {
|
|
switch (relationTo) {
|
|
case Collections.Collectibles:
|
|
return <CollectiblePreview collectible={value} />;
|
|
|
|
case Collections.Pages:
|
|
return <PagePreview page={value} />;
|
|
|
|
case Collections.Images:
|
|
return <ImagePreview image={value} />;
|
|
|
|
case Collections.Audios:
|
|
return <AudioPreview audio={value} />;
|
|
|
|
case Collections.Videos:
|
|
return <VideoPreview video={value} />;
|
|
|
|
case Collections.Files:
|
|
return <FilePreview file={value} />;
|
|
|
|
default:
|
|
return <ErrorMessage title={`Unknown file type: ${relationTo}`} />;
|
|
}
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
|
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
|
|
<style>
|
|
.app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
}
|
|
|
|
#main {
|
|
margin-top: 64px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4em;
|
|
|
|
&.complex {
|
|
gap: 6em;
|
|
|
|
& > #sections {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4em;
|
|
}
|
|
}
|
|
|
|
& > #files {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: clamp(6px, 2vmin, 16px);
|
|
align-items: start;
|
|
|
|
@media (max-width: 40rem) {
|
|
grid-template-columns: 1fr 1fr;
|
|
row-gap: 12px;
|
|
}
|
|
|
|
@media (max-width: 24rem) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
}
|
|
</style>
|