Skip to content

Commit bbdc751

Browse files
HeyItsGilbertclaude
authored and
psjamesp
committed
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>
1 parent 957c1e1 commit bbdc751

8 files changed

Lines changed: 67 additions & 124 deletions

File tree

‎hugo.yaml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,13 @@ params:
135135
# Analytics (GitHub Pages compatible)
136136
google_analytics: ""
137137

138+
# Algolia search (Netlify crawler integration; search-only key, safe to commit)
139+
algolia:
140+
appId: "K2CHG50H47"
141+
apiKey: "4bc832d88d1459de157de3ba1e11f1da"
142+
siteId: "1c141042-7ddd-4dd8-87e7-cca37c9e7197"
143+
branch: "main"
144+
138145
ical:
139146
timezone: UTC
140147

‎themes/powershell-community/layouts/_default/authors.html‎

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,6 @@ <h1 class="text-4xl lg:text-5xl font-bold mb-2">{{ .Title }}</h1>
1313
</div>
1414
</section>
1515

16-
<!-- Search Bar -->
17-
<section class="py-8 bg-gray-50 border-b border-gray-200">
18-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
19-
<div class="max-w-md mx-auto">
20-
<div class="relative">
21-
<input type="text" id="author-search"
22-
placeholder="Search authors..."
23-
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">
24-
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
25-
</div>
26-
</div>
27-
</div>
28-
</section>
29-
3016
<!-- Authors Grid -->
3117
<section class="py-10 bg-gray-50">
3218
<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">
9783
</section>
9884

9985
{{ end }}
100-
101-
{{ define "scripts" }}
102-
<script>
103-
// Author search: match on name or tagline
104-
document.getElementById('author-search').addEventListener('input', function(e) {
105-
const searchTerm = e.target.value.toLowerCase();
106-
const authors = document.querySelectorAll('.author-card');
107-
108-
authors.forEach(author => {
109-
const haystack = (author.dataset.author + ' ' + (author.dataset.tagline || ''));
110-
111-
if (haystack.includes(searchTerm)) {
112-
author.style.display = '';
113-
} else {
114-
author.style.display = 'none';
115-
}
116-
});
117-
});
118-
</script>
119-
{{ end }}

‎themes/powershell-community/layouts/_default/baseof.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
4040
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
4141
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" rel="stylesheet">
42+
{{ with .Site.Params.algolia }}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />{{ end }}
4243

4344
<!-- Custom CSS -->
4445
<style>
@@ -66,6 +67,8 @@
6667
.prose img { margin-top: 2em; margin-bottom: 2em; border-radius: 0.5rem; }
6768
.prose > :first-child { margin-top: 0; }
6869

70+
[x-cloak] { display: none !important; }
71+
6972
.powershell-blue {
7073
background: linear-gradient(135deg, #0078D4 0%, #00BCF2 100%);
7174
}
@@ -258,6 +261,9 @@
258261
});
259262
</script>
260263

264+
{{ partial "search-modal.html" . }}
265+
{{ partial "search.html" . }}
266+
261267
{{ block "scripts" . }}{{ end }}
262268
</body>
263269

‎themes/powershell-community/layouts/_default/list.html‎

Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,6 @@ <h1 class="text-4xl lg:text-5xl font-bold mb-2">
1919
<!-- Content Section -->
2020
<section class="py-10 bg-gray-50">
2121
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
22-
<!-- Filter/Search Bar -->
23-
{{ if gt (len .Pages) 5 }}
24-
<div class="mb-6">
25-
<div class="max-w-md mx-auto">
26-
<div class="relative">
27-
<input type="text" id="content-search"
28-
placeholder="Search {{ .Title | lower }}..."
29-
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">
30-
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
31-
</div>
32-
</div>
33-
</div>
34-
{{ end }}
35-
3622
<!-- Category/Tag Filter (if applicable) -->
3723
{{ if or (eq .Kind "taxonomy") (eq .Kind "term") }}
3824
<div class="mb-6 text-center">
@@ -142,13 +128,6 @@ <h2 class="text-xl font-bold text-gray-900 mb-3">
142128
{{ end }}
143129
</div>
144130

145-
<!-- No Results Message -->
146-
<div id="no-results" class="hidden text-center py-12">
147-
<i class="fas fa-search text-4xl text-gray-400 mb-4"></i>
148-
<h3 class="text-xl font-semibold text-gray-900 mb-2">No results found</h3>
149-
<p class="text-gray-600">Try adjusting your search terms or browse all content.</p>
150-
</div>
151-
152131
<!-- Pagination -->
153132
{{ if gt $paginator.TotalPages 1 }}
154133
<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>
193172
</div>
194173
</section>
195174

196-
{{ end }}
197-
198-
{{ define "scripts" }}
199-
<script>
200-
// Search functionality
201-
const searchInput = document.getElementById('content-search');
202-
if (searchInput) {
203-
searchInput.addEventListener('input', function(e) {
204-
const searchTerm = e.target.value.toLowerCase();
205-
const contentItems = document.querySelectorAll('.content-item');
206-
const noResults = document.getElementById('no-results');
207-
let visibleCount = 0;
208-
209-
contentItems.forEach(item => {
210-
const title = item.dataset.title;
211-
const content = item.dataset.content;
212-
const tags = item.dataset.tags;
213-
214-
if (title.includes(searchTerm) || content.includes(searchTerm) || tags.includes(searchTerm)) {
215-
item.style.display = 'block';
216-
visibleCount++;
217-
} else {
218-
item.style.display = 'none';
219-
}
220-
});
221-
222-
// Show/hide no results message
223-
if (visibleCount === 0 && searchTerm.length > 0) {
224-
noResults.classList.remove('hidden');
225-
} else {
226-
noResults.classList.add('hidden');
227-
}
228-
});
229-
}
230-
</script>
231175
{{ end }}

