chore: pagefind component

.eleventy.js

@@ -54,6 +54,9 @@ export default async function (eleventyConfig) {
   // passthrough
   eleventyConfig.addPassthroughCopy('src/assets')
   eleventyConfig.addPassthroughCopy('_redirects')
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/@zachleat/pagefind-search/pagefind-search.js': 'assets/scripts/pagefind-search.js',
+  })
 
   // enable merging of tags
   eleventyConfig.setDataDeepMerge(true)

package-lock.json

@@ -1,13 +1,16 @@
 {
   "name": "coryd.dev",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "4.3.2",
+      "version": "4.3.3",
       "license": "ISC",
+      "dependencies": {
+        "@zachleat/pagefind-search": "^1.0.3"
+      },
       "devDependencies": {
         "@11ty/eleventy": "3.0.0-alpha.4",
         "@11ty/eleventy-activity-feed": "^1.0.9",
@@ -32,7 +35,6 @@
         "markdown-it-footnote": "^4.0.0",
         "marked": "^11.1.1",
         "outdent": "^0.8.0",
-        "pagefind": "^1.0.4",
         "sanitize-html": "^2.11.0",
         "slugify": "^1.6.6",
         "writing-stats": "^1.0.6"
@@ -517,71 +519,6 @@
       "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
       "dev": true
     },
-    "node_modules/@pagefind/darwin-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.0.4.tgz",
-      "integrity": "sha512-2OcthvceX2xhm5XbgOmW+lT45oLuHqCmvFeFtxh1gsuP5cO8vcD8ZH8Laj4pXQFCcK6eAdSShx+Ztx/LsQWZFQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@pagefind/darwin-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.0.4.tgz",
-      "integrity": "sha512-xkdvp0D9Ld/ZKsjo/y1bgfhTEU72ITimd2PMMQtts7jf6JPIOJbsiErCvm37m/qMFuPGEq/8d+fZ4pydOj08HQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@pagefind/linux-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.0.4.tgz",
-      "integrity": "sha512-jGBrcCzIrMnNxLKVtogaQyajVfTAXM59KlBEwg6vTn8NW4fQ6nuFbbhlG4dTIsaamjEM5e8ZBEAKZfTB/qd9xw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@pagefind/linux-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.0.4.tgz",
-      "integrity": "sha512-LIn/QcvcEtLEBqKe5vpSbSC2O3fvqbRCWOTIklslqSORisCsvzsWbP6j+LYxE9q0oWIfkdMoWV1vrE/oCKRxHg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@pagefind/windows-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.0.4.tgz",
-      "integrity": "sha512-QlBCVeZfj9fc9sbUgdOz76ZDbeK4xZihOBAFqGuRJeChfM8pnVeH9iqSnXgO3+m9oITugTf7PicyRUFAG76xeQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1014,6 +951,11 @@
         "undici-types": "~5.26.4"
       }
     },
+    "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/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -4634,22 +4576,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/pagefind": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.0.4.tgz",
-      "integrity": "sha512-oRIizYe+zSI2Jw4zcMU0ebDZm27751hRFiSOBLwc1OIYMrsZKk+3m8p9EVaOmc6zZdtqwwdilNUNxXvBeHcP9w==",
-      "dev": true,
-      "bin": {
-        "pagefind": "lib/runner/bin.cjs"
-      },
-      "optionalDependencies": {
-        "@pagefind/darwin-arm64": "1.0.4",
-        "@pagefind/darwin-x64": "1.0.4",
-        "@pagefind/linux-arm64": "1.0.4",
-        "@pagefind/linux-x64": "1.0.4",
-        "@pagefind/windows-x64": "1.0.4"
-      }
-    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",

package.json

@@ -1,12 +1,16 @@
 {
   "name": "coryd.dev",
-  "version": "4.3.3",
+  "version": "4.4.0",
   "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
-    "start": "ELEVENTY_PRODUCTION=false eleventy --serve",
+    "start": "ELEVENTY_PRODUCTION=false eleventy --serve --incremental",
-    "debug": "DEBUG=Eleventy* npx @11ty/eleventy --serve",
+    "start:search": "run-s build:11ty index:local",
-    "build": "ELEVENTY_PRODUCTION=true eleventy"
+		"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",
+    "debug": "DEBUG=Eleventy* npx @11ty/eleventy --serve"
   },
   "keywords": [
     "11ty",
@@ -14,6 +18,9 @@
   ],
   "author": "Cory Dransfeldt",
   "license": "ISC",
+  "dependencies": {
+    "@zachleat/pagefind-search": "^1.0.3"
+  },
   "devDependencies": {
     "@11ty/eleventy": "3.0.0-alpha.4",
     "@11ty/eleventy-activity-feed": "^1.0.9",
@@ -38,7 +45,6 @@
     "markdown-it-footnote": "^4.0.0",
     "marked": "^11.1.1",
     "outdent": "^0.8.0",
-    "pagefind": "^1.0.4",
     "sanitize-html": "^2.11.0",
     "slugify": "^1.6.6",
     "writing-stats": "^1.0.6"

src/assets/styles/widgets/forms.css

@@ -1,5 +1,6 @@
 input[type="text"],
 input[type="email"],
+input[type="search"],
 textarea {
   color: var(--black);
   background-color: var(--white);
@@ -18,6 +19,7 @@ textarea {
 
 input[type="text"]:focus,
 input[type="email"]:focus,
+input[type="search"],
 textarea:focus {
   border: 1px solid var(--blue-800);
 }
@@ -25,6 +27,7 @@ textarea:focus {
 @media (prefers-color-scheme: dark) {
   input[type="text"],
   input[type="email"],
+  input[type="search"],
   textarea {
     color: var(--white);
     background-color: var(--black);

src/pages/search.html

@@ -4,8 +4,6 @@ description: "Search through and find the posts on my site."
 layout: default
 permalink: /search.html
 ---
-
-<link href="https://coryd.dev/pagefind/pagefind-ui.css" rel="stylesheet" />
 {% capture css %}
   {% render "../assets/styles/widgets/pagefind.css" %}
   {% render "../assets/styles/widgets/forms.css" %}
@@ -13,15 +11,13 @@ permalink: /search.html
 <style>
   {{ css | cssmin }}
 </style>
-<div id="search" class="search"></div>
+<pagefind-search _show_images="false">
-<script
+  <form action="https://duckduckgo.com/" method="get" style="min-height: 3.2em;">
-  src="https://coryd.dev/pagefind/pagefind-ui.js"
+	<label>
-  onload="new PagefindUI({ element: '#search', showImages: false, processTerm: (term) => {
+    <input placeholder="Search" type="search" name="q" autocomplete="off" autofocus>
-      try{
+	</label>
-        plausible('/Search', {props: {method: 'Text', term}});
+	<input type="hidden" placeholder="Search" name="sites" value="coryd.dev">
-      } catch(e){};
+  </form>
-      return term;
+</pagefind-search>
-    }
-  });"
-></script>
 {% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
+<script type="module" src="/assets/scripts/pagefind-search.js" defer></script>