feat: rewrite search

.eleventy.js

@@ -11,7 +11,7 @@ import filters from './config/filters/index.js'
 import { slugifyString } from './config/utils/index.js'
 import { svgToJpeg } from './config/events/index.js'
 import { minifyJsComponents } from './config/events/index.js'
-import { tagList, tagMap, postStats, tagsSortedByCount } from './config/collections/index.js'
+import { searchIndex, tagList, tagMap, postStats, tagsSortedByCount } from './config/collections/index.js'
 import { img } from './config/shortcodes/index.js'
 
 import { execSync } from 'child_process'
@@ -56,7 +56,7 @@ export default async function (eleventyConfig) {
     'node_modules/@daviddarnes/mastodon-post/mastodon-post.js': 'assets/scripts/components/mastodon-post.js'
   })
   eleventyConfig.addPassthroughCopy({
-    'node_modules/@zachleat/pagefind-search/pagefind-search.js': 'assets/scripts/components/pagefind-search.js',
+    'node_modules/minisearch/dist/umd/index.js': 'assets/scripts/components/minisearch.js',
   })
   eleventyConfig.addPassthroughCopy({
     'node_modules/@cdransf/api-text/api-text.js': 'assets/scripts/components/api-text.js',
@@ -82,6 +82,7 @@ export default async function (eleventyConfig) {
   })
 
   // collections
+  eleventyConfig.addCollection('searchIndex', searchIndex)
   eleventyConfig.addCollection('tagList', tagList)
   eleventyConfig.addCollection('tagMap', tagMap)
   eleventyConfig.addCollection('postStats', postStats)
@@ -137,9 +138,6 @@ export default async function (eleventyConfig) {
   // events
   eleventyConfig.on('afterBuild', svgToJpeg)
   eleventyConfig.on('afterBuild', minifyJsComponents)
-  eleventyConfig.on('eleventy.after', () => {
-    execSync(`npx pagefind --site _site --glob "**/*.html"`, { encoding: 'utf-8' })
-  })
 
   return {
     passthroughFileCopy: true,

config/collections/index.js

@@ -2,6 +2,40 @@ import { DateTime } from 'luxon'
 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++;
+      })
+    }
+    if (links) {
+      links.forEach((link) => {
+        searchIndex.push({
+          id,
+          url: link.url,
+          title: `🔗: ${link.title}`,
+          text: link.summary,
+          tags: link.tags,
+        })
+        id++;
+      })
+    }
+    return searchIndex
+}
+
 export const tagList = (collection) => {
   const tagsSet = new Set()
   collection.getAll().forEach((item) => {
@@ -15,9 +49,11 @@ export const tagList = (collection) => {
 
 export const tagMap = (collection) => {
   const tags = {}
-  collection.getAll().forEach((item) => {
-    if (item.data.collections.posts) {
-      item.data.collections.posts.forEach((post) => {
+  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}`
       const tagString = [...new Set(post.data.tags.map((tag) => tagAliases[tag.toLowerCase()]))]
         .join(' ')
@@ -25,8 +61,8 @@ export const tagMap = (collection) => {
       if (tagString) tags[url] = tagString.replace(/\s+/g,' ')
     })
   }
-    if (item.data.links) {
-      item.data.links.forEach((link) => {
+  if (links) {
+    links.forEach((link) => {
       const tagString = link['tags']
         .map((tag) => tagAliases[tag.toLowerCase()])
         .join(' ')
@@ -34,26 +70,24 @@ export const tagMap = (collection) => {
       if (tagString) tags[link.url] = tagString.replace(/\s+/g,' ')
     })
   }
-  })
   return tags
 }
 
-export const tagsSortedByCount = (collectionApi) => {
+export const tagsSortedByCount = (collection) => {
   const tagStats = {};
-  const posts = collectionApi.getFilteredByGlob('src/posts/**/*.*');
-  posts.forEach((post) => {
-    post.data.tags.forEach((tag) => {
+  collection.getFilteredByGlob('src/posts/**/*.*').forEach((item) => {
+    if (!item.data.tags) return;
+    item.data.tags
+      .filter((tag) => !['posts', 'all', 'politics', 'net neutrality'].includes(tag))
+      .forEach((tag) => {
       if (!tagStats[tag]) tagStats[tag] = 1;
       if (tagStats[tag]) tagStats[tag] = tagStats[tag] + 1;
     });
   });
-  const deletedTags = ['posts', 'politics', 'net neutrality'];
-  deletedTags.forEach(tag => delete tagStats[tag]);
-  const tagStatsArr = Object.entries(tagStats);
-  return tagStatsArr.sort((a, b) => b[1] - a[1]).map(([key, value]) => `${key}`);
+  return Object.entries(tagStats).sort((a, b) => b[1] - a[1]).map(([key, value]) => `${key}`);
 }
 
-export const postStats = (collectionApi) => {
+export const postStats = (collection) => {
   const oneDayMilliseconds = 1000 * 60 * 60 * 24
   const statsObject = {
     avgDays: 0,
@@ -87,7 +121,7 @@ export const postStats = (collectionApi) => {
   let highPostCount = 0
   let yearProgress = 0
 
-  const posts = collectionApi.getFilteredByGlob('src/posts/**/*.*').sort((a, b) => {
+  const posts = collection.getFilteredByGlob('src/posts/**/*.*').sort((a, b) => {
     return a.date - b.date
   })
 

package-lock.json

@@ -1,20 +1,20 @@
 {
   "name": "coryd.dev",
-  "version": "7.10.7",
+  "version": "7.11.11",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "7.10.7",
+      "version": "7.11.11",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.2.2",
         "@cdransf/theme-toggle": "^1.2.3",
         "@daviddarnes/mastodon-post": "^1.1.1",
         "@remy/webmention": "^1.5.0",
-        "@zachleat/pagefind-search": "^1.0.3",
         "@zachleat/webcare-webshare": "^1.0.3",
+        "minisearch": "^6.3.0",
         "terser": "^5.29.1",
         "youtube-video-element": "^1.0.0"
       },
@@ -2892,11 +2892,6 @@
       "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
       "dev": true
     },
-    "node_modules/@zachleat/pagefind-search": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@zachleat/pagefind-search/-/pagefind-search-1.0.3.tgz",
-      "integrity": "sha512-WKBkvx6gOSgbPcAKjhT1NLT8OXxrSKhgUUhWIdp1DfG3C8l13Cg3+mSC1ZMOEBVwUKRrwBYElJVju/Te/NrHAA=="
-    },
     "node_modules/@zachleat/webcare-webshare": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@zachleat/webcare-webshare/-/webcare-webshare-1.0.3.tgz",
@@ -5596,6 +5591,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/minisearch": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/minisearch/-/minisearch-6.3.0.tgz",
+      "integrity": "sha512-ihFnidEeU8iXzcVHy74dhkxh/dn8Dc08ERl0xwoMMGqp4+LvRSCgicb+zGqWthVokQKvCSxITlh3P08OzdTYCQ=="
+    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",

package.json

@@ -1,15 +1,13 @@
 {
   "name": "coryd.dev",
-  "version": "7.11.11",
+  "version": "8.0.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
     "start": "eleventy --serve",
     "start:search": "run-s build:11ty index:local",
     "start:quick": "eleventy --serve --incremental --ignore-initial",
-    "build": "ELEVENTY_PRODUCTION=true eleventy && npm run build:index",
-    "build:index": "npx -y pagefind --site _site",
-    "index:serve": "npx -y pagefind --site _site --serve",
+    "build": "ELEVENTY_PRODUCTION=true eleventy",
     "debug": "DEBUG=Eleventy* npx @11ty/eleventy --serve",
     "postbuild": "webmention _site/feeds/posts --limit 1 --send && webmention _site/feeds/links --limit 1 --send"
   },
@@ -25,8 +23,8 @@
     "@cdransf/theme-toggle": "^1.2.3",
     "@daviddarnes/mastodon-post": "^1.1.1",
     "@remy/webmention": "^1.5.0",
-    "@zachleat/pagefind-search": "^1.0.3",
     "@zachleat/webcare-webshare": "^1.0.3",
+    "minisearch": "^6.3.0",
     "terser": "^5.29.1",
     "youtube-video-element": "^1.0.0"
   },

src/_includes/partials/tags.liquid

@@ -1,6 +1,6 @@
 {% assign filteredTags = tags | filterTags %}
 <div{% if hasSpace %} style="margin-bottom:var(--sizing-md)"{% endif %}>
   {% for tag in filteredTags limit: 10 %}
-  <a class="tag" href="/tags/{{ tag | downcase }}" data-pagefind-filter="tags">{{ tag | formatTag }}</a>
+  <a class="tag" href="/tags/{{ tag | downcase }}">{{ tag | formatTag }}</a>
   {% endfor %}
 </div>

src/_includes/post.liquid

@@ -10,7 +10,7 @@ schema: blog
 {% endcapture %}
 <style>{{ css }}</style>
 <div class="default__wrapper">
-  <article class="h-entry" data-pagefind-body>
+  <article class="h-entry">
     <div class="flex--centered">
       <time class="dt-published" datetime="{{ date }}">
         {{ date | date: "%B %e, %Y" }}
@@ -18,7 +18,7 @@ schema: blog
       </time>
       {% render "partials/share-button.liquid", url:postUrl, title:title, tagMap:collections.tagMap %}
     </div>
-    <h2 class="p-name" data-pagefind-meta="title">{{ title }}</h2>
+    <h2 class="p-name">{{ title }}</h2>
     <div class="text--small">{% render "partials/tags.liquid", tags:tags %}</div>
     <span class="p-author h-card hidden">{{ meta.author }}</span>
     <div class="p-summary hidden">{{ post_excerpt }}</div>

src/api/search.liquid

@@ -0,0 +1,6 @@
+---
+layout: null
+eleventyExcludeFromCollections: true
+permalink: /api/search
+---
+{{ collections.searchIndex | json }}

src/assets/scripts/search.js

@@ -0,0 +1,47 @@
+(() => {
+  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 no-js 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, {}).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')
+    }
+  }
+})();

src/assets/styles/components/forms.css

@@ -1,26 +1,23 @@
 ::placeholder {
-  color: var(--text-color) !important;
-  opacity: .5 !important;
+  color: var(--text-color);
+  opacity: .5;
 }
 
 input[type="text"],
 input[type="email"],
 input[type="search"],
 textarea {
-  /* necessary for pagefind overrides */
-  font-family: var(--font-sans) !important;
-  color: var(--text-color) !important;
-  background-color: var(--background-color) !important;
-  border: 1px solid var(--accent-color) !important;
+  font-family: var(--font-sans);
+  color: var(--text-color);
+  background-color: var(--background-color);
+  border: 1px solid var(--accent-color);
   padding: var(--sizing-sm);
-  font-size: var(--font-size-base) !important;
-  width: 100% !important;
-  border-radius: var(--rounded-md) !important;
-  /* necessary for pagefind overrides */
-
+  font-size: var(--font-size-base);
+  width: 100%;
+  border-radius: var(--rounded-md);
   outline: none;
   margin-bottom: var(--sizing-base);
-  font-weight: var(--font-weight-base) !important;
+  font-weight: var(--font-weight-base);
   line-height: var(--line-height-base);
   transition-property: border-color;
   transition-timing-function: var(--transition-ease-in-out);
@@ -31,10 +28,10 @@ input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="search"]:focus,
 textarea:focus {
-  border: 1px solid var(--accent-color-hover) !important;
+  border: 1px solid var(--accent-color-hover);
 }
 
-button:not(.theme__toggle, .share, .pagefind-ui__search-clear) {
+button:not(.theme__toggle, .share) {
   border-radius: var(--rounded-full);
   padding: var(--sizing-sm) var(--sizing-lg);
   margin: 0 var(--sizing-xs) var(--sizing-md) 0;
@@ -52,11 +49,22 @@ button:not(.theme__toggle, .share, .pagefind-ui__search-clear) {
   transition-property: background-color;
 }
 
-button:not(.theme__toggle, .share, .pagefind-ui__search-clear):hover,
-button:not(.theme__toggle, .share, .pagefind-ui__search-clear):active,
-button:not(.theme__toggle, .share, .pagefind-ui__search-clear):focus {
+button:not(.theme__toggle, .share):hover,
+button:not(.theme__toggle, .share):active,
+button:not(.theme__toggle, .share):focus {
   color: var(--color-lightest);
-  background-color: var(--accent-color-hover) !important;
+  background-color: var(--accent-color-hover);
   transition-timing-function: var(--transition-ease-in-out);
   transition-duration: var(--transition-duration-default);
 }
+
+.search__results {
+  margin-top: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.search__results li {
+  margin-top: var(--sizing-sm);
+  margin-bottom: var(--sizing-sm);
+}

src/assets/styles/components/pagefind.css

@@ -1,115 +0,0 @@
-.pagefind-ui {
-  margin-bottom: var(--sizing-base);
-  --pagefind-ui-primary: var(--accent-color);
-  --pagefind-ui-text: var(--text-color);
-  --pagefind-ui-background: var(--color-lightest);
-  --pagefind-ui-border: var(--gray-light);
-  --pagefind-ui-tag: var(--gray-light);
-  --pagefind-ui-border-width: 1px;
-  --pagefind-ui-border-radius: 0;
-  --pagefind-ui-image-border-radius: 0;
-  --pagefind-ui-image-box-ratio: 3 / 2;
-  --pagefind-ui-font: var(--font-sans);
-}
-
-.pagefind-ui,
-.pagefind-ui__filter-name,
-.pagefind-ui__filter-label,
-.pagefind-ui__result-excerpt,
-.pagefind-ui__message,
-.pagefind-ui__button {
-  font-size: var(--font-size-base) !important;
-}
-
-.pagefind-ui__result-excerpt {
-  word-break: break-word !important;
-}
-
-.pagefind-ui__form:before {
-  opacity: 1 !important;
-  top: calc(19px * var(--pagefind-ui-scale)) !important;
-}
-
-.pagefind-ui__result-title {
-  color: var(--accent-color);
-  font-size: var(--font-size-2xl);
-  line-height: var(--line-height-2xl);
-  font-weight: var(--font-weight-heavy);
-  margin: 0;
-  transition-property: color;
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: var(--transition-duration-default);
-}
-
-.pagefind-ui__result-title:hover,
-.pagefind-ui__result-title:focus,
-.pagefind-ui__result-title:active {
-  color: var(--accent-color-hover);
-}
-
-.pagefind-ui__results-area {
-  margin-bottom: var(--sizing-base);
-}
-
-:is(input[type="text"], input[type="search"]).pagefind-ui__search-input {
-  padding-left: 2.375rem !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  height: 42px !important;
-}
-
-.pagefind-ui__search-clear {
-  color: var(--text-color);
-  background-color: transparent !important;
-}
-
-.pagefind-ui__search-clear:hover,
-.pagefind-ui__search-clear:focus,
-.pagefind-ui__search-clear:active {
-  color: var(--accent-color-hover) !important;
-}
-
-.pagefind-ui__result-title {
-  margin-bottom: var(--sizing-xs) !important;
-}
-
-.pagefind-ui__result-link {
-  font-size: var(--font-size-2xl) !important;
-  color: var(--accent-color) !important;
-}
-
-.pagefind-ui__result-link:hover,
-.pagefind-ui__result-link:focus,
-.pagefind-ui__result-link:active {
-  color: var(--accent-color-hover) !important;
-}
-
-.pagefind-ui__button {
-  color: var(--color-lightest) !important;
-  line-height: var(--line-height-base);
-  border-radius: var(--rounded-full) !important;
-  padding: var(--sizing-sm) var(--sizing-lg) !important;
-  margin: 0 var(--sizing-xs) var(--sizing-md) 0;
-  cursor: pointer !important;
-  height: unset !important;
-  background-color: var(--accent-color) !important;
-  transition-property: background-color;
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: var(--transition-duration-default);
-}
-
-.pagefind-ui__search-clear {
-  height: calc(48px * var(--pagefind-ui-scale)) !important;
-}
-
-.pagefind-ui__button:hover,
-.pagefind-ui__button:active,
-.pagefind-ui__button:focus {
-  color: var(--color-lightest) !important;
-  background-color: var(--accent-color-hover) !important;
-}
-
-.pagefind__placeholder {
-  height: 42px !important;
-  font-weight: var(--font-weight-heavy);
-}

src/pages/search.html

@@ -4,19 +4,19 @@ description: "Search through and find the posts on my site."
 layout: default
 permalink: /search.html
 ---
-<script type="module" src="/assets/scripts/components/pagefind-search.js"></script>
 {% capture css %}
 {% render "../assets/styles/components/forms.css" %}
-{% render "../assets/styles/components/pagefind.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
-<pagefind-search _show_images="false" _show_empty_filters="false">
-  <form action="https://duckduckgo.com/" method="get" style="min-height: 3.2em;">
-  <label>
-    <input class="pagefind__placeholder" placeholder="Search" type="search" name="q" autocomplete="off" autofocus>
-  </label>
-  <input type="hidden" placeholder="Search" name="sites" value="coryd.dev">
-  </form>
-</pagefind-search>
+<script src="/assets/scripts/components/minisearch.js"></script>
+{% capture js %}
+{% render "../assets/scripts/search.js" %}
+{% endcapture %}
+<script type="module">{{ js }}</script>
+<form class="search__form" action="https://duckduckgo.com" method="get">
+  <input class="search__form--input" placeholder="Search" type="search" name="q" autocomplete="off" autofocus>
+  <input class="search__form--fallback" type="hidden" placeholder="Search" name="sites" value="coryd.dev">
+</form>
+<ul class="search__results hidden"></ul>
 {% render "partials/tags.liquid", tags:collections.tagsSortedByCount, hasSpace:true %}
 {% render "partials/addon-links.liquid", posts:collections.posts, analytics:analytics, links:links %}

src/posts/2024/link-blogging-using-readwise.md

@@ -76,9 +76,9 @@ pagination:
   size: 8
 ---
 {% for link in pagination.items %}
-<article class="h-entry" data-pagefind-body>
+<article class="h-entry">
   <a class="no-underline" href="{{ link.url }}">
-    <h2 class="flex--centered" data-pagefind-meta="title">{{ link.title }}</h2>
+    <h2 class="flex--centered">{{ link.title }}</h2>
   </a>
   <time class="dt-published" datetime="{{ link.date }}">
     {{ link.date | date: "%m.%Y" }}

src/posts/2024/surfacing-most-used-tags-in-eleventy.md

@@ -51,7 +51,7 @@ The partial displays up to `10` tags:
 ```liquid
 {% assign filteredTags = tags | filterTags %}
 {% for tag in filteredTags limit: 10 %}
-  <a class="tag" href="/tags/{{ tag | downcase }}" data-pagefind-filter="tags">{{ tag | formatTag }}</a>
+  <a class="tag" href="/tags/{{ tag | downcase }}">{{ tag | formatTag }}</a>
 {% endfor %}
 ```
 {% endraw %}