‎themes/powershell-community/layouts/partials/header.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,14 @@ <h1 class="text-xl font-bold text-gray-900">PowerShell.org</h1>
4747

4848
<!-- CTA Button -->
4949
<div class="hidden md:flex items-center space-x-4">
50-
<a href="{{ .Site.Params.summit.registration_url }}"
50+
{{ if .Site.Params.algolia }}
51+
<button type="button" aria-label="Search"
52+
onclick="window.dispatchEvent(new CustomEvent('open-search'))"
53+
class="text-gray-500 hover:text-blue-600 transition-colors duration-200">
54+
<i class="fas fa-search text-xl"></i>
55+
</button>
56+
{{ end }}
57+
<a href="{{ .Site.Params.summit.registration_url }}"
5158
class="summit-gradient text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity duration-200">
5259
Summit {{ .Site.Params.summit.year }}
5360
</a>
@@ -70,6 +77,13 @@ <h1 class="text-xl font-bold text-gray-900">PowerShell.org</h1>
7077
<!-- Mobile Navigation -->
7178
<div id="mobile-menu" class="hidden md:hidden pb-4">
7279
<div class="space-y-2">
80+
{{ if .Site.Params.algolia }}
81+
<button type="button"
82+
onclick="toggleMobileMenu(); window.dispatchEvent(new CustomEvent('open-search'))"
83+
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">
84+
<i class="fas fa-search mr-2"></i>Search
85+
</button>
86+
{{ end }}
7387
{{ range .Site.Menus.main }}
7488
{{ if .Params.hasChildren }}
7589
<!-- Section with sub-items (children from .Params.childMenu) -->

‎themes/powershell-community/layouts/partials/search-modal.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{{ with .Site.Params.algolia }}
2+
<div x-data="{ open: false }"
3+
x-cloak
4+
@open-search.window="open = true; $nextTick(() => { const i = $root.querySelector('input'); if (i) i.focus(); })"
5+
@keydown.escape.window="open = false">
6+
<div x-show="open"
7+
x-transition.opacity
8+
class="fixed inset-0 flex items-start justify-center p-4 sm:p-6 md:p-12"
9+
style="display: none; z-index: 100;">
10+
<!-- Backdrop -->
11+
<div class="absolute inset-0 bg-black bg-opacity-50" @click="open = false"></div>
12+
<!-- Panel -->
13+
<div class="relative bg-white rounded-xl shadow-2xl w-full max-w-3xl mt-10 p-6">
14+
<div class="flex items-center justify-between mb-4">
15+
<h2 class="text-lg font-semibold text-gray-900">
16+
<i class="fas fa-search text-blue-600 mr-2"></i>Search PowerShell.org
17+
</h2>
18+
<button type="button" @click="open = false" aria-label="Close search"
19+
class="text-gray-400 hover:text-gray-600 transition-colors duration-200">
20+
<i class="fas fa-times text-xl"></i>
21+
</button>
22+
</div>
23+
<div class="ps-search"></div>
24+
</div>
25+
</div>
26+
</div>
27+
{{ end }}

‎themes/powershell-community/layouts/partials/search.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{{ with .Site.Params.algolia }}
2+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>
3+
<script type="text/javascript">
4+
algoliasearchNetlify({
5+
appId: {{ .appId }},
6+
apiKey: {{ .apiKey }},
7+
siteId: {{ .siteId }},
8+
branch: {{ .branch }},
9+
selector: 'div.ps-search',
10+
});
11+
</script>
12+
{{ end }}

‎themes/powershell-community/layouts/podcast/list.html‎

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,6 @@ <h1 class="text-4xl lg:text-5xl font-bold mb-2">{{ .Site.Params.podcast.title }}
2626
<!-- Podcast Episodes -->
2727
<section class="py-10 bg-gray-50">
2828
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29-
<!-- Filter/Search Bar -->
30-
<div class="mb-6">
31-
<div class="max-w-md mx-auto">
32-
<div class="relative">
33-
<input type="text" id="podcast-search"
34-
placeholder="Search episodes..."
35-
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">
36-
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
37-
</div>
38-
</div>
39-
</div>
40-
4129
<!-- Episodes Grid -->
4230
<div class="grid gap-6" id="episodes-container">
4331
{{ $paginator := .Paginate .Pages }}
@@ -150,25 +138,4 @@ <h2 class="text-3xl font-bold mb-2">Never Miss an Episode</h2>
150138
</div>
151139
</section>
152140

153-
{{ end }}
154-
155-
{{ define "scripts" }}
156-
<script>
157-
// Podcast search functionality
158-
document.getElementById('podcast-search').addEventListener('input', function(e) {
159-
const searchTerm = e.target.value.toLowerCase();
160-
const episodes = document.querySelectorAll('.podcast-episode');
161-
162-
episodes.forEach(episode => {
163-
const title = episode.dataset.title;
164-
const content = episode.dataset.content;
165-
166-
if (title.includes(searchTerm) || content.includes(searchTerm)) {
167-
episode.style.display = 'block';
168-
} else {
169-
episode.style.display = 'none';
170-
}
171-
});
172-
});
173-
</script>
174141
{{ end }}

0 commit comments

Comments
 (0)