Accords-Library-Archive
/
v3.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Now using attributes instead of tag groups

This commit is contained in:
DrMint 2024-05-15 15:37:44 +02:00
parent 600a2374e1
commit 0e148f06cf
23 changed files with 356 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/Attributes.astro Normal file
View File

@ -0,0 +1,87 @@
---
import { AttributeTypes, type EndpointAttribute } from "src/shared/payload/payload-sdk";
import Metadata from "./Metadata.astro";
import { getI18n } from "src/i18n/i18n";
import ErrorMessage from "./ErrorMessage.astro";
import type { Attribute } from "src/utils/attributes";
interface Props {
attributes: (EndpointAttribute | Attribute)[];
}
const { attributes } = Astro.props;
const { getLocalizedMatch, getLocalizedUrl, formatNumber } = await getI18n(
Astro.locals.currentLocale
);
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
<div>
{
attributes.map((attribute) => {
if ("title" in attribute) {
return <Metadata {...attribute} />;
}
const { icon, translations, value, type } = attribute;
const translation = getLocalizedMatch(translations);
switch (type) {
case AttributeTypes.Number:
return (
<Metadata
icon={icon}
title={translation.name}
values={[{ name: formatNumber(value) }]}
withBorder={false}
/>
);
case AttributeTypes.Text:
return (
<Metadata
icon={icon}
title={translation.name}
values={[{ name: value }]}
withBorder={false}
/>
);
case AttributeTypes.Tags:
return (
<Metadata
icon={icon}
title={translation.name}
values={value.map(({ translations, page }) => ({
name: getLocalizedMatch(translations).name,
...(page ? { href: getLocalizedUrl(`/pages/${page.slug}`) } : {}),
}))}
/>
);
default:
return (
<ErrorMessage
title={`Unknown attribute type: ${type}`}
description="Please contact website technical administrator."
/>
);
}
})
}
<slot />
</div>
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
div {
display: flex;
flex-direction: column;
gap: 2em;
@media (max-width: 35rem) {
gap: 3em;
}
}
</style>

83
src/components/InlineAttributes.astro Normal file
View File

@ -0,0 +1,83 @@
---
import { AttributeTypes, type EndpointAttribute } from "src/shared/payload/payload-sdk";
import InlineMetadata from "./InlineMetadata.astro";
import { getI18n } from "src/i18n/i18n";
import ErrorMessage from "./ErrorMessage.astro";
import type { Attribute } from "src/utils/attributes";
interface Props {
attributes: (EndpointAttribute | Attribute)[];
}
const { attributes } = Astro.props;
const { getLocalizedMatch, getLocalizedUrl, formatNumber } = await getI18n(
Astro.locals.currentLocale
);
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
<div id="container">
{
attributes.map((attribute) => {
if ("title" in attribute) {
return <InlineMetadata {...attribute} />;
}
const { icon, translations, value, type } = attribute;
const translation = getLocalizedMatch(translations);
switch (type) {
case AttributeTypes.Number:
return (
<InlineMetadata
icon={icon}
title={translation.name}
values={[{ name: formatNumber(value) }]}
withBorder={false}
/>
);
case AttributeTypes.Text:
return (
<InlineMetadata
icon={icon}
title={translation.name}
values={[{ name: value }]}
withBorder={false}
/>
);
case AttributeTypes.Tags:
return (
<InlineMetadata
icon={icon}
title={translation.name}
values={value.map(({ translations, page }) => ({
name: getLocalizedMatch(translations).name,
...(page ? { href: getLocalizedUrl(`/pages/${page.slug}`) } : {}),
}))}
/>
);
default:
return (
<ErrorMessage
title={`Unknown attribute type: ${type}`}
description="Please contact website technical administrator."
/>
);
}
})
}
<slot />
</div>
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
#container {
display: flex;
gap: 0.5em 1.5em;
flex-wrap: wrap;
}
</style>

33
src/components/InlineCredits.astro
View File

