add search support using fusejs

assets/css/main.scss

@@ -44,6 +44,16 @@ main p a:hover {
   text-decoration: underline;
 }
 
+main .search > input {
+  width: 100%;
+  padding: .5em;
+  font-size: large;
+  border: 2px solid var(--grid);
+  border-radius: 2px;
+  background-color: transparent;
+  outline: none;
+}
+
 @keyframes showup {
   from {
     opacity: 0;

assets/css/theme.scss

@@ -46,6 +46,7 @@
   --prime: #3170a7;
   --back: #e6dece;
   --text: #434343;
+  --grid: #555;
 
   --code-back: #dbd3c1be;
   --code-text: #24292f;
@@ -58,6 +59,7 @@
   --prime: #3170a7;
   --back: #ccc;
   --text: #434343;
+  --grid: #555;
 
   --code-back: #c1c1c1be;
   --code-text: #24292f;

assets/js/search.js

@@ -0,0 +1,24 @@
+import * as params from '@params';
+
+const search_input = document.querySelector("#search-input");
+const search_result = document.querySelector("#search-result");
+
+let fuse;
+
+window.onload = async function() {
+  const data = await fetch("../index.json").then(res => res.json());
+  const opts = params.search.fuse;
+  fuse = new Fuse(data, opts);
+}
+
+search_input.addEventListener("input", function () {
+  if (!fuse) return;
+  const results = fuse.search(this.value.trim());
+  let html = '';
+  if (results.length > 0) {
+    for (const v of results) {
+      html += `<li><a href="${v.item.permalink}">${v.item.title}</a></li>`;
+    }
+  }
+  search_result.innerHTML = html;
+})

assets/js/selectable.js

@@ -1,6 +1,8 @@
+import * as params from '@params';
+
 export function setup_selectable () {
-  const selectable = '{{ .Site.Params.selectable }}'
-  if (selectable === 'false') {
+  const selectable = params.selectable
+  if (!selectable) {
     document.documentElement.style = 'user-select:none'
   }
 }

assets/js/theme.js

@@ -1,7 +1,9 @@
-const comment = '{{ .Site.Params.comment.provider }}'
-const default_theme_config = '{{ .Site.Params.defaultTheme }}'
-const icon_light = '{{ index .Site.Params.switch 1 }}'
-const icon_dark = '{{ index .Site.Params.switch 0 }}'
+import * as params from '@params';
+
+const comment = params.comment.provider
+const default_theme_config = params.defaulttheme
+const icon_light = params.switch[1]
+const icon_dark = params.switch[0]
 const THEME_LIGHT = default_theme_config === 'system' ? 'light' : default_theme_config
 const THEME_DARK = 'dark'