From 9db74f463a37ea6e3e3d920d9afab345d8aa6ea0 Mon Sep 17 00:00:00 2001
From: Gilbert Sanchez <me@gilbertsanchez.com>
Date: Sun, 21 Jun 2026 09:50:16 -0700
Subject: [PATCH] feat(search): add Algolia search via modal widget

Integrate Algolia's Netlify crawler frontend. A magnifying-glass icon in
the header (desktop) and a Search item in the mobile menu open a modal
dialog hosting the Algolia autocomplete widget, giving a roomy, site-wide
search experience.

- Add params.algolia (appId, search-only apiKey, siteId, branch) to hugo.yaml
- New partials: search.html (widget init) and search-modal.html (Alpine modal)
- Load widget CSS and mount the modal + init in baseof.html; add [x-cloak] rule
- Replace the per-section client-side filters on the articles, podcast, and
  author list views (they only matched the current page) with the global modal

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 hugo.yaml                                     |  7 +++
 .../layouts/_default/authors.html             | 34 -----------
 .../layouts/_default/baseof.html              |  6 ++
 .../layouts/_default/list.html                | 56 -------------------
 .../layouts/partials/header.html              | 16 +++++-
 .../layouts/partials/search-modal.html        | 27 +++++++++
 .../layouts/partials/search.html              | 12 ++++
 .../layouts/podcast/list.html                 | 33 -----------
 8 files changed, 67 insertions(+), 124 deletions(-)
 create mode 100644 themes/powershell-community/layouts/partials/search-modal.html
 create mode 100644 themes/powershell-community/layouts/partials/search.html

diff --git a/hugo.yaml b/hugo.yaml
index 6b14d1332..0c87da781 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -135,6 +135,13 @@ params:
   # Analytics (GitHub Pages compatible)
   google_analytics: ""
 
+  # Algolia search (Netlify crawler integration; search-only key, safe to commit)
+  algolia:
+    appId: "K2CHG50H47"
+    apiKey: "4bc832d88d1459de157de3ba1e11f1da"
+    siteId: "1c141042-7ddd-4dd8-87e7-cca37c9e7197"
+    branch: "main"
+
   ical:
     timezone: UTC
   
diff --git a/themes/powershell-community/layouts/_default/authors.html b/themes/powershell-community/layouts/_default/authors.html
index fca105d32..dd59c3551 100644
--- a/themes/powershell-community/layouts/_default/authors.html
+++ b/themes/powershell-community/layouts/_default/authors.html
@@ -13,20 +13,6 @@ <h1 class="text-4xl lg:text-5xl font-bold mb-2">{{ .Title }}</h1>
     </div>
 </section>
 
-<!-- Search Bar -->
-<section class="py-8 bg-gray-50 border-b border-gray-200">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="max-w-md mx-auto">
-            <div class="relative">
-                <input type="text" id="author-search"
-                       placeholder="Search authors..."
-                       class="w-full px-4 py-3 pl-10 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
-            </div>
-        </div>
-    </div>
-</section>
-
 <!-- Authors Grid -->
 <section class="py-10 bg-gray-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -97,23 +83,3 @@ <h2 class="text-2xl font-bold text-center text-gray-900 mb-1">
 </section>
 
 {{ end }}
-
-{{ define "scripts" }}
-<script>
-// Author search: match on name or tagline
-document.getElementById('author-search').addEventListener('input', function(e) {
-    const searchTerm = e.target.value.toLowerCase();
-    const authors = document.querySelectorAll('.author-card');
-
-    authors.forEach(author => {
-        const haystack = (author.dataset.author + ' ' + (author.dataset.tagline || ''));
-
-        if (haystack.includes(searchTerm)) {
-            author.style.display = '';
-        } else {
-            author.style.display = 'none';
-        }
-    });
-});
-</script>
-{{ end }}
diff --git a/themes/powershell-community/layouts/_default/baseof.html b/themes/powershell-community/layouts/_default/baseof.html
index a925c91fe..3c9f8276f 100644
--- a/themes/powershell-community/layouts/_default/baseof.html
+++ b/themes/powershell-community/layouts/_default/baseof.html
@@ -39,6 +39,7 @@
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" rel="stylesheet">
+    {{ with .Site.Params.algolia }}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />{{ end }}
 
     <!-- Custom CSS -->
     <style>
@@ -66,6 +67,8 @@
         .prose img { margin-top: 2em; margin-bottom: 2em; border-radius: 0.5rem; }
         .prose > :first-child { margin-top: 0; }
 
