Add search to docs

Closes: #295

project/ZolaPlugin.scala

@@ -99,7 +99,8 @@ object ZolaPlugin extends AutoPlugin {
         "--output",
         (zolaRoot / "static" / "js" / "bundle.js").absolutePath.toString,
         "--optimize",
-        (inDir / "elm" / "Main.elm").toString
+        (inDir / "elm" / "Main.elm").toString,
+        (inDir / "elm" / "Search.elm").toString
       ),
       inDir,
       logger

website/elm.json

@@ -9,12 +9,12 @@
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
+            "elm/json": "1.1.3",
             "elm/random": "1.0.0",
             "elm-community/random-extra": "3.1.0",
             "elm-explorations/markdown": "1.0.0"
         },
         "indirect": {
-            "elm/json": "1.1.3",
             "elm/time": "1.0.0",
             "elm/url": "1.0.0",
             "elm/virtual-dom": "1.0.2",

website/elm/Search.elm

@@ -0,0 +1,162 @@
+port module Search exposing (..)
+
+import Browser exposing (Document)
+import Browser.Navigation exposing (Key)
+import Html as H exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (onClick, onInput, onSubmit)
+import Json.Decode as D
+import Markdown
+
+
+
+-- MAIN
+
+
+main : Program Flags Model Msg
+main =
+    Browser.element
+        { init = init
+        , view = view
+        , update = update
+        , subscriptions = subscriptions
+        }
+
+
+
+--- Model
+
+
+type alias Flags =
+    {}
+
+
+type alias Doc =
+    { body : String
+    , title : String
+    , id : String
+    }
+
+
+type alias SearchEntry =
+    { ref : String
+    , score : Float
+    , doc : Doc
+    }
+
+
+type alias Model =
+    { searchInput : String
+    , results : List SearchEntry
+    }
+
+
+type Msg
+    = SetSearch String
+    | SubmitSearch
+    | GetSearchResults (List SearchEntry)
+
+
+
+--- Init
+
+
+init : Flags -> ( Model, Cmd Msg )
+init flags =
+    ( { searchInput = ""
+      , results = []
+      }
+    , Cmd.none
+    )
+
+
+
+--- Update
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        SetSearch str ->
+            ( { model | searchInput = str }
+            , Cmd.none
+            )
+
+        SubmitSearch ->
+            ( model, doSearch model.searchInput )
+
+        GetSearchResults list ->
+            ( { model | results = List.take 8 list }, Cmd.none )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    receiveSearch GetSearchResults
+
+
+
+--- View
+
+
+view : Model -> Html Msg
+view model =
+    H.form
+        [ class "form"
+        , onSubmit SubmitSearch
+        ]
+        [ div [ class "dropdown field is-active is-fullwidth" ]
+            [ div [ class "control has-icons-right is-fullwidth" ]
+                [ input
+                    [ class "input"
+                    , type_ "text"
+                    , placeholder "Search docs…"
+                    , onInput SetSearch
+                    , value model.searchInput
+                    ]
+                    []
+                , span [ class "icon is-right is-small" ]
+                    [ img [ src "/icons/search-20.svg" ] []
+                    ]
+                ]
+            , viewResults model.results
+            ]
+        ]
+
+
+viewResults : List SearchEntry -> Html Msg
+viewResults entries =
+    div
+        [ classList
+            [ ( "dropdown-menu", True )
+            , ( "is-hidden", entries == [] )
+            ]
+        ]
+        [ div [ class "dropdown-content" ]
+            (List.intersperse
+                (div [ class "dropdown-divider" ] [])
+                (List.map viewResult entries)
+            )
+        ]
+
+
+viewResult : SearchEntry -> Html Msg
+viewResult result =
+    div [ class "dropdown-item" ]
+        [ a
+            [ class "is-size-5"
+            , href result.ref
+            ]
+            [ text result.doc.title
+            ]
+        , Markdown.toHtml [ class "content" ] result.doc.body
+        ]
+
+
+
+--- Ports
+
+
+port receiveSearch : (List SearchEntry -> msg) -> Sub msg
+
+
+port doSearch : String -> Cmd msg

website/run-elm.sh

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 
-CMD="elm make --output site/static/js/bundle.js --optimize elm/Main.elm"
+CMD="elm make --output site/static/js/bundle.js --optimize elm/Main.elm elm/Search.elm"
 $CMD
 
 inotifywait -m -e close_write -r elm/ |

website/site/sass/styles.sass

@@ -111,3 +111,10 @@ p.has-text
   margin-left: auto
   margin-right: auto
   max-width: $tablet
+
+.dropdown.is-fullwidth
+  width: 100%
+
+.dropdown
+  .control.is-fullwidth
+    width: 100%

website/site/static/icons/search-20.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="10" cy="10" r="7" />
+  <line x1="21" y1="21" x2="15" y2="15" />
+</svg>

website/site/static/js/searchhelper.js

@@ -0,0 +1,130 @@
+// Taken from mdbook
+// The strategy is as follows:
+// First, assign a value to each word in the document:
+//  Words that correspond to search terms (stemmer aware): 40
+//  Normal words: 2
+//  First word in a sentence: 8
+// Then use a sliding window with a constant number of words and count the
+// sum of the values of the words within the window. Then use the window that got the
+// maximum sum. If there are multiple maximas, then get the last one.
+// Enclose the terms in *.
+function makeTeaser(body, terms) {
+  var TERM_WEIGHT = 40;
+  var NORMAL_WORD_WEIGHT = 2;
+  var FIRST_WORD_WEIGHT = 8;
+  var TEASER_MAX_WORDS = 30;
+
+  var stemmedTerms = terms.map(function (w) {
+    return elasticlunr.stemmer(w.toLowerCase());
+  });
+  var termFound = false;
+  var index = 0;
+  var weighted = []; // contains elements of ["word", weight, index_in_document]
+
+  // split in sentences, then words
+  var sentences = body.toLowerCase().split(". ");
+
+  for (var i in sentences) {
+    var words = sentences[i].split(" ");
+    var value = FIRST_WORD_WEIGHT;
+
+    for (var j in words) {
+      var word = words[j];
+
+      if (word.length > 0) {
+        for (var k in stemmedTerms) {
+          if (elasticlunr.stemmer(word).startsWith(stemmedTerms[k])) {
+            value = TERM_WEIGHT;
+            termFound = true;
+          }
+        }
+        weighted.push([word, value, index]);
+        value = NORMAL_WORD_WEIGHT;
+      }
+
+      index += word.length;
+      index += 1;  // ' ' or '.' if last word in sentence
+    }
+
+    index += 1;  // because we split at a two-char boundary '. '
+  }
+
+  if (weighted.length === 0) {
+    return body;
+  }
+
+  var windowWeights = [];
+  var windowSize = Math.min(weighted.length, TEASER_MAX_WORDS);
+  // We add a window with all the weights first
+  var curSum = 0;
+  for (var i = 0; i < windowSize; i++) {
+    curSum += weighted[i][1];
+  }
+  windowWeights.push(curSum);
+
+  for (var i = 0; i < weighted.length - windowSize; i++) {
+    curSum -= weighted[i][1];
+    curSum += weighted[i + windowSize][1];
+    windowWeights.push(curSum);
+  }
+
+  // If we didn't find the term, just pick the first window
+  var maxSumIndex = 0;
+  if (termFound) {
+    var maxFound = 0;
+    // backwards
+    for (var i = windowWeights.length - 1; i >= 0; i--) {
+      if (windowWeights[i] > maxFound) {
+        maxFound = windowWeights[i];
+        maxSumIndex = i;
+      }
+    }
+  }
+
+  var teaser = [];
+  var startIndex = weighted[maxSumIndex][2];
+  for (var i = maxSumIndex; i < maxSumIndex + windowSize; i++) {
+    var word = weighted[i];
+    if (startIndex < word[2]) {
+      // missing text from index to start of `word`
+      teaser.push(body.substring(startIndex, word[2]));
+      startIndex = word[2];
+    }
+
+    // add <em/> around search terms
+    if (word[1] === TERM_WEIGHT) {
+      teaser.push("**");
+    }
+    startIndex = word[2] + word[0].length;
+    teaser.push(body.substring(word[2], startIndex));
+
+    if (word[1] === TERM_WEIGHT) {
+      teaser.push("**");
+    }
+  }
+  teaser.push("…");
+  return teaser.join("");
+}
+
+var index = elasticlunr.Index.load(window.searchIndex);
+
+
+var initElmSearch = function(elmSearch) {
+    var options = {
+        bool: "AND",
+        fields: {
+            title: {boost: 2},
+            body: {boost: 1},
+        }
+    };
+
+    elmSearch.ports.doSearch.subscribe(function(str) {
+        var results = index.search(str, options);
+        for (var i = 0; i < results.length; i ++) {
+            var teaser = makeTeaser(results[i].doc.body, str.split(" "));
+            results[i].doc.body = teaser;
+        }
+        elmSearch.ports.receiveSearch.send(results);
+    });
+
+};

website/site/templates/404.html

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Not Found</title>
         <link rel="stylesheet" href="/styles.css">
+        {% include "search-head.html" %}
     </head>
     <body>
         <section class="hero is-info is-small">
@@ -13,9 +14,16 @@
                 {% include "navbar.html" %}
             </div>
             <div class="hero-body">
-                <h1 class="title">
+                <div class="columns is-vcentered">
-                    Not Found
+                    <div class="column is-8">
-                </h1>
+                        <h1 class="title">
+                            Not Found
+                        </h1>
+                    </div>
+                    <div class="column">
+                        <div id="search"></div>
+                    </div>
+                </div>
             </div>
         </section>
 
@@ -38,20 +46,6 @@
         </section>
         {% include "footer.html" %}
     </body>
-
+    {% include "search-part.html" %}
-    <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
+    {% include "fathom.html" %}
-    <script>
-     (function(f, a, t, h, o, m){
-         a[h]=a[h]||function(){
-             (a[h].q=a[h].q||[]).push(arguments)
-         };
-         o=f.createElement('script'),
-         m=f.getElementsByTagName('script')[0];
-         o.async=1; o.src=t; o.id='fathom-script';
-         m.parentNode.insertBefore(o,m)
-     })(document, window, '//webstats.daheim.site/tracker.js', 'fathom');
-     fathom('set', 'siteId', 'OGJDF');
-     fathom('trackPageview');
-    </script>
-    <!-- / Fathom -->
 </html>

website/site/templates/fathom.html

@@ -0,0 +1,15 @@
+<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
+<script>
+ (function(f, a, t, h, o, m){
+     a[h]=a[h]||function(){
+         (a[h].q=a[h].q||[]).push(arguments)
+     };
+     o=f.createElement('script'),
+     m=f.getElementsByTagName('script')[0];
+     o.async=1; o.src=t; o.id='fathom-script';
+     m.parentNode.insertBefore(o,m)
+ })(document, window, '//webstats.daheim.site/tracker.js', 'fathom');
+ fathom('set', 'siteId', 'OGJDF');
+ fathom('trackPageview');
+</script>
+<!-- / Fathom -->

website/site/templates/index.html

@@ -17,19 +17,5 @@
          flags: elmFlags
      });
     </script>
