feat: Initial search implementation using pagefind.

This commit is contained in:
2025-04-06 10:40:58 -04:00
parent 6457674de7
commit 573e70a8d2
9 changed files with 104 additions and 21 deletions

View File

@@ -32,6 +32,7 @@ RUN npm install -g pnpm@latest-10
COPY . .
RUN pnpm install && pnpm run css-build
RUN npx -y pagefind --site deploy
# ==================================================
# Run Image

View File

@@ -127,6 +127,16 @@ private func generateHeader(_ pageTitle: String, _ extraHeader: NodeConvertible)
link(href: "/static/style.css", rel: "stylesheet")
link(href: "/articles/feed.xml", rel: "alternate", title: SiteMetadata.name, type: "application/rss+xml")
extraHeader
script(src: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js")
// script(src: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js")
//
Node.raw("""
<script src="/pagefind/pagefind-ui.js"></script>
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script>
window.addEventListener('DOMContentLoaded', (event) => {
new PagefindUI({ element: "#search", showSubResults: true });
});
</script>
""")
}
}

View File

@@ -40,19 +40,7 @@ func generateHeader(
meta(content: "1014", name: "og:image:width"),
meta(content: "530", name: "og:image:height"),
script(crossorigin: "anonymous", src: "https://kit.fontawesome.com/f209982030.js"),
Node.raw("""
<script>
MathJax = {
tex: {
inlineMath: [['$', '$']]
},
svg: {
fontCache: 'global'
}
};
</script>
"""),
script(defer: true, src: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js")
script(src: "https://cdn.jsdelivr.net/npm/minisearch@7.1.2/dist/umd/index.min.js")
])
}
}

View File

@@ -105,7 +105,10 @@ func renderArticle(context: ItemRenderingContext<ArticleMetadata>) -> Node {
div {
renderArticleInfo(context.item)
}
Node.raw(context.item.body)
// Only index the body of the articles for search.
div(customAttributes: ["data-pagefind-body": ""]) {
Node.raw(context.item.body)
}
}
div(class: "border-t border-light pt-8 mt-16") {

View File

@@ -63,16 +63,16 @@ func renderYear<T>(context: PartitionedRenderingContext<T, ArticleMetadata>) ->
baseRenderArticles(context.items, canocicalURL: "/articles/\(context.key)/", title: "Articles in \(context.key)")
}
private struct SearchData: Encodable, Identifiable {
let id: String
private struct SearchData: Encodable {
let url: String
let title: String
let content: String
let body: String
init(article: Item<ArticleMetadata>) throws {
self.id = article.url
self.url = article.url
self.title = article.title
let rawContent: String = try article.absoluteSource.read()
self.content = Self.parse(rawContent)
self.body = Self.parse(rawContent)
}
/// Grabs the metadata (wrapped within `---`), the first title, and the body of the document.

View File

@@ -27,6 +27,7 @@ func renderPage(context: ItemRenderingContext<PageMetadata>) -> Node {
func renderHome(body: String) -> Node {
div {
div(class: "font-avenir", id: "search") {}
div(class: "my-24 uppercase font-avenir text-[40px] leading-[1.25] font-thin text-center [&>h1>strong]:font-bold") {
Node.raw(body)
}

24
content/static/main.js Normal file
View File

@@ -0,0 +1,24 @@
const documents = null;
var loadDocuments = function () {
fetch("/static/search.json")
.then((response) => {
if (!response.ok) {
throw new Error("Failed to load search index.");
}
return response.json();
})
.then((response) => (this.documents = response))
.catch((error) => console.error(error));
};
let miniSearch = new MiniSearch({
fields: ["title", "body"],
storeFields: ["title", "url"],
});
loadDocuments();
console.log(documents);
miniSearch.addAll(documents);

View File

@@ -16,6 +16,7 @@
"tailwindcss": "^4.0.8"
},
"dependencies": {
"@tailwindcss/cli": "^4.0.8"
"@tailwindcss/cli": "^4.0.8",
"pagefind": "^1.3.0"
}
}

55
pnpm-lock.yaml generated
View File

@@ -11,6 +11,9 @@ importers:
'@tailwindcss/cli':
specifier: ^4.0.8
version: 4.1.1
pagefind:
specifier: ^1.3.0
version: 1.3.0
devDependencies:
tailwindcss:
specifier: ^4.0.8
@@ -18,6 +21,31 @@ importers:
packages:
'@pagefind/darwin-arm64@1.3.0':
resolution: {integrity: sha512-365BEGl6ChOsauRjyVpBjXybflXAOvoMROw3TucAROHIcdBvXk9/2AmEvGFU0r75+vdQI4LJdJdpH4Y6Yqaj4A==}
cpu: [arm64]
os: [darwin]
'@pagefind/darwin-x64@1.3.0':
resolution: {integrity: sha512-zlGHA23uuXmS8z3XxEGmbHpWDxXfPZ47QS06tGUq0HDcZjXjXHeLG+cboOy828QIV5FXsm9MjfkP5e4ZNbOkow==}
cpu: [x64]
os: [darwin]
'@pagefind/linux-arm64@1.3.0':
resolution: {integrity: sha512-8lsxNAiBRUk72JvetSBXs4WRpYrQrVJXjlRRnOL6UCdBN9Nlsz0t7hWstRk36+JqHpGWOKYiuHLzGYqYAqoOnQ==}
cpu: [arm64]
os: [linux]
'@pagefind/linux-x64@1.3.0':
resolution: {integrity: sha512-hAvqdPJv7A20Ucb6FQGE6jhjqy+vZ6pf+s2tFMNtMBG+fzcdc91uTw7aP/1Vo5plD0dAOHwdxfkyw0ugal4kcQ==}
cpu: [x64]
os: [linux]
'@pagefind/windows-x64@1.3.0':
resolution: {integrity: sha512-BR1bIRWOMqkf8IoU576YDhij1Wd/Zf2kX/kCI0b2qzCKC8wcc2GQJaaRMCpzvCCrmliO4vtJ6RITp/AnoYUUmQ==}
cpu: [x64]
os: [win32]
'@parcel/watcher-android-arm64@2.5.1':
resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
engines: {node: '>= 10.0.0'}
@@ -292,6 +320,10 @@ packages:
node-addon-api@7.1.1:
resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
pagefind@1.3.0:
resolution: {integrity: sha512-8KPLGT5g9s+olKMRTU9LFekLizkVIu9tes90O1/aigJ0T5LmyPqTzGJrETnSw3meSYg58YH7JTzhTTW/3z6VAw==}
hasBin: true
picocolors@1.1.1:
resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
@@ -312,6 +344,21 @@ packages:
snapshots:
'@pagefind/darwin-arm64@1.3.0':
optional: true
'@pagefind/darwin-x64@1.3.0':
optional: true
'@pagefind/linux-arm64@1.3.0':
optional: true
'@pagefind/linux-x64@1.3.0':
optional: true
'@pagefind/windows-x64@1.3.0':
optional: true
'@parcel/watcher-android-arm64@2.5.1':
optional: true
@@ -519,6 +566,14 @@ snapshots:
node-addon-api@7.1.1: {}
pagefind@1.3.0:
optionalDependencies:
'@pagefind/darwin-arm64': 1.3.0
'@pagefind/darwin-x64': 1.3.0
'@pagefind/linux-arm64': 1.3.0
'@pagefind/linux-x64': 1.3.0
'@pagefind/windows-x64': 1.3.0
picocolors@1.1.1: {}
picomatch@2.3.1: {}