@zeropress/build-pages 0.6.1 → 0.6.3

package/themes/docs/assets/theme.js

@@ -0,0 +1,333 @@
+/* ---------- Sticky header scrolled state ---------- */
+
+const siteHeader = document.querySelector('.site-header');
+
+if (siteHeader) {
+  let lastScrolled = false;
+  const updateHeader = () => {
+    const scrolled = window.scrollY > 4;
+    if (scrolled !== lastScrolled) {
+      siteHeader.classList.toggle('is-scrolled', scrolled);
+      lastScrolled = scrolled;
+    }
+  };
+  updateHeader();
+  window.addEventListener('scroll', updateHeader, { passive: true });
+}
+
+/* ---------- Mobile nav toggle ---------- */
+
+const navToggle = document.querySelector('[data-nav-toggle]');
+const navPanel = document.querySelector('[data-nav-panel]');
+
+if (navToggle && navPanel) {
+  const closeNav = () => {
+    navPanel.classList.remove('is-open');
+    navToggle.setAttribute('aria-expanded', 'false');
+  };
+
+  navToggle.addEventListener('click', () => {
+    const open = !navPanel.classList.contains('is-open');
+    navPanel.classList.toggle('is-open', open);
+    navToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+  });
+
+  navPanel.addEventListener('click', (event) => {
+    if (event.target instanceof HTMLAnchorElement) {
+      closeNav();
+    }
+  });
+
+  window.addEventListener('resize', () => {
+    if (window.innerWidth > 820) {
+      closeNav();
+    }
+  });
+}
+
+/* ---------- Theme toggle (light/dark) ---------- */
+
+const themeToggle = document.querySelector('[data-theme-toggle]');
+
+if (themeToggle) {
+  const root = document.documentElement;
+
+  const getResolvedTheme = () => {
+    const stored = root.dataset.theme;
+    if (stored === 'light' || stored === 'dark') return stored;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  };
+
+  themeToggle.addEventListener('click', () => {
+    const next = getResolvedTheme() === 'dark' ? 'light' : 'dark';
+    root.dataset.theme = next;
+    try {
+      localStorage.setItem('zp-theme', next);
+    } catch (e) {}
+  });
+}
+
+/* ---------- Highlight active primary nav link ---------- */
+
+const primaryLinks = Array.from(document.querySelectorAll('.site-nav a'));
+
+if (primaryLinks.length) {
+  const path = window.location.pathname.replace(/\/+$/, '') || '/';
+  let bestMatch = null;
+  let bestScore = -1;
+
+  for (const link of primaryLinks) {
+    let href;
+    try {
+      href = new URL(link.href, window.location.origin).pathname.replace(/\/+$/, '') || '/';
+    } catch {
+      continue;
+    }
+
+    if (href === '/' && path !== '/') continue;
+    if (path === href || path.startsWith(href + '/')) {
+      if (href.length > bestScore) {
+        bestScore = href.length;
+        bestMatch = link;
+      }
+    }
+  }
+
+  if (bestMatch) {
+    bestMatch.setAttribute('aria-current', 'page');
+  }
+}
+
+/* ---------- Table of contents scroll spy ---------- */
+
+const tocLinks = Array.from(document.querySelectorAll('[data-doc-toc-link]'));
+
+if (tocLinks.length) {
+  const decodeHashId = (value) => {
+    try {
+      return decodeURIComponent(value);
+    } catch {
+      return value;
+    }
+  };
+
+  const getHashId = (value) => {
+    const hash = value || '';
+    return hash.startsWith('#') ? decodeHashId(hash.slice(1)) : '';
+  };
+
+  const tocItems = tocLinks
+    .map((link) => {
+      const heading = document.getElementById(getHashId(link.getAttribute('href')));
+      return heading ? { heading, link } : null;
+    })
+    .filter(Boolean);
+
+  if (tocItems.length) {
+    let activeId = '';
+    let frameRequested = false;
+
+    const anchorLine = () => (window.matchMedia('(max-width: 860px)').matches ? 160 : 120);
+
+    const setActive = (id) => {
+      if (!id || id === activeId) return;
+      activeId = id;
+
+      for (const item of tocItems) {
+        const match = item.heading.id === id;
+        item.link.classList.toggle('is-active', match);
+
+        if (match) {
+          item.link.setAttribute('aria-current', 'true');
+          const toc = item.link.closest('.doc-toc');
+          if (toc && toc.scrollHeight > toc.clientHeight) {
+            item.link.scrollIntoView({ block: 'nearest' });
+          }
+        } else {
+          item.link.removeAttribute('aria-current');
+        }
+      }
+    };
+
+    const updateActive = () => {
+      frameRequested = false;
+      let current = tocItems[0];
+      const line = anchorLine();
+      for (const item of tocItems) {
+        if (item.heading.getBoundingClientRect().top <= line) {
+          current = item;
+        } else {
+          break;
+        }
+      }
+      setActive(current.heading.id);
+    };
+
+    const requestUpdate = () => {
+      if (frameRequested) return;
+      frameRequested = true;
+      window.requestAnimationFrame(updateActive);
+    };
+
+    const setHashActive = () => {
+      const hashId = getHashId(window.location.hash);
+      const item = tocItems.find((entry) => entry.heading.id === hashId);
+      if (item) setActive(item.heading.id);
+    };
+
+    setHashActive();
+    requestUpdate();
+    window.setTimeout(requestUpdate, 80);
+
+    window.addEventListener('scroll', requestUpdate, { passive: true });
+    window.addEventListener('resize', requestUpdate);
+    window.addEventListener('hashchange', () => {
+      setHashActive();
+      requestUpdate();
+    });
+  }
+}
+
+/* ---------- Search ---------- */
+
+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 submit = searchRoot.querySelector('[data-site-search-submit]');
+  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;
+  };
+
+  input.disabled = false;
+  if (submit) submit.disabled = false;
+  setStatus('Type at least two characters.');
+
+  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();
+    }
+  });
+
+  if (form) {
+    form.addEventListener('submit', (event) => {
+      event.preventDefault();
+      runSearch();
+    });
+  }
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      hidePanel();
+      input.blur();
+      return;
+    }
+
+    // Slash to focus search (when not in another input)
+    if (event.key === '/' && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      const target = event.target;
+      const isFormField = target instanceof HTMLElement &&
+        (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable);
+      if (!isFormField) {
+        event.preventDefault();
+        input.focus();
+        input.select();
+      }
+    }
+  });
+
+  document.addEventListener('click', (event) => {
+    if (!searchRoot.contains(event.target)) {
+      hidePanel();
+    }
+  });
+}

