Added tsc build

2024-04-05 22:43:18 +02:00 · 2024-04-05 22:43:18 +02:00 · 9a1cbd28f7
parent 09580f828b
commit 9a1cbd28f7
6 changed files with 146 additions and 23 deletions
--- a/src/components/AppLayout/components/Html.astro
+++ b/src/components/AppLayout/components/Html.astro
@ -50,14 +50,23 @@ const { currentTheme } = Astro.locals;
    "light-theme": currentTheme === "light",
    "dark-theme": currentTheme === "dark",
    "texture-dots": !isIOS,
-  }}>
+  }}
+>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/css/tippy.css" />
-    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fdebd4" />
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27231e" />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: light)"
+      content="#fdebd4"
+    />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: dark)"
+      content="#27231e"
+    />
    <link rel="manifest" href="/site.webmanifest" />

    {/* Meta & OpenGraph */}
@ -71,7 +80,10 @@ const { currentTheme } = Astro.locals;
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content={thumbnail} />

-    <meta property="og:type" content={video ? "video.movie" : audio ? "music.song" : "website"} />
+    <meta
+      property="og:type"
+      content={video ? "video.movie" : audio ? "music.song" : "website"}
+    />
    <meta property="og:locale" content={currentLocale} />
    <meta property="og:site_name" content={t("global.siteName")} />

@ -121,7 +133,9 @@ const { currentTheme } = Astro.locals;
  <AppLayoutSpinner />
 </html>

-{/* ------------------------------------------- CSS -------------------------------------------- */}
+{
+  /* ------------------------------------------- CSS -------------------------------------------- */
+}

 <style is:global>
  html {
@ -169,6 +183,10 @@ const { currentTheme } = Astro.locals;
      display: none !important;
    }

+    * {
+      color-scheme: only light;
+    }
+
    font-weight: 430;

    strong {
@ -220,6 +238,10 @@ const { currentTheme } = Astro.locals;
        & .when-dark-theme {
          display: initial !important;
        }
+
+        * {
+          color-scheme: only dark;
+        }
      }

      &:not(.manual-theme) {
@ -268,6 +290,10 @@ const { currentTheme } = Astro.locals;
          & .when-dark-theme {
            display: initial !important;
          }
+
+          * {
+            color-scheme: only dark;
+          }
        }
      }
    }
@ -441,7 +467,8 @@ const { currentTheme } = Astro.locals;
    backdrop-filter: blur(10px);

    transition-duration: 250ms;
-    transition-property: padding-top, box-shadow, background-color, color, border-color;
+    transition-property: padding-top, box-shadow, background-color, color,
+      border-color;

    &:hover {
      --foreground-color: var(--color-base-1000);
@ -560,13 +587,19 @@ const { currentTheme } = Astro.locals;
  }
 </style>

-{/* ------------------------------------------- JS --------------------------------------------- */}
+{
+  /* ------------------------------------------- JS --------------------------------------------- */
+}

 <script is:inline>
-  Array.from(document.querySelectorAll(".when-no-js")).forEach((node) => node.remove());
+  Array.from(document.querySelectorAll(".when-no-js")).forEach((node) =>
+    node.remove()
+  );

  document.addEventListener("astro:before-swap", ({ newDocument }) => {
-    Array.from(newDocument.querySelectorAll(".when-no-js")).forEach((node) => node.remove());
+    Array.from(newDocument.querySelectorAll(".when-no-js")).forEach((node) =>
+      node.remove()
+    );
  });
 </script>

--- a/src/components/RichText/components/RTUpload/RTUpload.astro
+++ b/src/components/RichText/components/RTUpload/RTUpload.astro
@ -1,8 +1,15 @@
 ---
-import { isUploadNodeImageNode, type RichTextUploadNode } from "src/shared/payload/payload-sdk";
+import {
+  isUploadNodeAudioNode,
+  isUploadNodeImageNode,
+  isUploadNodeVideoNode,
+  type RichTextUploadNode,
+} from "src/shared/payload/payload-sdk";
 import type { RichTextContext } from "src/utils/richText";
 import RTImage from "./components/RTImage.astro";
 import ErrorMessage from "components/ErrorMessage.astro";
