Update index.

config.toml

@@ -6,6 +6,15 @@ pygmentsCodeFences = true
 pygmentsUseClasses = true
 summaryLength = 20
 
+[outputFormats]
+  [outputFormats.Toml]
+    name = "toml"
+    mediaType = "application/toml"
+    isHTML = false
+
+[outputs]
+  home = ["html","rss","toml"]
+
 [markup]
   [markup.tableOfContents]
     endLevel = 4

themes/vanilla/assets/scss/search.scss

@@ -0,0 +1,94 @@
+@import "variables.scss";
+@import "mixins.scss";
+
+$search-input-padding: 0.5rem;
+$search-element-padding: 0.5rem 1rem 0.5rem 1rem;
+
+@mixin green-shadow {
+    box-shadow: 0px 0px 5px rgba($primary-color, 0.7);
+}
+
+.stork-input-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+input.stork-input {
+    @include bordered-block;
+    font-family: $font-body;
+    padding: $search-input-padding;
+
+    &:active, &:focus {
+        @include green-shadow;
+        border-color: $primary-color;
+    }
+
+    flex-grow: 1;
+}
+
+.stork-close-button {
+    @include bordered-block;
+    font-family: $font-body;
+    padding: $search-input-padding;
+
+    background-color: $code-color;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.stork-output-visible {
+    @include bordered-block;
+
+    border-top: none;
+}
+
+.stork-result, .stork-message, .stork-attribution {
+    padding: $search-element-padding;
+}
+
+.stork-message:not(:last-child), .stork-result  {
+    border-bottom: $standard-border;
+}
+
+.stork-results {
+    margin: 0;
+    padding: 0;
+}
+
+.stork-result {
+    list-style: none;
+
+    &.selected {
+        background-color: $code-color;
+    }
+
+    a:hover {
+        color: black;
+    }
+}
+
+.stork-title, .stork-excerpt {
+    margin: 0;
+}
+
+.stork-excerpt {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.stork-title {
+    font-family: $font-heading;
+    font-size: 1.4rem;
+    text-align: left;
+    width: 100%;
+}
+
+.stork-highlight {
+    background-color: lighten($primary-color, 30%);
+}

themes/vanilla/layouts/_default/baseof.toml

@@ -0,0 +1 @@
+{{- block "main" . }}{{- end }}

themes/vanilla/layouts/_default/list.toml.toml

@@ -0,0 +1,12 @@
+[input]
+base_directory = "content/"
+title_boost = "Large"
+files = [
+    {{ range $index , $e := .Site.RegularPages }}{{ if $index }}, {{end}}{ filetype = "PlainText", contents = {{ $e.Plain | jsonify }}, title = {{ $e.Title | jsonify }}, url = {{ $e.Permalink | jsonify }} }
+    {{ end }}
+]
+
+[output]
+filename = "index.st"
+excerpts_per_result = 2
+displayed_results_count = 5

themes/vanilla/layouts/_default/single.toml

@@ -0,0 +1,3 @@
+{{ define "main" }}
+{{ .Content }}
+{{ end }}

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", "/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 }}">