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

This commit is contained in:
Bad Manners 2024-03-28 23:56:25 -03:00
parent a36191b10a
commit 7ca6f52cc2
12 changed files with 114 additions and 10 deletions

View file

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