From bb3adc17813f4126b80723504aec934d0c8cf8a9 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Mon, 23 Jul 2018 19:25:39 +0100
Subject: [PATCH] Add search engine widget

Close #169
---
 data/sri.toml                        |  9 ++++
 exampleSite/config.toml              | 22 ++++++++-
 exampleSite/content/home/search.md   | 12 +++++
 i18n/en.yaml                         |  8 +++
 layouts/_default/list.search.json    | 16 ++++++
 layouts/partials/css/academic.css    | 29 +++++++++++
 layouts/partials/footer.html         | 73 ++++++++++++++++++++++++++++
 layouts/partials/header.html         |  4 ++
 layouts/partials/widgets/search.html | 33 +++++++++++++
 9 files changed, 205 insertions(+), 1 deletion(-)
 create mode 100644 exampleSite/content/home/search.md
 create mode 100644 layouts/_default/list.search.json
 create mode 100644 layouts/partials/widgets/search.html

diff --git a/data/sri.toml b/data/sri.toml
index 8e3723d4..d365bde2 100644
--- a/data/sri.toml
+++ b/data/sri.toml
@@ -37,6 +37,9 @@
 [js.fancybox]
   version = "3.2.5"
   sri = "sha256-X5PoE3KU5l+JcX+w09p/wHl9AzK333C4hJ2I9S5mD4M="
+[js.instantsearch]
+  version = "2.9.0"
+  sri = "sha256-cJXigylnJlxvAdfFNHeS+IiMcKWS3Rf/cy3bl9bb0ng="
 
 # CSS
 
@@ -55,3 +58,9 @@
 [css.fancybox]
   version = "3.2.5"
   sri = "sha256-ygkqlh3CYSUri3LhQxzdcm0n1EQvH2Y+U5S2idbLtxs="
+[css.instantsearch]
+  version = "2.9.0"
+  sri = "sha256-ZtmLe16p4jS4/2wPwwH6NzJt460SJzgLmhKrYo5yn7g="
+[css.instantsearchTheme]
+  version = "2.9.0"
+  sri = "sha256-0vcZrdMQksHcHrY60tPnVK71jnB3wX/JpMcah5BffjA="
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 4b477472..ee21fa1e 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -37,9 +37,15 @@ defaultContentLanguageInSubdir = false
 enableGitInfo = false
 
 [outputs]
-  home = [ "HTML", "CSS", "RSS" ]
+  home = [ "HTML", "CSS", "RSS", "search" ]
   section = [ "HTML", "RSS" ]
 
+[outputFormats.search]
+  baseName = "search"
+  isPlainText = true
+  mediaType = "application/json"
+  notAlternative = true
+
 # Configure BlackFriday Markdown rendering.
 #   See: https://gohugo.io/getting-started/configuration/#configure-blackfriday
 [blackfriday]
@@ -298,6 +304,20 @@ enableGitInfo = false
 #    url = "files/cv.pdf"
 #    weight = 7
 
+# Search.
+[params.search]
+  # Search provider:
+  #   0: No search engine
+  #   1: Algolia (https://www.algolia.com)
+  engine = 0
+
+  # Configuration of Algolia search engine.
+  # Paste the values from your Algolia dashboard.
+  [params.search.algolia]
+    app_id = ""
+    api_key = ""
+    index_name = ""
+
 # Taxonomies.
 [taxonomies]
   tag = "tags"
diff --git a/exampleSite/content/home/search.md b/exampleSite/content/home/search.md
new file mode 100644
index 00000000..227a2de1
--- /dev/null
+++ b/exampleSite/content/home/search.md
@@ -0,0 +1,12 @@
++++
+# Search widget.
+widget = "search"
+active = false
+date = 2018-07-23T00:00:00
+
+title = "Search"
+subtitle = ""
+
+# Order that this section will appear in.
+weight = 66
++++
diff --git a/i18n/en.yaml b/i18n/en.yaml
index eaddb05b..c47fe0ea 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -140,6 +140,14 @@
 - id: projects
   translation: Projects
 
+# Search
+
+- id: search_placeholder
+  translation: Search...
+
+- id: search_no_results
+  translation: No results found
+
 # Error 404
 
 - id: page_not_found
diff --git a/layouts/_default/list.search.json b/layouts/_default/list.search.json
new file mode 100644
index 00000000..fcebbe2c
--- /dev/null
+++ b/layouts/_default/list.search.json
@@ -0,0 +1,16 @@
+{{/* Generate the search index. */}}
+{{- $scr := $.Scratch -}}
+{{- $scr.Add "index" slice -}}
+{{- range (where .Site.RegularPages "Section" "!=" "home") -}}
+  {{- if and (not .Draft) (not .Params.private) -}}
+    {{- if .Params.abstract -}}
+      {{- $scr.Set "summary" .Params.abstract -}}
+    {{- else if .Params.summary -}}
+      {{- $scr.Set "summary" .Params.summary -}}
+    {{- else -}}
+      {{- $scr.Set "summary" .Summary -}}
+    {{- end -}}
+    {{- $scr.Add "index" (dict "objectID" .UniqueID "date" .Date.UTC.Unix "publishdate" .PublishDate "lastmod" .Lastmod.UTC.Unix "expirydate" .ExpiryDate.UTC.Unix "lang" .Lang "permalink" .Permalink "relpermalink" .RelPermalink "title" .Title "summary" ($scr.Get "summary") "authors" .Params.Authors "kind" .Kind "type" .Type "section" .Section "tags" .Params.Tags "categories" .Params.Categories)}}
+  {{- end -}}
+{{- end -}}
+{{- $scr.Get "index" | jsonify -}}
diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css
index 30412021..6bb4a12b 100644
--- a/layouts/partials/css/academic.css
+++ b/layouts/partials/css/academic.css
@@ -242,6 +242,35 @@ small,
   max-width: 100%;
 }
 
