Add search page powered by Pagefind
This commit is contained in:
parent
ca5a4e4e7e
commit
794fab71c8
2
.github/workflows/hostinger.yml
vendored
2
.github/workflows/hostinger.yml
vendored
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
68
package.json
68
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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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" }}
|
||||
|
||||
@ -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 }}
|
||||
|
||||
5
src/changelogs/logs/2025/2025-05-09.md
Normal file
5
src/changelogs/logs/2025/2025-05-09.md
Normal file
@ -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/).
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export default {
|
||||
tags: ["archive"],
|
||||
excludeFromSearch: true,
|
||||
eleventyComputed:{
|
||||
eleventyNavigation: {
|
||||
key: (data) => data.title
|
||||
|
||||
@ -3,6 +3,7 @@ title: Joined
|
||||
isContentDivided: true
|
||||
hasTooltips: true
|
||||
toc: true
|
||||
excludeFromSearch: true
|
||||
eleventyNavigation:
|
||||
order: 9
|
||||
eleventyComputed:
|
||||
|
||||
38
src/pages/search.vto
Normal file
38
src/pages/search.vto
Normal file
@ -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>
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Site Map
|
||||
eleventyExcludeFromCollections: true
|
||||
excludeFromSearch: true
|
||||
navigationOptions:
|
||||
listClass: "sitemap"
|
||||
eleventyComputed:
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user