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/css/bobastyle.css

@@ -823,7 +823,7 @@ figcaption {
   background-color: var(--background-1);
   border-radius: 8px;
 }
-.code-block > .code-header {
+.code-block-header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -833,17 +833,17 @@ figcaption {
   border-top-right-radius: 8px;
   height: 2em;
 }
-.code-block > .code-header > * {
+.code-block-header > * {
   margin: auto 0;
 }
-.code-block > .code-header > .code-type {
+.code-block-type {
   border-top-left-radius: 8px;
 }
 /* TODO: make the code copy button prettier */
-.code-block > .code-header > .code-copy-button {
+.code-block-copy-button {
   color: var(--link-1);
 }
-.code-block > .code-header > .code-copy-button:hover {
+.code-block-copy-button:hover {
   cursor: pointer;
 }
 .code-block > .highlight {
@@ -877,7 +877,7 @@ figcaption {
   overflow-wrap: break-word;
 }
 
-.code-block > .code-header > .code-type,
+.code-block-type,
 code {
   border-radius: 5px;
 }

layouts/_markup/render-codeblock.html

@@ -3,9 +3,9 @@
     {{ $type = . }}
 {{ end }}
 <div class="code-block">
-    <div class="code-header">
+    <div class="code-block-header">
-        <pre class="code-type">{{ $type }}</pre>
+        <pre class="code-block-type">{{ $type }}</pre>
-        <a href="javascript:void(0)" class="code-copy-button">
+        <a href="javascript:void(0)" class="code-block-copy-button">
             {{ i18n "copy_to_clipboard" }}
         </a>
     </div>

layouts/_partials/head.html

@@ -68,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">
+    <link rel="stylesheet" type="text/css" href="{{ absURL "pagefind/pagefind-component-ui.css" }}" crossorigin="anonymous">
-        <script src="{{ absURL "pagefind/pagefind-ui.js" }}" crossorigin="anonymous"></script>
+    <script src="{{ absURL "pagefind/pagefind-component-ui.js" }}" type="module" crossorigin="anonymous"></script>
-        <script>
-            window.addEventListener('DOMContentLoaded', (event) => {
-                new PagefindUI({ element: "#search-box", showSubResults: true });
-            });
-        </script>
-    {{ end }}
 
     {{ 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 }}