Aggiornamento Musica, Miglioramento ricerca con delay query

assets/ButtonBadges.toml

@@ -35,6 +35,7 @@ href = "/miscellanea/Open-Source-sitoctt/"
 alt = "✨sitoctt"
 file = "Sites/sitoctt-1.png"
 href = "/miscellanea/Raccolta-Siti-Internet/#il-mio"
+oc = true
 
 [[10-site]]
 alt = "Sign my guestoobk"
@@ -85,16 +86,19 @@ alt = "Visita la OctoSpacc Hub"
 file = "Sites/octospacc-hub-1.png"
 href = "https://hub.octt.eu.org"
 rel = "me"
+oc = true
 
 [[20-me]]
 alt = "Visita il mio Fritto Misto di OctoSpacc"
 file = "Sites/fritto-misto-di-octospacc-1.png"
 href = "https://octospacc.altervista.org"
 rel = "me"
+oc = true
 
 [[20-me]]
 alt = "Bandiera Octt"
 file = "Octt-Flag.png"
+oc = true
 
 [[20-me]]
 alt = "Rainbow"
@@ -210,6 +214,7 @@ alt = "Firefox"
 file = "Firefox-Modern.png"
 href = "https://www.mozilla.org/it/firefox"
 spam = true
+oc = true
 
 [[50-fun]]
 alt = "The Onion Router"

content/it/miscellanea/Raccolta-Musica.md

