Add Pagefind searching

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

View file

@ -9,7 +9,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" />
<meta slot="head-description" property="og:description" content="Bad Manners || A game that I've gone and done." />
<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 items-start justify-center gap-4 text-center md:justify-normal">

View file

@ -42,7 +42,7 @@ const latestItems: LatestItemsEntry[] = [
---
<GalleryLayout pageTitle="Gallery">
<meta slot="head-description" content="Bad Manners || Welcome to my gallery!" property="og:description" />
<meta slot="head-description" property="og:description" content="Bad Manners || Welcome to my gallery!" />
<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">

11
src/pages/search.astro Normal file
View file

@ -0,0 +1,11 @@
---
import SearchComponent from "astro-pagefind/components/Search";
import GalleryLayout from "../layouts/GalleryLayout.astro";
---
<GalleryLayout pageTitle="Search">
<meta slot="head-description" property="og:description" content="Bad Manners || Search" />
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">Search</h1>
<SearchComponent id="search" className="my-4 pagefind-ui" />
</GalleryLayout>

View file

@ -21,7 +21,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" />
<meta slot="head-description" property="og:description" content={`Bad Manners || ${page.total} stories.`} />
<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">

View file

@ -15,16 +15,12 @@ const bonusChapters = stories
const mainChaptersWithSummaries = mainChapters.filter((story) => story.data.summary);
---
<GalleryLayout pageTitle={series.data.name}>
<meta
slot="head-description"
content={`Bad Manners || The story of Quince, Nikili, and Suu.`}
property="og:description"
/>
<GalleryLayout pageTitle={series.data.name} enablePagefind={true}>
<meta slot="head-description" property="og:description" content="Bad Manners || The story of Quince, Nikili, and Suu."/>
<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">
<h2 id="main-chapters" class="p-2 text-xl font-semibold text-stone-800 dark:text-stone-100">Main chapters</h2>
<h2 id="main-chapters" class="p-2 text-xl font-semibold text-stone-800 dark:text-stone-100" data-pagefind-meta="type:series">Main chapters</h2>
<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"
>
@ -99,6 +95,7 @@ const mainChaptersWithSummaries = mainChapters.filter((story) => story.data.summ
class="mx-auto w-full max-w-4xl break-before-page"
src={mapImage}
alt="A geopolitical map for the setting of The Lost of the Marshes"
data-pagefind-meta="image[src],image_alt[alt]"
/>
</section>
</GalleryLayout>

View file

@ -82,11 +82,11 @@ if (uncategorizedTagsSet.size > 0) {
}
---
<GalleryLayout pageTitle={`Tags`}>
<GalleryLayout pageTitle="Tags">
<meta
property="og:description"
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>