+/*************************************************
+ *  Search.
+ **************************************************/
+
+#search-box {
+  margin-bottom: 0.5rem;
+}
+
+.search-hit em {
+  font-style: normal;
+  background-color: #FFE0B2;
+  color: #E65100;
+  border-bottom: 1px solid #E65100;
+}
+
+.search-hit-type {
+  margin-bottom: 0 !important; /* Override .article-metadata margin. */
+  text-transform: capitalize;
+}
+
+.search-hit-description {
+  font-size: 0.7rem;
+}
+
+/* Load more results button - hide when there are no more results. */
+#search-hits button[disabled] {
+  display: none;
+}
+
 /*************************************************
  *  Modals.
  **************************************************/
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 13e83a47..2e333ad9 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -78,5 +78,78 @@
     {{ end }}
     {{ end }}
 
+    {{/* Algolia search engine. */}}
+    {{ if eq .Site.Params.search.engine 1 }}
+    {{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/instantsearch.js/%s/instantsearch.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.instantsearch.version $js.instantsearch.sri | safeHTML }}
+    <script>
+      const content_type = {
+        'post': {{ i18n "posts" }},
+        'project': {{ i18n "projects" }},
+        'publication' : {{ i18n "publications" }},
+        'talk' : {{ i18n "talks" }}
+      };
+
+      function getTemplate(templateName) {
+        return document.querySelector(`#${templateName}-template`).innerHTML;
+      }
+
+      const options = {
+        appId: {{ .Site.Params.search.algolia.app_id }},
+        apiKey: {{ .Site.Params.search.algolia.api_key }},
+        indexName: {{ .Site.Params.search.algolia.index_name }},
+        routing: true,
+        searchParameters: {
+          hitsPerPage: 10
+        },
+        searchFunction: function(helper) {
+          let searchResults = document.querySelector('#search-hits')
+          if (helper.state.query === '') {
+            searchResults.style.display = 'none';
+            return;
+          }
+          helper.search();
+          searchResults.style.display = 'block';
+        }
+      };
+
+      const search = instantsearch(options);
+
+      // Initialize search box.
+      search.addWidget(
+        instantsearch.widgets.searchBox({
+          container: '#search-box',
+          placeholder: {{ i18n "search_placeholder" }}
+        })
+      );
+
+      // Initialize search results.
+      search.addWidget(
+        instantsearch.widgets.infiniteHits({
+          container: '#search-hits',
+          templates: {
+            empty: '<div class="search-no-results">' + {{ i18n "search_no_results" }} + '</div>',
+            item: getTemplate('search-hit')
+          },
+          cssClasses: {
+            showmoreButton: 'btn btn-primary btn-outline'
+          }
+        })
+      );
+
+      // On render search results, localize the content type metadata.
+      search.on('render', function() {
+        $('.search-hit-type').each(function( index ) {
+          let content_key = $( this ).text();
+          if (content_key in content_type) {
+            $( this ).text(content_type[content_key]);
+          }
+        });
+      });
+
+      // Start search.
+      search.start();
+    </script>
+    {{ end }}
+
   </body>
 </html>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 67192ba1..ec02fa39 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -53,6 +53,10 @@
       {{ end }}
     {{ end }}
   {{ end }}
+  {{ if eq .Site.Params.search.engine 1 }}
+    {{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/instantsearch.js/%s/instantsearch.min.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.instantsearch.version $sri.css.instantsearch.sri | safeHTML }}
+    {{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/instantsearch.js/%s/instantsearch-theme-algolia.min.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.instantsearchTheme.version $sri.css.instantsearchTheme.sri | safeHTML }}
+  {{ end }}
   {{ if not .Site.Params.disable_sri }}
   {{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/css/bootstrap.min.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.bootstrap.version $sri.css.bootstrap.sri | safeHTML }}
   {{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/academicons/%s/css/academicons.min.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.academicons.version $sri.css.academicons.sri | safeHTML }}
diff --git a/layouts/partials/widgets/search.html b/layouts/partials/widgets/search.html
new file mode 100644
index 00000000..2f06ba5c
--- /dev/null
+++ b/layouts/partials/widgets/search.html
@@ -0,0 +1,33 @@
+{{ $ := .root }}
+{{ $page := .page }}
+
+<div class="row">
+  <div class="col-xs-12 col-md-4 section-heading">
+    <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
+    {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
+  </div>
+  <div class="col-xs-12 col-md-8">
+    {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
+
+    <div id="search-box">
+      <!-- Search box will appear here -->
+    </div>
+
+    <div id="search-hits">
+      <!-- Search results will appear here -->
+    </div>
+
+  </div>
+</div>
+
+<script type="text/html" id="search-hit-template">
+  <div class="search-hit">
+    <div class="search-hit-content">
+      <div class="search-hit-name">
+        {{ printf "<a href=\"%s\">{{{_highlightResult.title.value}}}</a>" "{{relpermalink}}" | safeHTML }}
+      </div>
+      <div class="article-metadata search-hit-type">{{"{{type}}"}}</div>
+      <p class="search-hit-description">{{ safeHTML "{{{_highlightResult.summary.value}}}" }}</p>
+    </div>
+  </div>
+</script>