-    <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
+    {% include "fathom.html" %}
-    <script>
-     (function(f, a, t, h, o, m){
-         a[h]=a[h]||function(){
-             (a[h].q=a[h].q||[]).push(arguments)
-         };
-         o=f.createElement('script'),
-         m=f.getElementsByTagName('script')[0];
-         o.async=1; o.src=t; o.id='fathom-script';
-         m.parentNode.insertBefore(o,m)
-     })(document, window, '//webstats.daheim.site/tracker.js', 'fathom');
-     fathom('set', 'siteId', 'OGJDF');
-     fathom('trackPageview');
-    </script>
-    <!-- / Fathom -->
 </html>

website/site/templates/overview.html

@@ -4,6 +4,7 @@
         {% include "meta.html" %}
         <title>{{ section.title }} – Docspell Documentation</title>
         <link rel="stylesheet" href="/styles.css">
+        {% include "search-head.html" %}
     </head>
     <body>
         <section class="hero is-info is-small">
@@ -11,12 +12,19 @@
                 {% include "navbar.html" %}
             </div>
             <div class="hero-body">
-                <h1 class="title">
+                <div class="columns is-vcentered">
-                    Docspell Documentation
+                    <div class="column is-8">
-                </h1>
+                        <h1 class="title">
-                <h2 class="subtitle">
+                            Docspell Documentation
-                    {{ section.title }}
+                        </h1>
-                </h2>
+                        <h2 class="subtitle">
+                            {{ section.title }}
+                        </h2>
+                    </div>
+                    <div class="column">
+                        <div id="search"></div>
+                    </div>
+                </div>
             </div>
         </section>
 
