j1-template 2020.0.0

data/_includes/themes/j1/modules/connectors/translator

@@ -0,0 +1,45 @@
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #  ~/_includes/themes/j1/modules/connectors/translator
+ #  Liquid CONNECTOR for translation providers supported by J1 Template
+ #
+ #  Product/Info:
+ #  http://jekyll.one
+ #
+ #  Copyright (C) 2020 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  liquid_var:  {{ liquid_var | debug }}
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Variables
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign translation          = site.data.template_settings.translation.enabled %}
+{% assign translation_provider = site.data.template_settings.translation.provider %}
+
+
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+
+<!-- [INFO   ] [j1.modules.connectors.translator      ] [ start processing load region head, layout: {{page.layout}} ] -->              
+{% if translation %}
+
+  {% case translation_provider %}
+    {% when "google" %}
+      <!-- [INFO   ] [j1.modules.connectors.translator      ] [ place Google Translator ] -->
+      {% include themes/{{site.template.name}}/modules/connectors/translators/google-translator.html %}
+    {% when "custom" %}
+      <!-- [INFO   ] [j1.modules.connectors.translator      ] [ place Custom Translation Provider ] -->
+      {% include themes/{{site.template.name}}/modules/connectors/translators/custom-translator.html %}
+  {% endcase %}
+
+{% endif %}
+<!-- [INFO   ] [j1.modules.connectors.translator      ] [ end processing ] -->
+

data/_includes/themes/j1/modules/connectors/translators/custom-translator.html

@@ -0,0 +1,32 @@
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #  ~/_includes/themes/j1/modules/connectors/translators/custom-translator.html
+ #  Support of your custom translation provider
+ #
+ #  Product/Info:
+ #  http://jekyll.one
+ #
+ #  Copyright (C) 2020 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  liquid_var:  {{ liquid_var | debug }}
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Variables
+-------------------------------------------------------------------------------- {% endcomment %}
+
+
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+
+<!-- Your code for the custom provider goes here -->
+
+
+

data/_includes/themes/j1/modules/connectors/translators/google-translator.html

@@ -0,0 +1,49 @@
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #  ~/_includes/themes/j1/modules/connectors/translators/google-translator.html
+ #  Support of multiple languages by Google Translator for J1 Template
+ #
+ #  Product/Info:
+ #  http://jekyll.one
+ #
+ #  Copyright (C) 2020 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  liquid_var:  {{ liquid_var | debug }}
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Variables
+-------------------------------------------------------------------------------- {% endcomment %}
+
+
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+<!-- Google Translator, NOT shown by default -->
+<div id="google_translate_element" class="ml-5 mr-5 mb-4" style="display: none;"></div>
+
+  <script type="text/javascript">
+    var logger;
+    
+    function googleTranslateElementInit() {
+      logger = log4javascript.getLogger('j1.translator');
+      logger.info('initialize translator: google');
+      //includedLanguages: 'de,fr,es',
+      //layout: google.translate.TranslateElement.InlineLayout.SIMPLE
+      new google.translate.TranslateElement({
+        pageLanguage: 'en'        
+      }, 
+      'google_translate_element');
+    }
+  </script>
+    
+  <script type="text/javascript"
+    src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
+  </script>
+

data/_includes/themes/j1/modules/navigator/generator.html

