Added tsc build

This commit is contained in:
DrMint 2024-04-05 22:43:18 +02:00
parent 09580f828b
commit 9a1cbd28f7
6 changed files with 146 additions and 23 deletions

View File

@ -50,14 +50,23 @@ const { currentTheme } = Astro.locals;
"light-theme": currentTheme === "light", "light-theme": currentTheme === "light",
"dark-theme": currentTheme === "dark", "dark-theme": currentTheme === "dark",
"texture-dots": !isIOS, "texture-dots": !isIOS,
}}> }}
>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/tippy.css" /> <link rel="stylesheet" href="/css/tippy.css" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fdebd4" /> <meta
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27231e" /> 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" /> <link rel="manifest" href="/site.webmanifest" />
{/* Meta & OpenGraph */} {/* Meta & OpenGraph */}
@ -71,7 +80,10 @@ const { currentTheme } = Astro.locals;
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={thumbnail} /> <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:locale" content={currentLocale} />
<meta property="og:site_name" content={t("global.siteName")} /> <meta property="og:site_name" content={t("global.siteName")} />
@ -121,7 +133,9 @@ const { currentTheme } = Astro.locals;
<AppLayoutSpinner /> <AppLayoutSpinner />
</html> </html>
{/* ------------------------------------------- CSS -------------------------------------------- */} {
/* ------------------------------------------- CSS -------------------------------------------- */
}
<style is:global> <style is:global>
html { html {
@ -169,6 +183,10 @@ const { currentTheme } = Astro.locals;
display: none !important; display: none !important;
} }
* {
color-scheme: only light;
}
font-weight: 430; font-weight: 430;
strong { strong {
@ -220,6 +238,10 @@ const { currentTheme } = Astro.locals;
& .when-dark-theme { & .when-dark-theme {
display: initial !important; display: initial !important;
} }
* {
color-scheme: only dark;
}
} }
&:not(.manual-theme) { &:not(.manual-theme) {
@ -268,6 +290,10 @@ const { currentTheme } = Astro.locals;
& .when-dark-theme { & .when-dark-theme {
display: initial !important; display: initial !important;
} }
* {
color-scheme: only dark;
}
} }
} }
} }
@ -441,7 +467,8 @@ const { currentTheme } = Astro.locals;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
transition-duration: 250ms; 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 { &:hover {
--foreground-color: var(--color-base-1000); --foreground-color: var(--color-base-1000);
@ -560,13 +587,19 @@ const { currentTheme } = Astro.locals;
} }
</style> </style>
{/* ------------------------------------------- JS --------------------------------------------- */} {
/* ------------------------------------------- JS --------------------------------------------- */
}
<script is:inline> <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 }) => { 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> </script>

View File

@ -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 type { RichTextContext } from "src/utils/richText";
import RTImage from "./components/RTImage.astro"; import RTImage from "./components/RTImage.astro";
import ErrorMessage from "components/ErrorMessage.astro"; import ErrorMessage from "components/ErrorMessage.astro";
import RTAudio from "./components/RTAudio.astro";
import RTVideo from "./components/RTVideo.astro";
interface Props { interface Props {
node: RichTextUploadNode; node: RichTextUploadNode;
@ -12,11 +19,17 @@ interface Props {
const { node, context } = Astro.props; const { node, context } = Astro.props;
--- ---
{/* ------------------------------------------- HTML ------------------------------------------- */} {
/* ------------------------------------------- HTML ------------------------------------------- */
}
{ {
isUploadNodeImageNode(node) ? ( isUploadNodeImageNode(node) ? (
<RTImage node={node} context={context} /> <RTImage node={node} context={context} />
) : isUploadNodeAudioNode(node) ? (
<RTAudio node={node} context={context} />
) : isUploadNodeVideoNode(node) ? (
<RTVideo node={node} context={context} />
) : ( ) : (
<ErrorMessage <ErrorMessage
title={`Unknown upload collection: ${node.relationTo}`} title={`Unknown upload collection: ${node.relationTo}`}

View File

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

View File

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

View File

@ -89,26 +89,26 @@ export type WordingKey =
| "pages.tableOfContent.break" | "pages.tableOfContent.break"
| "global.languageOverride.availableLanguages" | "global.languageOverride.availableLanguages"
| "timeline.title" | "timeline.title"
| "timeline.description" | "timeline.eras.drakengard3"
| "timeline.eras.cataclysm"
| "timeline.eras.drakengard" | "timeline.eras.drakengard"
| "timeline.eras.drakengard2" | "timeline.eras.drakengard2"
| "timeline.eras.drakengard3"
| "timeline.eras.nier" | "timeline.eras.nier"
| "timeline.eras.nierAutomata" | "timeline.eras.nierAutomata"
| "timeline.jumpTo" | "timeline.eras.cataclysm"
| "timeline.notes.content" | "timeline.description"
| "timeline.notes.title" | "timeline.notes.title"
| "timeline.notes.content"
| "timeline.priorCataclysmNote.title" | "timeline.priorCataclysmNote.title"
| "timeline.priorCataclysmNote.content" | "timeline.priorCataclysmNote.content"
| "timeline.jumpTo"
| "timeline.year.during" | "timeline.year.during"
| "timeline.eventFooter.sources"
| "timeline.eventFooter.languages" | "timeline.eventFooter.languages"
| "timeline.eventFooter.sources"
| "timeline.eventFooter.note" | "timeline.eventFooter.note"
| "global.sources.typeLabel.url"
| "global.sources.typeLabel.page"
| "global.sources.typeLabel.collectible" | "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.page"
| "global.sources.typeLabel.collectible.range.timestamp" | "global.sources.typeLabel.collectible.range.timestamp"
| "global.sources.typeLabel.folder" | "global.sources.typeLabel.collectible.range.custom";
| "global.sources.typeLabel.page"
| "global.sources.typeLabel.url";

View File

@ -1098,10 +1098,20 @@ export interface RichTextUploadNode extends RichTextNode {
} }
export interface RichTextUploadImageNode extends RichTextUploadNode { export interface RichTextUploadImageNode extends RichTextUploadNode {
relationTo: "images" | "background-images"; relationTo: Collections.Images;
value: Image; 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 { export interface RichTextTextNode extends RichTextNode {
type: "text"; type: "text";
format: number; format: number;
@ -1167,7 +1177,13 @@ export const isNodeUploadNode = (node: RichTextNode): node is RichTextUploadNode
node.type === "upload"; node.type === "upload";
export const isUploadNodeImageNode = (node: RichTextUploadNode): node is RichTextUploadImageNode => 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 => export const isNodeListNode = (node: RichTextNode): node is RichTextListNode =>
node.type === "list"; node.type === "list";