Improvements to types and age verification screen
This commit is contained in:
parent
18e98cdb3b
commit
7f7a62a391
78 changed files with 1132 additions and 1102 deletions
|
|
@ -1,18 +0,0 @@
|
|||
---
|
||||
import BaseLayout from "./BaseLayout.astro";
|
||||
const { pageTitle } = Astro.props;
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<slot />
|
||||
<script is:inline>
|
||||
/* Age verification */
|
||||
(() => {
|
||||
const ageVerified = localStorage.getItem("ageVerified");
|
||||
if (ageVerified !== "true") {
|
||||
localStorage.setItem("ageVerified", "false");
|
||||
window.location.href = "/age-verification?redirect=" + encodeURIComponent(window.location.href);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</BaseLayout>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
import "../styles/base.css";
|
||||
import "../styles/fonts.css";
|
||||
import DarkModeScript from "../components/DarkModeScript.astro";
|
||||
import AgeRestrictedModal from "../components/AgeRestrictedModal.astro";
|
||||
const { pageTitle } = Astro.props;
|
||||
---
|
||||
|
||||
|
|
@ -24,5 +25,6 @@ const { pageTitle } = Astro.props;
|
|||
<body>
|
||||
<slot />
|
||||
<DarkModeScript />
|
||||
<AgeRestrictedModal />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import AgeRestrictedBaseLayout from "./AgeRestrictedBaseLayout.astro";
|
||||
import BaseLayout from "./BaseLayout.astro";
|
||||
import Navigation from "../components/Navigation.astro";
|
||||
import logoBM from "../assets/images/logo_bm.png";
|
||||
|
||||
const { pageTitle } = Astro.props;
|
||||
---
|
||||
|
||||
<AgeRestrictedBaseLayout pageTitle={pageTitle}>
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<div
|
||||
class="flex min-h-screen flex-col bg-stone-200 text-stone-800 md:flex-row dark:bg-stone-800 dark:text-stone-200 print:bg-none"
|
||||
>
|
||||
|
|
@ -42,7 +42,7 @@ const { pageTitle } = Astro.props;
|
|||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<button id="button-dark-mode" class="text-link p-1" aria-label="Toggle dark mode">
|
||||
<button data-dark-mode class="text-link p-1" aria-label="Toggle dark mode">
|
||||
<svg viewBox="0 0 512 512" class="hidden h-6 w-6 fill-current dark:block" aria-hidden="true">
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"
|
||||
|
|
@ -60,4 +60,4 @@ const { pageTitle } = Astro.props;
|
|||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</AgeRestrictedBaseLayout>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Markdown } from "@astropub/md";
|
|||
import { format as formatDate } from "date-fns";
|
||||
import { enUS as enUSLocale } from "date-fns/locale/en-US";
|
||||
import { slug } from "github-slugger";
|
||||
import AgeRestrictedBaseLayout from "./AgeRestrictedBaseLayout.astro";
|
||||
import BaseLayout from "./BaseLayout.astro";
|
||||
import Authors from "../components/Authors.astro";
|
||||
import CopyrightedCharacters from "../components/CopyrightedCharacters.astro";
|
||||
import Prose from "../components/Prose.astro";
|
||||
|
|
@ -13,6 +13,7 @@ import Prose from "../components/Prose.astro";
|
|||
type Props = CollectionEntry<"games">["data"];
|
||||
|
||||
const { props } = Astro;
|
||||
const series = props.series && (await getEntry(props.series));
|
||||
const authors = await getEntries([props.authors].flat());
|
||||
const copyrightedCharacters: Record<string, CollectionEntry<"users">> = {};
|
||||
Object.keys(props.copyrightedCharacters).forEach(async (character) => {
|
||||
|
|
@ -26,7 +27,7 @@ Object.keys(props.copyrightedCharacters).forEach(async (character) => {
|
|||
// );
|
||||
---
|
||||
|
||||
<AgeRestrictedBaseLayout pageTitle={props.title}>
|
||||
<BaseLayout pageTitle={props.title}>
|
||||
<div
|
||||
id="top"
|
||||
class="min-w-screen relative min-h-screen bg-radial from-bm-300 to-bm-600 px-1 pb-16 pt-20 dark:from-green-700 dark:to-green-950 print:bg-none"
|
||||
|
|
@ -34,9 +35,9 @@ Object.keys(props.copyrightedCharacters).forEach(async (character) => {
|
|||
<div id="toolbox-buttons" aria-label="Toolbox" class="absolute top-0 h-[80vh] py-2 pl-2 lg:inset-y-0 lg:h-full">
|
||||
<div class="sticky top-6 flex rounded-full bg-white px-1 py-1 shadow-md dark:bg-black print:hidden">
|
||||
<a
|
||||
href={props.series ? Object.values(props.series)[0] : "/games"}
|
||||
href={series ? series.data.url : "/games"}
|
||||
class="text-link my-1 h-9 w-9 p-2"
|
||||
aria-label={`Return to ${props.series ? Object.keys(props.series)[0] : "games"}`}
|
||||
aria-label={`Return to ${series ? series.data.name : "games"}`}
|
||||
>
|
||||
<svg viewBox="0 0 512 512" class="fill-current" aria-hidden="true">
|
||||
<path
|
||||
|
|
@ -56,7 +57,7 @@ Object.keys(props.copyrightedCharacters).forEach(async (character) => {
|
|||
</svg>
|
||||
</a>
|
||||
<button
|
||||
id="button-dark-mode"
|
||||
data-dark-mode
|
||||
class="text-link my-1 h-9 w-9 border-l border-stone-300 p-2 dark:border-stone-700"
|
||||
aria-label="Toggle dark mode"
|
||||
>
|
||||
|
|
@ -172,4 +173,4 @@ Object.keys(props.copyrightedCharacters).forEach(async (character) => {
|
|||
<a class="hover:underline focus:underline" href="/licenses.txt" target="_blank">Licenses</a>
|
||||
</div>
|
||||
</div>
|
||||
</AgeRestrictedBaseLayout>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Markdown } from "@astropub/md";
|
|||
import { format as formatDate } from "date-fns";
|
||||
import { enUS as enUSLocale } from "date-fns/locale/en-US";
|
||||
import { slug } from "github-slugger";
|
||||
import AgeRestrictedBaseLayout from "./AgeRestrictedBaseLayout.astro";
|
||||
import BaseLayout from "./BaseLayout.astro";
|
||||
import Authors from "../components/Authors.astro";
|
||||
import UserComponent from "../components/UserComponent.astro";
|
||||
import CopyrightedCharacters from "../components/CopyrightedCharacters.astro";
|
||||
|
|
@ -23,6 +23,7 @@ let next = props.next && (await getEntry(props.next));
|
|||
if (next && next.data.isDraft) {
|
||||
next = undefined;
|
||||
}
|
||||
const series = props.series && (await getEntry(props.series));
|
||||
const authors = await getEntries([props.authors].flat());
|
||||
const commissioner = props.commissioner && (await getEntry(props.commissioner));
|
||||
const requester = props.requester && (await getEntry(props.requester));
|
||||
|
|
@ -31,30 +32,34 @@ Object.keys(props.copyrightedCharacters).forEach(async (character) => {
|
|||
copyrightedCharacters[character] = await getEntry(props.copyrightedCharacters[character]);
|
||||
});
|
||||
const relatedStories = (await getEntries(props.relatedStories)).filter((story) => !story.data.isDraft);
|
||||
const categorizedTags = Object.fromEntries((await getCollection("tag-categories")).flatMap(category => category.data.tags.map(tag => {
|
||||
if (typeof tag === "string") {
|
||||
return [tag, tag]
|
||||
}
|
||||
const key = tag["eng"]!
|
||||
if (props.lang in tag) {
|
||||
return [key, tag[props.lang]!]
|
||||
}
|
||||
return [key, key]
|
||||
})));
|
||||
const tags = props.tags.map<[string, string]>(tag => {
|
||||
const tagSlug = slug(tag)
|
||||
const categorizedTags = Object.fromEntries(
|
||||
(await getCollection("tag-categories")).flatMap((category) =>
|
||||
category.data.tags.map((tag) => {
|
||||
if (typeof tag === "string") {
|
||||
return [tag, tag];
|
||||
}
|
||||
const key = tag["eng"]!;
|
||||
if (props.lang in tag) {
|
||||
return [key, tag[props.lang]!];
|
||||
}
|
||||
return [key, key];
|
||||
}),
|
||||
),
|
||||
);
|
||||
const tags = props.tags.map<[string, string]>((tag) => {
|
||||
const tagSlug = slug(tag);
|
||||
if (!(tag in categorizedTags)) {
|
||||
console.log(`Tag "${tag}" doesn't have a category in tag-categories!`)
|
||||
return [tagSlug, tag]
|
||||
console.log(`Tag "${tag}" doesn't have a category in tag-categories!`);
|
||||
return [tagSlug, tag];
|
||||
}
|
||||
return [tagSlug, categorizedTags[tag]!]
|
||||
return [tagSlug, categorizedTags[tag]!];
|
||||
});
|
||||
// const relatedGames = (await getEntries(props.relatedGames)).filter(
|
||||
// (game) => !game.data.isDraft,
|
||||
// );
|
||||
---
|
||||
|
||||
<AgeRestrictedBaseLayout pageTitle={props.title}>
|
||||
<BaseLayout pageTitle={props.title}>
|
||||
<div
|
||||
id="top"
|
||||
class="min-w-screen relative min-h-screen bg-radial from-bm-300 to-bm-600 px-1 pb-16 pt-20 dark:from-green-700 dark:to-green-950 print:bg-none"
|
||||
|
|
@ -62,9 +67,13 @@ const tags = props.tags.map<[string, string]>(tag => {
|
|||
<div id="toolbox-buttons" aria-label="Toolbox" class="absolute top-0 h-[80vh] py-2 pl-2 lg:inset-y-0 lg:h-full">
|
||||
<div class="sticky top-6 flex rounded-full bg-white px-1 py-1 shadow-md dark:bg-black print:hidden">
|
||||
<a
|
||||
href={props.series ? Object.values(props.series)[0] : "/stories/1"}
|
||||
href={series ? series.data.url : "/stories/1"}
|
||||
class="text-link my-1 h-9 w-9 p-2"
|
||||
aria-label={props.lang === "eng" ? `Return to ${props.series ? Object.keys(props.series)[0] : "stories"}` : props.lang === "tok" ? "o tawa e lipu ale" : null}
|
||||
aria-label={props.lang === "eng"
|
||||
? `Return to ${series ? series.data.name : "stories"}`
|
||||
: props.lang === "tok"
|
||||
? "o tawa e lipu ale"
|
||||
: null}
|
||||
>
|
||||
<svg viewBox="0 0 512 512" class="fill-current" aria-hidden="true">
|
||||
<path
|
||||
|
|
@ -84,7 +93,7 @@ const tags = props.tags.map<[string, string]>(tag => {
|
|||
</svg>
|
||||
</a>
|
||||
<button
|
||||
id="button-dark-mode"
|
||||
data-dark-mode
|
||||
class="text-link my-1 h-9 w-9 border-l border-stone-300 p-2 dark:border-stone-700"
|
||||
aria-label={props.lang === "eng" ? "Toggle dark mode" : props.lang === "tok" ? "o ante e kule" : null}
|
||||
>
|
||||
|
|
@ -210,7 +219,9 @@ const tags = props.tags.map<[string, string]>(tag => {
|
|||
aria-label="Publish date"
|
||||
aria-description={formatDate(props.pubDate, "MMMM do, yyyy", { locale: enUSLocale })}
|
||||
>
|
||||
{props.lang === "tok" ? `tenpo suno ${formatDate(props.pubDate, "yyyy-MM-dd")}` : formatDate(props.pubDate, "yyyy-MM-dd")}
|
||||
{props.lang === "tok"
|
||||
? `tenpo suno ${formatDate(props.pubDate, "yyyy-MM-dd")}`
|
||||
: formatDate(props.pubDate, "yyyy-MM-dd")}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
|
@ -304,10 +315,16 @@ const tags = props.tags.map<[string, string]>(tag => {
|
|||
</section>
|
||||
</main>
|
||||
<div class="pt-6 text-center text-xs text-black dark:text-white">
|
||||
<span>© {props.lang === "tok" ? `tenpo pi sike suno ${formatDate(props.pubDate, "yyyy")}` : formatDate(props.pubDate, "yyyy")} | </span>
|
||||
<span
|
||||
>© {
|
||||
props.lang === "tok"
|
||||
? `tenpo pi sike suno ${formatDate(props.pubDate, "yyyy")}`
|
||||
: formatDate(props.pubDate, "yyyy")
|
||||
} |
|
||||
</span>
|
||||
<a class="hover:underline focus:underline" href="/licenses.txt" target="_blank"
|
||||
>{props.lang === "eng" ? "Licenses" : props.lang === "tok" ? "lipu lawa" : null}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</AgeRestrictedBaseLayout>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue