Add homepage pagination, inline Pagefind search, and more share options

- Add reusable SearchBox with header popover, homepage hero inline search,
  and rewritten /search/ page; wire search init via public classic script
  (bundled URL dynamic imports were silently dropped by the Astro 7 bundler)
- Add numbered Pagination component used on homepage, blog, and /page/N/
- Homepage: hero search replaces form; page 1 + /page/[n] archive route
- Add Facebook, Threads, and Tumblr share links alongside X/LinkedIn/Copy
- Mark article content with data-pagefind-body for focused indexing

Author: lurek

public/pagefind-search.js

@@ -0,0 +1,87 @@
+(function () {
+  var pagefindPromise = null;
+
+  function escapeHtml(value) {
+    return String(value).replace(/[&<>"']/g, function (char) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char] || char;
+    });
+  }
+
+  function loadPagefind() {
+    if (!pagefindPromise) {
+      pagefindPromise = import('/pagefind/pagefind.js');
+    }
+    return pagefindPromise;
+  }
+
+  function runSearch(root) {
+    var input = root.querySelector('input[type="search"]');
+    var results = root.querySelector('.search-results');
+    var status = root.querySelector('.search-status');
+    if (!input || !results) return;
+    var query = input.value.trim();
+    if (!query) {
+      results.innerHTML = '';
+      if (status) status.textContent = '';
+      return;
+    }
+    var seq = (root._nodehuntSeq = (root._nodehuntSeq || 0) + 1);
+    loadPagefind()
+      .then(function (pagefind) {
+        return pagefind.search(query).then(function (response) {
+          return Promise.all(response.results.slice(0, 8).map(function (result) { return result.data(); }));
+        });
+      })
+      .then(function (items) {
+        if (root._nodehuntSeq !== seq) return;
+        if (status) status.textContent = items.length ? items.length + ' result' + (items.length === 1 ? '' : 's') + ' for "' + query + '"' : '';
+        results.innerHTML = items.length
+          ? items
+              .map(function (item) {
+                var title = escapeHtml((item.meta && item.meta.title) || '');
+                var excerpt = item.excerpt ? '<span>' + escapeHtml(item.excerpt) + '</span>' : '';
+                return '<a class="result" href="' + item.url + '"><strong>' + title + '</strong>' + excerpt + '</a>';
+              })
+              .join('')
+          : '<p class="search-empty">No matching articles yet. Try a broader term.</p>';
+      })
+      .catch(function () {
+        if (root._nodehuntSeq === seq && status) status.textContent = 'Search is unavailable right now.';
+      });
+  }
+
+  function initSearchBox(root) {
+    if (root.dataset.searchReady) return;
+    root.dataset.searchReady = 'true';
+    var input = root.querySelector('input[type="search"]');
+    if (!input) return;
+    var timer;
+    function schedule() {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(function () { runSearch(root); }, 160);
+    }
+    input.addEventListener('input', schedule);
+    input.addEventListener('keydown', function (event) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        window.clearTimeout(timer);
+        runSearch(root);
+      }
+    });
+    var query = new URLSearchParams(window.location.search).get('q');
+    if (query) {
+      input.value = query;
+      runSearch(root);
+    }
+  }
+
+  function initAll() {
+    document.querySelectorAll('[data-search-box]').forEach(initSearchBox);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initAll);
+  } else {
+    initAll();
+  }
+})();

src/components/article/ShareLinks.astro

@@ -3,8 +3,11 @@ interface Props { title: string; url: string; }
 const { title, url } = Astro.props;
 const xUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`;
 const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
+const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
+const threadsUrl = `https://www.threads.net/intent/post?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`;
+const tumblrUrl = `https://www.tumblr.com/widgets/share/tool?canonicalUrl=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`;
 ---