+        [x-cloak] { display: none !important; }
+
         .powershell-blue {
             background: linear-gradient(135deg, #0078D4 0%, #00BCF2 100%);
         }
@@ -258,6 +261,9 @@
         });
     </script>
 
+    {{ partial "search-modal.html" . }}
+    {{ partial "search.html" . }}
+
     {{ block "scripts" . }}{{ end }}
 </body>
 
diff --git a/themes/powershell-community/layouts/_default/list.html b/themes/powershell-community/layouts/_default/list.html
index d575ad8bc..888852e6d 100644
--- a/themes/powershell-community/layouts/_default/list.html
+++ b/themes/powershell-community/layouts/_default/list.html
@@ -19,20 +19,6 @@ <h1 class="text-4xl lg:text-5xl font-bold mb-2">
 <!-- Content Section -->
 <section class="py-10 bg-gray-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <!-- Filter/Search Bar -->
-        {{ if gt (len .Pages) 5 }}
-        <div class="mb-6">
-            <div class="max-w-md mx-auto">
-                <div class="relative">
-                    <input type="text" id="content-search" 
-                           placeholder="Search {{ .Title | lower }}..."
-                           class="w-full px-4 py-3 pl-10 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
-                </div>
-            </div>
-        </div>
-        {{ end }}
-        
         <!-- Category/Tag Filter (if applicable) -->
         {{ if or (eq .Kind "taxonomy") (eq .Kind "term") }}
         <div class="mb-6 text-center">
@@ -142,13 +128,6 @@ <h2 class="text-xl font-bold text-gray-900 mb-3">
             {{ end }}
         </div>
         
-        <!-- No Results Message -->
-        <div id="no-results" class="hidden text-center py-12">
-            <i class="fas fa-search text-4xl text-gray-400 mb-4"></i>
-            <h3 class="text-xl font-semibold text-gray-900 mb-2">No results found</h3>
-            <p class="text-gray-600">Try adjusting your search terms or browse all content.</p>
-        </div>
-        
         <!-- Pagination -->
         {{ if gt $paginator.TotalPages 1 }}
         <nav class="mt-8 flex justify-center" aria-label="Pagination">
@@ -193,39 +172,4 @@ <h3 class="text-xl font-semibold text-gray-900 mb-2">No results found</h3>
     </div>
 </section>
 
-{{ end }}
-
-{{ define "scripts" }}
-<script>
-// Search functionality
-const searchInput = document.getElementById('content-search');
-if (searchInput) {
-    searchInput.addEventListener('input', function(e) {
-        const searchTerm = e.target.value.toLowerCase();
-        const contentItems = document.querySelectorAll('.content-item');
-        const noResults = document.getElementById('no-results');
-        let visibleCount = 0;
-        
-        contentItems.forEach(item => {
-            const title = item.dataset.title;
-            const content = item.dataset.content;
-            const tags = item.dataset.tags;
-            
-            if (title.includes(searchTerm) || content.includes(searchTerm) || tags.includes(searchTerm)) {
-                item.style.display = 'block';
-                visibleCount++;
-            } else {
-                item.style.display = 'none';
-            }
-        });
-        
-        // Show/hide no results message
-        if (visibleCount === 0 && searchTerm.length > 0) {
-            noResults.classList.remove('hidden');
-        } else {
-            noResults.classList.add('hidden');
-        }
-    });
-}
-</script>
 {{ end }}
\ No newline at end of file
diff --git a/themes/powershell-community/layouts/partials/header.html b/themes/powershell-community/layouts/partials/header.html
index 0d27b1876..17d41ac46 100644
--- a/themes/powershell-community/layouts/partials/header.html
+++ b/themes/powershell-community/layouts/partials/header.html
@@ -47,7 +47,14 @@ <h1 class="text-xl font-bold text-gray-900">PowerShell.org</h1>
             
             <!-- CTA Button -->
             <div class="hidden md:flex items-center space-x-4">
-                <a href="{{ .Site.Params.summit.registration_url }}" 
+                {{ if .Site.Params.algolia }}
+                <button type="button" aria-label="Search"
+                        onclick="window.dispatchEvent(new CustomEvent('open-search'))"
+                        class="text-gray-500 hover:text-blue-600 transition-colors duration-200">
+                    <i class="fas fa-search text-xl"></i>
+                </button>
+                {{ end }}
+                <a href="{{ .Site.Params.summit.registration_url }}"
                    class="summit-gradient text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity duration-200">
                     Summit {{ .Site.Params.summit.year }}
                 </a>
@@ -70,6 +77,13 @@ <h1 class="text-xl font-bold text-gray-900">PowerShell.org</h1>
         <!-- Mobile Navigation -->
         <div id="mobile-menu" class="hidden md:hidden pb-4">
             <div class="space-y-2">
