Add indexing of rules to frontend

public/search.js

@@ -0,0 +1,49 @@
+"use strict";
+
+function getDocuments() {
+  var content = document.querySelector("#content");
+
+  var data = [];
+  var currentId = null;
+  var current = { body: [], examples: [] };
+
+  function push() {
+    if (!currentId) return;
+    if (current.body.length > 0 || current.examples.length > 0) {
+      data.push({ id: currentId, ...current });
+      current = { body: [], examples: [] };
+    }
+  }
+
+  for (var i = 0; i < content.children.length; i++) {
+    var child = content.children.item(i);
+
+    // content of subrules should be collapsed to their parent rule
+    if (child.classList.contains("anchor-subrule")) continue;
+
+    if (child.id) {
+      push();
+      currentId = child.id;
+      continue;
+    }
+
+    if (child.classList.contains("rules-example"))
+      current.examples.push(child.textContent);
+    else current.body.push(child.textContent);
+  }
+  push();
+
+  return data;
+}
+
+function main() {
+  var data = getDocuments();
+  window.index = new Fuse(data, {
+    includeScore: true,
+    includeMatches: true,
+    minMatchCharLength: 2,
+    keys: [{ name: "body", weight: 2 }, "examples"],
+  });
+}
+
+window.addEventListener("load", main);

template/index.html

@@ -58,7 +58,7 @@
       {{ end }}
     </nav>
 
-    <div id="content" class="content">
+    <div class="content">
       <header class="header">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" id="toggle-toc" class="toggle-toc-button" viewBox="0 0 16 16">
           <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
@@ -86,7 +86,7 @@ <h2 class="main-heading"><i>Magic: the Gathering</i> Comprehensive Rules</h2>
             </p>
           </header>
 
-          <article class="rules text">
+          <article id="content" class="rules text">
             {{ range .Rules }}
               {{ template "rule.html" . }}
             {{ end }}
@@ -105,6 +105,8 @@ <h2 class="main-heading"><i>Magic: the Gathering</i> Comprehensive Rules</h2>
 
   </div>
 
+  <script src="js/fuse.basic.min.js?nonce={{ .Nonce }}" defer></script>
+  <script src="js/search.js?nonce={{ .Nonce }}" defer></script>
   <script nonce="{{ .Nonce }}" async>
     window.onload = function() {
       var isSmallScreen = window.matchMedia("(max-width: 576px)");

template/rule.html

@@ -1,24 +1,25 @@
-{{ $class := printf "rules-%s" (lower .Type) }}
-
-{{ if eq .Type "Part" }}
-  <a id="{{ .ID }}" class="anchor"></a>
-  <h3 class="{{ $class }}">{{ .Number }} {{ index .Body 0 }}</h3>
-{{ else if eq .Type "Chapter" }}
-  <a id="{{ .ID }}" class="anchor"></a>
-  <h4 class="{{ $class }}">{{ .Number }} {{ index .Body 0 }}</h4>
-{{ else }}
-  {{ $first := true }}
-  {{ range .Body }}
-    {{ if $first }}
-      {{ $first = false }}
-      <a id="{{ $.ID }}" class="anchor"></a>
-      <p class="{{ $class }}"><a href="#{{ $.ID }}">{{ $.Number }}</a> {{ . | ruleLinks | replaceSymbols }}</p>
-    {{ else }}
-      <p>{{ . | replaceSymbols | ruleLinks }}</p>
-    {{ end }}
-  {{ end }}
-
-  {{ range .Examples }}
-    <p class="rules-example"><b>Example:</b> <i>{{ . | ruleLinks | replaceSymbols }}</i></p>
-  {{ end }}
-{{ end }}
+{{ $anchorClass := printf "anchor anchor-%s" (lower .Type) }}
+{{ $class := printf "rules-%s" (lower .Type) }}
+
+{{ if eq .Type "Part" }}
+  <a id="{{ .ID }}" class="{{ $anchorClass }}"></a>
+  <h3 class="{{ $class }}">{{ .Number }} {{ index .Body 0 }}</h3>
+{{ else if eq .Type "Chapter" }}
+  <a id="{{ .ID }}" class="{{ $anchorClass }}"></a>
+  <h4 class="{{ $class }}">{{ .Number }} {{ index .Body 0 }}</h4>
+{{ else }}
+  {{ $first := true }}
+  {{ range .Body }}
+    {{ if $first }}
+      {{ $first = false }}
+      <a id="{{ $.ID }}" class="{{ $anchorClass }}"></a>
+      <p class="{{ $class }}"><a href="#{{ $.ID }}">{{ $.Number }}</a> {{ . | ruleLinks | replaceSymbols }}</p>
+    {{ else }}
+      <p>{{ . | replaceSymbols | ruleLinks }}</p>
+    {{ end }}
+  {{ end }}
+
+  {{ range .Examples }}
+    <p class="rules-example"><b>Example:</b> <i>{{ . | ruleLinks | replaceSymbols }}</i></p>
+  {{ end }}
+{{ end }}