@@ -56,19 +64,7 @@
 
         {% include "footer.html" %}
     </body>
-    <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
+    {% include "search-part.html" %}
-    <script>
+    {% include "fathom.html" %}
-     (function(f, a, t, h, o, m){
+
-         a[h]=a[h]||function(){
-             (a[h].q=a[h].q||[]).push(arguments)
-         };
-         o=f.createElement('script'),
-         m=f.getElementsByTagName('script')[0];
-         o.async=1; o.src=t; o.id='fathom-script';
-         m.parentNode.insertBefore(o,m)
-     })(document, window, '//webstats.daheim.site/tracker.js', 'fathom');
-     fathom('set', 'siteId', 'OGJDF');
-     fathom('trackPageview');
-    </script>
-    <!-- / Fathom -->
 </html>

website/site/templates/page.html

@@ -4,6 +4,7 @@
         {% include "meta.html" %}
         <title>{{ page.title }} – Docspell Documentation</title>
         <link rel="stylesheet" href="/styles.css">
+        {% include "search-head.html" %}
     </head>
     <body>
         <section class="hero is-info is-small">
@@ -11,12 +12,19 @@
                 {% include "navbar.html" %}
             </div>
             <div class="hero-body">
-                <h1 class="title">
+                <div class="columns is-vcentered">
-                    {{ page.title }}
+                    <div class="column is-8">
-                </h1>
+                        <h1 class="title">
-                <h2 class="subtitle">
+                            {{ page.title }}
-                    Docspell Documentation
+                        </h1>
-                </h2>
+                        <h2 class="subtitle">
+                            Docspell Documentation
+                        </h2>
+                    </div>
+                    <div class="column">
+                        <id id="search"></id>
+                    </div>
+                </div>
             </div>
         </section>
         <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