@@ -0,0 +1,202 @@
+{% comment %} 
+ # -----------------------------------------------------------------------------
+ #  ~/_includes/themes/j1/modules/navigator/generator.html
+ #  Liquid HTML template to create the Navigation System for J1 Template 
+ #
+ #  Product/Info:
+ #  https://jekyll.one
+ #
+ #  Copyright (C) 2020 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ #
+ # -----------------------------------------------------------------------------
+ #  Test data:
+ #   liquid_var: {{ liquid_var | debug }}
+ #
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+{% include themes/{{site.template.name}}/procedures/global/setup.proc %}
+{% capture select_color %}themes/{{site.template.name}}/procedures/global/select_color.proc{% endcapture %}
+{% capture topsearch_create %}themes/{{site.template.name}}/modules/navigator/procedures/topsearch.proc{% endcapture %}
+
+{% comment %} Not longer used (loaded via AJAX)
+--------------------------------------------------------------------------------
+{% capture sidebar_create %}themes/{{site.template.name}}/modules/navigator/procedures/sidebar.proc{% endcapture %}
+{% capture quicklinks_create %}themes/{{site.template.name}}/modules/navigator/procedures/quicklinks.proc{% endcapture %}
+--------------------------------------------------------------------------------
+{% endcomment %}
+
+
+{% comment %} Process YML config data
+================================================================================ {% endcomment %}
+
+{% comment %} Set config files
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign site_config                 = site %}
+{% assign template_config             = site.data.template_settings %}
+{% assign blocks                      = site.data.blocks %}
+{% assign modules                     = site.data.modules %}
+ 
+{% comment %} Set config files
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign authentication_defaults     = modules.defaults.authentication.defaults %}
+{% assign authentication_settings     = modules.authentication.settings %}
+
+{% assign navigator_defaults          = site.data.modules.defaults.navigator.defaults %}
+{% assign navigator_settings          = site.data.modules.navigator.settings %}
+{% assign consent_defaults            = site.data.modules.defaults.cookie_consent.defaults %}
+{% assign consent_settings            = site.data.modules.cookie_consent.settings %}
+
+{% assign cookiebar_defaults          = site.data.modules.defaults.cookiebar.defaults %}
+{% assign cookiebar_settings          = site.data.modules.cookiebar.settings %}
+
+{% comment %} Set config data
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign nav_bar_defaults            = navigator_defaults.nav_bar %}
+{% assign nav_bar_settings            = navigator_settings.nav_bar %}
+{% assign nav_quicklinks_defaults     = navigator_defaults.nav_quicklinks %}
+{% assign nav_quicklinks_settings     = navigator_settings.nav_quicklinks %}
+{% assign nav_topsearch_defaults      = navigator_defaults.nav_topsearch %}
+{% assign nav_topsearch_settings      = navigator_settings.nav_topsearch %}
+{% assign nav_sidebar_defaults        = navigator_defaults.nav_sidebar %}
+{% assign nav_sidebar_settings        = navigator_settings.nav_sidebar %}
+
+{% assign nav_authclient_defaults     = authentication_defaults.auth_client %}
+{% assign nav_authclient_settings     = authentication_settings.auth_client %}
+
+{% comment %} Set config options
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign nav_bar_options             = nav_bar_defaults | merge: nav_bar_settings %}
+{% assign quicklinks_options          = nav_quicklinks_defaults | merge: nav_quicklinks_settings %}
+{% assign topsearch_options           = nav_topsearch_defaults | merge: nav_topsearch_settings %}
+{% assign sidebar_options             = nav_sidebar_defaults | merge: nav_sidebar_settings %}
+{% assign authclient_options          = nav_authclient_defaults | merge: nav_authclient_settings %}
+{% assign cookie_consent_options      = consent_defaults | merge: consent_settings %}
+{% assign authentication_options      = authentication_defaults | merge: authentication_settings %}
+
+{% assign auth_manager_config         = authentication_options.j1_auth %}
+
+{% comment %} Set navBarOptions
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign brand_position              = nav_bar_options.brand_position %}
+{% assign nav_fixed                   = nav_bar_options.fixed %}
+{% assign nav_style                   = nav_bar_options.style %}
+{% assign nav_color                   = nav_bar_options.color %}
+
+{% comment %} Set global settings
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign nav_bar_id                  = navigator_defaults.nav_bar.xhr_container_id %}
+{% assign nav_menu_id                 = navigator_defaults.nav_menu.xhr_container_id %}
+{% assign nav_sidebar_id              = navigator_defaults.nav_sidebar.xhr_container_id %}
+{% assign nav_quicklinks_id           = navigator_defaults.nav_quicklinks.xhr_container_id %}
+{% assign authclient_modals_id        = authclient_options.xhr_container_id %}
+{% assign nav_navbar_media_breakpoint = navigator_defaults.nav_bar.media_breakpoint %}
+
+{% comment %} Set navBarProperties 
+-------------------------------------------------------------------------------- {% endcomment %}
+{% if nav_fixed %}
+  {% assign nav_bar_fixed = 'navbar-fixed' %}
+  {% if nav_style == 'overlay' %} {% assign nav_bar_style = 'navbar-transparent' %} {% endif %}
+{% endif %} 
+
+{% if nav_color == 'light' %}
+  {% assign nav_bar_color = 'light' %}
+{% endif %}
+
+{% capture nav_bar_default_css_classes %}navbar navigator navbar-expand-{{nav_navbar_media_breakpoint}} navbar-default{% endcapture %}
+
+
+
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Generate TopSearch container
+-------------------------------------------------------------------------------- {% endcomment %}
+<!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ check for topsearch ] -->
+{% if topsearch_options.enabled %}
+  <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ start processing: topsearch ] -->                 
+  {% include {{ topsearch_create }} options=topsearch_options %}
+  <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ end processing: topsearch ] -->
+{% endif %}
+
+<!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ start processing: navigation ] -->
+<nav id="{{nav_bar_id}}" class="{{nav_bar_default_css_classes}} {{nav_bar_color}} {{nav_bar_fixed}} {{nav_bar_style}}">
+
+  {% comment %} Place|Hide Sidebar container (HTML data loaded via AJAX)
+  ------------------------------------------------------------------------------ {% endcomment %}
+  <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ check for sidebar ] -->
+  {% if sidebar_options.enabled %}
+    <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ sidebar detected ] -->
+    <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ place container for: sidebar ] -->
+    <div id="{{nav_sidebar_id}}" class="side"></div>
+  {% endif %}
+
+  {% comment %} Place brand image
+  ------------------------------------------------------------------------------ {% endcomment %}
+  <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ end processing: sidebar ] -->
+  <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ start processing: main menue ] -->
+  {% if brand_position == "left" %}
+    <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ place brand image to the: left ] -->
+    {% if site.brand.image %}
+      <a class="navbar-brand" href="{{ home_path }}"> <img src="{{ site.data.template_settings.image_path }}/{{ site.brand.image }}" height="{{ site.brand.image_height }}" alt="{{ site.brand.text }}"></a>
+    {% else %}
+      <a class="navbar-brand" href="{{home_path}}" "> <b><font color="{{site.brand.text_color}}">{{ site.brand.text }}</font></b></a>
+    {% endif %}
+    <button type="button" class="navigator navbar-toggler animated fadeIn" data-toggle="collapse" data-target="#{{nav_menu_id}}" aria-controls="{{nav_menu_id}}" aria-expanded="false" aria-label="Toggle navigation">
+      <i class="mdi mdi-menu mdi-48px"></i>
+    </button>
+  {% elsif brand_position == "right" %}
+    <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ place brand to the: right ] -->
+    <button type="button" class="navigator navbar-toggler animated fadeIn" data-toggle="collapse" data-target="#{{nav_menu_id}}" aria-controls="{{nav_menu_id}}" aria-expanded="false" aria-label="Toggle navigation">
+      <i class="mdi mdi-menu mdi-48px"></i>
+    </button>
+    {% if site.brand.image %}
+      <a class="navbar-brand" href="{{ home_path }}"> <img src="{{ site.data.template_settings.image_path }}/{{ site.brand.image }}" height="{{ site.brand.image_height }}" alt="{{ site.brand.text }}"></a>
+    {% else %}
+      <a class="navbar-brand" href="{{home_path}}" "> <b><font color="{{site.brand.text_color}}">{{ site.brand.text }}</font></b></a>
+    {% endif %}
+  {% else %}
+    <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ place brand to default position: left ] -->
+    <button type="button" class="navigator navbar-toggler animated fadeIn" data-toggle="collapse" data-target="#{{nav_menu_id}}" aria-controls="{{nav_menu_id}}" aria-expanded="false" aria-label="Toggle navigation">
+      <i class="mdi mdi-menu mdi-48px"></i>
+    </button>
+    {% if site.brand.image %}
+      <a class="navbar-brand" href="{{ home_path }}"> <img src="{{ site.data.template_settings.image_path }}/{{ site.brand.image }}" height="{{ site.brand.image_height }}" alt="{{ site.brand.text }}"></a>
+    {% else %}
+      <a class="navbar-brand" href="{{home_path}}" "> <b><font color="{{site.brand.text_color}}">{{ site.brand.text }}</font></b></a>
+    {% endif %}
+  {% endif %}
+
+  {% comment %} Place NAV menu container (HTML data loaded via AJAX)
+  ------------------------------------------------------------------------------ {% endcomment %}
+  <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ start processing: nav bar ] -->
+  <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ place nav menu container for AJAX load ] -->
+  <div id="{{nav_menu_id}}" class="collapse"></div>
+
+  {% comment %} Place|Hide Quicklinks container (HTML data loaded via AJAX)
+  ------------------------------------------------------------------------------ {% endcomment %}
+  <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ check for quicklinks ] -->
+  <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ quicklinks enabled: {{quicklinks_options.enabled}} ] -->
+  {% if quicklinks_options.enabled %}
+  <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ place container for: quicklinks ] -->
+  <div id="{{nav_quicklinks_id}}" class="attr-nav collapse navbar-collapse justify-content-end"></div>
+  {% endif %}
+  <!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ end processing for: quicklinks ] -->
+
+</nav>
+
+{% comment %} Place container for sign in|out dialog used by J1 AuthClient
+-------------------------------------------------------------------------------- {% endcomment %}
+<!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ check for: authclient ] -->
+<!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ authclient enabled: {{auth_manager_config.enabled}} ] -->
+<!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ place container for: authclient ] -->
+<div id="{{authclient_modals_id}}" class="authclient_modals"></div>
+<!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ end processing: auth_client ] -->
+<!-- [INFO   ] [j1.modules.navigator.generator.html   ] [ end processing: navigation ] -->
+
+

