Add support for embeds (i.e. Discord)

src/pages/games.astro

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

src/pages/index.astro

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

src/pages/stories/[page].astro

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

src/pages/stories/the-lost-of-the-marshes.astro

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

src/pages/tags.astro

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

src/pages/tags/[slug].astro

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

src/pages/tags/digestion.astro

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