Add search box to main page.

themes/vanilla/layouts/index.html

@@ -1,10 +1,22 @@
 {{ define "main" }}
 {{ .Content }}
 
+<p>
+    <div class="stork-wrapper">
+        <div class="stork-input-wrapper">
+            <input class="stork-input" data-stork="blog" placeholder="Search (requires JavaScript)"/>
+        </div>
+        <div class="stork-output" data-stork="blog-output"></div>
+    </div>
+</p>
+
 Recent posts:
 <ul class="post-list">
     {{ range first 10 (where (where .Site.Pages.ByDate.Reverse "Section" "blog") ".Kind" "!=" "section") }}
     {{ partial "post.html" . }}
     {{ end }}
 </ul>
+
+<script src="https://files.stork-search.net/stork.js"></script>
+<script>stork.register("blog", "http://localhost:8000/index.st");</script>
 {{ end }}

themes/vanilla/layouts/partials/head.html

@@ -11,11 +11,13 @@
     {{ $style := resources.Get "scss/style.scss" | resources.ToCSS | resources.Minify }}
     {{ $sidenotes := resources.Get "scss/sidenotes.scss" | resources.ToCSS | resources.Minify }}
     {{ $code := resources.Get "scss/code.scss" | resources.ToCSS | resources.Minify }}
+    {{ $search := resources.Get "scss/search.scss" | resources.ToCSS | resources.Minify }}
     {{ $icon := resources.Get "img/favicon.png" }}
     {{- partial "sidenotes.html" . -}}
     <link rel="stylesheet" href="{{ $style.Permalink }}" media="screen">
     <link rel="stylesheet" href="{{ $sidenotes.Permalink }}" media="screen">
     <link rel="stylesheet" href="{{ $code.Permalink }}" media="screen">
+    <link rel="stylesheet" href="{{ $search.Permalink }}" media="screen">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous" media="screen">
     <link rel="icon" type="image/png" href="{{ $icon.Permalink }}">