jekyll-theme-basically-basic 1.2.0 → 1.3.0

data/_includes/search/algolia-search-scripts.html

@@ -0,0 +1,52 @@
+<!-- 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 `
+    <article class="entry">
+      <h3 class="entry-title"><a href="{{ site.baseurl }}${url}">${title}</a></h3>
+      <div class="entry-excerpt">${content}</div>
+    </article>
+  `;
+}
+
+// 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.theme.t.menu.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>

data/_includes/search/lunr-search-scripts.html

@@ -0,0 +1,106 @@
+{%- assign lang = site.lang | slice: 0, 2 | default: "en" -%}
+  {%- case lang -%}
+    {%- when "da" -%}
+      {%- assign lang = "da" -%}
+    {%- when "de" -%}
+      {%- assign lang = "de" -%}
+    {%- when "du" -%}
+      {%- assign lang = "du" -%}
+    {-% when "es" -%}
+      {%- assign lang = "es" -%}
+    {%- when "fi" -%}
+      {%- assign lang = "fi" -%}
+    {%- when "fr" -%}
+      {%- assign lang = "fr" -%}
+    {%- when "hu" -%}
+      {%- assign lang = "hu" -%}
+    {%- when "it" -%}
+      {%- assign lang = "it" -%}
+    {%- when "ja" -%}
+      {%- assign lang = "ja" -%}
+    {%- when "jp" -%}
+      {%- assign lang = "jp" -%}
+    {%- when "no" -%}
+      {%- assign lang = "no" -%}
+    {%- when "pt" -%}
+      {%- assign lang = "pt" -%}
+    {%- when "ro" -%}
+      {%- assign lang = "ro" -%}
+    {%- when "ru" -%}
+      {%- assign lang = "ru" -%}
+    {%- when "sv" -%}
+      {%- assign lang = "sv" -%}
+    {%- when "tr" -%}
+      {%- assign lang = "tr" -%}
+    {%- else -%}
+      {%- assign lang = "en" -%}
+  {%- endcase -%}
+  <script src="{{ '/assets/javascripts/lunr/lunr.min.js' | absolute_url }}"></script>
+  <script src="{{ '/assets/javascripts/search-data.json' | absolute_url }}"></script>
+  {%- unless lang == "en" -%}
+    <script src="{{ '/assets/javascripts/lunr/lunr.stemmer.support.min.js' | absolute_url }}"></script>
+    <script src="{{ '/assets/javascripts/lunr/lunr.' | append: lang | append: '.min.js' | absolute_url }}"></script>
+  {%- endunless %}
+  <script>
+    var idx = lunr(function () {
+      {% unless lang == "en" %}
+        // use the language
+        this.use(lunr.{{ lang }});
+      {% endunless %}
+      // the, the normal lunr index initialization
+      this.field('title')
+      this.field('excerpt')
+      this.field('categories')
+      this.field('tags')
+      this.ref('id')
+
+      this.pipeline.remove(lunr.trimmer)
+
+      // add documents to index
+      for (var item in store) {
+        this.add({
+          title: store[item].title,
+          excerpt: store[item].excerpt,
+          categories: store[item].categories,
+          tags: store[item].tags,
+          id: item
+        })
+      }
+    });
+
+    console.log(jQuery.type(idx));
+
+    $(document).ready(function () {
+      $('input#search').on('keyup', function () {
+        var resultdiv = $('#results');
+        var query = $(this).val().toLowerCase();
+        var result =
+          idx.query(function (q) {
+            query.split(lunr.tokenizer.separator).forEach(function (term) {
+              q.term(term, { boost: 100 })
+              if (query.lastIndexOf(" ") != query.length - 1) {
+                q.term(term, { usePipeline: false, wildcard: lunr.Query.wildcard.TRAILING, boost: 10 })
+              }
+              if (term != "") {
+                q.term(term, { usePipeline: false, editDistance: 1, boost: 1 })
+              }
+            })
+          });
+        resultdiv.empty();
+        resultdiv.prepend('<p class="results-found">' + result.length + ' {{ site.data.theme.t.menu.results_found | default: "Result(s) found" }}</p>');
+        for (var item in result) {
+          var ref = result[item].ref;
+          var searchitem =
+            '<article class="entry">' +
+              '<h3 class="entry-title">' +
+                '<a href="' + store[ref].url + '">' + store[ref].title + '</a>' +
+              '</h3>' +
+              '<div class="entry-excerpt">' +
+                '<p>' + store[ref].excerpt.split(" ").splice(0, 20).join(" ") + '...</p>' +
+              '</div>' +
+            '</article>';
+          resultdiv.append(searchitem);
+        }
+      });
+    });
+  </script>

