Support for tag page

2024-05-15 11:52:42 +02:00 · 2024-05-15 11:52:42 +02:00 · 600a2374e1
parent bf7d2b907f
commit 600a2374e1
11 changed files with 187 additions and 68 deletions
--- a/src/components/Credits.astro
+++ b/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 }))}
      />
    ))
  }
--- a/src/components/Metadata.astro
+++ b/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);
        }
      }
    }
--- a/src/components/TagGroups.astro
+++ b/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: (
-    | EndpointTagsGroup
-    | { title: string; icon: string; values: string[]; withBorder?: boolean }
-  )[];
+  tagGroups: (EndpointTagsGroup | ComponentProps<typeof Metadata>)[];
 }

 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(({ icon, title, values, withBorder }) => (
-      <Metadata icon={icon} title={title} values={values} withBorder={withBorder} />
-    ))
-  }
+  {groups.map((group) => <Metadata {...group} />)}
  <slot />
 </div>

--- a/src/i18n/wordings-keys.ts
+++ b/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.cataclysm"
+  | "timeline.eras.drakengard3"
  | "timeline.eras.drakengard"
  | "timeline.eras.drakengard2"
-  | "timeline.eras.drakengard3"
  | "timeline.eras.nier"
  | "timeline.eras.nierAutomata"
-  | "timeline.jumpTo"
-  | "timeline.notes.content"
+  | "timeline.eras.cataclysm"
+  | "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.page"
-  | "global.sources.typeLabel.url"
+  | "global.sources.typeLabel.collectible.range.custom"
  | "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";
--- a/src/pages/[locale]/api/pages/partial.astro
+++ b/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-height: 60vh;
-    width: 100%;
+    max-width: min(35rem, 100%);
+    max-height: 80vh;
+    width: auto;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 5px 20px -10px var(--color-shadow);
--- a/src/pages/[locale]/audios/[id].astro
+++ b/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,
  },
 ];
--- a/src/pages/[locale]/collectibles/[slug]/gallery/[index].astro
+++ b/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,
  },
 ];
--- a/src/pages/[locale]/collectibles/[slug]/index.astro
+++ b/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,15 +252,21 @@ if (price) {
      }
    }

-    & a > #thumbnail {
-      max-width: 35rem;
-      width: 100%;
-      height: auto;
-      box-shadow: 0 5px 20px -10px var(--color-shadow);
-      transition: 100ms scale;
+    & a {
+      width: fit-content;

-      &:hover {
-        scale: 102%;
+      & > #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;
+
+        &:hover {
+          scale: 102%;
+        }
      }
    }

--- a/src/pages/[locale]/images/[id].astro
+++ b/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,
  },
 ];
--- a/src/pages/[locale]/videos/[id].astro
+++ b/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,
  },
 ];
--- a/src/shared/payload/payload-sdk.ts
+++ b/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;