You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
4.1 KiB
HTML
109 lines
4.1 KiB
HTML
<div class="container-fluid">
|
|
<form action="{{ .Page.RelPermalink }}" dir="auto" method="get">
|
|
<div class="justify-content-center mb-3 row">
|
|
<div class="col col-sm-8 col-md-7 col-lg-6 col-xl-5 col-xxl-4">
|
|
<input aria-label="Query" class="form-control" id="query" name="q" type="search" placeholder="Query">
|
|
</div>
|
|
</div>
|
|
<div class="justify-content-center row">
|
|
<div class="col col-auto">
|
|
<button class="btn btn-primary" type="submit">Search</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="paige-error" style="display: none">
|
|
<p class="lead text-center text-danger">Error</p>
|
|
</div>
|
|
<div id="paige-nothing" style="display: none">
|
|
<p class="lead text-center">Found nothing</p>
|
|
</div>
|
|
<div id="paige-searching" style="display: none">
|
|
<p class="lead text-center">Searching...</p>
|
|
</div>
|
|
<div id="paige-something" style="display: none">
|
|
<p class="lead text-center">Found something</p>
|
|
</div>
|
|
<script crossorigin="anonymous" defer integrity="sha384-1LalyFI+BycKouEClZE5CoFnlLr+Kx8Wslc45o5NATVo+c2mEh02i8HNaaT7XOdQ" referrerpolicy="no-referrer" src="https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@0.7.31/dist/flexsearch.bundle.js"></script>
|
|
<script>
|
|
var errorElement = document.getElementById("paige-error");
|
|
var nothingElement = document.getElementById("paige-nothing");
|
|
var queryElement = document.getElementById("query");
|
|
var searchingElement = document.getElementById("paige-searching")
|
|
var somethingElement = document.getElementById("paige-something");
|
|
|
|
if (queryElement !== null) {
|
|
var queryText = decodeURIComponent((location.search.split("q=")[1] || "").split("&")[0]).replace(/\+/g, " ");
|
|
if (queryText) {
|
|
queryElement.value = queryText;
|
|
search(queryText);
|
|
}
|
|
}
|
|
|
|
function search(queryText) {
|
|
show(searchingElement);
|
|
fetch("/index.json").then(function (response) {
|
|
if (response.status !== 200) {
|
|
console.log("Cannot load /index.json", response);
|
|
hide(searchingElement);
|
|
show(errorElement);
|
|
return;
|
|
}
|
|
response.json().then(function (pages) {
|
|
var index = new FlexSearch.Document({
|
|
document: {
|
|
id: "link",
|
|
index: ["categories", "description", "keywords", "tags", "text", "title"]
|
|
}
|
|
});
|
|
var pathPage = {};
|
|
pages.forEach(function (page) {
|
|
index.add(page);
|
|
pathPage[page.link] = page;
|
|
});
|
|
var results = index.search(queryText, {limit: 50});
|
|
hide(searchingElement);
|
|
var shown = false;
|
|
var done = {};
|
|
results.forEach(function (result) {
|
|
result.result.forEach(function (path) {
|
|
if (path === "{{ .RelPermalink }}" || done[path]) {
|
|
return;
|
|
}
|
|
if (!shown) {
|
|
shown = true;
|
|
show(somethingElement);
|
|
}
|
|
done[path] = true;
|
|
var page = pathPage[path];
|
|
var link = document.createElement("a");
|
|
link.href = page.link;
|
|
link.innerText = page.title;
|
|
var result = document.createElement("p");
|
|
result.classList = "text-center";
|
|
result.appendChild(link);
|
|
if (page.description) {
|
|
result.appendChild(document.createElement("br"));
|
|
result.innerHTML += page.description;
|
|
}
|
|
somethingElement.appendChild(result);
|
|
});
|
|
});
|
|
if (!shown) {
|
|
show(nothingElement);
|
|
}
|
|
}).catch(function (error) {
|
|
console.log("Cannot search /index.json", error);
|
|
});
|
|
});
|
|
}
|
|
|
|
function hide(element) {
|
|
element.style.display = "none";
|
|
}
|
|
|
|
function show(element) {
|
|
element.style.display = "block";
|
|
}
|
|
</script>
|