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

Add Pagefind searching

Browse source
This commit is contained in:
Bad Manners 2024-04-03 20:06:21 -03:00
parent 568b7709ec
commit 877c02ccfc
14 changed files with 828 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/layouts/GalleryLayout.astro
View file

@ -6,19 +6,21 @@ import logoBM from "../assets/images/logo_bm.png";
type Props = {
pageTitle?: string;
enablePagefind?: boolean;
};
const { pageTitle } = Astro.props;
const { pageTitle, enablePagefind } = Astro.props;
const logo = await getImage({ src: logoBM, width: 192 });
---
<BaseLayout pageTitle={pageTitle}>
<Fragment slot="head">
<meta content={pageTitle || "Bad Manners"} property="og:title" />
<meta property="og:title" content={pageTitle || "Bad Manners"} />
<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" />
<meta property="og:url" content={Astro.url} />
<meta property="og:image" content={logo.src} />
<meta property="og:image:alt" content="Logo for Bad Manners" />
<meta name="theme-color" content="#7DD05A" data-react-helmet="true" />
</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"
@ -68,7 +70,7 @@ const logo = await getImage({ src: logoBM, width: 192 });
</button>
</div>
</div>
<main class="ml-0 max-w-6xl px-2 pb-12 pt-4 md:ml-60 md:px-4 print:pb-0">
<main class="ml-0 max-w-6xl px-2 pb-12 pt-4 md:ml-60 md:px-4 print:pb-0" data-pagefind-body={enablePagefind ? "" : undefined}>
<slot />
</main>
</div>

18
src/layouts/GameLayout.astro
View file

@ -58,11 +58,14 @@ const thumbnail =
<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" />
<meta property="og:title" content={props.title} data-pagefind-meta="title[content]" />
<meta property="og:description" content={props.contentWarning} />
<meta property="og:url" content={Astro.url} data-pagefind-meta="url[content]" />
{thumbnail ? <Fragment>
<meta content={thumbnail.src} property="og:image" data-pagefind-meta="image[content]" />
<meta property="og:image:alt" content={`Cover art for ${props.title}`} data-pagefind-meta="image_alt[content]" />
</Fragment> : null}
<meta name="theme-color" content="#7DD05A" data-react-helmet="true" />
</Fragment>
<div
id="top"
@ -118,6 +121,8 @@ const thumbnail =
</div>
<main
class="mx-auto max-w-3xl rounded-lg bg-stone-50 px-2 pb-4 pt-1 shadow-sm dark:bg-stone-900 print:max-w-full print:bg-none print:shadow-none"
data-pagefind-body
data-pagefind-meta="type:game"
>
<h1 id="game-title" class="px-2 pt-2 font-serif text-3xl font-semibold text-stone-800 dark:text-stone-100">
{props.title}
@ -151,6 +156,7 @@ const thumbnail =
width={props.thumbnailWidth}
height={props.thumbnailHeight}
class="mx-auto my-5 shadow-lg"
data-pagefind-meta="image[src],image_alt[alt]"
/>
</Fragment>
) : null
@ -180,6 +186,8 @@ const thumbnail =
day: "numeric",
year: "numeric",
})}
data-pagefind-index-attrs="aria-description"
data-pagefind-meta={`date:${props.pubDate.toISOString().slice(undefined, 10)}`}
>
{t(props.lang, "story/publish_date", props.pubDate.toISOString().slice(undefined, 10))}
</p>

19
src/layouts/StoryLayout.astro
View file

@ -68,11 +68,14 @@ const thumbnail =
<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" />
<meta property="og:title" content={props.title} data-pagefind-meta="title[content]" />
<meta property="og:description" content={`Word count: ${props.wordCount}. ${props.contentWarning}`} />
<meta property="og:url" content={Astro.url} data-pagefind-meta="url[content]" />
{thumbnail ? <Fragment>
<meta content={thumbnail.src} property="og:image" data-pagefind-meta="image[content]" />
<meta property="og:image:alt" content={`Cover art for ${props.shortTitle || props.title}`} data-pagefind-meta="image_alt[content]" />
</Fragment> : null}
<meta name="theme-color" content="#7DD05A" data-react-helmet="true" />
</Fragment>
<div
id="top"
@ -130,6 +133,8 @@ const thumbnail =
</div>
<main
class="mx-auto max-w-3xl rounded-lg bg-stone-50 px-2 pb-4 pt-1 shadow-sm dark:bg-stone-900 print:max-w-full print:bg-none print:shadow-none"
data-pagefind-body
data-pagefind-meta="type:story"
>
{
prev || next ? (
@ -210,7 +215,7 @@ const thumbnail =
<img
loading="eager"
src={thumbnail.src}
alt={`Cover art for ${props.title}`}
alt={`Cover art for ${props.shortTitle || props.title}`}
width={props.thumbnailWidth}
height={props.thumbnailHeight}
class="mx-auto my-5 shadow-lg"
@ -243,6 +248,8 @@ const thumbnail =
day: "numeric",
year: "numeric",
})}
data-pagefind-index-attrs="aria-description"
data-pagefind-meta={`date:${props.pubDate.toISOString().slice(undefined, 10)}`}
>
{t(props.lang, "story/publish_date", props.pubDate.toISOString().slice(undefined, 10))}
</p>