data/_includes/themes/j1/modules/navigator/procedures/topsearch.proc

@@ -0,0 +1,114 @@
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #  ~/_includes/templates/j1/modules/navigator/procedures/topsearch.proc
+ #  Liquid PROCEDURE template to create search input for the quicklink bar
+ #
+ #  Product/Info:
+ #  https://jekyll.one
+ #
+ #  Copyright (C) 2020 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ #
+ # -----------------------------------------------------------------------------
+ #  Test data:
+ #   liquid_var: {{ liquid_var | debug }}
+ #   topsearch_options: {{ topsearch_options | debug }}
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedure parameter|s
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign topsearch_options = include.options %}
+
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+{% capture select_color     %}themes/{{site.template.name}}/procedures/global/select_color.proc{% endcapture %}
+{% capture select_icon_size %}themes/{{site.template.name}}/procedures/global/select_icon_size.proc{% endcapture %}
+ 
+
+{% comment %} Liquid var initialization
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Set config files
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} TODO: Params should passed by the generator
+--------------------------------------------------------------------------------
+{% assign quick_search_config   = site.data.modules.j1_jekyll_search %}
+{% assign elastic_search_config = site.data.modules.j1_elastic_search %}
+--------------------------------------------------------------------------------
+{% endcomment %}
+
+
+{% comment %} Set quicksearch properties
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign topsearch_id        = topsearch_options.xhr_container_id %}
+{% assign icon_family         = topsearch_options.icon_family | downcase %}
+{% assign placeholder         = topsearch_options.placeholder %}
+{% assign search_heading_lead = topsearch_options.search_heading_lead %}
+{% assign result_heading_lead = topsearch_options.result_heading_lead %}
+{% assign search_icon         = topsearch_options.search_icon %}
+{% assign close_icon          = topsearch_options.close_icon %}
+
+{% assign quick_search   = true %}
+{% assign elastic_search = false %}
+
+{% if topsearch_options.type == 'quick_search' %}
+  {% assign quick_search   = true %}
+{% endif %}
+
+{% if topsearch_options.type == 'elastic_search' %}
+  {% assign elastic_search = true %}
+  {% assign quick_search   = false %}
+{% endif %}
+
+{% if topsearch_options.icon_family     == 'FontAwesome' or topsearch_options.icon_family == 'FontAwesome4' or topsearch_options.icon_family == 'FontAwesome5' %}
+  {% assign icon_family = 'fa' %}
+{% elsif topsearch_options.icon_family  == 'MDI' or topsearch_options.icon_family == 'Material Design Icons'%}
+  {% assign icon_family = 'mdi' %}
+{% else %}
+  {% assign icon_family = 'mdi' %}
+{% endif %}
+
+{% include {{select_color}} color=topsearch_options.icon_color fallback="#9E9E9E" %}
+{% capture icon_color %}style="color:{{color}}"{% endcapture %}
+
+{% include {{select_icon_size}} family=topsearch_options.icon_family size=topsearch_options.icon_size %}
+{% assign icon_size = size %}
+
+
+{% comment %} Main 
+-------------------------------------------------------------------------------- {% endcomment %}
+{% if topsearch_options.enabled %}
+
+  {% comment %} JekyllSimpleSearch engine
+  ------------------------------------------------------------------------------ {% endcomment %}
+  {% if quick_search %}
+    <!-- [INFO   ] [j1.modules.navigator.topsearch.proc   ] [ start processing: top search ] -->
+    <div id="{{topsearch_id}}" class="top-search">
+      <div class="container-fluid">
+        <div class="input-group">
+          <span class="input-group-addon"><i class="{{icon_family}} {{icon_family}}-{{search_icon}} {{icon_size}}" {{icon_color}}></i></span>
+          <input type="text" id="jss-input" class="form-control" placeholder="{{placeholder}}">
+          <span class="input-group-addon close-search"><i class="{{icon_family}} {{icon_family}}-{{close_icon}} {{icon_size}}" {{icon_color}}></i></span>
+        </div>
+      </div>
+      <!-- [INFO   ] [j1.modules.navigator.topsearch.proc   ] [ add search panel (hidden) ] -->
+      <div class="row">
+        <!-- div class="card card-flat panel-search mr-5 mb-3 ml-5" id="jss-panel" style="display: none" -->
+        <div class="panel-search mr-5 mb-3 ml-5" id="jss-panel" style="display: none">
+          {% if search_heading_lead %}<div class="panel-heading lead">{{ search_heading_lead }}</div>{% endif %}
+          {% if result_heading_lead %}<div class="panel-body"><p>{{ result_heading_lead }}</p></div>{% endif %}
+          <div class="search-list-group mr-5 ml-2">
+            <ul id="jss-results"></ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- [INFO   ] [j1.modules.navigator.topsearch.proc   ] [ end processing: top search ] -->
+    {% endif %}
+
+{% endif %}