data/_layouts/default.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!--
-    Basically Basic Jekyll Theme 1.2.0
+    Basically Basic Jekyll Theme 1.3.0
     Copyright 2017-2018 Michael Rose - mademistakes.com | @mmistakes
     Free for personal and commercial use under the MIT license
     https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE.md
@@ -13,9 +13,18 @@
     {% include skip-links.html %}
 
     <div class="sidebar-toggle-wrapper">
+      {% if site.search %}
+        <button class="search-toggle" type="button">
+          <svg class="icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.99 16">
+            <title>{{ site.data.theme.t.search | default: 'Search' }}</title>
+            <path d="M15.5,13.12L13.19,10.8a1.69,1.69,0,0,0-1.28-.55l-0.06-.06A6.5,6.5,0,0,0,5.77,0,6.5,6.5,0,0,0,2.46,11.59a6.47,6.47,0,0,0,7.74.26l0.05,0.05a1.65,1.65,0,0,0,.5,1.24l2.38,2.38A1.68,1.68,0,0,0,15.5,13.12ZM6.4,2A4.41,4.41,0,1,1,2,6.4,4.43,4.43,0,0,1,6.4,2Z" transform="translate(-.01)"></path>
+          </svg>
+        </button>
+      {% endif %}
+
       <button class="toggle navicon-button larr" type="button">
         <span class="toggle-inner">
-          <span class="sidebar-toggle-label">{{ site.data.theme.t.menu | default: 'Menu' }}</span>
+          <span class="sidebar-toggle-label visually-hidden">{{ site.data.theme.t.menu | default: 'Menu' }}</span>
           <span class="navicon"></span>
         </span>
       </button>
@@ -31,7 +40,13 @@
     <div class="canvas">
       <div class="wrapper">
         {% include masthead.html %}
-        {{ content }}
+        <div class="initial-content">
+          {{ content }}
+        </div>
+
+        <div class="search-content">
+          {% include search-form.html %}
+        </div>
       </div>
     </div>
 

data/_sass/basically-basic.scss