-<aside class="share" aria-label="Share this article"><span class="share-label">Share</span><a class="share-link" href={xUrl} target="_blank" rel="noopener noreferrer" aria-label="Share on X">X</a><a class="share-link" href={linkedinUrl} target="_blank" rel="noopener noreferrer" aria-label="Share on LinkedIn">LinkedIn</a><button class="share-link" type="button" data-copy-link>Copy link</button><span class="copy-status" role="status" aria-live="polite"></span></aside>
+<aside class="share" aria-label="Share this article"><span class="share-label">Share</span><a class="share-link" href={xUrl} target="_blank" rel="noopener noreferrer" aria-label="Share on X">X</a><a class="share-link" href={facebookUrl} target="_blank" rel="noopener noreferrer" aria-label="Share on Facebook">Facebook</a><a class="share-link" href={linkedinUrl} target="_blank" rel="noopener noreferrer" aria-label="Share on LinkedIn">LinkedIn</a><a class="share-link" href={threadsUrl} target="_blank" rel="noopener noreferrer" aria-label="Share on Threads">Threads</a><a class="share-link" href={tumblrUrl} target="_blank" rel="noopener noreferrer" aria-label="Share on Tumblr">Tumblr</a><button class="share-link" type="button" data-copy-link>Copy link</button><span class="copy-status" role="status" aria-live="polite"></span></aside>
 <script>
   const button = document.querySelector<HTMLButtonElement>('[data-copy-link]');
   const status = document.querySelector<HTMLElement>('.copy-status');
@@ -18,7 +21,7 @@ const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encod
   });
 </script>
 <style>
-  .share { display: flex; align-items: center; gap: .5rem; margin: 2.5rem 0; }
+  .share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 2.5rem 0; }
   .share-label { margin-right: .25rem; color: var(--muted); font: 800 .78rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
   .share-link { min-height: 2.25rem; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); color: var(--text); font-size: .85rem; font-weight: 800; text-decoration: none; cursor: pointer; }
   .share-link:hover { border-color: var(--accent); }

src/components/layout/Pagination.astro

