From aee9daa4363fb13d234efd214e633a9280ca5e4c Mon Sep 17 00:00:00 2001
From: Adam Laki <info@adamlaki.com>
Date: Thu, 7 Mar 2024 19:23:56 +0100
Subject: [PATCH] Search WIP

---
 .eleventy.js                            |  5 ++
 package-lock.json                       | 82 +++++++++++++++++++++++++
 package.json                            |  1 +
 src/_includes/icon/search.svg           | 15 +++++
 src/_includes/layout/base.html          | 19 +++---
 src/_includes/layout/component.html     |  2 +-
 src/_includes/layout/docs.html          |  2 +-
 src/_includes/layout/template.html      |  2 +-
 src/_includes/partial/header.html       | 25 ++++----
 src/_includes/partial/open-search.html  |  7 +++
 src/_includes/partial/search-modal.html |  7 +++
 src/js/cookie-consent.js                |  2 +-
 src/js/modal.js                         | 45 ++++++++++++++
 src/scss/component/_index.scss          |  3 +
 src/scss/component/_modal.scss          | 24 ++++++++
 src/scss/component/_open-search.scss    | 15 +++++
 src/scss/component/_pagefind.scss       | 58 +++++++++++++++++
 src/scss/config/_config.scss            |  3 +
 src/scss/section/_header.scss           |  5 ++
 19 files changed, 300 insertions(+), 22 deletions(-)
 create mode 100644 src/_includes/icon/search.svg
 create mode 100644 src/_includes/partial/open-search.html
 create mode 100644 src/_includes/partial/search-modal.html
 create mode 100644 src/js/modal.js
 create mode 100644 src/scss/component/_modal.scss
 create mode 100644 src/scss/component/_open-search.scss
 create mode 100644 src/scss/component/_pagefind.scss

diff --git a/.eleventy.js b/.eleventy.js
index f2c962a..91664a9 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,5 +1,6 @@
 require('dotenv').config();
 
+const { execSync } = require('child_process');
 const { JSDOM } = require('jsdom');
 const { parse, stringify } = require('himalaya');
 const dateFilter = require('./src/filters/date.js');
@@ -198,6 +199,10 @@ module.exports = config => {
             </div>`;
   });
 
+  config.on('eleventy.after', () => {
+    execSync(`npx pagefind --site dist --glob \"**/*.html\"`, { encoding: 'utf-8' })
+  });
+
   if (isProduction) {
     config.addTransform('htmlmin', htmlMinTransform);
   }
diff --git a/package-lock.json b/package-lock.json
index 47c52bc..7604b7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "markdown-it-anchor": "^8.6.7",
         "moment": "^2.30.1",
         "npm-run-all": "^4.1.5",
+        "pagefind": "^1.0.4",
         "sass": "^1.71.1",
         "slugify": "^1.6.6",
         "sprucecss": "^2.3.1",
@@ -1166,6 +1167,71 @@
         "node": ">= 8"
       }
     },
+    "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",
@@ -5366,6 +5432,22 @@
         "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": "2.1.1",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
diff --git a/package.json b/package.json
index 611113b..902f351 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "markdown-it-anchor": "^8.6.7",
     "moment": "^2.30.1",
     "npm-run-all": "^4.1.5",
+    "pagefind": "^1.0.4",
     "sass": "^1.71.1",
     "slugify": "^1.6.6",
     "sprucecss": "^2.3.1",
diff --git a/src/_includes/icon/search.svg b/src/_includes/icon/search.svg
new file mode 100644
index 0000000..9f0f6eb
--- /dev/null
+++ b/src/_includes/icon/search.svg
@@ -0,0 +1,15 @@
+<svg
+    aria-hidden="true"
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+    style="fill: currentColor"
+>
+    <path
+        d="M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z"
+    ></path>
+</svg>
diff --git a/src/_includes/layout/base.html b/src/_includes/layout/base.html
index 84b3e69..dbd272d 100644
--- a/src/_includes/layout/base.html
+++ b/src/_includes/layout/base.html
@@ -13,19 +13,24 @@
         <link rel="stylesheet" href="/css/main.css">
     </head>
     <body>
-        <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
-        {% include "partial/header.html" %}
+        <div class="site-wrapper">
+            <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
+            {% include "partial/header.html" %}
 
-        <main id="content">
-            {% block content %}{% endblock %}
-        </main>
+            <main id="content">
+                {% block content %}{% endblock %}
+            </main>
 
-        {% include "partial/github-cta.html" %}
-        {% include "partial/footer.html" %}
+            {% include "partial/github-cta.html" %}
+            {% include "partial/footer.html" %}
+        </div>
+
+        {% include "partial/search-modal.html" %}
 
         <script defer src="/js/navigation.js"></script>
         <script defer src="/js/accordion-card.js"></script>
         <script defer src="/js/theme-switcher.js"></script>
+        <script defer src="/js/modal.js"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
         <script defer src="/js/toc.js"></script>
         <script src="/js/cookie-consent.js?{{ assetHash }}" type="module"></script>
