WIP

Things to figure out:

- Why is isso breaking when I add the modal (TODO: try individual
  components and see if that still breaks Isso; just to investigate)
- Can we use the modal trigger but have that just go to a custom page,
  or should it just build the search menu at the top of the current page
  (not an overlay like the all-in-one searchbox you can add; I mean
  actually it just goes to the top of the body and puts the search menu
  and filtering stuff there)
- Dark mode

assets/js/bobatheme.js

@@ -0,0 +1,25 @@
+// code block copy to clipboard
+window.onload = () => {
+    document.querySelectorAll(".code-block").forEach(codeBlock => {
+        const button = codeBlock.querySelector(".code-header > .code-copy-button");
+
+        // lang will not be unset because we default it to text
+        // clone it so it doesn't change the actual DOM element
+        const codeElem = codeBlock.querySelector("code[data-lang]").cloneNode(true);
+        // bashsession: remove command output lines
+        codeElem.querySelectorAll(".go").forEach(e => e.parentNode.removeChild(e));
+        // bashsession: remove prompt symbol
+        codeElem.querySelectorAll(".gp").forEach(e => e.parentNode.removeChild(e));
+        const rawCode = codeElem.innerText;
+
+        const originalCopyText = button.innerHTML;
+        button.onclick = event => {
+            navigator.clipboard.writeText(rawCode);
+            // TODO: maybe we could add a fancier indicator, like a flash or something
+            event.target.innerHTML = "Copied!";
+            setTimeout(() => {
+                event.target.innerHTML = originalCopyText;
+            }, 3000);
+        }
+    });
+}

assets/js/bobatheme.tmpl.js

@@ -1,21 +0,0 @@
-// code block copy to clipboard
-async function copy_to_clipboard(button) {
-    const codeBlock = button.parentElement.parentElement;
-
-    // lang will not be unset because we default it to textoriginalCopyText
-    // clone it so it doesn't change the actual DOM element
-    const codeElem = codeBlock.querySelector("code[data-lang]").cloneNode(true);
-    // bashsession: remove command output lines
-    codeElem.querySelectorAll(".go").forEach(e => e.parentNode.removeChild(e));
-    // bashsession: remove prompt symbol
-    codeElem.querySelectorAll(".gp").forEach(e => e.parentNode.removeChild(e));
-    const rawCode = codeElem.innerText;
-
-    await navigator.clipboard.writeText(rawCode);
-
-    // TODO: maybe we could add a fancier indicator, like a flash or something
-    button.innerHTML = "Copied!";
-    setTimeout(() => {
-        button.innerHTML = "{{ i18n "copy_to_clipboard" }}";
-    }, 3000);
-}

layouts/_markup/render-codeblock.html

@@ -5,8 +5,7 @@
 <div class="code-block">
     <div class="code-block-header">
         <pre class="code-block-type">{{ $type }}</pre>
-        {{/* https://blog.udemy.com/javascript-href/ */}}
-        <a href="javascript:null" onClick="javascript:copy_to_clipboard(this)" class="code-block-copy-button">
+        <a href="javascript:void(0)" class="code-block-copy-button">
             {{ i18n "copy_to_clipboard" }}
         </a>
     </div>

layouts/_partials/head.html

@@ -19,11 +19,9 @@
         <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" media="print" onload="this.media='all'">
     {{ end }}
 
-    {{ with resources.Get "js/bobatheme.tmpl.js" }}
-        {{ with resources.ExecuteAsTemplate "js/bobatheme.js" $ . | fingerprint "sha512" }}
+    {{ with resources.Get "js/bobatheme.js" | fingerprint "sha512" }}
         <script defer src="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
     {{ end }}
-    {{ end }}
     {{ if not hugo.IsServer }}
         <script defer data-domain="bbaovanc.com" src="https://plausible.bbaovanc.com/js/bobalytics.outbound-links.js"></script>
         <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
@@ -70,19 +68,12 @@
             >
     </script>
 
-    {{ if eq .Layout "search" }}
     {{ with resources.Get "css/search.css" | fingerprint "sha512" }}
         <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
     {{ end }}
 
-        <link rel="stylesheet" type="text/css" href="{{ absURL "pagefind/pagefind-ui.css" }}" crossorigin="anonymous">
-        <script src="{{ absURL "pagefind/pagefind-ui.js" }}" crossorigin="anonymous"></script>
-        <script>
-            window.addEventListener('DOMContentLoaded', (event) => {
-                new PagefindUI({ element: "#search-box", showSubResults: true });
-            });
-        </script>
-    {{ end }}
+    <link rel="stylesheet" type="text/css" href="{{ absURL "pagefind/pagefind-component-ui.css" }}" crossorigin="anonymous">
+    <script src="{{ absURL "pagefind/pagefind-component-ui.js" }}" type="module" crossorigin="anonymous"></script>
 
     {{ with .Site.Params.faviconSVG }}
         <link rel="icon" href="{{ . | absURL }}" />

layouts/_partials/top.html

@@ -5,6 +5,9 @@
         </a>
     </div>
 
+    <pagefind-modal-trigger></pagefind-modal-trigger>
+    <pagefind-modal></pagefind-modal>
+
     <nav class="top-navbar" aria-label="{{ i18n "aria_navbar" }}">
         {{ with .Site.Home }}
             <a class="top-navbar-item{{ if $.IsHome }} top-navbar-item--active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>

layouts/search.html

@@ -1,3 +0,0 @@
-{{ define "main" }}
-    <div id="search-box"></div>
-{{ end }}