exa/reploy
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

actually render the search results as clickable

Browse source
This commit is contained in:
Mirek Kratochvil 2023-06-17 23:19:36 +02:00
parent 0ae3dc41ba
commit 3db784b04e
4 changed files with 50 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
assets/style.css
View file

@ -116,6 +116,22 @@ h6 {
text-align: center; text-align: center;
} }
ul.search-results li {
margin-bottom: 1em;
}
ul.search-results li a.search-result {
font-size: 120%;
display: block;
}
ul.search-results li div.search-tag {
display: block;
font-size: 80%;
color: #555;
font-weight: bold;
}
input.search { input.search {
width: 100%; width: 100%;
} }
@ -250,17 +266,18 @@ main {
padding-left: 2rem; padding-left: 2rem;
padding-right: 2rem; padding-right: 2rem;
font-size: 80%;
color: #777; color: #777;
} }
.sidebar-header { .sidebar-header {
font-weight: bold; font-weight: bold;
font-size: 80%;
} }
.sidebar-values { .sidebar-values {
padding-left: 1em; padding-left: 1em;
margin-bottom: 1em; margin-bottom: 1em;
font-size: 80%;
} }
/* main content */ /* main content */

4
templates/header.html
View file

@ -31,10 +31,10 @@
<a href="{{root}}search">Search</a> <a href="{{root}}search">Search</a>
</div> </div>
{{?htags}} {{?htags}}
<div class="sidebar-header"> <div class="sidebox-header">
Page categories Page categories
</div> </div>
<div class="sidebar-values"> <div class="sidebox-values">
<ul> <ul>
{{#htags}} {{#htags}}
<li>{{#.}}<a href="{{href}}">{{^tag}}all{{/tag}}{{?tag}} » {{tag}}{{/tag}}{{/.}}</a></li> <li>{{#.}}<a href="{{href}}">{{^tag}}all{{/tag}}{{?tag}} » {{tag}}{{/tag}}{{/.}}</a></li>

9
templates/search.html Normal file
View file

@ -0,0 +1,9 @@
<html>
{{> head.html}}
<body>
{{> header.html}}
{{> searchform.html}}
{{> searchresults.html}}
{{> footer.html}}
</body>
</html>

25
templates/searchresults.html
View file

@ -6,13 +6,15 @@
</div> </div>
<div id="search_noquery"> <div id="search_noquery">
<p>Enter a few words to the box above to start the search.</p> <p>Enter a few words into the box above to start the search.</p>
<p>You may use <code>*</code> for wildcard search, and prefixes <code>+</code> for required terms and <code>-</code> for unwanted terms.</p>
<p><strong>Example:</strong> <code>laboratory noteb* +red -code</code> will find information about <em>laboratory notebooks</em> that must also describe something <em>red</em>, but do not contain any mention of <em>code</em>.</p>
</div> </div>
<div id="search_success" style="display: none"> <div id="search_success" style="display: none">
<h1>Search results</h1> <h1>Search results</h1>
<div id="search_results"> <ul id="search_results" class="search-results">
</div> </ul>
</div> </div>
<div id="search_fail" style="display: none"> <div id="search_fail" style="display: none">
@ -75,8 +77,19 @@
} }
const r = results[ri] const r = results[ri]
var out = document.createElement("p") const m = window.search_metadata[r.ref]
out.appendChild(document.createTextNode(window.search_metadata[r.ref].title)) var out = document.createElement("li")
var a = document.createElement("a")
a.className = "search-result"
a.appendChild(document.createTextNode(m.title))
a.href = r.ref
out.appendChild(a)
for(var ti=0; ti<m.tags.length; ++ti) {
t = document.createElement("div")
t.className = "search-tag"
t.appendChild(document.createTextNode(m.tags[ti].join(" » ")));
out.appendChild(t);
}
el_results.appendChild(out) el_results.appendChild(out)
} }
@ -98,6 +111,8 @@
window.history.pushState("", "", window.history.pushState("", "",
window.location.pathname + '?search_query='+encodeURIComponent(ev.target.value) window.location.pathname + '?search_query='+encodeURIComponent(ev.target.value)
) )
// This reinstalls the listener only _after_ the original event is done,
// preventing infinite events and CPU boils if a cat steps on the keyboard.
el_query.addEventListener('input', handle_search_input) el_query.addEventListener('input', handle_search_input)
} }