make the thing work nicely
This commit is contained in:
parent
33cb84713f
commit
cc00f805ed
6
assets/static/lunr.min.js
vendored
Normal file
6
assets/static/lunr.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -97,18 +97,34 @@ h6 {
|
|||
|
||||
.sidebox ol {
|
||||
padding-left: 1em;
|
||||
margin: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.sidebox ul {
|
||||
padding-left: 0em;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.sidebox .sidebox-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.search-form-wrap {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input.search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* layout */
|
||||
|
||||
header {
|
||||
height: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(to bottom, #fafafa, #fafafa 66%, #eeeeee);
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -301,6 +317,11 @@ main {
|
|||
/* responsive switchery */
|
||||
|
||||
@media screen and (min-width: 390pt /*30 rem*/) {
|
||||
|
||||
input.search {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
|
@ -320,7 +341,6 @@ main {
|
|||
|
||||
header {
|
||||
height: 8rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.flex-sidefill-l {
|
||||
|
|
@ -373,6 +393,11 @@ main {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 1040pt /*80 rem*/) {
|
||||
|
||||
header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.flex-sidefill-r {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
|
@ -388,6 +413,11 @@ main {
|
|||
.sidebox {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.sidebox .sidebox-right {
|
||||
text-align: left;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300pt /*100 rem*/) {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
---
|
||||
mount: /
|
||||
title: How-To Cards main page
|
||||
template: index.html
|
||||
---
|
||||
|
||||
# Index page
|
||||
|
||||
hello everyone!
|
||||
# How-To Cards
|
||||
|
|
|
|||
7
cards/search.md
Normal file
7
cards/search.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
mount: /search
|
||||
title: Search
|
||||
template: search.html
|
||||
---
|
||||
|
||||
# Search
|
||||
|
|
@ -23,6 +23,13 @@
|
|||
<div class="flex-sidefill-l"></div>
|
||||
<div class="content-holder">
|
||||
<div class="sidebox">
|
||||
<div class="sidebox-right">
|
||||
<a href="{{root}}">Home</a>
|
||||
|
|
||||
<a href="{{root}}tag">Categories</a>
|
||||
|
|
||||
<a href="{{root}}search">Search</a>
|
||||
</div>
|
||||
{{?htags}}
|
||||
<div class="sidebar-header">
|
||||
Page categories
|
||||
|
|
|
|||
9
templates/index.html
Normal file
9
templates/index.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
{{> head.html}}
|
||||
<body>
|
||||
{{> header.html}}
|
||||
{{> searchform.html}}
|
||||
{{{body}}}
|
||||
{{> footer.html}}
|
||||
</body>
|
||||
</html>
|
||||
6
templates/searchform.html
Normal file
6
templates/searchform.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<div class="search-form-wrap">
|
||||
<form action="{{root}}search/">
|
||||
<input class="search" placeholder="What are you looking for?" name="search_query" id="search_query" />
|
||||
<button class="search" type="submit">Search!</button>
|
||||
</form>
|
||||
</div>
|
||||
114
templates/searchresults.html
Normal file
114
templates/searchresults.html
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<link rel="prefetch" href="{{root}}search-index.json" />
|
||||
<link rel="prefetch" href="{{root}}search-metadata.json" />
|
||||
|
||||
<div id="search_placeholder">
|
||||
<p>Search is loading. If you cannot see any results after a few seconds, check that JavaScript is enabled in your browser.</p>
|
||||
</div>
|
||||
|
||||
<div id="search_noquery">
|
||||
<p>Enter a few words to the box above to start the search.</p>
|
||||
</div>
|
||||
|
||||
<div id="search_success" style="display: none">
|
||||
<h1>Search results</h1>
|
||||
<div id="search_results">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="search_fail" style="display: none">
|
||||
<h1>No results found</h1>
|
||||
<p>You may try a simpler search query, or find the page <a href="{{root}}tag">by the categories</a>.</p>
|
||||
</div>
|
||||
|
||||
<div id="search_error" style="display: none">
|
||||
<h1>Search error</h1>
|
||||
<p>Search failed; this is likely caused by a badly formatted query string. Try a different query.</p>
|
||||
<p>The error description is: <span style="color: red" id="search_error_text"></span></p>
|
||||
</div>
|
||||
|
||||
<script src="{{root}}static/lunr.min.js"></script>
|
||||
|
||||
<script>
|
||||
var el_query = document.getElementById('search_query');
|
||||
var el_placeholder = document.getElementById('search_placeholder');
|
||||
var el_noquery = document.getElementById('search_noquery');
|
||||
var el_success = document.getElementById('search_success');
|
||||
var el_fail = document.getElementById('search_fail');
|
||||
var el_error = document.getElementById('search_error');
|
||||
var el_error_text = document.getElementById('search_error_text');
|
||||
var el_results = document.getElementById('search_results');
|
||||
|
||||
function run_search(q) {
|
||||
el_placeholder.style.display = 'none';
|
||||
|
||||
if(q.length === 0) {
|
||||
el_noquery.style.display = 'block';
|
||||
el_success.style.display = 'none';
|
||||
el_fail.style.display = 'none';
|
||||
el_error.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
var results = []
|
||||
|
||||
try {
|
||||
results = window.search_index.search(q)
|
||||
} catch (err) {
|
||||
console.log("search error: " + err);
|
||||
el_error_text.innerHTML = '';
|
||||
el_error_text.appendChild(document.createTextNode(err.message));
|
||||
|
||||
el_noquery.style.display = 'none';
|
||||
el_success.style.display = 'none';
|
||||
el_fail.style.display = 'none';
|
||||
el_error.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
el_results.innerHTML = ''
|
||||
for(var ri=0; ri<results.length; ++ri) {
|
||||
if (ri>=100) {
|
||||
var out = document.createElement("p")
|
||||
out.innerHTML = "Displaying only 100 top matches. Try searching for more specific terms to refine the search."
|
||||
el_results.appendChild(out)
|
||||
break;
|
||||
}
|
||||
|
||||
const r=results[ri]
|
||||
var out = document.createElement("p")
|
||||
out.appendChild(document.createTextNode(window.search_metadata[r.ref].title))
|
||||
el_results.appendChild(out)
|
||||
}
|
||||
|
||||
if(results.length === 0) {
|
||||
el_noquery.style.display = 'none';
|
||||
el_success.style.display = 'none';
|
||||
el_fail.style.display = 'block';
|
||||
el_error.style.display = 'none';
|
||||
} else {
|
||||
el_noquery.style.display = 'none';
|
||||
el_success.style.display = 'block';
|
||||
el_fail.style.display = 'none';
|
||||
el_error.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function handle_search_input(ev) {
|
||||
run_search(ev.target.value)
|
||||
window.history.pushState("", "", window.location.pathname + '?search_query='+encodeURIComponent(ev.target.value))
|
||||
el_query.addEventListener('input', handle_search_input)
|
||||
}
|
||||
|
||||
Promise.all([
|
||||
fetch('{{root}}search-index.json').then(response => response.text()).then(text => {
|
||||
window.search_index = lunr.Index.load(JSON.parse(text))
|
||||
}),
|
||||
fetch('{{root}}search-metadata.json').then(response => response.text()).then(text => {
|
||||
window.search_metadata = JSON.parse(text)
|
||||
})
|
||||
]).then(() => {
|
||||
var search_term = (new URLSearchParams(window.location.search)).get('search_query') || "";
|
||||
el_query.value = search_term
|
||||
handle_search_input({target: {value: search_term}})
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in a new issue