tcsenpai/obsidiangarden_netlify
1
0
Fork 0
mirror of https://github.com/tcsenpai/obsidiangarden_netlify.git synced 2025-06-06 20:55:21 +00:00
Code Issues 5 Packages Projects Releases Wiki Activity

Merge branch 'main' into main

Browse Source
This commit is contained in:
Ole Eskild Steensen 2023-01-08 16:09:34 +01:00 committed by GitHub
commit c18dc85dfb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/site/_includes/components/searchContainer.njk
View File

@ -8,7 +8,7 @@
</div>
<div class="navigation-hint">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
<i class="fa fa-arrow-up" aria-hidden="true"></i>
<i class="fa fa-arrow-down" aria-hidden="true"></i>
<span>to navigate</span>
</div>

48
src/site/_includes/components/searchScript.njk
View File

@ -19,6 +19,50 @@
window.search();
}
const loadingSvg = `
<svg width="100" height="100" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2">
<circle cx="22" cy="22" r="6" stroke-opacity="0">
<animate attributeName="r"
begin="1.5s" dur="3s"
values="6;22"
calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="stroke-opacity"
begin="1.5s" dur="3s"
values="1;0" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="stroke-width"
begin="1.5s" dur="3s"
values="2;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="22" cy="22" r="6" stroke-opacity="0">
<animate attributeName="r"
begin="3s" dur="3s"
values="6;22"
calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="stroke-opacity"
begin="3s" dur="3s"
values="1;0" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="stroke-width"
begin="3s" dur="3s"
values="2;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="22" cy="22" r="8">
<animate attributeName="r"
begin="0s" dur="1.5s"
values="6;1;2;3;4;5;6"
calcMode="linear"
repeatCount="indefinite" />
</circle>
</g>
</svg>`;
function debounce(func, wait, immediate) {
var timeout;
return function() {
@ -119,7 +163,7 @@
}
});
const debouncedSearch = debounce(search, 250, false);
const debouncedSearch = debounce(search, 200, false);
field = document.querySelector('#term');
field.addEventListener('keydown', (e) => {
if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
@ -145,6 +189,8 @@
if(search == lastSearch) return;
console.log(`search for ${search}`);
window.lastSearch = search;
resultsDiv.innerHTML = loadingSvg;
let searchRequest = await fetch(`/api/search?term=${encodeURIComponent(search)}`);
let results = await searchRequest.json();
let resultsHTML = '';