data/_includes/themes/j1/modules/search/algolia.html

@@ -0,0 +1,181 @@
+++++
+<div id="search-searchbar"></div>
+
+<div class="post-list" id="search-hits">
+   {% for post in site.posts %}
+     <div class="post-item">
+       {% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
+       <span class="post-meta">{{ post.date | date: date_format }}</span>
+ 
+       <h2>
+         <a class="post-link" href="{{ post.url | relative_url }}">
+           {{ post.title | escape }}
+         </a>
+       </h2>
+ 
+       <div class="post-snippet">{{ post.excerpt }}</div>
+     </div>
+   {% endfor %}
+</div>
+++++
+
+++++
+<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css">
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css">
+
+<script>
+
+  const hitTemplate = function(hit) {
+    // var re = new RegExp("^\/posts");
+    // var re = new RegExp("^\/pages");
+    var re = new RegExp("^\/pages|^\/collections");    
+    if ( re.test(hit.url) ) {
+      let date = '';
+      if (hit.date) {
+        date = moment.unix(hit.date).format('MMM D, YYYY');
+      }
+      // let url = `/jekyll-algolia-example${hit.url}#${hit.anchor}`;
+      let url = `${hit.url}`;
+
+      const title = hit._highlightResult.title.value;
+      let breadcrumbs = '';
+
+      if (hit._highlightResult.headings) {
+        breadcrumbs = hit._highlightResult.headings.map(match => {
+          return `<span class="post-breadcrumb">${match.value}</span>`
+        }).join(' > ')
+      }
+
+      const content = hit._highlightResult.html.value;
+
+      return `
+        <div class="search-result-item">
+          <div class="card">
+            <div class="card-body">
+              <span class="post-meta">${date}</span>
+              <h2 class="card-title">${title}</h2>
+              <h6 class="card-subtitle mb-2 text-muted">${hit.tagline}</h6>
+              <div class="card-text">${content}</div>
+              <div class="card-footer">
+                <a class="card-link" href="${url}" target="blank">Read more ..</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+  }
+
+  <!-- Access credentials and index -->
+  const search = instantsearch({
+    appId: '{{ site.algolia.application_id }}',
+    apiKey: '{{ site.algolia.search_only_api_key }}',
+    indexName: '{{ site.algolia.index_name }}',
+    routing: true
+  });
+  // initialize SearchBox
+  search.addWidget(
+    instantsearch.widgets.searchBox({
+      container: '#search-searchbar',
+      placeholder: 'Search this site ..',
+      poweredBy: true // This is required if you're on the free Community plan
+    })
+  );
+  // initialize hits widget
+  search.addWidget(
+    instantsearch.widgets.hits({
+      container: '#search-hits',
+      templates: {
+        empty: 'No results',
+        item: hitTemplate
+      }
+    })
+  );
+  // initialize RefinementList
+  search.addWidget(
+    instantsearch.widgets.refinementList({
+      container: '#refinement-list',
+      attributeName: 'outsideDiameter.description',
+      collapsible: true,
+      operator: "and",
+      limit: 5,
+      sortBy: ["isRefined","count:asc","name:asc"],
+      showMore: true,
+      attributeName: 'tags'
+      // cssClasses: {
+    	// 	"root": "ais-refinement-list",
+    	// 	"header": "ais-refinement-list--header",
+    	// 	"body": "ais-refinement-list--body",
+    	// 	"footer": "ais-refinement-list--footer",
+    	// 	"list": "ais-refinement-list--list",
+    	// 	"item": "ais-refinement-list--item",
+    	// 	"active": "ais-refinement-list--item__active",
+    	// 	"label": "ais-refinement-list--label",
+    	// 	"checkbox": "ais-refinement-list--checkbox",
+    	// 	"count": "ais-refinement-list--count"
+      // }
+    })
+  );
+
+  search.start();
+</script>
+
+
+<style>
+.ais-search-box {
+  max-width: 100%;
+  margin-bottom: 15px;
+}
+
+.ais-search-box--input {
+  padding-left: 2rem !important;
+}
+
+.ais-search-box--magnifier {
+  top: 0 !important;
+  right: 0 !important;
+}
+
+.ais-search-box--reset {
+  top: 0 !important;
+  right: 0 !important;
+}
+
+.search-result-item {
+  margin-bottom: 30px;
+}
+
+/*
+.post-item {
+  margin-bottom: 30px;
+}
+.post-link .ais-Highlight {
+  color: #111;
+  font-style: normal;
+  text-decoration: underline;
+}
+.post-breadcrumbs {
+  color: #424242;
+  display: block;
+}
+.post-breadcrumb {
+  font-size: 18px;
+  color: #424242;
+}
+.post-breadcrumb .ais-Highlight {
+  font-weight: bold;
+  font-style: normal;
+}
+.post-snippet .ais-Highlight {
+  color: #2a7ae2;
+  font-style: normal;
+  font-weight: bold;
+}
+.post-snippet img {
+  display: none;
+}
+*/
+
+</style>