@@ -1,5 +1,5 @@
 /*!
- * Basically Basic Jekyll Theme 1.2.0
+ * Basically Basic Jekyll Theme 1.3.0
  * Copyright 2017-2018 Michael Rose - mademistakes | @mmistakes
  * Free for personal and commercial use under the MIT license
  * https://github.com/mmistakes/jekyll-theme-basically-basic/blob/master/LICENSE.md
@@ -22,6 +22,7 @@
 @import "basically-basic/global";
 @import "basically-basic/sidebar";
 @import "basically-basic/navigation";
+@import "basically-basic/search";
 @import "basically-basic/footer";
 @import "basically-basic/entries";
 @import "basically-basic/buttons";

data/_sass/basically-basic/_base.scss

@@ -111,8 +111,8 @@ a {
   }
 }
 
-*:focus {
-  border-color: $accent-color;
-  outline: none;
-  box-shadow: 0 0 10px $accent-color;
-}
+// *:focus {
+//   border-color: $accent-color;
+//   outline: none;
+//   box-shadow: 0 0 10px $accent-color;
+// }

data/_sass/basically-basic/_global.scss

@@ -6,7 +6,9 @@
   @include fluid-type($min-vw, $max-vw, 20px, 24px);
   margin: 0;
   padding: 1.8125rem 1rem;
-  padding-right: calc(10vw + #{$navicon-width}); /* make room for sidebar toggle */
+  padding-right: calc(
+    10vw + (2 * #{$navicon-width})
+  ); /* make room for sidebar toggle */
   font-family: $base-font-family;
   font-weight: bold;
   line-height: 1;
@@ -21,8 +23,10 @@
 
   a {
     display: -ms-flexbox;
+    display: -webkit-box;
     display: flex;
     -ms-flex-align: center;
+    -webkit-box-align: center;
     align-items: center;
     min-height: $site-image-height;
     color: $text-color;

data/_sass/basically-basic/_navicons.scss

@@ -1,125 +1,148 @@
-/* ==========================================================================
-   Navicons
-   ========================================================================== */
-
-.navicon-button {
-  display: inline-block;
-  position: relative;
-  margin: 0.90625rem 0;
-  padding: 0.90625rem 1rem;
-  transition: $navicon-duration / 2;
-  border: 0;
-  outline: none;
-  background-color: $navicon-nav-bg-close;
-  line-height: 5 * $navicon-height;
-  cursor: pointer;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-
-  @include breakpoint($medium) {
-    margin-right: 2rem;
-  }
-
-  @include breakpoint($large) {
-    margin-right: 5vw;
-  }
-
-  &.open {
-    background-color: $navicon-nav-bg-open;
-  }
-
-  .navicon::before,
-  .navicon::after {
-    transition-duration: $navicon-duration / 2;
-  }
-
-  &:hover {
-    transition-duration: $navicon-duration;
-
-    .navicon::before,
-    .navicon::after {
-      transition-duration: $navicon-duration / 2;
-    }
-
-    .navicon::before { top: (2.5 * $navicon-height); }
-    .navicon::after { top: (-2.5 * $navicon-height); }
-  }
-}
-
-.navicon {
-  position: relative;
-  width: $navicon-width;
-  height: $navicon-height;
-  transition-duration: $navicon-duration;
-  border-radius: $navicon-width;
-  background: $navicon-content-bg;
-
-  &::before,
-  &::after {
-    display: block;
-    position: absolute;
-    width: $navicon-width;
-    height: $navicon-height;
-    transition-duration: $navicon-duration $navicon-duration / 2;
-    border-radius: $navicon-width;
-    background: $navicon-content-bg;
-    content: '';
-  }
-
-  &::before { top: (2 * $navicon-height); }
-  &::after { top: (-2 * $navicon-height); }
-}
-
-.open:not(.steps) .navicon::before,
-.open:not(.steps) .navicon::after {
-  top: 0 !important;
-}
-
-.open {
-  transform: scale($navicon-toggled-size);
-
-  .navicon::before,
-  .navicon::after {
-    transition-duration: $navicon-duration;
-  }
-
-  /* Arrows */
-  &.larr .navicon,
-  &.rarr .navicon,
-  &.uarr .navicon {
-
-    &::before,
-    &::after {
-      width: (0.6 * $navicon-width);
-    }
-
-    &::before {
-      transform: rotate(35deg);
-      transform-origin: left top;
-    }
-
-    &::after {
-      transform: rotate(-35deg);
-      transform-origin: left bottom;
-    }
-  }
-
-  &.uarr {
-    transform: scale($navicon-toggled-size) rotate(90deg);
-  }
-
-  &.rarr .navicon {
-
-    &::before {
-      transform: translate3d(1em, 0, 0) rotate(-35deg);
-      transform-origin: right top;
-    }
-
-    &::after {
-      transform: translate3d(1em, 0, 0) rotate(35deg);
-      transform-origin: right bottom;
-    }
-  }
-}
+/* ==========================================================================
+   Navicons
+   ========================================================================== */
+
+.navicon-button {
+  display: inline-block;
+  position: relative;
+  padding: 0.90625rem 0;
+  min-height: $site-image-height;
+  -webkit-transition: $navicon-duration / 2;
+  transition: $navicon-duration / 2;
+  border: 0;
+  outline: none;
+  background-color: $navicon-nav-bg-close;
+  line-height: 5 * $navicon-height;
+  cursor: pointer;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &.open {
+    background-color: $navicon-nav-bg-open;
+  }
+
+  .navicon::before,
+  .navicon::after {
+    -webkit-transition-duration: $navicon-duration / 2;
+    transition-duration: $navicon-duration / 2;
+  }
+
+  &:hover {
+    -webkit-transition-duration: $navicon-duration;
+    transition-duration: $navicon-duration;
+
+    .navicon::before,
+    .navicon::after {
+      -webkit-transition-duration: $navicon-duration / 2;
+      transition-duration: $navicon-duration / 2;
+    }
+
+    .navicon::before {
+      top: (2.5 * $navicon-height);
+    }
+    .navicon::after {
+      top: (-2.5 * $navicon-height);
+    }
+  }
+}
+
+.navicon {
+  position: relative;
+  width: $navicon-width;
+  height: $navicon-height;
+  -webkit-transition-duration: $navicon-duration;
+  transition-duration: $navicon-duration;
+  border-radius: $navicon-width;
+  background: $navicon-content-bg;
+
+  &::before,
+  &::after {
+    display: block;
+    position: absolute;
+    width: $navicon-width;
+    height: $navicon-height;
+    -webkit-transition-duration: $navicon-duration $navicon-duration / 2;
+    transition-duration: $navicon-duration $navicon-duration / 2;
+    border-radius: $navicon-width;
+    background: $navicon-content-bg;
+    content: "";
+  }
+
+  &::before {
+    top: (2 * $navicon-height);
+  }
+  &::after {
+    top: (-2 * $navicon-height);
+  }
+}
+
+.open:not(.steps) .navicon::before,
+.open:not(.steps) .navicon::after {
+  top: 0 !important;
+}
+
+.open {
+  -webkit-transform: scale($navicon-toggled-size);
+  -ms-transform: scale($navicon-toggled-size);
+  transform: scale($navicon-toggled-size);
+
+  .navicon::before,
+  .navicon::after {
+    -webkit-transition-duration: $navicon-duration;
+    transition-duration: $navicon-duration;
+  }
+
+  /* Arrows */
+  &.larr .navicon,
+  &.rarr .navicon,
+  &.uarr .navicon {
+    &::before,
+    &::after {
+      width: (0.6 * $navicon-width);
+    }
+
+    &::before {
+      -webkit-transform: rotate(35deg);
+      -ms-transform: rotate(35deg);
+      transform: rotate(35deg);
+      -webkit-transform-origin: left top;
+      -ms-transform-origin: left top;
+      transform-origin: left top;
+    }
+
+    &::after {
+      -webkit-transform: rotate(-35deg);
+      -ms-transform: rotate(-35deg);
+      transform: rotate(-35deg);
+      -webkit-transform-origin: left bottom;
+      -ms-transform-origin: left bottom;
+      transform-origin: left bottom;
+    }
+  }
+
+  &.uarr {
+    -webkit-transform: scale($navicon-toggled-size) rotate(90deg);
+    -ms-transform: scale($navicon-toggled-size) rotate(90deg);
+    transform: scale($navicon-toggled-size) rotate(90deg);
+  }
+
+  &.rarr .navicon {
+    &::before {
+      -webkit-transform: translate3d(1em, 0, 0) rotate(-35deg);
+      transform: translate3d(1em, 0, 0) rotate(-35deg);
+      -webkit-transform-origin: right top;
+      -ms-transform-origin: right top;
+      transform-origin: right top;
+    }
+
+    &::after {
+      -webkit-transform: translate3d(1em, 0, 0) rotate(35deg);
+      transform: translate3d(1em, 0, 0) rotate(35deg);
+      -webkit-transform-origin: right bottom;
+      -ms-transform-origin: right bottom;
+      transform-origin: right bottom;
+    }
+  }
+}