Improve tagging and toki pona support

This commit is contained in:
Bad Manners 2024-03-22 18:37:22 -03:00
parent d4a9dc9dbc
commit 18e98cdb3b
89 changed files with 971 additions and 956 deletions

View file

@ -18,6 +18,7 @@ const { pageTitle } = Astro.props;
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle || "Gallery"} | Bad Manners</title>
<link rel="me" href="https://meow.social/@BadManners" />
<link rel="alternate" type="application/rss+xml" title="Gallery | Bad Manners" href={`${Astro.site}feed.xml`} />
</head>
<body>

View file

@ -18,7 +18,8 @@ const { pageTitle } = Astro.props;
loading="eager"
src={logoBM}
alt="Logo for Bad Manners"
class="my-4 w-full max-w-48 rounded-sm border-2 border-green-950 shadow-md"
class="my-4 w-full max-w-[192px] rounded-sm border-2 border-green-950 shadow-md"
width={192}
/>
<span class="my-2 text-2xl font-semibold">Bad Manners</span>
<Navigation />

View file

@ -10,6 +10,7 @@ import Authors from "../components/Authors.astro";
import UserComponent from "../components/UserComponent.astro";
import CopyrightedCharacters from "../components/CopyrightedCharacters.astro";
import Prose from "../components/Prose.astro";
import { getCollection } from "astro:content";
type Props = CollectionEntry<"stories">["data"];
@ -30,6 +31,24 @@ 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)
if (!(tag in categorizedTags)) {
console.log(`Tag "${tag}" doesn't have a category in tag-categories!`)
return [tagSlug, tag]
}
return [tagSlug, categorizedTags[tag]!]
});
// const relatedGames = (await getEntries(props.relatedGames)).filter(
// (game) => !game.data.isDraft,
// );
@ -45,7 +64,7 @@ const relatedStories = (await getEntries(props.relatedStories)).filter((story) =
<a
href={props.series ? Object.values(props.series)[0] : "/stories/1"}
class="text-link my-1 h-9 w-9 p-2"
aria-label={`Return to ${props.series ? Object.keys(props.series)[0] : "stories"}`}
aria-label={props.lang === "eng" ? `Return to ${props.series ? Object.keys(props.series)[0] : "stories"}` : props.lang === "tok" ? "o tawa e lipu ale" : null}
>
<svg viewBox="0 0 512 512" class="fill-current" aria-hidden="true">
<path
@ -56,7 +75,7 @@ const relatedStories = (await getEntries(props.relatedStories)).filter((story) =
<a
href="#description"
class="text-link my-1 h-9 w-9 border-l border-stone-300 p-2 dark:border-stone-700"
aria-label="Go to description"
aria-label={props.lang === "eng" ? "Go to description" : props.lang === "tok" ? "o tawa e lipu lili" : null}
>
<svg viewBox="0 0 512 512" class="fill-current" aria-hidden="true">
<path
@ -67,7 +86,7 @@ const relatedStories = (await getEntries(props.relatedStories)).filter((story) =
<button
id="button-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"
aria-label={props.lang === "eng" ? "Toggle dark mode" : props.lang === "tok" ? "o ante e kule" : null}
>
<svg viewBox="0 0 512 512" class="hidden fill-current dark:block" aria-hidden="true">
<path
@ -191,7 +210,7 @@ const relatedStories = (await getEntries(props.relatedStories)).filter((story) =
aria-label="Publish date"
aria-description={formatDate(props.pubDate, "MMMM do, yyyy", { locale: enUSLocale })}
>
{formatDate(props.pubDate, "yyyy-MM-dd")}
{props.lang === "tok" ? `tenpo suno ${formatDate(props.pubDate, "yyyy-MM-dd")}` : formatDate(props.pubDate, "yyyy-MM-dd")}
</p>
)
}
@ -273,10 +292,10 @@ const relatedStories = (await getEntries(props.relatedStories)).filter((story) =
</h2>
<ul class="flex flex-wrap gap-x-2 gap-y-2 px-2">
{
props.tags.map((tag) => (
tags.map(([tagSlug, tagText]) => (
<li class="rounded-full bg-bm-300 px-3 py-1 text-sm text-black shadow-sm dark:bg-bm-600 dark:text-white print:bg-none">
<a class="hover:underline focus:underline" href={`/tags/${slug(tag)}`}>
{tag}
<a class="hover:underline focus:underline" href={`/tags/${tagSlug}`}>
{tagText}
</a>
</li>
))
@ -285,7 +304,7 @@ const relatedStories = (await getEntries(props.relatedStories)).filter((story) =
</section>
</main>
<div class="pt-6 text-center text-xs text-black dark:text-white">
<span>&copy; {formatDate(props.pubDate, "yyyy")} | </span>
<span>&copy; {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
>