+import RTAudio from "./components/RTAudio.astro";
+import RTVideo from "./components/RTVideo.astro";

 interface Props {
  node: RichTextUploadNode;
@ -12,11 +19,17 @@ interface Props {
 const { node, context } = Astro.props;
 ---

-{/* ------------------------------------------- HTML ------------------------------------------- */}
+{
+  /* ------------------------------------------- HTML ------------------------------------------- */
+}

 {
  isUploadNodeImageNode(node) ? (
    <RTImage node={node} context={context} />
+  ) : isUploadNodeAudioNode(node) ? (
+    <RTAudio node={node} context={context} />
+  ) : isUploadNodeVideoNode(node) ? (
+    <RTVideo node={node} context={context} />
  ) : (
    <ErrorMessage
      title={`Unknown upload collection: ${node.relationTo}`}
--- a/src/components/RichText/components/RTUpload/components/RTAudio.astro
+++ b/src/components/RichText/components/RTUpload/components/RTAudio.astro
@ -0,0 +1,32 @@
+---
+import { type RichTextUploadAudioNode } from "src/shared/payload/payload-sdk";
+import type { RichTextContext } from "src/utils/richText";
+
+interface Props {
+  node: RichTextUploadAudioNode;
+  context: RichTextContext;
+}
+
+const { node } = Astro.props;
+---
+
+{
+  /* ------------------------------------------- HTML ------------------------------------------- */
+}
+
+<audio controls>
+  <source src={node.value.url} type={node.value.mimeType} />
+</audio>
+
+{
+  /* ------------------------------------------- CSS -------------------------------------------- */
+}
+
+<style>
+  audio {
+    width: 100%;
+    margin-block: 3em;
+    border-radius: 16px;
+    box-shadow: 0 5px 20px -10px var(--color-shadow);
+  }
+</style>
--- a/src/components/RichText/components/RTUpload/components/RTVideo.astro
+++ b/src/components/RichText/components/RTUpload/components/RTVideo.astro
@ -0,0 +1,29 @@
+---
+import { type RichTextUploadVideoNode } from "src/shared/payload/payload-sdk";
+import type { RichTextContext } from "src/utils/richText";
+
+interface Props {
+  node: RichTextUploadVideoNode;
+  context: RichTextContext;
+}
+
+const { node } = Astro.props;
+---
+
+{/* ------------------------------------------- HTML ------------------------------------------- */}
+
+<video controls>
+  <source src={node.value.url} type={node.value.mimeType} />
+</video>
+
+{/* ------------------------------------------- CSS -------------------------------------------- */}
+
+<style>
+  video {
+    width: 100%;
+    height: auto;
+    margin-block: 3em;
+    border-radius: 16px;
+    box-shadow: 0 5px 20px -10px var(--color-shadow);
+  }
+</style>
--- a/src/i18n/wordings-keys.ts
+++ b/src/i18n/wordings-keys.ts
@ -89,26 +89,26 @@ 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";
--- a/src/shared/payload/payload-sdk.ts
+++ b/src/shared/payload/payload-sdk.ts
@ -1098,10 +1098,20 @@ export interface RichTextUploadNode extends RichTextNode {
 }

 export interface RichTextUploadImageNode extends RichTextUploadNode {
-  relationTo: "images" | "background-images";
+  relationTo: Collections.Images;
  value: Image;
 }

+export interface RichTextUploadVideoNode extends RichTextUploadNode {
+  relationTo: Collections.Videos;
+  value: Video;
+}
+
+export interface RichTextUploadAudioNode extends RichTextUploadNode {
+  relationTo: Collections.Audios;
+  value: Audio;
+}
+
 export interface RichTextTextNode extends RichTextNode {
  type: "text";
  format: number;
@ -1167,7 +1177,13 @@ export const isNodeUploadNode = (node: RichTextNode): node is RichTextUploadNode
  node.type === "upload";

 export const isUploadNodeImageNode = (node: RichTextUploadNode): node is RichTextUploadImageNode =>
-  node.relationTo === "images" || node.relationTo === "background-images";
+  node.relationTo === Collections.Images;
+
+  export const isUploadNodeVideoNode = (node: RichTextUploadNode): node is RichTextUploadVideoNode =>
+  node.relationTo === Collections.Videos;
+
+  export const isUploadNodeAudioNode = (node: RichTextUploadNode): node is RichTextUploadAudioNode =>
+  node.relationTo === Collections.Audios;

 export const isNodeListNode = (node: RichTextNode): node is RichTextListNode =>
  node.type === "list";