Now using attributes instead of tag groups

src/components/Attributes.astro

@@ -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>

src/components/InlineAttributes.astro

@@ -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>

src/components/InlineCredits.astro

@@ -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">
+<div>
   {
-    credits.map(({ recorders, role: { translations } }) => (
+    credits.map(({ recorders, role: { icon, translations } }) => (
-      <div>
+      <InlineMetadata
-        <p>{getLocalizedMatch(translations).name}</p>
+        icon={icon}
-        {recorders.map(({ username }) => username).join(", ")}
+        title={getLocalizedMatch(translations).name}
-      </div>
+        values={recorders.map(({ username }) => ({ name: username }))}
+      />
     ))
   }
 </div>
@@ -26,21 +28,12 @@ const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
-  #credits {
+  div {
-    margin-top: 0.5em;
+    display: grid;
-    display: flex;
+    gap: 2em;
-    flex-direction: column;
-    gap: 0.5em 1.5em;
 
-    & > div {
+    @media (max-width: 35rem) {
-      font-weight: 400;
+      gap: 3em;
-      font-size: 80%;
-      display: flex;
-      gap: 0.5em;
-
-      & > p {
-        color: var(--color-base-750);
-      }
     }
   }
 </style>

src/components/InlineMetadata.astro

@@ -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>

src/components/InlineTagGroups.astro

@@ -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>

src/components/Lightbox.astro

@@ -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 = [],
+  attributes = [],
-  credits,
+  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} />}
+    {attributes.length > 0 && <Attributes attributes={attributes} />}
-    {credits && credits.length > 0 && <Credits credits={credits} />}
+    {credits.length > 0 && <Credits credits={credits} />}
+    {metaAttributes.length > 0 && <Attributes attributes={metaAttributes} />}
     {filename && <DownloadButton href={url} filename={filename} />}
   </div>
 </div>

src/components/Metadata.astro

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

src/components/Previews/AudioPreview.astro

@@ -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 = [
+const attributesWithMeta = [
-  ...tagGroups,
+  ...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}

src/components/Previews/CollectiblePreview.astro

@@ -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

src/components/Previews/GenericPreview.astro

@@ -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>
           </>
         )

src/components/Previews/ImagePreview.astro

@@ -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}

src/components/Previews/PagePreview.astro

@@ -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")}
 />

src/components/Previews/VideoPreview.astro

@@ -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 = [
+const attributesWithMeta = [
-  ...tagGroups,
+  ...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}

src/components/TagGroups.astro

@@ -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>

src/pages/[locale]/api/pages/partial.astro

@@ -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>

src/pages/[locale]/audios/[id].astro

@@ -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>

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

@@ -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>
         )
     }

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

@@ -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 = [
+const metaAttributes = [
-  ...tagGroups,
   ...(filename && title !== filename
     ? [
         {
@@ -74,7 +73,8 @@ const tagsAndAttributes = [
       : undefined}
     description={description}
     filename={filename}
-    tagGroups={tagsAndAttributes}
+    attributes={attributes}
+    metaAttributes={metaAttributes}
     credits={credits}
   />
 </AppLayout>

src/pages/[locale]/collectibles/[slug]/index.astro

@@ -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 = [
+const additionalAttributes = [
-  ...tagGroups,
   {
     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>
 

src/pages/[locale]/images/[id].astro

@@ -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 = [
+const metaAttributes = [
-  ...tagGroups,
   ...(filename && title !== filename
     ? [
         {
@@ -62,7 +61,8 @@ const tagsAndAttributes = [
     subtitle={subtitle}
     description={description}
     filename={filename}
-    tagGroups={tagsAndAttributes}
+    attributes={attributes}
+    metaAttributes={metaAttributes}
     credits={credits}
   />
 </AppLayout>

src/pages/[locale]/videos/[id].astro

@@ -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>

src/shared/payload/payload-sdk.ts

@@ -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",
+  Tags = "tags",
-  Attributes = "attributes",
+  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;

src/utils/attributes.ts

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