From 794fab71c8c3cf7aa0866e344f7839a708eb71bd Mon Sep 17 00:00:00 2001 From: Leilukin Date: Fri, 9 May 2025 10:11:54 +0800 Subject: [PATCH] Add search page powered by Pagefind --- .github/workflows/hostinger.yml | 2 +- README.md | 5 ++ package.json | 68 ++++++++++--------- src/_includes/layouts/base.vto | 2 +- src/_includes/layouts/main.vto | 5 ++ src/changelogs/logs/2025/2025-05-09.md | 5 ++ src/index.vto | 3 +- src/pages/explore.vto | 6 +- .../explorelinks/archive/archive.11tydata.js | 1 + src/pages/explorelinks/joined.vto | 1 + src/pages/search.vto | 38 +++++++++++ src/pages/sitemap.vto | 1 + src/pages/statements/accessibility.md | 6 +- src/pages/statements/colophon.md | 3 +- 14 files changed, 105 insertions(+), 41 deletions(-) create mode 100644 src/changelogs/logs/2025/2025-05-09.md create mode 100644 src/pages/search.vto diff --git a/.github/workflows/hostinger.yml b/.github/workflows/hostinger.yml index ed20e9e0..41a16e04 100644 --- a/.github/workflows/hostinger.yml +++ b/.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 diff --git a/README.md b/README.md index 111a5b57..b861313d 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index a08e1e63..01a30c07 100644 --- a/package.json +++ b/package.json @@ -1,35 +1,37 @@ { - "name": "leilukin-site", - "description": "Leilukin's personal and hobby website.", - "author": "Leilukin", - "repository": { - "type": "git", - "url": "https://git.32bit.cafe/Leilukin/leilukin-site" - }, - "scripts": { - "start": "bunx @11ty/eleventy --serve --quiet", - "build": "bunx @11ty/eleventy" - }, - "type": "module", - "devDependencies": { - "@types/bun": "^1.2.12" - }, - "dependencies": { - "@11ty/eleventy": "^3.1.0-beta.1", - "@11ty/eleventy-fetch": "^5.0.2", - "@11ty/eleventy-navigation": "^1.0.4", - "@11ty/eleventy-plugin-rss": "^2.0.3", - "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", - "@uncenter/eleventy-plugin-toc": "^1.0.3", - "@zachleat/details-utils": "^2.0.2", - "eleventy-plugin-embed-everything": "^1.21.0", - "eleventy-plugin-vento": "^4.2.1", - "eleventy-plugin-wordcount-extended": "^0.2.1", - "markdown-it-anchor": "^9.2.0", - "markdown-it-attribution": "^0.1.4", - "markdown-it-attrs": "^4.3.1", - "markdown-it-bracketed-spans": "^1.0.1", - "markdown-it-deflist": "^3.0.0", - "markdown-it-footnote": "^4.0.0" - } + "name": "leilukin-site", + "description": "Leilukin's personal and hobby website.", + "author": "Leilukin", + "repository": { + "type": "git", + "url": "https://git.32bit.cafe/Leilukin/leilukin-site" + }, + "scripts": { + "start": "bunx @11ty/eleventy --serve --quiet", + "build": "bunx @11ty/eleventy", + "start-pagefind": "bunx @11ty/eleventy --quiet && bunx -y pagefind --site _site --serve", + "build-pagefind": "bunx @11ty/eleventy --quiet && bunx -y pagefind --site _site" + }, + "type": "module", + "devDependencies": { + "@types/bun": "^1.2.12" + }, + "dependencies": { + "@11ty/eleventy": "^3.1.0-beta.1", + "@11ty/eleventy-fetch": "^5.0.2", + "@11ty/eleventy-navigation": "^1.0.4", + "@11ty/eleventy-plugin-rss": "^2.0.3", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", + "@uncenter/eleventy-plugin-toc": "^1.0.3", + "@zachleat/details-utils": "^2.0.2", + "eleventy-plugin-embed-everything": "^1.21.0", + "eleventy-plugin-vento": "^4.2.1", + "eleventy-plugin-wordcount-extended": "^0.2.1", + "markdown-it-anchor": "^9.2.0", + "markdown-it-attribution": "^0.1.4", + "markdown-it-attrs": "^4.3.1", + "markdown-it-bracketed-spans": "^1.0.1", + "markdown-it-deflist": "^3.0.0", + "markdown-it-footnote": "^4.0.0" + } } diff --git a/src/_includes/layouts/base.vto b/src/_includes/layouts/base.vto index 071ee248..5f86ed51 100644 --- a/src/_includes/layouts/base.vto +++ b/src/_includes/layouts/base.vto @@ -45,7 +45,7 @@
Skip to content
{{ include "partials/hero.vto" }} {{ include "partials/navbar.vto" }} -
+
{{ include "partials/content.vto" }}
{{ include "partials/footer.vto" }} diff --git a/src/_includes/layouts/main.vto b/src/_includes/layouts/main.vto index e0bca868..f3e32376 100644 --- a/src/_includes/layouts/main.vto +++ b/src/_includes/layouts/main.vto @@ -150,6 +150,11 @@ function getTodayEvent() { Explore +
  • + + Search + +
    • {{ /set }} {{ content }} diff --git a/src/changelogs/logs/2025/2025-05-09.md b/src/changelogs/logs/2025/2025-05-09.md new file mode 100644 index 00000000..d651d85f --- /dev/null +++ b/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/). diff --git a/src/index.vto b/src/index.vto index c6a979b2..fe118997 100644 --- a/src/index.vto +++ b/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:

    Hello! You can call me {{ sitemeta.siteAuthor.name }}. Welcome to my website! This site is my own personal hub and corner on the internet.

    -

    You can browse all my contents published on this site through the Archive page, or the Content Topics page. You can use the Explore page or the site map to navigate this website.

    +

    You can browse all my contents published on this site through the Archive page, or the Content Topics page. You can also use the Explore page or the site map to browse my website, or search my website.

    Feel free to drop a message and say hi on my guestbook! You can also contact me by sending me an email. Using plain text email is encouraged.

    diff --git a/src/pages/explore.vto b/src/pages/explore.vto index 706ffed9..002e08fc 100644 --- a/src/pages/explore.vto +++ b/src/pages/explore.vto @@ -7,14 +7,14 @@ eleventyComputed: {{ set explorePages = collections["explore links"] |> eleventyNavigation }}
      -{{ for entry of explorePages }} + {{ for entry of explorePages }}

    • {{ entry.title }}

      {{ entry.data.desc }}

      • -{{ /for }} + {{ /for }}
    -

    You can also navigate this website through the site map.

    +

    You can also navigate this website through the site map, or search this website.

    diff --git a/src/pages/explorelinks/archive/archive.11tydata.js b/src/pages/explorelinks/archive/archive.11tydata.js index 7d80fa80..ce1113b3 100644 --- a/src/pages/explorelinks/archive/archive.11tydata.js +++ b/src/pages/explorelinks/archive/archive.11tydata.js @@ -1,5 +1,6 @@ export default { tags: ["archive"], + excludeFromSearch: true, eleventyComputed:{ eleventyNavigation: { key: (data) => data.title diff --git a/src/pages/explorelinks/joined.vto b/src/pages/explorelinks/joined.vto index b099ddee..0d158abd 100644 --- a/src/pages/explorelinks/joined.vto +++ b/src/pages/explorelinks/joined.vto @@ -3,6 +3,7 @@ title: Joined isContentDivided: true hasTooltips: true toc: true +excludeFromSearch: true eleventyNavigation: order: 9 eleventyComputed: diff --git a/src/pages/search.vto b/src/pages/search.vto new file mode 100644 index 00000000..6f993af3 --- /dev/null +++ b/src/pages/search.vto @@ -0,0 +1,38 @@ +--- +title: Search +eleventyComputed: + desc: Search {{ sitemeta.siteName }}. +--- + + + +

    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 Pagefind. Your search query will not be recorded anywhere.

    +

    Accessibility Note

    +

    Unfortunately, it is a known issue that Pagefind's search field is not properly labelled, which affects screen readers' ability to understand the search field.

    +

    Search This Website

    + + + + + + diff --git a/src/pages/sitemap.vto b/src/pages/sitemap.vto index 10cdb6c9..17176172 100644 --- a/src/pages/sitemap.vto +++ b/src/pages/sitemap.vto @@ -1,6 +1,7 @@ --- title: Site Map eleventyExcludeFromCollections: true +excludeFromSearch: true navigationOptions: listClass: "sitemap" eleventyComputed: diff --git a/src/pages/statements/accessibility.md b/src/pages/statements/accessibility.md index 7700ecb4..ae4fb12a 100644 --- a/src/pages/statements/accessibility.md +++ b/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. diff --git a/src/pages/statements/colophon.md b/src/pages/statements/colophon.md index 57fe350b..c1792d6c 100644 --- a/src/pages/statements/colophon.md +++ b/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.