+                {{ if .Site.Params.algolia }}
+                <button type="button"
+                        onclick="toggleMobileMenu(); window.dispatchEvent(new CustomEvent('open-search'))"
+                        class="w-full text-left block text-gray-700 hover:text-blue-600 hover:bg-gray-50 px-3 py-2 rounded-md text-base font-medium">
+                    <i class="fas fa-search mr-2"></i>Search
+                </button>
+                {{ end }}
                 {{ range .Site.Menus.main }}
                 {{ if .Params.hasChildren }}
                 <!-- Section with sub-items (children from .Params.childMenu) -->
diff --git a/themes/powershell-community/layouts/partials/search-modal.html b/themes/powershell-community/layouts/partials/search-modal.html
new file mode 100644
index 000000000..ba046a261
--- /dev/null
+++ b/themes/powershell-community/layouts/partials/search-modal.html
@@ -0,0 +1,27 @@
+{{ with .Site.Params.algolia }}
+<div x-data="{ open: false }"
+     x-cloak
+     @open-search.window="open = true; $nextTick(() => { const i = $root.querySelector('input'); if (i) i.focus(); })"
+     @keydown.escape.window="open = false">
+    <div x-show="open"
+         x-transition.opacity
+         class="fixed inset-0 flex items-start justify-center p-4 sm:p-6 md:p-12"
+         style="display: none; z-index: 100;">
+        <!-- Backdrop -->
+        <div class="absolute inset-0 bg-black bg-opacity-50" @click="open = false"></div>
+        <!-- Panel -->
+        <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-3xl mt-10 p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h2 class="text-lg font-semibold text-gray-900">
+                    <i class="fas fa-search text-blue-600 mr-2"></i>Search PowerShell.org
+                </h2>
+                <button type="button" @click="open = false" aria-label="Close search"
+                        class="text-gray-400 hover:text-gray-600 transition-colors duration-200">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+            <div class="ps-search"></div>
+        </div>
+    </div>
+</div>
+{{ end }}
diff --git a/themes/powershell-community/layouts/partials/search.html b/themes/powershell-community/layouts/partials/search.html
new file mode 100644
index 000000000..0e99f8cce
--- /dev/null
+++ b/themes/powershell-community/layouts/partials/search.html
@@ -0,0 +1,12 @@
+{{ with .Site.Params.algolia }}
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>
+<script type="text/javascript">
+  algoliasearchNetlify({
+    appId: {{ .appId }},
+    apiKey: {{ .apiKey }},
+    siteId: {{ .siteId }},
+    branch: {{ .branch }},
+    selector: 'div.ps-search',
+  });
+</script>
+{{ end }}
diff --git a/themes/powershell-community/layouts/podcast/list.html b/themes/powershell-community/layouts/podcast/list.html
index 6113f83a5..98c8e2691 100644
--- a/themes/powershell-community/layouts/podcast/list.html
+++ b/themes/powershell-community/layouts/podcast/list.html
@@ -26,18 +26,6 @@ <h1 class="text-4xl lg:text-5xl font-bold mb-2">{{ .Site.Params.podcast.title }}
 <!-- Podcast Episodes -->
 <section class="py-10 bg-gray-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <!-- Filter/Search Bar -->
-        <div class="mb-6">
-            <div class="max-w-md mx-auto">
-                <div class="relative">
-                    <input type="text" id="podcast-search" 
-                           placeholder="Search episodes..."
-                           class="w-full px-4 py-3 pl-10 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
-                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
-                </div>
-            </div>
-        </div>
-        
         <!-- Episodes Grid -->
         <div class="grid gap-6" id="episodes-container">
             {{ $paginator := .Paginate .Pages }}
@@ -150,25 +138,4 @@ <h2 class="text-3xl font-bold mb-2">Never Miss an Episode</h2>
     </div>
 </section>
 
-{{ end }}
-
-{{ define "scripts" }}
-<script>
-// Podcast search functionality
-document.getElementById('podcast-search').addEventListener('input', function(e) {
-    const searchTerm = e.target.value.toLowerCase();
-    const episodes = document.querySelectorAll('.podcast-episode');
-    
-    episodes.forEach(episode => {
-        const title = episode.dataset.title;
-        const content = episode.dataset.content;
-        
-        if (title.includes(searchTerm) || content.includes(searchTerm)) {
-            episode.style.display = 'block';
-        } else {
-            episode.style.display = 'none';
-        }
-    });
-});
-</script>
 {{ end }}
\ No newline at end of file