Merge pull request #6 from jbowdre/preview

Implement site search
This commit is contained in:
John Bowdre 2024-01-15 18:36:12 -06:00 committed by GitHub
commit cb68d36077
10 changed files with 3593 additions and 2 deletions

3475
assets/js/lunr.js Normal file

File diff suppressed because it is too large Load diff

44
assets/js/search.js Normal file
View file

@ -0,0 +1,44 @@
function displayResults (results, store) {
const searchResults = document.getElementById('results');
if (results.length) {
let resultList = '';
for (const n in results) {
const item = store[results[n].ref];
resultList += '<li><a href="' + item.url + '">' + item.title + '</a></li>'
if (item.description)
resultList += '<p>' + item.description + '</p>'
else
resultList += '<p>' + item.content.substring(0, 150) + '...</p>'
}
searchResults.innerHTML = resultList;
} else {
searchResults.innerHTML = 'No results found.';
}
}
const params = new URLSearchParams(window.location.search);
const query = params.get('query');
if (query) {
document.getElementById('search-query').setAttribute('value', query);
const idx = lunr(function () {
this.ref('id')
this.field('title', {
boost: 15
})
this.field('tags')
this.field('content', {
boost: 10
})
for (const key in window.store) {
this.add({
id: key,
title: window.store[key].title,
tags: window.store[key].tags,
content: window.store[key].content
})
}
})
const results = idx.search(query);
displayResults(results, window.store)
}

3
content/search/_index.md Normal file
View file

@ -0,0 +1,3 @@
---
title: Search me!
---

View file

@ -14,3 +14,4 @@
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
{{ partial "search-form.html" . }}

View file

@ -3,6 +3,7 @@
<p class="powered_by">{"powered_by": [{{- range $i, $link := .Site.Params.powerLinks }}{{ if $i }}, {{ end }}&quot;<a target="_blank" href="{{ $link.url }}">{{ $link.title }}</a>&quot;{{ end }}]} <p class="powered_by">{"powered_by": [{{- range $i, $link := .Site.Params.powerLinks }}{{ if $i }}, {{ end }}&quot;<a target="_blank" href="{{ $link.url }}">{{ $link.title }}</a>&quot;{{ end }}]}
<br>&lt;<a target="_blank" href="https://github.com/jbowdre/runtimeterror">view source</a>&gt;</p> <br>&lt;<a target="_blank" href="https://github.com/jbowdre/runtimeterror">view source</a>&gt;</p>
{{ partial "search-index.html" .}}
{{ if (findRE "<pre" .Content 1) }} {{ if (findRE "<pre" .Content 1) }}
{{ $jsCopy := resources.Get "js/code-copy-button.js" | minify }} {{ $jsCopy := resources.Get "js/code-copy-button.js" | minify }}
<script src="{{ $jsCopy.RelPermalink }}"></script> <script src="{{ $jsCopy.RelPermalink }}"></script>

View file

@ -0,0 +1,5 @@
<form id="search"
action='{{ with .GetPage "/search" }}{{ .Permalink }}{{ end }}' method="get">
<input type="input" id="search-query" name="query" placeholder="grep -i" aria-label="search text">
<button type="submit" aria-label="search button"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>

View file

@ -0,0 +1,17 @@
<script>
window.store = {
{{ range where .Site.Pages "Section" "posts" }}
"{{ .Permalink }}": {
"title": "{{ .Title }}",
"tags": [{{ range .Params.Tags }}"{{ . }}",{{ end }}],
"content": {{ .Content | plainify }},
"description": {{ .Description | plainify }},
"url": "{{ .Permalink }}"
},
{{ end }}
}
</script>
{{ $jsLunr := resources.Get "js/lunr.js" | minify }}
<script src="{{ $jsLunr.RelPermalink }}"></script>
{{ $jsSearch := resources.Get "js/search.js" | minify }}
<script src="{{ $jsSearch.RelPermalink }}"></script>

9
layouts/search/list.html Normal file
View file

@ -0,0 +1,9 @@
{{ define "main" }}
{{ partial "search-form.html" . }}
<br>
<ul id="results">
<li>
Enter a keyword above to search this site.
</li>
</ul>
{{ end }}

View file

@ -216,4 +216,38 @@ code,
kbd, kbd,
samp { samp {
color: var(--code); color: var(--code);
} }
/* search box styling */
form {
display: flex;
flex-direction: row;
border-radius: 0.25rem;
outline: 0.25rem solid var(--bg);
}
input {
flex-grow: 2;
border: none;
background-color: var(--off-bg);
color: var(--off-fg);
height: 1.5rem;
border-radius: 0.25rem;
padding-left: 0.5rem;
font-family: var(--font-monospace);
}
input:focus {
outline: none;
}
form:focus-within {
outline: 1px solid var(--logo);
}
form button {
outline: none;
border: none;
background-color: var(--off-bg);
color: var(--link);
}

View file

@ -58,7 +58,9 @@ module.exports = {
// appear, the file will be ignored. // appear, the file will be ignored.
excludePatterns: [ excludePatterns: [
'/node_modules/', '/node_modules/',
'/vendor/' '/vendor/',
'/series/',
'/tags/'
] ]
} }
} }