badmanners/gallery.badmanners.xyz
badmanners/gallery.badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add support for embeds (i.e. Discord)

Browse source
This commit is contained in:
Bad Manners 2024-03-25 13:11:52 -03:00
parent b92f53a9c2
commit 41c2f92927
11 changed files with 99 additions and 38 deletions

1
src/layouts/BaseLayout.astro
View file

@ -21,6 +21,7 @@ const { pageTitle } = Astro.props;
<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`} />
<slot name="head" />
</head>
<body>
<slot />

18
src/layouts/GalleryLayout.astro
View file

@ -1,22 +1,34 @@
---
import { Image } from "astro:assets";
import { getImage } from "astro:assets";
import BaseLayout from "./BaseLayout.astro";
import Navigation from "../components/Navigation.astro";
import logoBM from "../assets/images/logo_bm.png";
type Props = {
pageTitle?: string;
};
const { pageTitle } = Astro.props;
const logo = await getImage({ src: logoBM, width: 192 });
---
<BaseLayout pageTitle={pageTitle}>
<Fragment slot="head">
<meta content={pageTitle || "Bad Manners"} property="og:title" />
<slot name="head-description" />
<meta content={Astro.url} property="og:url" />
<meta content={logo.src} property="og:image" />
<meta content="#7DD05A" data-react-helmet="true" name="theme-color" />
</Fragment>
<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"
>
<div
class="static mb-4 flex flex-col items-center bg-bm-300 pt-10 text-center text-stone-900 shadow-xl md:fixed md:inset-y-0 md:left-0 md:mb-0 md:w-60 md:pt-20 dark:bg-green-900 dark:text-stone-100 print:bg-none print:shadow-none"
>
<Image
<img
loading="eager"
src={logoBM}
src={logo.src}
alt="Logo for Bad Manners"
class="my-4 w-full max-w-[192px] rounded-sm border-2 border-green-950 shadow-md"
width={192}

44
src/layouts/GameLayout.astro
View file

@ -1,5 +1,5 @@
---
import { Image } from "astro:assets";
import { getImage } from "astro:assets";
import { type CollectionEntry, getEntry, getEntries } from "astro:content";
import { Markdown } from "@astropub/md";
import { format as formatDate } from "date-fns";
@ -19,15 +19,21 @@ const copyrightedCharacters: Record<string, CollectionEntry<"users">> = {};
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 relatedGames = (await getEntries(props.relatedGames)).filter(
// (game) => !game.data.isDraft,
// );
// const relatedStories = (await getEntries(props.relatedStories)).filter((story) => !story.data.isDraft);
// const relatedGames = (await getEntries(props.relatedGames)).filter((game) => !game.data.isDraft);
const thumbnail =
props.thumbnail &&
(await getImage({ src: props.thumbnail, width: props.thumbnailWidth, height: props.thumbnailHeight }));
---
<BaseLayout pageTitle={props.title}>
<Fragment slot="head">
<meta content={props.title} property="og:title" />
<meta content={props.contentWarning} property="og:description" />
<meta content={Astro.url} property="og:url" />
{thumbnail ? <meta content={thumbnail.src} property="og:image" /> : null}
<meta content="#7DD05A" data-react-helmet="true" name="theme-color" />
</Fragment>
<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"
@ -96,18 +102,20 @@ Object.keys(props.copyrightedCharacters).forEach(async (character) => {
<p>{props.contentWarning}</p>
</div>
</section>
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
{
props.thumbnail && (
<Image
loading="eager"
src={props.thumbnail}
alt={`Cover art for ${props.title}`}
width={props.thumbnailWidth}
height={props.thumbnailHeight}
class="mx-auto my-5 shadow-lg"
/>
)
thumbnail ? (
<Fragment>
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
<img
loading="eager"
src={thumbnail.src}
alt={`Cover art for ${props.title}`}
width={props.thumbnailWidth}
height={props.thumbnailHeight}
class="mx-auto my-5 shadow-lg"
/>
</Fragment>
) : null
}
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
<article id="story" class="pr-1 font-serif">

43
src/layouts/StoryLayout.astro
View file

@ -1,6 +1,6 @@
---
import { Image } from "astro:assets";
import { type CollectionEntry, getEntry, getEntries } from "astro:content";
import { getImage } from "astro:assets";
import { type CollectionEntry, getEntry, getEntries, getCollection } from "astro:content";
import { Markdown } from "@astropub/md";
import { format as formatDate } from "date-fns";
import { enUS as enUSLocale } from "date-fns/locale/en-US";
@ -10,7 +10,6 @@ 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"];
@ -32,6 +31,7 @@ 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 relatedGames = (await getEntries(props.relatedGames)).filter((game) => !game.data.isDraft);
const categorizedTags = Object.fromEntries(
(await getCollection("tag-categories")).flatMap((category) =>
category.data.tags.map((tag) => {
@ -54,12 +54,19 @@ const tags = props.tags.map<[string, string]>((tag) => {
}
return [tagSlug, categorizedTags[tag]!];
});
// const relatedGames = (await getEntries(props.relatedGames)).filter(
// (game) => !game.data.isDraft,
// );
const thumbnail =
props.thumbnail &&
(await getImage({ src: props.thumbnail, width: props.thumbnailWidth, height: props.thumbnailHeight }));
---
<BaseLayout pageTitle={props.title}>
<Fragment slot="head">
<meta content={props.title} property="og:title" />
<meta content={`Word count: ${props.wordCount}. ${props.contentWarning}`} property="og:description" />
<meta content={Astro.url} property="og:url" />
{thumbnail ? <meta content={thumbnail.src} property="og:image" /> : null}
<meta content="#7DD05A" data-react-helmet="true" name="theme-color" />
</Fragment>
<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"
@ -184,18 +191,20 @@ const tags = props.tags.map<[string, string]>((tag) => {
</p>
</div>
</section>
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
{
props.thumbnail && (
<Image
loading="eager"
src={props.thumbnail}
alt={`Cover art for ${props.title}`}
width={props.thumbnailWidth}
height={props.thumbnailHeight}
class="mx-auto my-5 shadow-lg"
/>
)
thumbnail ? (
<Fragment>
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
<img
loading="eager"
src={thumbnail.src}
alt={`Cover art for ${props.title}`}
width={props.thumbnailWidth}
height={props.thumbnailHeight}
class="mx-auto my-5 shadow-lg"
/>
</Fragment>
) : null
}
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
<article id="story" class="pr-1 font-serif">

1
src/pages/games.astro
View file

@ -11,6 +11,7 @@ const games = (await getCollection("games", (game) => !game.data.isDraft)).sort(
---
<GalleryLayout pageTitle="Games">
<meta slot="head-description" content="Bad Manners || A game that I've gone and done." property="og:description" />
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">Games</h1>
<p class="my-4">A game that I've gone and done.</p>
<ul class="my-6 flex flex-wrap justify-center gap-4 text-center md:justify-normal">

1
src/pages/index.astro
View file

@ -3,6 +3,7 @@ import GalleryLayout from "../layouts/GalleryLayout.astro";
---
<GalleryLayout pageTitle="Gallery">
<meta slot="head-description" content="Bad Manners || Welcome to my gallery!" property="og:description" />
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">My gallery</h1>
<p class="my-4">Welcome to my gallery! Use the navigation menu to navigate through my content.</p>
<ul class="list-disc pl-8">

1
src/pages/stories/[page].astro
View file

@ -23,6 +23,7 @@ const totalPages = Math.ceil(page.total / page.size);
---
<GalleryLayout pageTitle="Stories">
<meta slot="head-description" content={`Bad Manners || ${page.total} stories.`} property="og:description" />
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">Stories</h1>
<p class="my-4">The bulk of my content!</p>
<p class="text-center font-light text-stone-950 dark:text-white">

5
src/pages/stories/the-lost-of-the-marshes.astro
View file

@ -17,6 +17,11 @@ const mainChaptersWithSummaries = mainChapters.filter((story) => story.data.summ
---
<GalleryLayout pageTitle={series.data.name}>
<meta
slot="head-description"
content={`Bad Manners || The story of Quince, Nikili, and Suu.`}
property="og:description"
/>
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">{series.data.name}</h1>
<p class="my-4">This is the main hub for the story of Quince, Nikili, and Suu, as well as all bonus content.</p>
<section class="my-2" aria-labelledby="main-chapters">

5
src/pages/tags.astro
View file

@ -86,6 +86,11 @@ if (uncategorizedTagsSet.size > 0) {
---
<GalleryLayout pageTitle={`Tags`}>
<meta
slot="head-description"
content="Bad Manners || Find all content with a specific tag."
property="og:description"
/>
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">All available tags</h1>
<p class="my-4">You can find all content with a specific tag by selecting it below from the appropriate category.</p>
<section class="my-2" aria-labelledby="category-series">

17
src/pages/tags/[slug].astro
View file

@ -42,10 +42,27 @@ type Props = {
};
const { tag, stories, games } = Astro.props;
const count = stories.length + games.length;
let tagDescription: string = "";
if (count == 1) {
if (stories.length == 1) {
tagDescription = `One story tagged with "${tag}".`;
} else if (games.length == 1) {
tagDescription = `One game tagged with "${tag}".`;
}
} else if (stories.length == 0) {
tagDescription = `${games.length} games tagged with "${tag}".`;
} else if (games.length == 0) {
tagDescription = `${stories.length} stories tagged with "${tag}".`;
} else {
tagDescription = `${stories.length == 1 ? "One story" : `${stories.length} stories`} and ${games.length == 1 ? "one game" : `${games.length} games`} tagged with "${tag}".`;
}
---
<GalleryLayout pageTitle={`Works tagged "${tag}"`}>
<meta slot="head-description" content={`Bad Manners || ${tagDescription || tag}`} property="og:description" />
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">Works tagged "{tag}"</h1>
{tagDescription ? <p class="my-4">{tagDescription}</p> : null}
{
stories.length > 0 && (
<section class="my-2" aria-labelledby="content-stories">

1
src/pages/tags/digestion.astro
View file

@ -5,6 +5,7 @@ const tag = "Digestion";
---
<GalleryLayout pageTitle={`Works tagged "${tag}"`}>
<meta slot="head-description" content="No." property="og:description" />
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">Works tagged "{tag}"</h1>
<p class="my-4">No.</p>
</GalleryLayout>