Add summary section to StoryLayout, some examples, and a few drafts directories

src/content/games/drafts/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

src/content/stories/drafts/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

src/content/stories/tiny-accident.md

@@ -4,7 +4,7 @@ pubDate: 2024-03-25
 authors: bad-manners
 wordCount: 3000
 contentWarning: >
-  Contains: Non-fatal oral vore, with unwilling to willing anthro male rat predator, unwilling micro anthro male wolf prey. Also includes implied regurgitation, masturbation, sizeplay, and unexpected micro groping.
+  Contains: Non-fatal oral vore, with unwilling to willing anthro male rat predator, and unwilling micro anthro male wolf prey. Also includes implied regurgitation, masturbation, sizeplay, and unexpected micro groping.
 thumbnail: /src/assets/thumbnails/bm_18_tiny_accident.png
 description: |
   Kolo's day at the airship is nearly over, but a tiny stalker will unwittingly make his evening quite eventful...

src/content/stories/tomo-moku.md

@@ -20,8 +20,6 @@ tags:
   - unwilling prey
   - flash fiction
 summary: |
-  For those curious, here's a summary of the story in English:
-
   Lijan, a red nondescript mammal, makes his way through town to a new 'tomo moku' ("eating place"), expecting it to be a restaurant. They can't find the building among the similar looking ones, and spot a colorful and spooked bird covered in some liquid, who they ask for directions.
 
   The bird shouts stuff erratically, basically telling him not to go there, until a yellow nondescript reptile walks out from a building and spooks them into flying off. They introduce themself as Maku and invite Lijan into the 'tomo moku'.

src/layouts/StoryLayout.astro

@@ -246,6 +246,29 @@ const thumbnail =
           <CopyrightedCharacters copyrightedCharacters={copyrightedCharacters} lang={props.lang} />
         </Prose>
       </section>
+      {
+        props.summary ? (
+          <section id="summary" class="px-2 font-serif" aria-describedby="title-summary">
+            <h2 id="title-summary" class="py-2 font-serif text-xl font-semibold text-stone-800 dark:text-stone-100">
+              {props.lang === "eng" ? "Summary" : props.lang === "tok" ? "lipu tawa tenpo lili" : null}
+            </h2>
+            <details class="mb-6 mt-1 rounded-lg border border-stone-400 bg-stone-50 text-stone-800 dark:border-stone-500 dark:bg-stone-900 dark:text-stone-100">
+              <summary class="rounded-lg bg-stone-200 px-2 py-1 dark:bg-stone-800">
+                {props.lang === "eng"
+                  ? "Click to reveal"
+                  : props.lang === "tok"
+                    ? "Click to reveal summary in English"
+                    : null}
+              </summary>
+              <div class="px-2 py-1">
+                <Prose>
+                  <Markdown of={props.summary} />
+                </Prose>
+              </div>
+            </details>
+          </section>
+        ) : null
+      }
       <div class="pr-3 text-right print:hidden">
         <a href="#top" class="text-link inline-flex items-center underline"
           ><svg class="mr-1 h-6 w-6 fill-current" viewBox="0 0 384 512" aria-hidden="true"

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

@@ -28,11 +28,11 @@ const mainChaptersWithSummaries = mainChapters.filter((story) => story.data.summ
     <details
       class="mx-3 mb-6 mt-1 rounded-lg border border-stone-400 bg-stone-300 dark:border-stone-500 dark:bg-stone-700"
     >
-      <summary class="rounded-lg bg-stone-200 px-2 py-1 dark:bg-stone-800"
-        >Click to reveal spoilers up to {
+      <summary class="rounded-lg bg-stone-200 px-2 py-1 dark:bg-stone-800">
+        Click to reveal spoilers up to {
           mainChaptersWithSummaries[mainChaptersWithSummaries.length - 1].data.title.match(/Chapter \d+\b/)?.[0]
-        }</summary
-      >
+        }
+      </summary>
       <ul class="border-t border-stone-400 px-1 dark:border-stone-500">
         {
           mainChapters