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

layouts/_partials/head.html

@@ -68,20 +68,13 @@
             >
     </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>
+    {{ 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-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 }}" />
     {{ end }}

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 }}