diff --git a/src/_includes/layout/component.html b/src/_includes/layout/component.html
index 5000b22..58d1b29 100644
--- a/src/_includes/layout/component.html
+++ b/src/_includes/layout/component.html
@@ -28,7 +28,7 @@ <h1 class="l-documentation__title">{{ title }}</h1>
                                 {{ component.content | toc | safe }}
                             </div>
                         </div>
-                        <div class="l-documentation__content">
+                        <div class="l-documentation__content" data-pagefind-body>
                             <div class="post-content">
                                 {{ component.content | markdown | safe }}
                             </div>
diff --git a/src/_includes/layout/docs.html b/src/_includes/layout/docs.html
index 31a56c2..39a7428 100644
--- a/src/_includes/layout/docs.html
+++ b/src/_includes/layout/docs.html
@@ -8,7 +8,7 @@
                     {% include "partial/sidebar-docs.html" %}
                 </aside>
                 <div class="l-documentation__body-helper">
-                    <div class="l-documentation__body">
+                    <div class="l-documentation__body" data-pagefind-body>
                         <div class="l-documentation__title-helper">
                             <h1 class="l-documentation__title">{{ title }}</h1>
                         </div>
diff --git a/src/_includes/layout/template.html b/src/_includes/layout/template.html
index c39cdef..7bc0ca9 100644
--- a/src/_includes/layout/template.html
+++ b/src/_includes/layout/template.html
@@ -6,7 +6,7 @@
 } %}
 
 {% block content %}
-    <main id="content" class="l-template">
+    <main id="content" class="l-template" data-pagefind-body>
         <div class="container">
             {% include "partial/post-heading.html" %}
 
diff --git a/src/_includes/partial/header.html b/src/_includes/partial/header.html
index 045cf06..546dca9 100644
--- a/src/_includes/partial/header.html
+++ b/src/_includes/partial/header.html
@@ -41,17 +41,20 @@
             </div>
             {% if site.socials.length %}
                 <div class="site-header__actions">
-                    {% for social in site.socials %}
-                        <a
-                            aria-label="{{ social.name }}"
-                            class="btn btn--primary btn--icon btn--rounded"
-                            href="{{ social.url }}"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            {% svgIcon social.icon, "btn__icon" %}
-                        </a>
-                    {% endfor %}
+                    {% include "partial/open-search.html" %}
+                    <div class="site-header__socials">
+                        {% for social in site.socials %}
+                            <a
+                                aria-label="{{ social.name }}"
+                                class="btn btn--primary btn--icon btn--rounded"
+                                href="{{ social.url }}"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                {% svgIcon social.icon, "btn__icon" %}
+                            </a>
+                        {% endfor %}
+                    </div>
                 </div>
             {% endif %}
         </div>
