From f814f006b45821809cc6d18dea4206c678707ab5 Mon Sep 17 00:00:00 2001
From: Michael Rose <mmistakes@users.noreply.github.com>
Date: Fri, 16 Feb 2018 14:20:42 -0500
Subject: [PATCH] Add Algolia search provider (#1531)

* Support Lunr and Algolia search providers
* Document search providers and configuration
* Update CHANGELOG and history

close #1416
---
 CHANGELOG.md                                 |  6 +++
 _config.yml                                  |  6 +++
 _includes/scripts.html                       | 17 +++---
 _includes/search/algolia-search-scripts.html | 54 ++++++++++++++++++++
 _includes/search/lunr-search-scripts.html    | 10 ++++
 _includes/search/search_form.html            | 11 ++++
 _includes/search_form.html                   |  4 --
 _layouts/default.html                        |  2 +-
 _layouts/search.html                         | 15 +++---
 _sass/minimal-mistakes/_search.scss          | 18 +++++++
 10 files changed, 122 insertions(+), 21 deletions(-)
 create mode 100644 _includes/search/algolia-search-scripts.html
 create mode 100644 _includes/search/lunr-search-scripts.html
 create mode 100644 _includes/search/search_form.html
 delete mode 100644 _includes/search_form.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a0d1f6f..d194056 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Unreleased
+
+### Enhancements
+
+* Add support for [Algolia](https://www.algolia.com/) search provider. [#1416](https://github.com/mmistakes/minimal-mistakes/issues/1416)
+
 ## [4.9.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.9.1)
 
 ### Enhancements
diff --git a/_config.yml b/_config.yml
index 1a2694a..ae4fe97 100644
--- a/_config.yml
+++ b/_config.yml
@@ -53,6 +53,12 @@ atom_feed:
   path                   : # blank (default) uses feed.xml
 search                   : # true, false (default)
 search_full_content      : # true, false (default)
+search_provider          : # lunr (default), algolia
+algolia:
+  application_id         : # YOUR_APPLICATION_ID
+  index_name             : # YOUR_INDEX_NAME
+  search_only_api_key    : # YOUR_SEARCH_ONLY_API_KEY
+  powered_by             : # true (default), false
 
 # SEO Related
 google_site_verification :
diff --git a/_includes/scripts.html b/_includes/scripts.html
index 45113e0..ded8e7b 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -13,16 +13,13 @@
 {% endif %}
 
 {% if site.search == true or page.layout == "search" %}
-  {% assign lang = site.locale | slice: 0,2 | default: "en" %}
-  {% case lang %}
-  {% when "gr" %}
-    {% assign lang = "gr" %}
-  {% else %}
-    {% assign lang = "en" %}
-  {% endcase %}
-  <script src="{{ '/assets/js/lunr/lunr.min.js' | absolute_url }}"></script>
-  <script src="{{ '/assets/js/lunr/lunr-store.js' | absolute_url }}"></script>
-  <script src="{{ '/assets/js/lunr/lunr-' | append: lang | append: '.js' | absolute_url }}"></script>
+  {%- assign search_provider = site.search_provider | default: "lunr" -%}
+  {%- case search_provider -%}
+    {%- when "lunr" -%}
+      {% include search/lunr-search-scripts.html %}
+    {%- when "algolia" -%}
+      {% include search/algolia-search-scripts.html %}
+  {%- endcase -%}
 {% endif %}
 
 {% include analytics.html %}
diff --git a/_includes/search/algolia-search-scripts.html b/_includes/search/algolia-search-scripts.html
new file mode 100644
index 0000000..1ec021d
--- /dev/null
+++ b/_includes/search/algolia-search-scripts.html
@@ -0,0 +1,54 @@
+<!-- Including InstantSearch.js library and styling -->
+<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css">
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css">
+
+<script>
+// Instanciating InstantSearch.js with Algolia credentials
+const search = instantsearch({
+  appId: '{{ site.algolia.application_id }}',
+  apiKey: '{{ site.algolia.search_only_api_key }}',
+  indexName: '{{ site.algolia.index_name }}',
+  searchParameters: {
+    restrictSearchableAttributes: [
+      'title',
+      'content'
+    ]
+  }
+});
+
+const hitTemplate = function(hit) {
+  const url = hit.url;
+  const title = hit._highlightResult.title.value;
+  const content = hit._highlightResult.html.value;
+
+  return `
+    <div class="list__item">
+      <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
+        <h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}${url}">${title}</a></h2>
+        <div class="archive__item-excerpt" itemprop="description">${content}</div>
+      </article>
+    </div>
+  `;
+}
+
+// Adding searchbar and results widgets
+search.addWidget(
+  instantsearch.widgets.searchBox({
+    container: '.search-searchbar',
+    {% unless site.algolia.powered_by == false %}poweredBy: true,{% endunless %}
+    placeholder: '{{ site.data.ui-text[site.locale].search_placeholder_text | default: "Enter your search term..." }}'
+  })
+);
+search.addWidget(
+  instantsearch.widgets.hits({
+    container: '.search-hits',
+    templates: {
+      item: hitTemplate
+    }
+  })
+);
+
+// Starting the search
+search.start();
+</script>
diff --git a/_includes/search/lunr-search-scripts.html b/_includes/search/lunr-search-scripts.html
new file mode 100644
index 0000000..b8ffc23
--- /dev/null
+++ b/_includes/search/lunr-search-scripts.html
@@ -0,0 +1,10 @@
+{% assign lang = site.locale | slice: 0,2 | default: "en" %}
+{% case lang %}
+{% when "gr" %}
+  {% assign lang = "gr" %}
+{% else %}
+  {% assign lang = "en" %}
+{% endcase %}
+<script src="{{ '/assets/js/lunr/lunr.min.js' | absolute_url }}"></script>
+<script src="{{ '/assets/js/lunr/lunr-store.js' | absolute_url }}"></script>
+<script src="{{ '/assets/js/lunr/lunr-' | append: lang | append: '.js' | absolute_url }}"></script>
\ No newline at end of file
diff --git a/_includes/search/search_form.html b/_includes/search/search_form.html
new file mode 100644
index 0000000..3058f6b
--- /dev/null
+++ b/_includes/search/search_form.html
@@ -0,0 +1,11 @@
+<div class="search-content__inner-wrap">
+{%- assign search_provider = site.search_provider | default: "lunr" -%}
+{%- case search_provider -%}
+  {%- when "lunr" -%}
+    <input type="text" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
+    <div id="results" class="results"></div>
+  {%- when "algolia" -%}
+    <div class="search-searchbar"></div>
+    <div class="search-hits"></div>
+{%- endcase -%}
+</div>
\ No newline at end of file
diff --git a/_includes/search_form.html b/_includes/search_form.html
deleted file mode 100644
index b9bf70f..0000000
--- a/_includes/search_form.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div class="search-content__inner-wrap">
-  <input type="text" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
-  <div id="results" class="results"></div>
-</div>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index de67003..7a82a80 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -25,7 +25,7 @@
 
     {% if site.search == true %}
       <div class="search-content">
-        {% include search_form.html %}
+        {% include search/search_form.html %}
       </div>
     {% endif %}
 
diff --git a/_layouts/search.html b/_layouts/search.html
index 8f5c215..1bac452 100644
--- a/_layouts/search.html
+++ b/_layouts/search.html
@@ -22,11 +22,14 @@ layout: default
 
     {{ content }}
 
-    <form>
-      <input type="input" id="search" class="search-input" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
-    </form>
-
-    <div id="results"></div>
-
+    {%- assign search_provider = site.search_provider | default: "lunr" -%}
+    {%- case search_provider -%}
+      {%- when "lunr" -%}
+        <input type="text" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
+        <div id="results" class="results"></div>
+      {%- when "algolia" -%}
+        <div class="search-searchbar"></div>
+        <div class="search-hits"></div>
+    {%- endcase -%}
   </div>
 </div>
diff --git a/_sass/minimal-mistakes/_search.scss b/_sass/minimal-mistakes/_search.scss
index 1e23c33..fe3c436 100644
--- a/_sass/minimal-mistakes/_search.scss
+++ b/_sass/minimal-mistakes/_search.scss
@@ -105,3 +105,21 @@
     margin-bottom: 0;
   }
 }
+
+/* Algolia search */
+
+.ais-search-box {
+  max-width: 100% !important;
+  margin-bottom: 2em;
+}
+
+.archive__item-title .ais-Highlight {
+  color: $link-color;
+  font-style: normal;
+  text-decoration: underline;
+}
+.archive__item-excerpt .ais-Highlight {
+  color: $link-color;
+  font-style: normal;
+  font-weight: bold;
+}
-- 
2.45.2