Support for tag page

src/components/Credits.astro

@@ -19,7 +19,7 @@ const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
       <Metadata
         icon={icon}
         title={getLocalizedMatch(translations).name}
-        values={recorders.map(({ username }) => username)}
+        values={recorders.map(({ username }) => ({ name: username }))}
       />
     ))
   }

src/components/Metadata.astro

@@ -4,7 +4,7 @@ import { Icon } from "astro-icon/components";
 interface Props {
   icon: string;
   title: string;
-  values: string[];
+  values: { name: string; href?: string }[];
   withBorder?: boolean | undefined;
 }
 
@@ -21,7 +21,17 @@ if (values.length === 0) return;
     <p>{title}</p>
   </div>
   <div id="values" class:list={{ "with-border": withBorder }}>
-    {values.map((value) => <div>{value}</div>)}
+    {
+      values.map(({ name, href }) =>
+        href ? (
+          <a class="pressable high-contrast-text" href={href}>
+            {name}
+          </a>
+        ) : (
+          <div>{name}</div>
+        )
+      )
+    }
   </div>
 </div>
 
@@ -56,13 +66,16 @@ if (values.length === 0) return;
       gap: 6px;
 
       &.with-border {
-        & > div {
+        & > * {
-          border: 1px solid var(--color-base-1000);
           border-radius: 9999px;
           padding-bottom: 0.25em;
           padding-top: 0.15em;
           padding-inline: 0.6em;
-          backdrop-filter: blur(10upx);
+          backdrop-filter: blur(10px);
+        }
+
+        & > div {
+          border: 1px solid var(--color-base-1000);
         }
       }
     }

src/components/TagGroups.astro

@@ -2,16 +2,14 @@
 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: (
+  tagGroups: (EndpointTagsGroup | ComponentProps<typeof Metadata>)[];
-    | EndpointTagsGroup
-    | { title: string; icon: string; values: string[]; withBorder?: boolean }
-  )[];
 }
 
 const { tagGroups } = Astro.props;