@ -1,6 +1,7 @@
---
import type { EndpointCredit } from "src/shared/payload/payload-sdk";
import { getI18n } from "src/i18n/i18n";
import InlineMetadata from "./InlineMetadata.astro";
interface Props {
credits: EndpointCredit[];
@ -12,13 +13,14 @@ const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
{/* ------------------------------------------- HTML ------------------------------------------- */}
<div id="credits">
{
credits.map(({ recorders, role: { translations } }) => (
<div>
<p>{getLocalizedMatch(translations).name}</p>
{recorders.map(({ username }) => username).join(", ")}
</div>
{
credits.map(({ recorders, role: { icon, translations } }) => (
<InlineMetadata
icon={icon}
title={getLocalizedMatch(translations).name}
values={recorders.map(({ username }) => ({ name: username }))}
/>
))
}
</div>
@ -26,21 +28,12 @@ const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
#credits {
margin-top: 0.5em;
display: flex;
flex-direction: column;
gap: 0.5em 1.5em;
div {
display: grid;
gap: 2em;
& > div {
font-weight: 400;
font-size: 80%;
display: flex;
gap: 0.5em;
& > p {
color: var(--color-base-750);
}
@media (max-width: 35rem) {
gap: 3em;
}
}
</style>

38
src/components/InlineMetadata.astro Normal file
View File

@ -0,0 +1,38 @@
---
import { Icon } from "astro-icon/components";
import type { Attribute } from "src/utils/attributes";
interface Props extends Attribute {}
const { icon, title, values } = Astro.props;
if (values.length === 0) return;
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
<div id="container">
<Icon name={icon} />
<p>{title}</p>
<div>{values.map(({ name }) => name).join(", ")}</div>
</div>
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
#container {
font-weight: 400;
font-size: 80%;
display: flex;
gap: 0.5em;
& > p {
color: var(--color-base-750);
}
& > svg {
color: var(--color-base-750);
flex-shrink: 0;
}
}
</style>

64
src/components/InlineTagGroups.astro
View File

@ -1,64 +0,0 @@
---
import { Icon } from "astro-icon/components";
import { getI18n } from "src/i18n/i18n";
import type { EndpointTagsGroup } from "src/shared/payload/payload-sdk";
interface Props {
tagGroups: (EndpointTagsGroup | { title: string; icon: string; values: string[] })[];
}
const { tagGroups } = Astro.props;
const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
const groups = tagGroups.map((group) => {
if ("title" in group) {
return group;
} else {
return {
title: getLocalizedMatch(group.translations).name,
icon: group.icon,
values: group.tags.map(({ translations }) => getLocalizedMatch(translations).name),
};
}
});
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
<div id="tags">
{
groups.map(({ icon, title, values }) => (
<div>
<Icon name={icon} />
<p>{title}</p>
<div>{values.join(", ")}</div>
</div>
))
}
</div>
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
#tags {
display: flex;
gap: 0.5em 1.5em;
flex-wrap: wrap;
& > div {
font-weight: 400;
font-size: 80%;
display: flex;
gap: 0.5em;
& > p {
color: var(--color-base-750);
}
& > svg {
color: var(--color-base-750);
flex-shrink: 0;
}
}
}
</style>

17
src/components/Lightbox.astro
View File

@ -5,12 +5,12 @@ import {
type PayloadImage,
type RichTextContent,
} from "src/shared/payload/payload-sdk";
import TagGroups from "./TagGroups.astro";
import Credits from "./Credits.astro";
import DownloadButton from "./DownloadButton.astro";
import AppLayoutTitle from "./AppLayout/components/AppLayoutTitle.astro";
import type { ComponentProps } from "astro/types";
import AppLayoutDescription from "./AppLayout/components/AppLayoutDescription.astro";
import Attributes from "./Attributes.astro";
interface Props {
previousImageHref?: string | undefined;
@ -20,7 +20,8 @@ interface Props {
title: string;
subtitle?: string | undefined;
description?: RichTextContent | undefined;
tagGroups?: ComponentProps<typeof TagGroups>["tagGroups"] | undefined;
attributes?: ComponentProps<typeof Attributes>["attributes"] | undefined;
metaAttributes?: ComponentProps<typeof Attributes>["attributes"] | undefined;
credits?: EndpointCredit[] | undefined;
filename?: string | undefined;
}
@ -29,8 +30,9 @@ const {
nextImageHref,
previousImageHref,
image: { url, width, height },
tagGroups = [],
credits,
attributes = [],
metaAttributes = [],
credits = [],
description,
pretitle,
title,
@ -63,7 +65,7 @@ const smallTitle = !subtitle && !pretitle;
id="info"
class:list={{
complex:
(tagGroups && tagGroups.length > 0) || (credits && credits.length > 0) || description,
attributes.length > 0 || metaAttributes.length > 0 || credits.length > 0 || description,
}}>
<div>
{
@ -75,8 +77,9 @@ const smallTitle = !subtitle && !pretitle;
}
{description && <AppLayoutDescription description={description} />}
</div>
{tagGroups && tagGroups.length > 0 && <TagGroups tagGroups={tagGroups} />}
{credits && credits.length > 0 && <Credits credits={credits} />}
{attributes.length > 0 && <Attributes attributes={attributes} />}
{credits.length > 0 && <Credits credits={credits} />}
{metaAttributes.length > 0 && <Attributes attributes={metaAttributes} />}
{filename && <DownloadButton href={url} filename={filename} />}
</div>
</div>

8
src/components/Metadata.astro
View File

@ -1,12 +1,8 @@
---
import { Icon } from "astro-icon/components";
import type { Attribute } from "src/utils/attributes";
interface Props {
icon: string;
title: string;
values: { name: string; href?: string }[];
withBorder?: boolean | undefined;
}
interface Props extends Attribute {}
const { icon, title, values, withBorder = true } = Astro.props;

10
src/components/Previews/AudioPreview.astro
View File

@ -12,7 +12,7 @@ const { getLocalizedMatch, getLocalizedUrl, t, formatDuration } = await getI18n(
);
const {
audio: { id, translations, tagGroups, filename, thumbnail, duration },
audio: { id, translations, attributes, filename, thumbnail, duration },
} = Astro.props;
const { pretitle, title, subtitle } =
@ -20,12 +20,12 @@ const { pretitle, title, subtitle } =
? getLocalizedMatch(translations)
: { pretitle: undefined, title: filename, subtitle: undefined };
const tagsAndAttributes = [
...tagGroups,
const attributesWithMeta = [
...attributes,
{
title: t("global.media.attributes.duration"),
icon: "material-symbols:hourglass-empty",
values: [formatDuration(duration)],
values: [{ name: formatDuration(duration) }],
},
];
---
@ -38,7 +38,7 @@ const tagsAndAttributes = [
subtitle={subtitle}
thumbnail={thumbnail}
href={getLocalizedUrl(`/audios/${id}`)}
tagGroups={tagsAndAttributes}
attributes={attributesWithMeta}
icon="material-symbols:music-note"
iconHoverLabel={t("global.previewTypes.audio")}
smallTitle={title === filename}

4
src/components/Previews/CollectiblePreview.astro
View File

@ -10,7 +10,7 @@ interface Props {
const { getLocalizedMatch, getLocalizedUrl, t } = await getI18n(Astro.locals.currentLocale);
const {
collectible: { slug, translations, thumbnail, tagGroups },
collectible: { slug, translations, thumbnail, attributes },
} = Astro.props;
const { title, pretitle, subtitle } = getLocalizedMatch(translations);
@ -24,7 +24,7 @@ const { title, pretitle, subtitle } = getLocalizedMatch(translations);
subtitle={subtitle}
thumbnail={thumbnail}
href={getLocalizedUrl(`/collectibles/${slug}`)}
tagGroups={tagGroups}
attributes={attributes}
icon="material-symbols:category"
iconHoverLabel={t("global.previewTypes.collectible")}
disableRoundedTop

10
src/components/Previews/GenericPreview.astro
View File

@ -4,7 +4,7 @@ import Card from "components/Card.astro";
import { Icon } from "astro-icon/components";
import type { ComponentProps } from "astro/types";
import { getI18n } from "src/i18n/i18n";
import InlineTagGroups from "components/InlineTagGroups.astro";
import InlineAttributes from "components/InlineAttributes.astro";
interface Props {
thumbnail?: PayloadImage | undefined;
@ -12,7 +12,7 @@ interface Props {
title: string;
subtitle?: string | undefined;
href?: string | undefined;
tagGroups?: ComponentProps<typeof InlineTagGroups>["tagGroups"];
attributes?: ComponentProps<typeof InlineAttributes>["attributes"];
disableRoundedTop?: boolean;
smallTitle?: boolean;
icon?: string;
@ -27,7 +27,7 @@ const {
pretitle,
subtitle,
href,
tagGroups = [],
attributes = [],
smallTitle = false,
disableRoundedTop = false,
icon = "material-symbols:unknown-document",
@ -63,11 +63,11 @@ const {
}
{
tagGroups.length > 0 && (
attributes.length > 0 && (
<>
{subtitle && <hr />}
<div id="tags">
<InlineTagGroups tagGroups={tagGroups} />
<InlineAttributes attributes={attributes} />
</div>
</>
)

4
src/components/Previews/ImagePreview.astro
View File

@ -11,7 +11,7 @@ const { getLocalizedMatch, getLocalizedUrl, t } = await getI18n(Astro.locals.cur
const {
image: thumbnail,
image: { id, translations, tagGroups, filename },
image: { id, translations, attributes, filename },
} = Astro.props;
const { pretitle, title, subtitle } =
@ -28,7 +28,7 @@ const { pretitle, title, subtitle } =
subtitle={subtitle}
thumbnail={thumbnail}
href={getLocalizedUrl(`/images/${id}`)}
tagGroups={tagGroups}
attributes={attributes}
icon="material-symbols:imagesmode"
iconHoverLabel={t("global.previewTypes.image")}
smallTitle={title === filename}

4
src/components/Previews/PagePreview.astro
View File

@ -10,7 +10,7 @@ interface Props {
const { getLocalizedMatch, getLocalizedUrl, t } = await getI18n(Astro.locals.currentLocale);
const {
page: { slug, translations, thumbnail, tagGroups },
page: { slug, translations, thumbnail, attributes },
} = Astro.props;
const { title, pretitle, subtitle } = getLocalizedMatch(translations);
@ -24,7 +24,7 @@ const { title, pretitle, subtitle } = getLocalizedMatch(translations);
subtitle={subtitle}
thumbnail={thumbnail}
href={getLocalizedUrl(`/pages/${slug}`)}
tagGroups={tagGroups}
attributes={attributes}
icon="material-symbols:docs"
iconHoverLabel={t("global.previewTypes.page")}
/>

10
src/components/Previews/VideoPreview.astro
View File

@ -12,7 +12,7 @@ const { getLocalizedMatch, getLocalizedUrl, t, formatDuration } = await getI18n(
);
const {
video: { id, translations, tagGroups, filename, thumbnail, duration },
video: { id, translations, attributes, filename, thumbnail, duration },
} = Astro.props;
const { pretitle, title, subtitle } =
@ -20,12 +20,12 @@ const { pretitle, title, subtitle } =
? getLocalizedMatch(translations)
: { pretitle: undefined, title: filename, subtitle: undefined };
const tagsAndAttributes = [
...tagGroups,
const attributesWithMeta = [
...attributes,
{
title: t("global.media.attributes.duration"),
icon: "material-symbols:hourglass-empty",
values: [formatDuration(duration)],
values: [{ name: formatDuration(duration) }],
},
];
---
@ -38,7 +38,7 @@ const tagsAndAttributes = [
subtitle={subtitle}
thumbnail={thumbnail}
href={getLocalizedUrl(`/videos/${id}`)}
tagGroups={tagsAndAttributes}
attributes={attributesWithMeta}
icon="material-symbols:smart-display"
iconHoverLabel={t("global.previewTypes.video")}
smallTitle={title === filename}

50
src/components/TagGroups.astro
View File

@ -1,50 +0,0 @@
---
import type { EndpointTagsGroup } from "src/shared/payload/payload-sdk";
import { getI18n } from "src/i18n/i18n";
import Metadata from "./Metadata.astro";
import type { ComponentProps } from "astro/types";
interface Props {
tagGroups: (EndpointTagsGroup | ComponentProps<typeof Metadata>)[];
}
const { tagGroups } = Astro.props;
const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
const groups = tagGroups.map((group) => {
if ("title" in group) {
return group;
} else {
return {
title: getLocalizedMatch(group.translations).name,
icon: group.icon,
values: group.tags.map(({ translations, page }) => ({
name: getLocalizedMatch(translations).name,
...(page ? { href: getLocalizedUrl(`/pages/${page.slug}`) } : {}),
})),
withBorder: true,
};
}
});
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
<div>
{groups.map((group) => <Metadata {...group} />)}
<slot />
</div>
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
div {
display: flex;
flex-direction: column;
gap: 2em;
@media (max-width: 35rem) {
gap: 3em;
}
}
</style>

14
src/pages/[locale]/api/pages/partial.astro
View File

@ -3,13 +3,13 @@ import RichText from "components/RichText/RichText.astro";
import { payload, type EndpointPage } from "src/shared/payload/payload-sdk";
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
import MasoTarget from "components/Maso/MasoTarget.astro";
import TagGroups from "components/TagGroups.astro";
import TableOfContent from "components/TableOfContent/TableOfContent.astro";
import LanguageOverride from "components/LanguageOverride.astro";
import Credits from "components/Credits.astro";
import { getI18n } from "src/i18n/i18n";
import AsideLayout from "components/AppLayout/AsideLayout.astro";
import AppLayoutDescription from "components/AppLayout/components/AppLayoutDescription.astro";
import Attributes from "components/Attributes.astro";
export const partial = true;
@ -22,7 +22,7 @@ interface Props {
const reqUrl = new URL(Astro.request.url);
const lang = Astro.props.lang ?? reqUrl.searchParams.get("lang")!;
const slug = Astro.props.slug ?? reqUrl.searchParams.get("slug")!;
const { translations, thumbnail, tagGroups, createdAt, updatedAt, updatedBy } =
const { translations, thumbnail, createdAt, updatedAt, updatedBy, attributes } =
Astro.props.page ?? (await payload.getPage(slug));
const { getLocalizedUrl, t, formatDate } = await getI18n(Astro.locals.currentLocale);
@ -31,7 +31,7 @@ const { getLocalizedMatch } = await getI18n(lang);
const { pretitle, title, subtitle, summary, content, credits, toc, language, sourceLanguage } =
getLocalizedMatch(translations);
const attributes = [
const metaAttributes = [
{
title: t("global.media.attributes.createdAt"),
icon: "material-symbols:calendar-add-on-outline",
@ -47,7 +47,7 @@ const attributes = [
];
if (updatedBy) {
attributes.push({
metaAttributes.push({
title: t("global.media.attributes.updatedBy"),
icon: "material-symbols:person-edit-outline",
values: [{ name: updatedBy.username }],
@ -82,9 +82,9 @@ if (updatedBy) {
<Fragment slot="meta">
{summary && <AppLayoutDescription description={summary} />}
{
tagGroups.length > 0 && (
attributes.length > 0 && (
<div id="tags">
<TagGroups tagGroups={tagGroups} />
<Attributes attributes={attributes} />
</div>
)
}
@ -108,7 +108,7 @@ if (updatedBy) {
{credits.length > 0 && <Credits credits={credits} />}
</div>
{attributes.length > 0 && <TagGroups tagGroups={attributes} />}
{metaAttributes.length > 0 && <Attributes attributes={metaAttributes} />}
{toc.length > 0 && <TableOfContent toc={toc} />}
</div>

10
src/pages/[locale]/audios/[id].astro
View File

@ -1,11 +1,11 @@
---
import AppLayout from "components/AppLayout/AppLayout.astro";
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
import Attributes from "components/Attributes.astro";
import AudioPlayer from "components/AudioPlayer.astro";
import Credits from "components/Credits.astro";
import DownloadButton from "components/DownloadButton.astro";
import RichText from "components/RichText/RichText.astro";
import TagGroups from "components/TagGroups.astro";
import { getI18n } from "src/i18n/i18n";
import { payload } from "src/shared/payload/payload-sdk";
import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
@ -22,7 +22,7 @@ const { getLocalizedMatch, t, formatFilesize, formatDate } = await getI18n(
);
const {
translations,
tagGroups,
attributes,
filename,
url,
credits,
@ -36,7 +36,7 @@ const { pretitle, title, subtitle, description } = getLocalizedMatch(translation
const smallTitle = !subtitle && !pretitle;
const attributes = [
const metaAttributes = [
...(filename && title !== filename
? [
{
@ -89,9 +89,9 @@ const attributes = [
)
}
{description && <RichText content={description} />}
{tagGroups.length > 0 && <TagGroups tagGroups={tagGroups} />}
{attributes.length > 0 && <Attributes attributes={attributes} />}
{credits.length > 0 && <Credits credits={credits} />}
{attributes.length > 0 && <TagGroups tagGroups={attributes} />}
{metaAttributes.length > 0 && <Attributes attributes={metaAttributes} />}
<DownloadButton href={url} filename={filename} />
</div>
</div>

6
src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentRow.astro
View File

@ -4,10 +4,10 @@ import RichText from "components/RichText/RichText.astro";
import { getI18n } from "src/i18n/i18n";
import { Collections, type EndpointCollectible } from "src/shared/payload/payload-sdk";
import { formatInlineTitle } from "src/utils/format";
import InlineTagGroups from "../../../../../../components/InlineTagGroups.astro";
import Card from "components/Card.astro";
import AudioPlayer from "components/AudioPlayer.astro";
import VideoPlayer from "components/VideoPlayer.astro";
import InlineAttributes from "components/InlineAttributes.astro";
interface Props {
content: EndpointCollectible["contents"][number];
@ -99,9 +99,9 @@ const href = (() => {
(content.relationTo === Collections.Pages ||
content.relationTo === Collections.Audios ||
content.relationTo === Collections.Videos) &&
content.value.tagGroups.length > 0 && (
content.value.attributes.length > 0 && (
<div id="tags">
<InlineTagGroups tagGroups={content.value.tagGroups} />
<InlineAttributes attributes={content.value.attributes} />
</div>
)
}

8
src/pages/[locale]/collectibles/[slug]/gallery/[index].astro
View File

@ -18,15 +18,14 @@ if (galleryImage instanceof Response) {
}
const { parentPages, previousIndex, nextIndex, image } = galleryImage;
const { filename, translations, createdAt, updatedAt, credits, tagGroups } = image;
const { filename, translations, createdAt, updatedAt, credits, attributes } = image;
const { pretitle, title, subtitle, description } =
translations.length > 0
? getLocalizedMatch(translations)
: { pretitle: undefined, title: filename, subtitle: undefined, description: undefined };
const tagsAndAttributes = [
...tagGroups,
const metaAttributes = [
...(filename && title !== filename
? [
{
@ -74,7 +73,8 @@ const tagsAndAttributes = [
: undefined}
description={description}
filename={filename}
tagGroups={tagsAndAttributes}
attributes={attributes}
metaAttributes={metaAttributes}
credits={credits}
/>
</AppLayout>

25
src/pages/[locale]/collectibles/[slug]/index.astro
View File

@ -1,7 +1,6 @@
---
import AppLayout from "components/AppLayout/AppLayout.astro";
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
import TagGroups from "components/TagGroups.astro";
import { getI18n } from "src/i18n/i18n";
import { CollectibleNature, payload } from "src/shared/payload/payload-sdk";
import { fetchOr404 } from "src/utils/responses";
@ -16,6 +15,7 @@ import { formatInlineTitle, formatLocale, formatRichTextToString } from "src/uti
import AsideLayout from "components/AppLayout/AsideLayout.astro";
import AppLayoutDescription from "components/AppLayout/components/AppLayoutDescription.astro";
import { convert } from "src/utils/currencies";
import Attributes from "components/Attributes.astro";
const { slug } = Astro.params;
const { getLocalizedMatch, getLocalizedUrl, t, formatDate, formatPrice } = await getI18n(
@ -41,7 +41,7 @@ const {
scans,
subitems,
parentPages,
tagGroups,
attributes,
contents,
createdAt,
updatedAt,
@ -53,7 +53,7 @@ const {
const translation = getLocalizedMatch(translations);
const { pretitle, title, subtitle, description } = translation;
const attributes = [
const metaAttributes = [
{
title: t("global.media.attributes.createdAt"),
icon: "material-symbols:calendar-add-on-outline",
@ -69,7 +69,7 @@ const attributes = [
];
if (updatedBy) {
attributes.push({
metaAttributes.push({
title: t("global.media.attributes.updatedBy"),
icon: "material-symbols:person-edit-outline",
values: [{ name: updatedBy.username }],
@ -77,8 +77,7 @@ if (updatedBy) {
});
}
const tagGroupWithAttributes = [
...tagGroups,
const additionalAttributes = [
{
title: t("collectibles.nature"),
icon: "material-symbols:leaf-spark-outline",
@ -96,7 +95,7 @@ const tagGroupWithAttributes = [
];
if (releaseDate) {
tagGroupWithAttributes.push({
additionalAttributes.push({
title: t("collectibles.releaseDate"),
icon: "material-symbols:calendar-month-outline",
values: [{ name: formatDate(new Date(releaseDate)) }],
@ -105,7 +104,7 @@ if (releaseDate) {
}
if (languages.length > 0) {
tagGroupWithAttributes.push({
additionalAttributes.push({
title: t("collectibles.languages"),
icon: "material-symbols:translate",
values: languages.map((lang) => ({ name: formatLocale(lang) })),
@ -127,7 +126,7 @@ if (price) {
priceText += ` (${formatPrice(convertedPrice)})`;
}
tagGroupWithAttributes.push({
additionalAttributes.push({
title: t("collectibles.price"),
icon: "material-symbols:sell-outline",
values: [{ name: priceText }],
@ -194,9 +193,9 @@ if (price) {
<Fragment slot="aside">
{
attributes.length > 0 && (
metaAttributes.length > 0 && (
<div id="attributes">
<TagGroups tagGroups={attributes} />
<Attributes attributes={metaAttributes} />
</div>
)
}
@ -206,7 +205,7 @@ if (price) {
{description && <AppLayoutDescription description={description} />}
<div id="tags">
<TagGroups tagGroups={tagGroupWithAttributes}>
<Attributes attributes={[...attributes, ...additionalAttributes]}>
<AvailabilityInfo urls={urls} price={price !== undefined} releaseDate={releaseDate} />
{size && <SizeInfo size={size} />}
@ -214,7 +213,7 @@ if (price) {
{weight && <WeightInfo weight={weight} />}
{pageInfo && <PageInfo pageInfo={pageInfo} />}
</TagGroups>
</Attributes>
</div>
</Fragment>

8
src/pages/[locale]/images/[id].astro
View File

@ -13,15 +13,14 @@ if (image instanceof Response) {
}
const { getLocalizedMatch, formatDate, t } = await getI18n(Astro.locals.currentLocale);
const { filename, translations, tagGroups, credits, createdAt, updatedAt } = image;
const { filename, translations, attributes, credits, createdAt, updatedAt } = image;
const { pretitle, title, subtitle, description } =
translations.length > 0
? getLocalizedMatch(translations)
: { pretitle: undefined, title: filename, subtitle: undefined, description: undefined };
const tagsAndAttributes = [
...tagGroups,
const metaAttributes = [
...(filename && title !== filename
? [
{
@ -62,7 +61,8 @@ const tagsAndAttributes = [
subtitle={subtitle}
description={description}
filename={filename}
tagGroups={tagsAndAttributes}
attributes={attributes}
metaAttributes={metaAttributes}
credits={credits}
/>
</AppLayout>

10
src/pages/[locale]/videos/[id].astro
View File

@ -1,10 +1,10 @@
---
import AppLayout from "components/AppLayout/AppLayout.astro";
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
import Attributes from "components/Attributes.astro";
import Credits from "components/Credits.astro";
import DownloadButton from "components/DownloadButton.astro";
import RichText from "components/RichText/RichText.astro";
import TagGroups from "components/TagGroups.astro";
import VideoPlayer from "components/VideoPlayer.astro";
import { getI18n } from "src/i18n/i18n";
import { payload } from "src/shared/payload/payload-sdk";
@ -22,7 +22,7 @@ const { getLocalizedMatch, t, formatFilesize, formatDate } = await getI18n(
);
const {
translations,
tagGroups,
attributes,
filename,
url,
credits,
@ -35,7 +35,7 @@ const {
const { pretitle, title, subtitle, description } = getLocalizedMatch(translations);
const smallTitle = !subtitle && !pretitle;
const attributes = [
const metaAttributes = [
...(filename && title !== filename
? [
{
@ -88,9 +88,9 @@ const attributes = [
)
}
{description && <RichText content={description} />}
{tagGroups.length > 0 && <TagGroups tagGroups={tagGroups} />}
{attributes.length > 0 && <Attributes attributes={attributes} />}
{credits.length > 0 && <Credits credits={credits} />}
{attributes.length > 0 && <TagGroups tagGroups={attributes} />}
{metaAttributes.length > 0 && <Attributes attributes={metaAttributes} />}
<DownloadButton href={url} filename={filename} />
</div>
</div>

139
src/shared/payload/payload-sdk.ts
View File

@ -32,7 +32,6 @@ export interface Config {
"videos-channels": VideosChannel;
scans: Scan;
tags: Tag;
"tags-groups": TagsGroup;
attributes: Attribute;
"credits-roles": CreditsRole;
recorders: Recorder;
@ -56,8 +55,8 @@ export interface Page {
slug: string;
thumbnail?: string | Image | null;
backgroundImage?: string | Image | null;
attributes?: (TagsBlock | NumberBlock | TextBlock)[] | null;
tags?: (string | Tag)[] | null;
attributes?: (TagsBlock | NumberBlock | TextBlock)[] | null;
translations: {
language: string | Language;
sourceLanguage: string | Language;
@ -135,6 +134,7 @@ export interface Image {
}[]
| null;
tags?: (string | Tag)[] | null;
attributes?: (TagsBlock | NumberBlock | TextBlock)[] | null;
credits?: Credits;
updatedAt: string;
createdAt: string;
@ -177,26 +177,8 @@ export interface Language {
*/
export interface Tag {
id: string;
name?: string | null;
slug: string;
translations: {
language: string | Language;
name: string;
id?: string | null;
}[];
group: string | TagsGroup;
page?: (string | null) | Page;
updatedAt: string;
createdAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "tags-groups".
*/
export interface TagsGroup {
id: string;
slug: string;
icon?: string | null;
translations: {
language: string | Language;
name: string;
@ -205,42 +187,6 @@ export interface TagsGroup {
updatedAt: string;
createdAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "credits-roles".
*/
export interface CreditsRole {
id: string;
slug: string;
icon?: string | null;
translations: {
language: string | Language;
name: string;
id?: string | null;
}[];
updatedAt: string;
createdAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "recorders".
*/
export interface Recorder {
id: string;
username: string;
avatar?: string | Image | null;
languages?: (string | Language)[] | null;
role?: ("Admin" | "Recorder" | "Api")[] | null;
anonymize: boolean;
email: string;
resetPasswordToken?: string | null;
resetPasswordExpiration?: string | null;
salt?: string | null;
hash?: string | null;
loginAttempts?: number | null;
lockUntil?: string | null;
password?: string | null;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "TagsBlock".
@ -291,6 +237,42 @@ export interface TextBlock {
blockName?: string | null;
blockType: "textBlock";
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "credits-roles".
*/
export interface CreditsRole {
id: string;
slug: string;
icon?: string | null;
translations: {
language: string | Language;
name: string;
id?: string | null;
}[];
updatedAt: string;
createdAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "recorders".
*/
export interface Recorder {
id: string;
username: string;
avatar?: string | Image | null;
languages?: (string | Language)[] | null;
role?: ("Admin" | "Recorder" | "Api")[] | null;
anonymize: boolean;
email: string;
resetPasswordToken?: string | null;
resetPasswordExpiration?: string | null;
salt?: string | null;
hash?: string | null;
loginAttempts?: number | null;
lockUntil?: string | null;
password?: string | null;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "folders".
@ -371,6 +353,7 @@ export interface Collectible {
nature: "Physical" | "Digital";
languages?: (string | Language)[] | null;
tags?: (string | Tag)[] | null;
attributes?: (TagsBlock | NumberBlock | TextBlock)[] | null;
translations: {
language: string | Language;
pretitle?: string | null;
@ -635,6 +618,7 @@ export interface Audio {
id?: string | null;
}[];
tags?: (string | Tag)[] | null;
attributes?: (TagsBlock | NumberBlock | TextBlock)[] | null;
credits?: Credits;
updatedAt: string;
createdAt: string;
@ -710,6 +694,7 @@ export interface Video {
id?: string | null;
}[];
tags?: (string | Tag)[] | null;
attributes?: (TagsBlock | NumberBlock | TextBlock)[] | null;
credits?: Credits;
platformEnabled?: boolean | null;
platform?: {
@ -1042,27 +1027,26 @@ export interface SectionBlock {
export enum Collections {
Attributes = "attributes",
Audios = "audios",
ChronologyEvents = "chronology-events",
Collectibles = "collectibles",
CreditsRole = "credits-roles",
Currencies = "currencies",
Folders = "folders",
GenericContents = "generic-contents",
Images = "images",
Languages = "languages",
MediaThumbnails = "media-thumbnails",
Pages = "pages",
Recorders = "recorders",
Folders = "folders",
Tags = "tags",
TagsGroups = "tags-groups",
Images = "images",
Wordings = "wordings",
Collectibles = "collectibles",
GenericContents = "generic-contents",
WebsiteConfig = "website-config",
Videos = "videos",
VideosSubtitles = "videos-subtitles",
VideosChannels = "videos-channels",
MediaThumbnails = "media-thumbnails",
Scans = "scans",
CreditsRole = "credits-roles",
Attributes = "attributes",
Tags = "tags",
Videos = "videos",
VideosChannels = "videos-channels",
VideosSubtitles = "videos-subtitles",
Wordings = "wordings",
WebsiteConfig = "website-config",
}
export enum CollectionGroups {
@ -1507,16 +1491,6 @@ export type EndpointTag = {
}[];
};
export type EndpointTagsGroup = {
slug: string;
icon: string;
translations: {
language: string;
name: string;
}[];
tags: EndpointTag[];
};
export type EndpointGenericAttribute = {
slug: string;
icon: string;
@ -1562,7 +1536,6 @@ export type EndpointCredit = {
export type EndpointPage = {
slug: string;
thumbnail?: EndpointImage;
tagGroups: EndpointTagsGroup[];
attributes: EndpointAttribute[];
backgroundImage?: EndpointImage;
translations: {
@ -1592,7 +1565,7 @@ export type EndpointCollectible = {
subtitle?: string;
description?: RichTextContent;
}[];
tagGroups: EndpointTagsGroup[];
attributes: EndpointAttribute[];
releaseDate?: string;
languages: string[];
backgroundImage?: EndpointImage;
@ -1816,7 +1789,7 @@ export type EndpointMedia = {
filesize: number;
updatedAt: string;
createdAt: string;
tagGroups: EndpointTagsGroup[];
attributes: EndpointAttribute[];
translations: {
language: string;
pretitle?: string;

6
src/utils/attributes.ts Normal file
View File

@ -0,0 +1,6 @@
export type Attribute = {
icon: string;
title: string;
values: { name: string; href?: string }[];
withBorder?: boolean | undefined;
};