Add search page powered by Pagefind

.github/workflows/hostinger.yml

@@ -22,7 +22,7 @@ jobs:
         run: bun install
 
       - name: Build
-        run: bun run build
+        run: bun run build-pagefind
 
       - name: SSH Deploy to Hostinger
         uses: easingthemes/ssh-deploy@main

README.md

@@ -16,7 +16,12 @@ Recommended JavaScript runtime: [Bun](https://bun.sh).
     bun install
     ```
 1. Run the project
+    Option A: Run without the [Pagefind](https://pagefind.app/) search library.
     ```
     bun start
     ```
+    Option B: Run with Pagefind.
+    ```
+    bun start-pagefind
+    ```
 1. Open http://localhost:8080/ in your browser

package.json

@@ -1,35 +1,37 @@
 {
-  "name": "leilukin-site",
+    "name": "leilukin-site",
-  "description": "Leilukin's personal and hobby website.",
+    "description": "Leilukin's personal and hobby website.",
-  "author": "Leilukin",
+    "author": "Leilukin",
-  "repository": {
+    "repository": {
-    "type": "git",
+        "type": "git",
-    "url": "https://git.32bit.cafe/Leilukin/leilukin-site"
+        "url": "https://git.32bit.cafe/Leilukin/leilukin-site"
-  },
+    },
-  "scripts": {
+    "scripts": {
-    "start": "bunx @11ty/eleventy --serve --quiet",
+        "start": "bunx @11ty/eleventy --serve --quiet",
-    "build": "bunx @11ty/eleventy"
+        "build": "bunx @11ty/eleventy",
-  },
+        "start-pagefind": "bunx @11ty/eleventy --quiet && bunx -y pagefind --site _site --serve",
-  "type": "module",
+        "build-pagefind": "bunx @11ty/eleventy --quiet && bunx -y pagefind --site _site"
-  "devDependencies": {
+    },
-    "@types/bun": "^1.2.12"
+    "type": "module",
-  },
+    "devDependencies": {
-  "dependencies": {
+        "@types/bun": "^1.2.12"
-    "@11ty/eleventy": "^3.1.0-beta.1",
+    },
-    "@11ty/eleventy-fetch": "^5.0.2",
+    "dependencies": {
-    "@11ty/eleventy-navigation": "^1.0.4",
+        "@11ty/eleventy": "^3.1.0-beta.1",
-    "@11ty/eleventy-plugin-rss": "^2.0.3",
+        "@11ty/eleventy-fetch": "^5.0.2",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+        "@11ty/eleventy-navigation": "^1.0.4",
-    "@uncenter/eleventy-plugin-toc": "^1.0.3",
+        "@11ty/eleventy-plugin-rss": "^2.0.3",
-    "@zachleat/details-utils": "^2.0.2",
+        "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
-    "eleventy-plugin-embed-everything": "^1.21.0",
+        "@uncenter/eleventy-plugin-toc": "^1.0.3",
-    "eleventy-plugin-vento": "^4.2.1",
+        "@zachleat/details-utils": "^2.0.2",
-    "eleventy-plugin-wordcount-extended": "^0.2.1",
+        "eleventy-plugin-embed-everything": "^1.21.0",
-    "markdown-it-anchor": "^9.2.0",
+        "eleventy-plugin-vento": "^4.2.1",
-    "markdown-it-attribution": "^0.1.4",
+        "eleventy-plugin-wordcount-extended": "^0.2.1",
-    "markdown-it-attrs": "^4.3.1",
+        "markdown-it-anchor": "^9.2.0",
-    "markdown-it-bracketed-spans": "^1.0.1",
+        "markdown-it-attribution": "^0.1.4",
-    "markdown-it-deflist": "^3.0.0",
+        "markdown-it-attrs": "^4.3.1",
-    "markdown-it-footnote": "^4.0.0"
+        "markdown-it-bracketed-spans": "^1.0.1",
-  }
+        "markdown-it-deflist": "^3.0.0",
+        "markdown-it-footnote": "^4.0.0"
+    }
 }

src/_includes/layouts/base.vto

@@ -45,7 +45,7 @@
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
         {{ include "partials/hero.vto" }}
         {{ include "partials/navbar.vto" }}
-        <main id="content">
+        <main id="content" {{ if !excludeFromSearch }} data-pagefind-body{{ /if }}>
             {{ include "partials/content.vto" }}
         </main>
         {{ include "partials/footer.vto" }}

src/_includes/layouts/main.vto

@@ -150,6 +150,11 @@ function getTodayEvent() {
     <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>Explore
     </a>
 </li>
+<li>
+    <a {{ if currentUrl.includes("/search") }} aria-current="page"{{ /if }} href="/search/">
+    <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>Search
+    </a>
+</li>
 {{ /set }}
 
 {{ content }}

src/changelogs/logs/2025/2025-05-09.md

@@ -0,0 +1,5 @@
+---
+date: 2025-05-09T10:04:11+0800
+---
+
+* Add a [Search page](/search) powered by the static search library [Pagefind](https://pagefind.app/).

src/index.vto

@@ -5,6 +5,7 @@ metadata:
     title: Home
 isContentDivided: true
 hasTooltips: true
+excludeFromSearch: true
 eleventyNavigation:
     key: Home
     order: 1
@@ -17,7 +18,7 @@ eleventyComputed:
 <section class="content__section">
     <p>Hello! You can call me {{ sitemeta.siteAuthor.name }}. Welcome to my website! This site is my own personal hub and corner on the internet.</p>
 
-    <p>You can browse all my contents published on this site through the <a href="/archive">Archive</a> page, or the <a href="/topics">Content Topics</a> page. You can use the <a href="/explore">Explore page</a> or the <a href="/sitemap">site map</a> to navigate this website.</p>
+    <p>You can browse all my contents published on this site through the <a href="/archive">Archive</a> page, or the <a href="/topics">Content Topics</a> page. You can also use the <a href="/explore">Explore page</a> or the <a href="/sitemap">site map</a> to browse my website, or <a href="/search">search my website</a>.</p>
 
     <p>Feel free to drop a message and say hi on <a href="/guestbook">my guestbook</a>! You can also contact me by <a rel="nofollow, noindex" href="{{ sitemeta.siteAuthor.emailDecoyUrl }}">sending me an email</a>. Using <a href="https://useplaintext.email/">plain text email</a> is encouraged.</p>
 

src/pages/explore.vto

@@ -7,14 +7,14 @@ eleventyComputed:
 {{ set explorePages = collections["explore links"] |> eleventyNavigation }}
 
 <ul>
-{{ for entry of explorePages }}
+    {{ for entry of explorePages }}
     <li>
         <p class="item-list__title">
             <a href="{{ entry.url }}">{{ entry.title }}</a>
         </p>
         <p>{{ entry.data.desc }}</p>
     </li>
-{{ /for }}
+    {{ /for }}
 </ul>
 
-<p>You can also navigate this website through the <a href="/sitemap/">site map</a>.</p>
+<p>You can also navigate this website through the <a href="/sitemap/">site map</a>, or <a href="/search/">search this website</a>.</p>

src/pages/explorelinks/archive/archive.11tydata.js

@@ -1,5 +1,6 @@
 export default {
     tags: ["archive"],
+    excludeFromSearch: true,
     eleventyComputed:{
         eleventyNavigation: {
             key: (data) => data.title

src/pages/explorelinks/joined.vto

@@ -3,6 +3,7 @@ title: Joined
 isContentDivided: true
 hasTooltips: true
 toc: true
+excludeFromSearch: true
 eleventyNavigation:
     order: 9
 eleventyComputed:

src/pages/search.vto

@@ -0,0 +1,38 @@
+---
+title: Search
+eleventyComputed:
+    desc: Search {{ sitemeta.siteName }}.
+---
+<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+<script src="/pagefind/pagefind-ui.js"></script>
+
+<p>Looking for something on my website? If you have JavaScript enabled, you can use the search field below, which is powered by the static search library <a href="https://pagefind.app/">Pagefind</a>. Your search query will not be recorded anywhere.</p>
+<h2>Accessibility Note</h2>
+<p>Unfortunately, it is a <a href="https://github.com/CloudCannon/pagefind/issues/158">known issue</a> that Pagefind's search field is not properly labelled, which affects screen readers' ability to understand the search field.</p>
+<h2>Search This Website</h2>
+<div id="search"></div>
+<script>
+    window.addEventListener('DOMContentLoaded', (event) => {
+        new PagefindUI({ element: "#search", showSubResults: true });
+    });
+</script>
+
+<noscript>
+    <p>Looks like you have JavaScript disabled. This search field requires JavaScript to function.</p>
+</noscript>
+
+<style>
+:root {
+    --pagefind-ui-scale: 1;
+    --pagefind-ui-font: var(--ff-default);
+    --pagefind-ui-primary: var(--clr-body-text);
+    --pagefind-ui-text: var(--clr-body-text);
+    --pagefind-ui-background: var(--clr-quote-bg);
+}
+.pagefind-ui__result-title.svelte-4xnkmf .pagefind-ui__result-link.svelte-4xnkmf {
+    color: var(--clr-link);
+}
+.pagefind-ui__search-input.svelte-e9gkc3::placeholder {
+    opacity:.6;
+}
+</style>

src/pages/sitemap.vto

@@ -1,6 +1,7 @@
 ---
 title: Site Map
 eleventyExcludeFromCollections: true
+excludeFromSearch: true
 navigationOptions:
     listClass: "sitemap"
 eleventyComputed:

src/pages/statements/accessibility.md

@@ -1,7 +1,7 @@
 ---
 title: Accessibility
 keyword: accessibility statement
-updated: 2025-02-20T21:13:48+0800
+updated: 2025-05-09T10:05:02+0800
 eleventyNavigation:
     order: 15
 ---
@@ -38,6 +38,10 @@ I use the following tools to test my site for accessibility:
 
 In addition, I test the accessibility of my website manually by navigating with keyboard alone.
 
+## Known Issues
+
+The website's [Search page](/search/) includes a search field that is powered by [Pagefind](https://pagefind.app/), which has a [known issue](https://github.com/CloudCannon/pagefind/issues/158) of its search field input not being properly labelled, which affects screen readers' ability to understand the search field.
+
 ## Feedback
 
 Feedback from disabled and neurodivergent people are welcome. You can [contact me via email](mailto:{{ sitemeta.siteAuthor.emailEncoded | safe }}) for feedbacks and suggestions for improving the accessibility of this site.

src/pages/statements/colophon.md

@@ -1,7 +1,7 @@
 ---
 title: Colophon
 keyword: colophon page
-updated: 2025-05-08T21:55:54+0800
+updated: 2025-05-09T09:51:16+0800
 toc: true
 eleventyNavigation:
     order: 16
@@ -82,5 +82,6 @@ Due to this website being a static site, JavaScript is used to create dynamic an
 * [Website Carbon Badge](https://www.websitecarbon.com/badge/), which is placed on the home page, uses JavaScript to calculate the carbon footprint of this website.
 * [Joined page](/joined) includes webring widgets that use JavaScript.
 * [Guestbook](/guestbook) uses JavaScript to render a form, send form data to my private Discord channel via Discord webhook, and fetch data from Google Sheets to display messages on the web page (guestbook code by [Vera Konigin](https://groundedwren.neocities.org/pages/controls/guestbookDemo)).
+* The search form on the [Search page](/search) is powered by [Pagefind](https://pagefind.app/), a static search library in JavaScript.
 
 You can still access most of the content of this site with JavaScript disabled, but the above components will not work as intended.