From fb976a0665e69cb16c3e6cb5bb759bbe93375b1a Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 18 Mar 2024 15:44:55 -0700 Subject: [PATCH] chore: post --- config/collections/index.js | 58 ++++---- src/assets/scripts/search.js | 2 +- .../2024/lightweight-search-in-eleventy.md | 139 ++++++++++++++++++ 3 files changed, 169 insertions(+), 30 deletions(-) create mode 100644 src/posts/2024/lightweight-search-in-eleventy.md diff --git a/config/collections/index.js b/config/collections/index.js index 1bcc13c3..a0b1fb8b 100644 --- a/config/collections/index.js +++ b/config/collections/index.js @@ -3,37 +3,37 @@ import tagAliases from '../data/tag-aliases.js' import { makeYearStats, processPostFile } from './utils.js' export const searchIndex = (collection) => { - const searchIndex = [] - let id = 0 - const collectionData = collection.getAll()[0] - const posts = collectionData.data.collections.posts - const links = collectionData.data.links - if (posts) { - posts.forEach((post) => { - const url = post.url.includes('http') ? post.url : `https://coryd.dev${post.url}` - searchIndex.push({ - id, - url, - title: `📝: ${post.data.title}`, - text: post.data.description, - tags: post.data.tags.filter((tag) => tag !== 'posts'), - }) - id++; + const searchIndex = [] + let id = 0 + const collectionData = collection.getAll()[0] + const posts = collectionData.data.collections.posts + const links = collectionData.data.links + if (posts) { + posts.forEach((post) => { + const url = post.url.includes('http') ? post.url : `https://coryd.dev${post.url}` + searchIndex.push({ + id, + url, + title: `📝: ${post.data.title}`, + text: post.data.description, + tags: post.data.tags.filter((tag) => tag !== 'posts'), }) - } - if (links) { - links.forEach((link) => { - searchIndex.push({ - id, - url: link.url, - title: `🔗: ${link.title}`, - text: link.summary, - tags: link.tags, - }) - id++; + id++; + }) + } + if (links) { + links.forEach((link) => { + searchIndex.push({ + id, + url: link.url, + title: `🔗: ${link.title}`, + text: link.summary, + tags: link.tags, }) - } - return searchIndex + id++; + }) + } + return searchIndex } export const tagList = (collection) => { diff --git a/src/assets/scripts/search.js b/src/assets/scripts/search.js index e5d64fce..c575f821 100644 --- a/src/assets/scripts/search.js +++ b/src/assets/scripts/search.js @@ -8,7 +8,7 @@ const $fallback = document.querySelector('.search__form--fallback') const $results = document.querySelector('.search__results') - // remove no-js fallbacks + // remove noscript fallbacks $form.removeAttribute('action') $form.removeAttribute('method') $fallback.remove() diff --git a/src/posts/2024/lightweight-search-in-eleventy.md b/src/posts/2024/lightweight-search-in-eleventy.md new file mode 100644 index 00000000..a50ee93a --- /dev/null +++ b/src/posts/2024/lightweight-search-in-eleventy.md @@ -0,0 +1,139 @@ +--- +date: '2024-03-18T15:30-08:00' +title: 'Lightweight search in Eleventy' +description: "I've been using Pagefind for my site search for a while now and would readily recommend it, but I wanted to throw together something a bit lighter weight and customizable." +tags: ['development', 'Eleventy', 'javascript'] +--- +I've been using [Pagefind](https://pagefind.app) for my site search for a while now and would readily recommend it, but I wanted to throw together something a bit lighter weight and customizable. + +Enter [minisearch](https://www.npmjs.com/package/minisearch): a tiny full-text search library written in JavaScript. To populate it, I needed to generate an index (which Pagefind was previously handling for me): + +```javascript +export const searchIndex = (collection) => { + const searchIndex = [] + let id = 0 + const collectionData = collection.getAll()[0] + const posts = collectionData.data.collections.posts + const links = collectionData.data.links + if (posts) { + posts.forEach((post) => { + const url = post.url.includes('http') ? post.url : `https://coryd.dev${post.url}` + searchIndex.push({ + id, + url, + title: `📝: ${post.data.title}`, + text: post.data.description, + tags: post.data.tags.filter((tag) => tag !== 'posts'), + }) + id++; + }) + } + if (links) { + links.forEach((link) => { + searchIndex.push({ + id, + url: link.url, + title: `🔗: ${link.title}`, + text: link.summary, + tags: link.tags, + }) + id++; + }) + } + return searchIndex +} +``` + +I've created a custom collection, above, that adds both post and link data (from [my links page](https://coryd.dev/links)) to a `searchIndex` array using a uniform object shape for each and the same emoji I use to distinguish the content types when [POSSE](https://indieweb.org/POSSE)-ing them out from my site. This allows both my posts and shared links to be searched which, previously, was not the case. + +Next, this is exposed as `JSON` at `/api/search` via a liquid template: + +{% raw %} +```liquid +--- +layout: null +eleventyExcludeFromCollections: true +permalink: /api/search +--- +{{ collections.searchIndex | json }} +``` +{% endraw %} + +Next, we need to copy the `minisearch` library JavaScript into our site output in `.eleventy.js`: + +```javascript +eleventyConfig.addPassthroughCopy({ + 'node_modules/minisearch/dist/umd/index.js': 'assets/scripts/components/minisearch.js', +}) +``` + +From there, we write some basic event handling to leverage the library and pass in user input: + +```javascipt +(() => { + const miniSearch = new MiniSearch({ + fields: ['title', 'text', 'tags'] + }) + + const $form = document.querySelector('.search__form') + const $input = document.querySelector('.search__form--input') + const $fallback = document.querySelector('.search__form--fallback') + const $results = document.querySelector('.search__results') + + // remove noscript fallbacks + $form.removeAttribute('action') + $form.removeAttribute('method') + $fallback.remove() + + let resultsById = {} + + // fetch index + const results = fetch('/api/search').then(response => response.json()) + .then((results) => { + resultsById = results.reduce((byId, result) => { + byId[result.id] = result + return byId + }, {}) + return miniSearch.addAll(results) + }) + + $input.addEventListener('input', (event) => { + const query = $input.value + const results = (query.length > 1) ? getSearchResults(query) : [] + if (query === '') renderSearchResults([]) + renderSearchResults(results) + }) + + const getSearchResults = (query) => miniSearch.search(query, { prefix: true, fuzzy: 0.2, boost: { title: 2 } }).map(({ id }) => resultsById[id]) + const renderSearchResults = (results) => { + $results.innerHTML = results.map(({ title, url }) => { + return "`<li class="search__results--result"><a href="${url}">${title}</a></li>`" + }).join('\n') + + if (results.length > 0) { + $results.classList.remove('hidden') + } else { + $results.classList.add('hidden') + } + } +})(); +``` + +And, *finally*, I've added this all to my `search.html` page: + +{% raw %} +```liquid + +{% capture js %} +{% render "../assets/scripts/search.js" %} +{% endcapture %} + +
+ + +
+ +``` +{% endraw %} + +It should also be noted that this JavaScript amounts to an *enhancement* — if the user does have JavaScript enabled, this all runs as explained and removes the fallback field and form action and method attributes. If it doesn't, searches of my site will be surfaced using [DuckDuckGo](https://duckduckgo.com). \ No newline at end of file