diff --git a/src/_includes/partial/open-search.html b/src/_includes/partial/open-search.html
new file mode 100644
index 0000000..99490fd
--- /dev/null
+++ b/src/_includes/partial/open-search.html
@@ -0,0 +1,7 @@
+<span class="open-search">
+    {% svgIcon './src/_includes/icon/search.svg', 'open-search__icon' %}
+    <span class="open-search__caption">Search</span>
+    <button class="btn btn--outline-primary btn--sm open-search__btn" data-action="open-search">
+        Ctrl K
+    </button>
+</span>
diff --git a/src/_includes/partial/search-modal.html b/src/_includes/partial/search-modal.html
new file mode 100644
index 0000000..f70d22f
--- /dev/null
+++ b/src/_includes/partial/search-modal.html
@@ -0,0 +1,7 @@
+<div class="modal-backdrop">
+    <div class="modal" role="dialog" aria-modal="true">
+        <div id="search" class="search"></div>
+    </div>
+</div>
+
+<script src="/_pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#search', showImages: false });"></script>
diff --git a/src/js/cookie-consent.js b/src/js/cookie-consent.js
index 60e343d..664b4ea 100644
--- a/src/js/cookie-consent.js
+++ b/src/js/cookie-consent.js
@@ -1,6 +1,6 @@
 import {
   setCookie, getCookie, issetCookie, removeCookie,
-} from './cookie';
+} from './cookie.js';
 
 (() => {
   const prefix = 'spruce';
diff --git a/src/js/modal.js b/src/js/modal.js
new file mode 100644
index 0000000..eab7735
--- /dev/null
+++ b/src/js/modal.js
@@ -0,0 +1,45 @@
+(() => {
+  let activeElement = null;
+  const siteWrapper = document.querySelector('.site-wrapper');
+  const button = document.querySelector('[data-action="open-search"]');
+  const input = document.querySelector('.pagefind-ui__search-input');
+  const modal = document.querySelector('.modal-backdrop');
+
+  if (!button || !modal) return;
+
+  function openModal() {
+    activeElement = document.activeElement;
+    siteWrapper.setAttribute('inert', '');
+    modal.classList.add('modal-backdrop--open');
+    input.focus();
+  }
+
+  function closeModal() {
+    siteWrapper.removeAttribute('inert');
+    modal.classList.remove('modal-backdrop--open');
+    activeElement.focus();
+  }
+
+  function handleKeyDown(e) {
+    if (e.code === 'Escape') {
+      closeModal();
+    }
+
+    if (e.ctrlKey && e.code === 'KeyK') {
+      e.preventDefault();
+      openModal();
+    }
+  }
+
+  modal.addEventListener('click', (e) => {
+    if (e.target === e.currentTarget) {
+      closeModal();
+    }
+  });
+
+  button.addEventListener('click', () => {
+    openModal();
+  });
+
+  window.addEventListener('keydown', handleKeyDown);
+})();
diff --git a/src/scss/component/_index.scss b/src/scss/component/_index.scss
index c766bec..be536b1 100644
--- a/src/scss/component/_index.scss
+++ b/src/scss/component/_index.scss
@@ -10,8 +10,11 @@
 @forward 'text-btn';
 @forward 'form';
 @forward 'pagination';
+@forward 'pagefind';
+@forward 'modal';
 @forward 'template';
 @forward 'notification';
+@forward 'open-search';
 @forward 'tags';
 @forward 'ide';
 @forward 'code-tab';
diff --git a/src/scss/component/_modal.scss b/src/scss/component/_modal.scss
new file mode 100644
index 0000000..4ea0d1e
--- /dev/null
+++ b/src/scss/component/_modal.scss
@@ -0,0 +1,24 @@
+@use 'sprucecss/scss/spruce' as *;
+
+.modal-backdrop {
+  backdrop-filter: blur(0.35rem);
+  background-color: hsl(0deg 0% 100% / 35%);
+  display: none;
+  inset: 0;
+  padding: spacer('s');
+  position: fixed;
+  z-index: 100;
+
+  &--open {
+    display: block;
+  }
+}
+
+.modal {
+  background-color: color('background');
+  border-radius: config('border-radius-sm', $display);
+  box-shadow: get-css-variable(--box-shadow);
+  margin-block: 7rem;
+  margin-inline: auto;
+  max-inline-size: 40rem;
+}
diff --git a/src/scss/component/_open-search.scss b/src/scss/component/_open-search.scss
new file mode 100644
index 0000000..597008f
--- /dev/null
+++ b/src/scss/component/_open-search.scss
@@ -0,0 +1,15 @@
+@use 'sprucecss/scss/spruce' as *;
+
+.open-search {
+  @include a11y-card-link('.open-search__btn', true);
+  align-items: center;
+  display: flex;
+  gap: spacer('xs');
+
+  &__icon {
+    --size: 1rem;
+    block-size: var(--size);
+    color: color('icon', 'search');
+    inline-size: var(--size);
+  }
+}
diff --git a/src/scss/component/_pagefind.scss b/src/scss/component/_pagefind.scss
new file mode 100644
index 0000000..4cec8ab
--- /dev/null
+++ b/src/scss/component/_pagefind.scss
@@ -0,0 +1,58 @@
+@use 'sprucecss/scss/spruce' as *;
+
+@include generate-form-control('.pagefind-ui__search-input', false, false, false);
+
+.pagefind-ui {
+  position: relative;
+
+  &__search-input {
+    padding: config('padding', $form-control, false) !important;
+  }
+
+  &__form {
+    @include layout-stack('s');
+  }
+
+  &__search-clear {
+    background: none;
+    border: 0;
+    font-size: config('font-size-sm', $typography);
+    inset-block-start: 0.8em;
+    inset-inline-end: 0.5em;
+    margin-block-start: 0;
+    position: absolute;
+    text-transform: uppercase;
+  }
+
+  &__drawer {
+    @include scrollbar;
+    max-block-size: 20rem;
+    overflow-y: auto;
+  }
+
+  &__results {
+    @include clear-list;
+    @include layout-stack('s');
+    padding-inline-end: spacer('m');
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__results-area {
+    @include layout-stack('xs');
+  }
+
+  &__result-inner {
+    @include layout-stack('xxs');
+  }
+
+  &__result-title {
+    font-weight: 700;
+  }
+
+  &__hidden {
+    display: none;
+  }
+}
diff --git a/src/scss/config/_config.scss b/src/scss/config/_config.scss
index b43475e..91b0086 100644
--- a/src/scss/config/_config.scss
+++ b/src/scss/config/_config.scss
@@ -68,6 +68,9 @@ $color-dark: hsl(260deg 70% 6%);
       'punctuation': hsl(279deg 50% 53%),
       'regex': hsl(1deg 66% 47%),
     ),
+    'search': (
+      'icon': hsl(259deg 53% 94%),
+    ),
   ),
   $dark-colors: dark.$colors,
   $layout: (
diff --git a/src/scss/section/_header.scss b/src/scss/section/_header.scss
index 835d888..e6501ec 100644
--- a/src/scss/section/_header.scss
+++ b/src/scss/section/_header.scss
@@ -48,6 +48,11 @@
   }
 
   &__actions {
+    display: flex;
+    gap: spacer('l');
+  }
+
+  &__socials {
     display: flex;
     gap: spacer('s');