@@ -0,0 +1,34 @@
+---
+interface Props {
+  current: number;
+  total: number;
+  base: string;
+}
+const { current, total, base } = Astro.props;
+const pageUrl = (n: number) => (n === 1 ? base : `${base}page/${n}/`);
+const start = Math.max(1, current - 2);
+const end = Math.min(total, current + 2);
+---
+<nav class="pagination" aria-label="Pagination">
+  {current > 1 && <a class="page-arrow prev" href={pageUrl(current - 1)} rel="prev">← Newer</a>}
+  <div class="page-numbers">
+    {start > 1 && <><a href={pageUrl(1)} aria-label="Page 1">1</a>{start > 2 && <span class="gap" aria-hidden="true">…</span>}</>}
+    {Array.from({ length: end - start + 1 }, (_, i) => start + i).map((n) =>
+      n === current ? <span class="current" aria-current="page">{n}</span> : <a href={pageUrl(n)} aria-label={`Page ${n}`}>{n}</a>
+    )}
+    {end < total && <>{end < total - 1 && <span class="gap" aria-hidden="true">…</span>}<a href={pageUrl(total)} aria-label={`Page ${total}`}>{total}</a></>}
+  </div>
+  {current < total && <a class="page-arrow next" href={pageUrl(current + 1)} rel="next">Older →</a>}
+</nav>
+<style>
+  .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin: 2.5rem 0 1rem; }
+  .page-arrow { color: var(--accent); font-weight: 800; text-decoration: none; font-size: .9rem; }
+  .page-arrow:hover { text-decoration: underline; }
+  .page-numbers { display: flex; align-items: center; gap: .35rem; }
+  .page-numbers a, .page-numbers .current { display: grid; min-width: 2.3rem; height: 2.3rem; place-items: center; border-radius: .55rem; font-weight: 800; font-size: .9rem; text-decoration: none; }
+  .page-numbers a { border: 1px solid var(--line); color: var(--text); }
+  .page-numbers a:hover { border-color: var(--accent); color: var(--accent); }
+  .page-numbers .current { background: var(--accent); color: #062219; }
+  .gap { color: var(--muted); padding: 0 .2rem; }
+  @media(max-width: 560px) { .page-arrow { flex: 1 0 100%; text-align: center; } }
+</style>

src/components/layout/SiteHeader.astro

@@ -1,5 +1,6 @@
 ---
 import { navigation } from '@/config/site';
+import SearchBox from '@/components/search/SearchBox.astro';
 const path = Astro.url.pathname;
 ---
 <header class="site-header">
@@ -9,9 +10,12 @@ const path = Astro.url.pathname;
       {navigation.map((item) => <a class:list={{ active: path.startsWith(item.href) }} href={item.href}>{item.label}</a>)}
     </nav>
     <div class="header-actions">
-      <a class="search-link" href="/search/" aria-label="Search NodeHunt">⌕ <span>Search</span></a>
+      <div class="search-wrap">
+        <button class="search-toggle" type="button" data-search-toggle aria-expanded="false" aria-controls="header-search-panel" aria-haspopup="dialog">⌕ <span>Search</span></button>
+        <div id="header-search-panel" class="search-popover" hidden><SearchBox id="header" /></div>
+      </div>
       <button class="theme-toggle" type="button" aria-label="Toggle color theme" aria-pressed="false">◐</button>
-      <details class="mobile-nav"><summary aria-label="Open navigation">Menu</summary><nav aria-label="Mobile navigation">{navigation.map((item) => <a href={item.href}>{item.label}</a>)}<a href="/search/">Search</a></nav></details>
+      <details class="mobile-nav"><summary aria-label="Open navigation">Menu</summary><nav aria-label="Mobile navigation">{navigation.map((item) => <a href={item.href}>{item.label}</a>)}</nav></details>
     </div>
   </div>
 </header>
@@ -23,13 +27,33 @@ const path = Astro.url.pathname;
   const update = () => button?.setAttribute('aria-pressed', String(root.dataset.theme === 'light'));
   update();
   button?.addEventListener('click', () => { root.dataset.theme = root.dataset.theme === 'light' ? 'dark' : 'light'; localStorage.setItem('nodehunt-theme', root.dataset.theme); update(); });
+  const searchToggle = document.querySelector<HTMLButtonElement>('[data-search-toggle]');
+  const searchPanel = document.querySelector<HTMLElement>('#header-search-panel');
+  const openPanel = () => {
+    searchPanel?.removeAttribute('hidden');
+    searchToggle?.setAttribute('aria-expanded', 'true');
+    searchPanel?.querySelector('input')?.focus();
+  };
+  const closePanel = () => {
+    searchPanel?.setAttribute('hidden', '');
+    searchToggle?.setAttribute('aria-expanded', 'false');
+  };
+  searchToggle?.addEventListener('click', () => {
+    if (searchPanel?.hasAttribute('hidden')) openPanel();
+    else closePanel();
+  });
+  document.addEventListener('click', (event) => {
+    const target = event.target as Node;
+    if (searchPanel && !searchPanel.hasAttribute('hidden') && !searchPanel.contains(target) && !searchToggle?.contains(target)) closePanel();
+  });
+  document.addEventListener('keydown', (event) => { if (event.key === 'Escape') closePanel(); });
 </script>
 <style>
   .site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); }
   .header-inner { display: flex; min-height: 4.7rem; align-items: center; justify-content: space-between; gap: 1.25rem; }
   .brand { display: inline-flex; align-items: center; gap: .55rem; font: 800 1.2rem var(--font-display); text-decoration: none; }
   .brand:hover { color: var(--text); }.brand-mark { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: .55rem; background: linear-gradient(135deg,var(--accent),var(--violet)); color: #07150f; font-size: 1rem; }
   .desktop-nav { display:flex; gap:1.15rem; font-size:.9rem; font-weight:700; }.desktop-nav a { color:var(--muted); text-decoration:none; }.desktop-nav a.active,.desktop-nav a:hover { color:var(--text); }
-  .header-actions { display:flex; align-items:center; gap:.5rem; }.search-link,.theme-toggle { min-height:2.5rem; border:1px solid var(--line); border-radius:.6rem; background:var(--surface); color:var(--text); padding:.45rem .7rem; text-decoration:none; cursor:pointer; }.search-link { font-size:.85rem; }.mobile-nav { display:none; position:relative; }.mobile-nav summary { cursor:pointer; list-style:none; padding:.45rem .25rem; font-weight:700; }.mobile-nav nav { position:absolute; right:0; top:2.4rem; display:grid; min-width:12rem; padding:.5rem; border:1px solid var(--line); border-radius:.75rem; background:var(--surface); box-shadow:0 1rem 3rem #0004; }.mobile-nav a { padding:.65rem; text-decoration:none; }
-  @media(max-width: 780px) { .desktop-nav,.search-link { display:none; }.mobile-nav { display:block; } }
+  .header-actions { display:flex; align-items:center; gap:.5rem; }.search-wrap { position:relative; }.search-toggle,.theme-toggle { min-height:2.5rem; border:1px solid var(--line); border-radius:.6rem; background:var(--surface); color:var(--text); padding:.45rem .7rem; text-decoration:none; cursor:pointer; }.search-toggle { font-size:.85rem; }.search-toggle:hover,.theme-toggle:hover { border-color:var(--accent); }.search-popover { position:absolute; right:0; top:calc(100% + .55rem); z-index:30; width:26rem; max-width:min(92vw,26rem); padding:.9rem; border:1px solid var(--line); border-radius:.8rem; background:var(--surface); box-shadow:0 1rem 3rem #0005; }.search-popover[hidden] { display:none; }.mobile-nav { display:none; position:relative; }.mobile-nav summary { cursor:pointer; list-style:none; padding:.45rem .25rem; font-weight:700; }.mobile-nav nav { position:absolute; right:0; top:2.4rem; display:grid; min-width:12rem; padding:.5rem; border:1px solid var(--line); border-radius:.75rem; background:var(--surface); box-shadow:0 1rem 3rem #0004; }.mobile-nav a { padding:.65rem; text-decoration:none; }
+  @media(max-width: 780px) { .desktop-nav { display:none; }.mobile-nav { display:block; }.search-popover { position:fixed; right:1rem; left:1rem; top:calc(4.7rem + .5rem); width:auto; max-width:none; } }
 </style>

src/components/search/SearchBox.astro

@@ -0,0 +1,32 @@
+---
+interface Props {
+  id: string;
+  placeholder?: string;
+  label?: string;
+}
+const { id, placeholder = 'Search guides, networks, and security topics', label = 'Search NodeHunt' } = Astro.props;
+const inputId = `${id}-search-input`;
+const resultsId = `${id}-search-results`;
+const statusId = `${id}-search-status`;
+---
+<div class="search-box" data-search-box={id}>
+  <label class="sr-only" for={inputId}>{label}</label>
+  <input id={inputId} type="search" placeholder={placeholder} autocomplete="off" aria-controls={resultsId} />
+  <p id={statusId} class="search-status" role="status" aria-live="polite"></p>
+  <div id={resultsId} class="search-results"></div>
+</div>
+<style>
+  .search-box { display: grid; gap: .35rem; width: 100%; }
+  .search-box input { width: 100%; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); color: var(--text); font-size: .95rem; }
+  .search-box input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 0; border-color: transparent; }
+  .search-status { min-height: 1.1rem; margin: 0; color: var(--muted); font-size: .8rem; }
+  .search-status:empty { display: none; }
+  .search-results { display: grid; gap: .4rem; max-height: 22rem; overflow: auto; }
+  .search-results:empty { display: none; }
+  .result { display: grid; gap: .15rem; padding: .7rem .8rem; border-radius: .55rem; background: var(--surface-raised); text-decoration: none; }
+  .result:hover { outline: 1px solid var(--line); }
+  .result strong { color: var(--text); font-size: .92rem; }
+  .result span { color: var(--muted); font-size: .82rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+  .search-empty { margin: 0; padding: .6rem .2rem; color: var(--muted); font-size: .9rem; }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
+</style>

src/config/site.ts

@@ -4,6 +4,7 @@ export const siteConfig = {
   description: 'Research-led guides and analysis for Web3 nodes, DePIN, crypto infrastructure, wallet security, and AI x blockchain.',
   url: import.meta.env.PUBLIC_SITE_URL || 'https://nodehunt.example',
   postsPerPage: 12,
+  homePostsPerPage: 6,
 } as const;
 
 export const navigation = [

src/layouts/BaseLayout.astro

@@ -11,4 +11,4 @@ import AdSocialBar from '@/components/ads/AdSocialBar.astro';
 interface Props { title?: string; description?: string; noindex?: boolean; jsonLd?: Record<string, unknown>; }
 const { title, description, noindex, jsonLd } = Astro.props;
 ---
-<!doctype html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><SiteHead {title} {description} {noindex} {jsonLd} /><AdPopunder /></head><body><a href="#main" class="skip-link">Skip to content</a><SiteHeader /><TopBannerAd /><main id="main"><slot /></main><FooterAd /><StickyMobileAd /><SiteFooter /><AdSocialBar /><script>import '@/components/ads/ad-loader';</script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><SiteHead {title} {description} {noindex} {jsonLd} /><AdPopunder /></head><body><a href="#main" class="skip-link">Skip to content</a><SiteHeader /><TopBannerAd /><main id="main"><slot /></main><FooterAd /><StickyMobileAd /><SiteFooter /><AdSocialBar /><script>import '@/components/ads/ad-loader';</script><script src="/pagefind-search.js" defer></script></body></html>