@@ -31,7 +31,21 @@ Sapevo fossero la stessa persona, ma non sapevo che "Ujico" e "Snail's House" fo
 
 * [SoundCloud](https://soundcloud.com/ujico), [YouTube](https://www.youtube.com/channel/UCYxBY8mhJ7R2rMIcQ28H_Zw), [Bandcamp](https://0101.bandcamp.com/music), [Archive.org](https://archive.org/details/ujico-snails-house-full-discography)
 
-<!-- ## Album vari -->
+## Album vari
+
+### FÜGENE
+
+* [FÜGENE 01](https://linkco.re/XRuRv8rH?lang=en): [YouTube](https://music.youtube.com/playlist?list=OLAK5uy_khd5b0R0IMDkw0gePLwh5Rrgr9WGHEsvg), [Bandcamp](https://megarex-jp.bandcamp.com/album/fugene-01)
+* [FÜGENE 02](https://linkco.re/mDPeVZRV?lang=en): [YouTube](https://music.youtube.com/playlist?list=OLAK5uy_mWo8vkOoCPpP1lCY8UeiBCSoWYEgx-_ME)
+* [FÜGENE 03](https://linkco.re/AuSy2sZ6?lang=en): [YouTube](https://music.youtube.com/playlist?list=OLAK5uy_l_FdJ96W2OaVCMQebNejLt3VXOnd5qpOY)
+* [FÜGENE 04](https://linkco.re/C3vsXvtq?lang=en): [YouTube](https://music.youtube.com/playlist?list=OLAK5uy_nWn26hNyAqHxJJ40lbYqRczBYDswPLRAc)
+* [FÜGENE Remixes](https://linkco.re/YxcmVDHX?lang=en): [YouTube](https://music.youtube.com/playlist?list=OLAK5uy_lzy3JOHetCfnOMdcQhPxjeM3cKisvYIrk)
+
+### SPD GAR
+
+* [SPD GAR 001](https://linkco.re/cF0ZGmQP?lang=en): [YouTube](https://music.youtube.com/playlist?list=OLAK5uy_mNq8bjZS7WjR0Ir-bB_xiwfo308YKIQB0), [Bandcamp](https://megarex-jp.bandcamp.com/album/spd-gar-001)
+* [SPD GAR 002](https://linkco.re/UMBY67rd?lang=en): [YouTube](https://music.youtube.com/playlist?list=OLAK5uy_mM8EfyV20cZEhVZiLdSZNbI763Jg0KK0s), [Bandcamp](https://megarex-jp.bandcamp.com/album/spd-gar-002)
+* [SPD GAR 003](https://linkco.re/4M5rXzbd?lang=en): [YouTube](https://music.youtube.com/playlist?list=OLAK5uy_lGHiR_5TwywEjY-EDBoIfeDb5LM07MKT0)
 
 ## Menzioni speciali
 

layouts/partials/search-applet.html

@@ -9,7 +9,7 @@
     class="flex flex-column w-100 max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"
   >
     <header class="relative z-10 flex items-center justify-between flex-none px-2">
-      <form class="flex items-center flex-auto min-w-0">
+      <form class="flex items-center flex-auto min-w-0" onsubmit="return false;">
         <div class="flex items-center justify-center w-8 h-8 text-neutral-400">
           {{/* partial "icon.html" "search" */}}
         </div>

static/site-search.js

@@ -1,12 +1,11 @@
 (function(){
 // TODO fix ajax navigation to different-language page, doesn't currently load the index for the selected language
-// TODO better perf
 // TODO thumbnails?
 // TODO highlight found word in text summary? we must handle generating summary client-side at different points of text for it to work
 
 function init () {
 
-var fuse;
+var fuse, queryTimeout, lastQueryTerm;
 var hideButton = document.getElementById("close-search-button");
 var wrapper = document.getElementById("search-wrapper");
 var modal = document.getElementById("search-modal");
@@ -31,7 +30,14 @@ document.addEventListener('keydown', SiteSearchOnKeyHandler);
 
 // Update search on each keypress
 input.onkeyup = function (event) {
-  executeQuery(this.value);
+  if (input.value !== lastQueryTerm) {
+    queryTimeout = clearTimeout(queryTimeout);
+    queryTimeout = setTimeout(function(){
+      queryTimeout = null;
+      executeQuery(input.value);
+    }, 300);
+    lastQueryTerm = input.value;
+  }
 };
 
 function documentOnKeyDown (event) {
@@ -48,8 +54,17 @@ function documentOnKeyDown (event) {
     hideSearch();
   }
 
-  if (event.key == "ArrowDown") {
-    if (searchVisible && hasResults) {
+  if ((event.key === 'Enter' || event.key === 'ArrowDown') && searchVisible && queryTimeout) {
+    queryTimeout = clearTimeout(queryTimeout);
+    executeQuery(input.value);
+  }
+
+  if (!searchVisible || !hasResults) {
+    return;
+  }
+
+  switch (event.key) {
+    case 'ArrowDown': {
       event.preventDefault();
       if (document.activeElement == input) {
         first.focus();
@@ -58,11 +73,10 @@ function documentOnKeyDown (event) {
       } else {
         document.activeElement.parentElement.nextSibling.firstElementChild.focus();
       }
+      break;
     }
-  }
 
-  if (event.key == "ArrowUp") {
-    if (searchVisible && hasResults) {
+    case 'ArrowUp': {
       event.preventDefault();
       if (document.activeElement == input) {
         input.focus();
@@ -71,18 +85,18 @@ function documentOnKeyDown (event) {
       } else {
         document.activeElement.parentElement.previousSibling.firstElementChild.focus();
       }
+      break;
     }
-  }
 
-  // Enter to get to results
-  if (event.key == "Enter") {
-    if (searchVisible && hasResults) {
+    // Enter to get to results
+    case 'Enter': {
       event.preventDefault();
       if (document.activeElement == input) {
         first.focus();
       } else {
         document.activeElement.click();
       }
+      break;
     }
   }
 }
@@ -132,8 +146,8 @@ function buildIndex() {
 }
 
 function executeQuery(term) {
-  let results = fuse.search(term);
-  let resultsHTML = "";
+  var results = fuse.search(term);
+  var resultsHTML = "";
 
   if (results.length > 0) {
     results.forEach(function (value, key) {