package/themes/docs/layout.html

@@ -3,19 +3,72 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{meta.title}}</title>
-    <meta name="theme-color" content="#f8fafc" media="(prefers-color-scheme: light)">
-    <meta name="theme-color" content="#111316" media="(prefers-color-scheme: dark)">
+    <meta name="theme-color" content="#fbfbfd" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#0b0d12" media="(prefers-color-scheme: dark)">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap">
     <link rel="stylesheet" href="/assets/style.css">
+    {{partial:theme-bootstrap}}
     {{meta.head_tags}}
   </head>
   <body>
     <a class="skip-link" href="#content">Skip to content</a>
     <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>
+        <a class="brand" href="/">
+          {{#if site.logo.src}}
+          <img
+            class="brand__mark"
+            src="{{site.logo.src}}"
+            alt="{{#if site.logo.alt}}{{site.logo.alt}}{{#else}}{{site.title}}{{/if}}"
+            aria-hidden="true"
+          >
+          {{/if}}
+          <span class="brand__name">{{site.title}}</span>
+        </a>
+        <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav-panel" data-nav-toggle>
+          <span class="visually-hidden">Toggle navigation</span>
+          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="4" y1="7" x2="20" y2="7"></line>
+            <line x1="4" y1="12" x2="20" y2="12"></line>
+            <line x1="4" y1="17" x2="20" y2="17"></line>
+          </svg>
+        </button>
+        <div class="site-header__actions" id="site-nav-panel" data-nav-panel>
+          <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>
+                <span class="site-search__icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="11" cy="11" r="7"></circle>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                  </svg>
+                </span>
+                <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 disabled>
+                <kbd class="site-search__kbd" aria-hidden="true">/</kbd>
+                <button class="visually-hidden" type="submit" data-site-search-submit disabled>Search</button>
+              </form>
+              <div class="site-search__panel" data-site-search-panel hidden>
+                <p class="site-search__status" data-site-search-status>Search requires JavaScript.</p>
+                <ol class="site-search__results" data-site-search-results></ol>
+              </div>
+            </div>
+          {{/if}}
+          <button class="theme-toggle" type="button" aria-label="Toggle color theme" data-theme-toggle title="Toggle theme">
+            <svg class="theme-toggle__icon theme-toggle__icon--sun" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="12" cy="12" r="4"></circle>
+              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
+            </svg>
+            <svg class="theme-toggle__icon theme-toggle__icon--moon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+            </svg>
+          </button>
+        </div>
       </div>
     </header>
     <main id="content">
@@ -23,15 +76,21 @@
     </main>
     <footer class="site-footer">
       <div class="shell site-footer__inner">
-        {{#if site.footer.copyright_text}}
-          <p>{{site.footer.copyright_text}}</p>
-        {{#else_if site.title}}
-          <p>{{site.title}}</p>
-        {{/if}}
-        {{#if site.footer.attribution}}
-          <p>Published with <a href="https://zeropress.app" target="_blank" rel="noreferrer noopener">ZeroPress</a>.</p>
-        {{/if}}
+        <div class="site-footer__meta">
+          {{#if site.footer.copyright_text}}
+            <p>{{site.footer.copyright_text}}</p>
+          {{#else_if site.title}}
+            <p>{{site.title}}</p>
+          {{/if}}
+          {{#if site.footer.attribution}}
+            <p>Published with <a href="https://zeropress.app" target="_blank" rel="noreferrer noopener">ZeroPress</a></p>
+          {{/if}}
+        </div>
+        <nav class="site-footer__nav" aria-label="Footer navigation">
+          {{menu:footer}}
+        </nav>
       </div>
     </footer>
+    {{partial:theme-scripts}}
   </body>
 </html>

package/themes/docs/page.html

@@ -1,22 +1,17 @@
 <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}}
-    <header class="doc-header">
-      <p class="eyebrow">Documentation</p>
-      <h1>{{page.title}}</h1>
-      {{#if page.excerpt}}<p class="lede">{{page.excerpt}}</p>{{/if}}
-    </header>
-    <div class="prose">
-      {{page.html}}
-    </div>
-    {{/if}}
     {{#if page.meta.source_markdown_url}}
     <footer class="doc-source">
-      <a href="{{page.meta.source_markdown_url}}">View this page as Markdown</a>
+      <a href="{{page.meta.source_markdown_url}}">
+        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+          <polyline points="14 2 14 8 20 8"></polyline>
+        </svg>
+        View this page as Markdown
+      </a>
     </footer>
     {{/if}}
   </div>
@@ -25,7 +20,7 @@
     <p class="doc-toc__title">On this page</p>
     <nav>
       <ol>
-        {{#for item in page.toc}}<li class="doc-toc__item doc-toc__item--level-{{item.level}}"><a href="{{item.href}}">{{item.title}}</a></li>{{/for}}
+        {{#for item in page.toc}}<li class="doc-toc__item doc-toc__item--level-{{item.level}}"><a href="{{item.href}}" data-doc-toc-link>{{item.title}}</a></li>{{/for}}
       </ol>
     </nav>
   </aside>

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

@@ -0,0 +1,10 @@
+<script>
+  (function () {
+    try {
+      var stored = localStorage.getItem('zp-theme');
+      if (stored === 'light' || stored === 'dark') {
+        document.documentElement.dataset.theme = stored;
+      }
+    } catch (e) {}
+  })();
+</script>

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

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

package/themes/docs/post.html

@@ -1,9 +1,12 @@
 <article class="shell doc-content">
   <header class="doc-header">
-    <p class="eyebrow">Post</p>
+    <p class="eyebrow">
+      <span class="eyebrow__dot" aria-hidden="true"></span>
+      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

@@ -1,20 +1,23 @@
 {
-  "name": "ZeroPress Build Pages Docs",
+  "name": "ZeroPress Template Docs1",
   "namespace": "zeropress",
-  "slug": "zeropress-docs",
-  "version": "0.6.0",
+  "slug": "docs1",
+  "version": "0.6.1",
   "license": "MIT",
   "runtime": "0.6",
-  "description": "Bundled documentation theme for @zeropress/build-pages",
+  "description": "Clean documentation theme",
   "features": {
-    "comments": false,
-    "newsletter": false,
-    "post_index": false
+    "post_index": false,
+    "search": true
   },
   "menu_slots": {
     "primary": {
       "title": "Primary navigation",
       "description": "Top-level documentation navigation"
+    },
+    "footer": {
+      "title": "Footer menu",
+      "description": "Compact footer links"
     }
   }
 }