-const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
+const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
 
 const groups = tagGroups.map((group) => {
   if ("title" in group) {
@@ -20,7 +18,11 @@ const groups = tagGroups.map((group) => {
     return {
       title: getLocalizedMatch(group.translations).name,
       icon: group.icon,
-      values: group.tags.map(({ translations }) => getLocalizedMatch(translations).name),
+      values: group.tags.map(({ translations, page }) => ({
+        name: getLocalizedMatch(translations).name,
+        ...(page ? { href: getLocalizedUrl(`/pages/${page.slug}`) } : {}),
+      })),
+      withBorder: true,
     };
   }
 });
@@ -29,11 +31,7 @@ const groups = tagGroups.map((group) => {
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div>
-  {
+  {groups.map((group) => <Metadata {...group} />)}
-    groups.map(({ icon, title, values, withBorder }) => (
-      <Metadata icon={icon} title={title} values={values} withBorder={withBorder} />
-    ))
-  }
   <slot />
 </div>
 

src/i18n/wordings-keys.ts

@@ -69,6 +69,8 @@ export type WordingKey =
   | "collectibles.bookFormat.binding.hardcover"
   | "collectibles.bookFormat.binding.readingDirection.leftToRight"
   | "collectibles.bookFormat.binding.readingDirection.rightToLeft"
+  | "collectibles.gallery"
+  | "collectibles.scans"
   | "collectibles.imageCount"
   | "header.topbar.settings.tooltip"
   | "collectibles.contents"
@@ -87,29 +89,29 @@ export type WordingKey =
   | "pages.tableOfContent.break"
   | "global.languageOverride.availableLanguages"
   | "timeline.title"
-  | "timeline.description"
+  | "timeline.eras.drakengard3"
-  | "timeline.eras.cataclysm"
   | "timeline.eras.drakengard"
   | "timeline.eras.drakengard2"
-  | "timeline.eras.drakengard3"
   | "timeline.eras.nier"
   | "timeline.eras.nierAutomata"
-  | "timeline.jumpTo"
+  | "timeline.eras.cataclysm"
-  | "timeline.notes.content"
+  | "timeline.description"
   | "timeline.notes.title"
+  | "timeline.notes.content"
   | "timeline.priorCataclysmNote.title"
   | "timeline.priorCataclysmNote.content"
+  | "timeline.jumpTo"
   | "timeline.year.during"
-  | "timeline.eventFooter.sources"
   | "timeline.eventFooter.languages"
+  | "timeline.eventFooter.sources"
   | "timeline.eventFooter.note"
+  | "global.sources.typeLabel.url"
+  | "global.sources.typeLabel.page"
   | "global.sources.typeLabel.collectible"
-  | "global.sources.typeLabel.collectible.range.custom"
+  | "global.sources.typeLabel.folder"
   | "global.sources.typeLabel.collectible.range.page"
   | "global.sources.typeLabel.collectible.range.timestamp"
-  | "global.sources.typeLabel.folder"
+  | "global.sources.typeLabel.collectible.range.custom"
-  | "global.sources.typeLabel.page"
-  | "global.sources.typeLabel.url"
   | "global.openMediaPage"
   | "global.downloadButton"
   | "global.previewTypes.video"
@@ -119,8 +121,6 @@ export type WordingKey =
   | "global.previewTypes.collectible"
   | "global.previewTypes.unknown"
   | "collectibles.scans.title"
-  | "collectibles.gallery.title"
-  | "collectibles.gallery.subtitle"
   | "collectibles.scans.subtitle"
   | "collectibles.scans.shortIndex.flapFront"
   | "collectibles.scans.shortIndex.front"
@@ -134,9 +134,11 @@ export type WordingKey =
   | "collectibles.scans.obi"
   | "collectibles.scans.obiInside"
   | "collectibles.scans.pages"
+  | "collectibles.gallery.title"
+  | "collectibles.gallery.subtitle"
+  | "global.sources.typeLabel.scans"
   | "collectibles.scans.dustjacket.description"
   | "collectibles.scans.obi.description"
-  | "global.sources.typeLabel.scans"
   | "global.sources.typeLabel.gallery"
   | "global.media.attributes.filename"
   | "global.media.attributes.duration"
@@ -145,4 +147,6 @@ export type WordingKey =
   | "global.media.attributes.updatedAt"
   | "global.media.attributes.updatedBy"
   | "collectibles.nature"
-  | "collectibles.languages";
+  | "collectibles.languages"
+  | "collectibles.nature.physical"
+  | "collectibles.nature.digital";

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

@@ -35,13 +35,13 @@ const attributes = [
   {
     title: t("global.media.attributes.createdAt"),
     icon: "material-symbols:calendar-add-on-outline",
-    values: [formatDate(new Date(createdAt))],
+    values: [{ name: formatDate(new Date(createdAt)) }],
     withBorder: false,
   },
   {
     title: t("global.media.attributes.updatedAt"),
     icon: "material-symbols:edit-calendar",
-    values: [formatDate(new Date(updatedAt))],
+    values: [{ name: formatDate(new Date(updatedAt)) }],
     withBorder: false,
   },
 ];
@@ -50,7 +50,7 @@ if (updatedBy) {
   attributes.push({
     title: t("global.media.attributes.updatedBy"),
     icon: "material-symbols:person-edit-outline",
-    values: [updatedBy?.username],
+    values: [{ name: updatedBy.username }],
     withBorder: true,
   });
 }
@@ -163,9 +163,9 @@ if (updatedBy) {
   }
 
   #thumbnail {
-    max-width: 35rem;
+    max-width: min(35rem, 100%);
-    max-height: 60vh;
+    max-height: 80vh;
-    width: 100%;
+    width: auto;
     height: auto;
     border-radius: 16px;
     box-shadow: 0 5px 20px -10px var(--color-shadow);

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

@@ -42,7 +42,7 @@ const attributes = [
         {
           title: t("global.media.attributes.filename"),
           icon: "material-symbols:audio-file-outline",
-          values: [filename],
+          values: [{ name: filename }],
           withBorder: false,
         },
       ]
@@ -50,19 +50,19 @@ const attributes = [
   {
     title: t("global.media.attributes.filesize"),
     icon: "material-symbols:hard-drive-outline",
-    values: [formatFilesize(filesize)],
+    values: [{ name: formatFilesize(filesize) }],
     withBorder: false,
   },
   {
     title: t("global.media.attributes.createdAt"),
     icon: "material-symbols:calendar-add-on-outline",
-    values: [formatDate(new Date(createdAt))],
+    values: [{ name: formatDate(new Date(createdAt)) }],
     withBorder: false,
   },
   {
     title: t("global.media.attributes.updatedAt"),
     icon: "material-symbols:edit-calendar",
-    values: [formatDate(new Date(updatedAt))],
+    values: [{ name: formatDate(new Date(updatedAt)) }],
     withBorder: false,
   },
 ];

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

@@ -32,7 +32,7 @@ const tagsAndAttributes = [
         {
           title: t("global.media.attributes.filename"),
           icon: "material-symbols:unknown-document-outline",
-          values: [filename],
+          values: [{ name: filename }],
           withBorder: false,
         },
       ]
@@ -40,13 +40,13 @@ const tagsAndAttributes = [
   {
     title: t("global.media.attributes.createdAt"),
     icon: "material-symbols:calendar-add-on-outline",
-    values: [formatDate(new Date(createdAt))],
+    values: [{ name: formatDate(new Date(createdAt)) }],
     withBorder: false,
   },
   {
     title: t("global.media.attributes.updatedAt"),
     icon: "material-symbols:edit-calendar",
-    values: [formatDate(new Date(updatedAt))],
+    values: [{ name: formatDate(new Date(updatedAt)) }],
     withBorder: false,
   },
 ];

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

@@ -57,13 +57,13 @@ const attributes = [
   {
     title: t("global.media.attributes.createdAt"),
     icon: "material-symbols:calendar-add-on-outline",
-    values: [formatDate(new Date(createdAt))],
+    values: [{ name: formatDate(new Date(createdAt)) }],
     withBorder: false,
   },
   {
     title: t("global.media.attributes.updatedAt"),
     icon: "material-symbols:edit-calendar",
-    values: [formatDate(new Date(updatedAt))],
+    values: [{ name: formatDate(new Date(updatedAt)) }],
     withBorder: false,
   },
 ];
@@ -72,7 +72,7 @@ if (updatedBy) {
   attributes.push({
     title: t("global.media.attributes.updatedBy"),
     icon: "material-symbols:person-edit-outline",
-    values: [updatedBy?.username],
+    values: [{ name: updatedBy.username }],
     withBorder: true,
   });
 }
@@ -82,7 +82,15 @@ const tagGroupWithAttributes = [
   {
     title: t("collectibles.nature"),
     icon: "material-symbols:leaf-spark-outline",
-    values: [nature === CollectibleNature.Physical ? "Physical" : "Digital"],
+    values: [
+      {
+        name: t(
+          nature === CollectibleNature.Physical
+            ? "collectibles.nature.physical"
+            : "collectibles.nature.digital"
+        ),
+      },
+    ],
     withBorder: true,
   },
 ];
@@ -91,7 +99,7 @@ if (releaseDate) {
   tagGroupWithAttributes.push({
     title: t("collectibles.releaseDate"),
     icon: "material-symbols:calendar-month-outline",
-    values: [formatDate(new Date(releaseDate))],
+    values: [{ name: formatDate(new Date(releaseDate)) }],
     withBorder: false,
   });
 }
@@ -100,7 +108,7 @@ if (languages.length > 0) {
   tagGroupWithAttributes.push({
     title: t("collectibles.languages"),
     icon: "material-symbols:translate",
-    values: languages.map((lang) => formatLocale(lang)),
+    values: languages.map((lang) => ({ name: formatLocale(lang) })),
     withBorder: true,
   });
 }
@@ -122,7 +130,7 @@ if (price) {
   tagGroupWithAttributes.push({
     title: t("collectibles.price"),
     icon: "material-symbols:sell-outline",
-    values: [priceText],
+    values: [{ name: priceText }],
     withBorder: false,
   });
 }
@@ -232,7 +240,7 @@ if (price) {
     }
 
     @media (min-width: 52rem) {
-      grid-template-columns: 35rem 10rem;
+      grid-template-columns: auto 10rem;
     }
 
     @media (min-width: 1280.5px) {
@@ -244,10 +252,15 @@ if (price) {
       }
     }
 
-    & a > #thumbnail {
+    & a {
-      max-width: 35rem;
+      width: fit-content;
-      width: 100%;
+
+      & > #thumbnail {
+        max-width: min(35rem, 100%);
+        max-height: 80vh;
+        width: auto;
         height: auto;
+        border-radius: 16px;
         box-shadow: 0 5px 20px -10px var(--color-shadow);
         transition: 100ms scale;
 
@@ -255,6 +268,7 @@ if (price) {
           scale: 102%;
         }
       }
+    }
 
     & > #gallery-scans {
       display: flex;

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

@@ -27,7 +27,7 @@ const tagsAndAttributes = [
         {
           title: t("global.media.attributes.filename"),
           icon: "material-symbols:unknown-document-outline",
-          values: [filename],
+          values: [{ name: filename }],
           withBorder: false,
         },
       ]
@@ -35,13 +35,13 @@ const tagsAndAttributes = [
   {
     title: t("global.media.attributes.createdAt"),
     icon: "material-symbols:calendar-add-on-outline",
-    values: [formatDate(new Date(createdAt))],
+    values: [{ name: formatDate(new Date(createdAt)) }],
     withBorder: false,
   },
   {
     title: t("global.media.attributes.updatedAt"),
     icon: "material-symbols:edit-calendar",
-    values: [formatDate(new Date(updatedAt))],
+    values: [{ name: formatDate(new Date(updatedAt)) }],
     withBorder: false,
   },
 ];

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

@@ -41,7 +41,7 @@ const attributes = [
         {
           title: t("global.media.attributes.filename"),
           icon: "material-symbols:video-file-outline",
-          values: [filename],
+          values: [{ name: filename }],
           withBorder: false,
         },
       ]
@@ -49,19 +49,19 @@ const attributes = [
   {
     title: t("global.media.attributes.filesize"),
     icon: "material-symbols:hard-drive-outline",
-    values: [formatFilesize(filesize)],
+    values: [{ name: formatFilesize(filesize) }],
     withBorder: false,
   },
   {
     title: t("global.media.attributes.createdAt"),
     icon: "material-symbols:calendar-add-on-outline",
-    values: [formatDate(new Date(createdAt))],
+    values: [{ name: formatDate(new Date(createdAt)) }],
     withBorder: false,
   },
   {
     title: t("global.media.attributes.updatedAt"),
     icon: "material-symbols:edit-calendar",
-    values: [formatDate(new Date(updatedAt))],
+    values: [{ name: formatDate(new Date(updatedAt)) }],
     withBorder: false,
   },
 ];

src/shared/payload/payload-sdk.ts

@@ -33,6 +33,7 @@ export interface Config {
     scans: Scan;
     tags: Tag;
     "tags-groups": TagsGroup;
+    attributes: Attribute;
     "credits-roles": CreditsRole;
     recorders: Recorder;
     languages: Language;
@@ -55,6 +56,7 @@ export interface Page {
   slug: string;
   thumbnail?: string | Image | null;
   backgroundImage?: string | Image | null;
+  attributes?: (TagsBlock | NumberBlock | TextBlock)[] | null;
   tags?: (string | Tag)[] | null;
   translations: {
     language: string | Language;
@@ -183,6 +185,7 @@ export interface Tag {
     id?: string | null;
   }[];
   group: string | TagsGroup;
+  page?: (string | null) | Page;
   updatedAt: string;
   createdAt: string;
 }
@@ -238,6 +241,56 @@ export interface Recorder {
   lockUntil?: string | null;
   password?: string | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "TagsBlock".
+ */
+export interface TagsBlock {
+  name: string | Attribute;
+  tags: (string | Tag)[];
+  id?: string | null;
+  blockName?: string | null;
+  blockType: "tagsBlock";
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "attributes".
+ */
+export interface Attribute {
+  id: string;
+  slug: string;
+  icon?: string | null;
+  type: "Number" | "Text" | "Tags";
+  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` "NumberBlock".
+ */
+export interface NumberBlock {
+  name: string | Attribute;
+  number: number;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: "numberBlock";
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "TextBlock".
+ */
+export interface TextBlock {
+  name: string | Attribute;
+  text: string;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: "textBlock";
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "folders".
@@ -1009,6 +1062,7 @@ export enum Collections {
   MediaThumbnails = "media-thumbnails",
   Scans = "scans",
   CreditsRole = "credits-roles",
+  Attributes = "attributes",
 }
 
 export enum CollectionGroups {
@@ -1065,6 +1119,12 @@ export enum CollectionStatus {
   Published = "published",
 }
 
+export enum AttributeTypes {
+  Number = "Number",
+  Text = "Text",
+  Tags = "Tags",
+}
+
 /* RICH TEXT */
 
 export type RichTextContent = {
@@ -1344,7 +1404,6 @@ const injectAuth = async (init?: RequestInit): Promise<RequestInit> => ({
   headers: {
     ...init?.headers,
     Authorization: `JWT ${await getToken()}`,
-    "x-rate-limit-skip": import.meta.env.PAYLOAD_RATING_LIMIT_SKIP_TOKEN ?? "",
   },
 });
 
@@ -1441,6 +1500,7 @@ export type EndpointWording = {
 
 export type EndpointTag = {
   slug: string;
+  page?: EndpointPage;
   translations: {
     language: string;
     name: string;
@@ -1457,6 +1517,35 @@ export type EndpointTagsGroup = {
   tags: EndpointTag[];
 };
 
+export type EndpointGenericAttribute = {
+  slug: string;
+  icon: string;
+  translations: {
+    language: string;
+    name: string;
+  }[];
+};
+
+export type EndpointNumberAttribute = EndpointGenericAttribute & {
+  type: AttributeTypes.Number;
+  value: number;
+};
+
+export type EndpointTextAttribute = EndpointGenericAttribute & {
+  type: AttributeTypes.Text;
+  value: string;
+};
+
+export type EndpointTagsAttribute = EndpointGenericAttribute & {
+  type: AttributeTypes.Tags;
+  value: EndpointTag[];
+};
+
+export type EndpointAttribute =
+  | EndpointNumberAttribute
+  | EndpointTextAttribute
+  | EndpointTagsAttribute;
+
 export type EndpointRole = {
   icon: string;
   translations: {
@@ -1474,6 +1563,7 @@ export type EndpointPage = {
   slug: string;
   thumbnail?: EndpointImage;
   tagGroups: EndpointTagsGroup[];
+  attributes: EndpointAttribute[];
   backgroundImage?: EndpointImage;
   translations: {
     language: string;