Search WIP

conedevelopment · Mar 7, 2024 · aee9daa · szepeviktor · Mar 7, 2024 · szepeviktor
1 parent 2b980f7
commit aee9daa
Show file tree

Hide file tree

Showing 19 changed files with 300 additions and 22 deletions.
diff --git 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
diff --git 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
diff --git 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/[email protected]/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 import {
   setCookie, getCookie, issetCookie, removeCookie,
-} from './cookie';
+} from './cookie.js';
 } from './cookie.js'; // eslint-disable-line 
 <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/[email protected]/dist/cdn.min.js"></script> 
 <script defer src="/js/toc.js"></script> 
 <script src="/js/cookie-consent.js?{{ assetHash }}" type="module"></script> 
 <script src="/js/scripts.js?{{ assetHash }}" type="module"></script> 
 } from './cookie.js'; // eslint-disable-line 
 <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/[email protected]/dist/cdn.min.js"></script> 
 <script defer src="/js/toc.js"></script> 
 <script src="/js/cookie-consent.js?{{ assetHash }}" type="module"></script> 
 <script src="/js/scripts.js?{{ assetHash }}" type="module"></script> 
 
 (() => {
   const prefix = 'spruce';

diff --git a/src/js/modal.js 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
@@ -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
@@ -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
@@ -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);
+  }
+}