@zeropress/build-pages 0.6.1 → 0.6.2

package/themes/docs/assets/theme.js

@@ -0,0 +1,121 @@
+const searchRoot = document.querySelector('[data-site-search]');
+
+if (searchRoot) {
+  const form = searchRoot.querySelector('[data-site-search-form]');
+  const input = searchRoot.querySelector('[data-site-search-input]');
+  const panel = searchRoot.querySelector('[data-site-search-panel]');
+  const status = searchRoot.querySelector('[data-site-search-status]');
+  const resultsList = searchRoot.querySelector('[data-site-search-results]');
+  let searchApiPromise;
+  let debounceTimer;
+  let requestId = 0;
+
+  const loadSearchApi = () => {
+    searchApiPromise ||= import('/_zeropress/search.js');
+    return searchApiPromise;
+  };
+
+  const clearResults = () => {
+    resultsList.replaceChildren();
+  };
+
+  const showPanel = () => {
+    panel.hidden = false;
+  };
+
+  const hidePanel = () => {
+    panel.hidden = true;
+  };
+
+  const setStatus = (message) => {
+    status.textContent = message;
+  };
+
+  const renderResults = async (items) => {
+    clearResults();
+    if (!items.length) {
+      setStatus('No results found.');
+      return;
+    }
+
+    setStatus(`${items.length} result${items.length === 1 ? '' : 's'} found.`);
+    const fragment = document.createDocumentFragment();
+
+    for (const item of items) {
+      const data = await item.data();
+      const title = data.meta?.title || data.url;
+      const excerpt = data.plain_excerpt || data.excerpt || '';
+      const listItem = document.createElement('li');
+      const link = document.createElement('a');
+      const meta = document.createElement('span');
+      const summary = document.createElement('p');
+
+      link.href = data.url;
+      link.textContent = title;
+      meta.textContent = data.meta?.type || 'page';
+      summary.textContent = excerpt;
+
+      listItem.append(link, meta, summary);
+      fragment.append(listItem);
+    }
+
+    resultsList.append(fragment);
+  };
+
+  const runSearch = async () => {
+    const query = input.value.trim();
+    const currentRequest = ++requestId;
+    showPanel();
+
+    if (query.length < 2) {
+      clearResults();
+      setStatus('Type at least two characters.');
+      return;
+    }
+
+    setStatus('Searching...');
+    clearResults();
+
+    try {
+      const searchApi = await loadSearchApi();
+      const response = await searchApi.search(query, { limit: 8 });
+      if (currentRequest === requestId) {
+        await renderResults(response.results || []);
+      }
+    } catch {
+      if (currentRequest === requestId) {
+        clearResults();
+        setStatus('Search is not available for this build.');
+      }
+    }
+  };
+
+  input.addEventListener('input', () => {
+    window.clearTimeout(debounceTimer);
+    debounceTimer = window.setTimeout(runSearch, 160);
+  });
+
+  input.addEventListener('focus', () => {
+    if (input.value.trim()) {
+      showPanel();
+    }
+  });
+
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    runSearch();
+  });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      hidePanel();
+      input.blur();
+    }
+  });
+
+  document.addEventListener('click', (event) => {
+    if (!searchRoot.contains(event.target)) {
+      hidePanel();
+    }
+  });
+}

package/themes/docs/layout.html

@@ -13,9 +13,24 @@
     <header class="site-header">
       <div class="shell site-header__inner">
         <a class="brand" href="/">{{site.title}}</a>
-        <nav class="site-nav" aria-label="Primary navigation">
-          {{menu:primary}}
-        </nav>
+        <div class="site-header__actions">
+          <nav class="site-nav" aria-label="Primary navigation">
+            {{menu:primary}}
+          </nav>
+          {{#if site.search}}
+            <div class="site-search" data-site-search>
+              <form class="site-search__form" role="search" data-site-search-form>
+                <label class="visually-hidden" for="site-search-input">Search docs</label>
+                <input id="site-search-input" class="site-search__input" type="search" placeholder="Search docs" autocomplete="off" spellcheck="false" data-site-search-input>
+                <button class="site-search__button" type="submit">Search</button>
+              </form>
+              <div class="site-search__panel" data-site-search-panel hidden>
+                <p class="site-search__status" data-site-search-status>Type to search documentation.</p>
+                <ol class="site-search__results" data-site-search-results></ol>
+              </div>
+            </div>
+          {{/if}}
+        </div>
       </div>
     </header>
     <main id="content">
@@ -33,5 +48,6 @@
         {{/if}}
       </div>
     </footer>
+    {{partial:theme-scripts}}
   </body>
 </html>

package/themes/docs/page.html

@@ -1,7 +1,7 @@
 <article class="shell doc-layout{{#if page.toc}} doc-layout--with-toc{{/if}}">
   <div class="doc-content">
     {{#if route.is_front_page}}
-    <div class="prose">
+    <div class="prose" {{#if site.search}}{{#if_neq page.discoverability "delist"}}data-pagefind-body{{/if_neq}}{{/if}}>
       {{page.html}}
     </div>
     {{#else}}
@@ -10,7 +10,7 @@
       <h1>{{page.title}}</h1>
       {{#if page.excerpt}}<p class="lede">{{page.excerpt}}</p>{{/if}}
     </header>
-    <div class="prose">
+    <div class="prose" {{#if site.search}}{{#if_neq page.discoverability "delist"}}data-pagefind-body{{/if_neq}}{{/if}}>
       {{page.html}}
     </div>
     {{/if}}

package/themes/docs/partials/theme-scripts.html

@@ -0,0 +1 @@
+<script type="module" src="/assets/theme.js"></script>

package/themes/docs/post.html

@@ -3,7 +3,7 @@
     <p class="eyebrow">Post</p>
     <h1>{{post.title}}</h1>
   </header>
-  <div class="prose">
+  <div class="prose" {{#if site.search}}{{#if_neq post.discoverability "delist"}}data-pagefind-body{{/if_neq}}{{/if}}>
     {{post.html}}
   </div>
 </article>

package/themes/docs/theme.json

@@ -7,9 +7,8 @@
   "runtime": "0.6",
   "description": "Bundled documentation theme for @zeropress/build-pages",
   "features": {
-    "comments": false,
-    "newsletter": false,
-    "post_index": false
+    "post_index": false,
+    "search": true
   },
   "menu_slots": {
     "primary": {