Skip to content

Commit 8caabdf

Browse files
dschoTo1ne
andcommitted
Use Pagefind's UI for the full search
It is much nicer that way, as it offers filters and sorting and stuff. This requires a bit of CSS to make the look & feel consistent with the rest of the site. Co-authored-by: Toon Claes <[email protected]> Signed-off-by: Johannes Schindelin <[email protected]>
1 parent bd0f43e commit 8caabdf

File tree

9 files changed

+67
-36
lines changed

9 files changed

+67
-36
lines changed

assets/js/application.js

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -306,35 +306,26 @@ var Search = {
306306
},
307307

308308
displayFullSearchResults: function() {
309-
const searchResultsElements = document.getElementsByClassName('full-search-results');
310-
if (!searchResultsElements || searchResultsElements.length !== 1) return;
309+
if (!$("#search-div").length) return;
310+
311+
const language = this.getQueryValue('language');
312+
313+
const ui = new PagefindUI({
314+
element: "#search-div",
315+
showSubResults: true,
316+
showImages: false,
317+
language,
318+
processResult: function (result) {
319+
result.url = result.url.replace(/\.html$/, "")
320+
return result
321+
},
322+
});
311323

312324
const searchTerm = this.getQueryValue('search');
313-
if (!searchTerm) return;
314-
315-
const searchTermElement = document.getElementById('search-term');
316-
if (searchTermElement) searchTermElement.innerHTML = searchTerm;
317-
318-
const searchTextElement = document.getElementById('search-text');
319-
if (searchTextElement) searchTextElement.value = searchTerm;
320-
321-
searchResultsElements[0].innerHTML = 'Searching&hellip;';
322-
323-
this.initializeSearchIndex(async () => {
324-
const results = await Search.pagefind.search(searchTerm);
325-
if (!results || !results.results || !results.results.length) return;
326-
327-
const list = (await Promise.all(results.results.map(async e => {
328-
const result = await e.data();
329-
const href = result.url;
330-
return `
331-
<li><h3><a href="${href}">${result.meta.title}</a></h3>
332-
<a class="url" href="${href}">${href}</a>
333-
<p>${result.excerpt}</p></li>`;
334-
}))).join('');
335-
336-
searchResultsElements[0].innerHTML = list || '<li>No results found</li>';
337-
})
325+
if (searchTerm) {
326+
$("#search-div input").val(searchTerm)
327+
ui.triggerSearch(searchTerm);
328+
}
338329
}
339330
}
340331

assets/sass/forms.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ form#search {
3939
width: 262px;
4040
padding-left: 32px;
4141
@include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
42-
background-color: #fcfcfa !important;
42+
background-color: $main-bg !important;
4343
border: solid 1px #ceccc5;
4444
@include border-radius(20px);
4545
@include box-shadow(inset 0 1px 4px #ddd);

assets/sass/layout.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ aside {
4040
#main {
4141
padding: 22px;
4242
margin-bottom: 35px;
43-
background-color: #fcfcfa;
43+
background-color: $main-bg;
4444
border: solid 1px #e2e0d8;
4545
@include border-radius(5px);
4646

assets/sass/normalize.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,7 @@ hgroup,
4141
main,
4242
menu,
4343
nav,
44-
section,
45-
summary {
44+
section {
4645
display: block;
4746
}
4847

assets/sass/search.scss

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,3 +143,43 @@ ol.full-search-results {
143143
margin-top: 4px;
144144
}
145145
}
146+
147+
// Search results page
148+
#search-div {
149+
border: solid 1px $base-border-color;
150+
background: $main-bg;
151+
padding: 22px;
152+
@include border-radius(5px);
153+
154+
ol {
155+
background-color: $callout-color;
156+
@include border-radius(3px);
157+
padding: 8px 14px 4px;
158+
margin: 0 0 1.4em;
159+
list-style: none;
160+
}
161+
162+
163+
.pagefind-ui__result-inner > .pagefind-ui__result-title {
164+
font-size: 16px;
165+
line-height: $base-line-height * 2;
166+
font-weight: bold;
167+
}
168+
169+
.pagefind-ui__result-tags {
170+
list-style: none;
171+
color: $light-font-color;
172+
margin-bottom: 1.4em;
173+
margin-left: 0;
174+
}
175+
}
176+
177+
button {
178+
border-color: $link-color;
179+
color: $link-color;
180+
background: $callout-color;
181+
font-weight: bold;
182+
@include border-radius(3px);
183+
outline: none;
184+
padding: 0 0.5em;
185+
}

assets/sass/variables.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,4 @@ $base-border-color: #d8d7cf;
3232
$callout-color: #e9e8e0;
3333

3434
$black-3 : #333333;
35+
$main-bg: #fcfcfa;

content/search/results.html

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,4 @@
44
- "/search/results"
55
---
66

7-
<div id="main">
8-
<h1>Search results for <strong id="search-term"></strong></h1>
9-
<ol class="full-search-results"></ol>
10-
</div>
7+
<div id="search-div"></div>

layouts/partials/footer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@
1414
<script src="/js/jquery-1.7.1.min.js"></script>
1515
<script src="/js/jquery-ui-1.8.18.custom.min.js"></script>
1616
<script src="/js/jquery.defaultvalue.js"></script>
17-
<script src="/js/session.min.js"></script>
17+
{{ if eq (.Scratch.Get "section") "search" }}<script src="/pagefind/pagefind-ui.js"></script>{{ end }}
1818
{{ $js := resources.Get "js/application.js" | resources.ExecuteAsTemplate "js/application.js" . | resources.Minify }}
1919
<script src="{{ $js.RelPermalink }}"></script>

layouts/partials/header.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,12 @@
1313
var tagline = taglines[Math.floor(Math.random() * taglines.length)];
1414
document.getElementById('tagline').innerHTML = '--' + tagline;
1515
</script>
16+
17+
{{ if ne (.Scratch.Get "section") "search" }}
1618
<form id="search" action="/search/results">
1719
<input id="search-text" name="search" placeholder="Type / to search entire site…" autocomplete="off" type="text" />
1820
</form>
1921
<div id="search-results"></div>
22+
{{ end }}
2023

2124
</header>

0 commit comments

Comments
 (0)