@@ -89,19 +97,6 @@
 
         {% include "footer.html" %}
     </body>
-    <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
+    {% include "search-part.html" %}
-    <script>
+    {% include "fathom.html" %}
-     (function(f, a, t, h, o, m){
-         a[h]=a[h]||function(){
-             (a[h].q=a[h].q||[]).push(arguments)
-         };
-         o=f.createElement('script'),
-         m=f.getElementsByTagName('script')[0];
-         o.async=1; o.src=t; o.id='fathom-script';
-         m.parentNode.insertBefore(o,m)
-     })(document, window, '//webstats.daheim.site/tracker.js', 'fathom');
-     fathom('set', 'siteId', 'OGJDF');
-     fathom('trackPageview');
-    </script>
-    <!-- / Fathom -->
 </html>

website/site/templates/pages.html

@@ -4,6 +4,7 @@
         {% include "meta.html" %}
         <title>{{ section.title }} – Docspell Documentation</title>
         <link rel="stylesheet" href="/styles.css">
+        {% include "search-head.html" %}
     </head>
     <body>
         <section class="hero is-info is-small">
@@ -11,12 +12,19 @@
                 {% include "navbar.html" %}
             </div>
             <div class="hero-body">
-                <h1 class="title">
+                <div class="columns is-vcentered">
-                    Docspell Documentation
+                    <div class="column is-8">
-                </h1>
+                        <h1 class="title">
-                <h2 class="subtitle">
+                            Docspell Documentation
-                    {{ section.title }}
+                        </h1>
-                </h2>
+                        <h2 class="subtitle">
+                            {{ section.title }}
+                        </h2>
+                    </div>
+                    <div class="column">
+                        <div id="search"></div>
+                    </div>
+                </div>
             </div>
         </section>
         <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
@@ -62,19 +70,6 @@
 
         {% include "footer.html" %}
     </body>
-    <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
+    {% include "search-part.html" %}
-    <script>
+    {% include "fathom.html" %}
-     (function(f, a, t, h, o, m){
-         a[h]=a[h]||function(){
-             (a[h].q=a[h].q||[]).push(arguments)
-         };
-         o=f.createElement('script'),
-         m=f.getElementsByTagName('script')[0];
-         o.async=1; o.src=t; o.id='fathom-script';
-         m.parentNode.insertBefore(o,m)
-     })(document, window, '//webstats.daheim.site/tracker.js', 'fathom');
-     fathom('set', 'siteId', 'OGJDF');
-     fathom('trackPageview');
-    </script>
-    <!-- / Fathom -->
 </html>

website/site/templates/search-head.html

@@ -0,0 +1,4 @@
+<script type="application/javascript" src="/search_index.en.js"></script>
+<script type="application/javascript" src="/elasticlunr.min.js"></script>
+<script type="application/javascript" src="/js/bundle.js"></script>
+<script type="application/javascript" src="/js/searchhelper.js"></script>

website/site/templates/search-part.html

@@ -0,0 +1,16 @@
+<script>
+ var initSearch = function() {
+     var elmSearch = Elm.Search.init({
+         node: document.getElementById("search"),
+         flags: {}
+     });
+     initElmSearch(elmSearch);
+ }
+ if (document.readyState === "complete" ||
+     (document.readyState !== "loading" && !document.documentElement.doScroll)
+ ) {
+     initSearch();
+ } else {
+     document.addEventListener("DOMContentLoaded", initSearch);
+ }
+</script>

website/site/templates/section.html

@@ -4,6 +4,7 @@
         {% include "meta.html" %}
         <title>{{ section.title }} – Docspell Documentation</title>
         <link rel="stylesheet" href="/styles.css">
+        {% include "search-head.html" %}
     </head>
     <body>
         <section class="hero is-info is-small">
@@ -11,12 +12,19 @@
                 {% include "navbar.html" %}
             </div>
             <div class="hero-body">
-                <h1 class="title">
+                <div class="columns is-vcentered">
-                    {{ section.title }}
+                    <div class="column is-8">
-                </h1>
+                        <h1 class="title">
-                <h2 class="subtitle">
+                            {{ section.title }}
-                    Docspell Documentation
+                        </h1>
-                </h2>
+                        <h2 class="subtitle">
+                            Docspell Documentation
+                        </h2>
+                    </div>
+                    <div class="column">
+                        <div id="search"></div>
+                    </div>
+                </div>
             </div>
         </section>
         <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
@@ -78,23 +86,8 @@
             </div>
         </section>
         {% endif %}
-
         {% include "footer.html" %}
-
+        {% include "search-part.html" %}
+        {% include "fathom.html" %}
     </body>
-    <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
-    <script>
-     (function(f, a, t, h, o, m){
-         a[h]=a[h]||function(){
-             (a[h].q=a[h].q||[]).push(arguments)
-         };
-         o=f.createElement('script'),
-         m=f.getElementsByTagName('script')[0];
-         o.async=1; o.src=t; o.id='fathom-script';
-         m.parentNode.insertBefore(o,m)
-     })(document, window, '//webstats.daheim.site/tracker.js', 'fathom');
-     fathom('set', 'siteId', 'OGJDF');
-     fathom('trackPageview');
-    </script>
-    <!-- / Fathom -->
 </html>