Integrate Algolia search into website

Author: KieranHayes

Gemfile

@@ -1,5 +1,5 @@
 source 'https://rubygems.org'
 gem 'github-pages', group: :jekyll_plugins
 group :jekyll_plugins do
-  gem 'algoliasearch-jekyll', '~> 0.7.0'
-end
+  gem 'algoliasearch-jekyll', '~> 0.8.0'
+end

Gemfile.lock

@@ -1,16 +1,17 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (5.0.0)
-      concurrent-ruby (~> 1.0, >= 1.0.2)
+    activesupport (4.2.7)
       i18n (~> 0.7)
+      json (~> 1.7, >= 1.7.7)
       minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
     addressable (2.4.0)
-    algoliasearch (1.10.0)
-      httpclient (~> 2.7.1)
+    algoliasearch (1.11.0)
+      httpclient (~> 2.8.2)
       json (>= 1.5.1)
-    algoliasearch-jekyll (0.7.0)
+    algoliasearch-jekyll (0.8.0)
       algoliasearch (~> 1.4)
       appraisal (~> 2.1.0)
       awesome_print (~> 1.6)
@@ -26,36 +27,38 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.10.0)
-    colorator (0.1)
-    concurrent-ruby (1.0.2)
+    colorator (1.1.0)
     ethon (0.9.0)
       ffi (>= 1.3.0)
     execjs (2.7.0)
     faraday (0.9.2)
       multipart-post (>= 1.2, < 3)
     ffi (1.9.14)
+    forwardable-extended (2.6.0)
     gemoji (2.1.0)
-    github-pages (87)
-      github-pages-health-check (= 1.1.0)
-      jekyll (= 3.1.6)
+    github-pages (96)
+      activesupport (= 4.2.7)
+      github-pages-health-check (= 1.2.0)
+      jekyll (= 3.2.1)
       jekyll-coffeescript (= 1.0.1)
       jekyll-feed (= 0.5.1)
       jekyll-gist (= 1.4.0)
       jekyll-github-metadata (= 2.0.2)
-      jekyll-mentions (= 1.1.3)
+      jekyll-mentions (= 1.2.0)
       jekyll-paginate (= 1.1.0)
       jekyll-redirect-from (= 0.11.0)
       jekyll-sass-converter (= 1.3.0)
       jekyll-seo-tag (= 2.0.0)
       jekyll-sitemap (= 0.10.0)
-      jemoji (= 0.6.2)
+      jemoji (= 0.7.0)
       kramdown (= 1.11.1)
       liquid (= 3.0.6)
       listen (= 3.0.6)
       mercenary (~> 0.3)
+      minima (= 1.2.0)
       rouge (= 1.11.1)
       terminal-table (~> 1.4)
-    github-pages-health-check (1.1.0)
+    github-pages-health-check (1.2.0)
       addressable (~> 2.3)
       net-dns (~> 0.8)
       octokit (~> 4.0)
@@ -64,15 +67,16 @@ GEM
     html-pipeline (2.4.2)
       activesupport (>= 2)
       nokogiri (>= 1.4)
-    httpclient (2.7.2)
+    httpclient (2.8.2.4)
     i18n (0.7.0)
-    jekyll (3.1.6)
-      colorator (~> 0.1)
+    jekyll (3.2.1)
+      colorator (~> 1.0)
       jekyll-sass-converter (~> 1.0)
       jekyll-watch (~> 1.1)
       kramdown (~> 1.3)
       liquid (~> 3.0)
       mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
       rouge (~> 1.7)
       safe_yaml (~> 1.0)
     jekyll-coffeescript (1.0.1)
@@ -83,7 +87,8 @@ GEM
     jekyll-github-metadata (2.0.2)
       jekyll (~> 3.1)
       octokit (~> 4.0)
-    jekyll-mentions (1.1.3)
+    jekyll-mentions (1.2.0)
+      activesupport (~> 4.0)
       html-pipeline (~> 2.3)
       jekyll (~> 3.0)
     jekyll-paginate (1.1.0)
@@ -94,9 +99,10 @@ GEM
     jekyll-seo-tag (2.0.0)
       jekyll (~> 3.1)
     jekyll-sitemap (0.10.0)
-    jekyll-watch (1.4.0)
+    jekyll-watch (1.5.0)
       listen (~> 3.0, < 3.1)
-    jemoji (0.6.2)
+    jemoji (0.7.0)
+      activesupport (~> 4.0)
       gemoji (~> 2.0)
       html-pipeline (~> 2.2)
       jekyll (>= 3.0)
@@ -108,6 +114,7 @@ GEM
       rb-inotify (>= 0.9.7)
     mercenary (0.3.6)
     mini_portile2 (2.1.0)
+    minima (1.2.0)
     minitest (5.9.0)
     multipart-post (2.0.0)
     net-dns (0.8.0)
@@ -116,6 +123,8 @@ GEM
       pkg-config (~> 1.1.7)
     octokit (4.3.0)
       sawyer (~> 0.7.0, >= 0.5.3)
+    pathutil (0.14.0)
+      forwardable-extended (~> 2.6)
     pkg-config (1.1.7)
     public_suffix (1.5.3)
     rake (11.2.2)
@@ -128,20 +137,22 @@ GEM
     sawyer (0.7.0)
       addressable (>= 2.3.5, < 2.5)
       faraday (~> 0.8, < 0.10)
-    terminal-table (1.6.0)
+    terminal-table (1.7.2)
+      unicode-display_width (~> 1.1.1)
     thor (0.19.1)
     thread_safe (0.3.5)
     typhoeus (0.8.0)
       ethon (>= 0.8.0)
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
+    unicode-display_width (1.1.1)
     verbal_expressions (0.1.5)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  algoliasearch-jekyll (~> 0.7.0)
+  algoliasearch-jekyll (~> 0.8.0)
   github-pages
 
 BUNDLED WITH

_config.yml

@@ -12,11 +12,11 @@ description: dkdeploy documentation
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://dkdeploy.github.io" # the base hostname & protocol for your site
 twitter_username: dkd_de
-github_username:  KieranHayes
+github_username:  dkdeploy
 exclude: [foundation, vendor]
 # Build settings
 markdown: kramdown
 algolia:
   application_id: 'QOFNLOOCWH'
-  index_name:     'dkdeploy_dev'
+  index_name:     'dkdeploy_production'
   record_css_selector: 'p,ul,td,th,h3,code'

_includes/footer.html

@@ -2,15 +2,15 @@
   <div class="row">
     <div class="large-12 columns">
       <div class="footer-content">
-        <p>&copy 2016 <a href="https:/www.dkd.de/">dkd Internet Service GmbH</a> <i class="fi-heart animated"></i> <a href="mailto:opensource@dkd.de">opensource@dkd.de</a></p>
+        <p>&copy; 2016 <a href="https://www.dkd.de/">dkd Internet Service GmbH</a> <i class="fi-heart animated"></i> <a href="mailto:opensource@dkd.de">opensource@dkd.de</a></p>
       </div>
     </div>
   </div>
 </footer>
 <script>
   window.ALGOLIA_CONFIG = {
     'applicationId': 'QOFNLOOCWH',
-    'indexName': 'dkdeploy_dev',
+    'indexName': 'dkdeploy_production',
     'apiKey': 'e51022a00302b50ec0f0fe226c460d5e',
     'baseurl': ''
   }
@@ -33,12 +33,19 @@
 <script src="//cdn.jsdelivr.net/hogan.js/3.0.2/hogan.min.js"></script>
 <script src="//cdn.jsdelivr.net/momentjs/2.10.3/moment.min.js"></script>
 <script src="{{ site.baseurl }}/assets/javascript/algolia.js"></script>
-
+<script src="https://use.fontawesome.com/b5dbc25dd5.js"></script>
 <script type="text/javascript" src="{{ '/assets/javascript/toc2select.js' | prepend: site.url }}" defer></script>
 <script type="text/javascript">
   $(document).ready(function(){
     $(document).foundation();
-    var toc2select = new DkdeployApp.Classes.toc2select("#main-content", "#js-toc", "<span class='toc-label'>Jump to</span>");
+    var toc2select = new DkdeployApp.Classes.toc2select("#main-content", "#js-toc", '<span class="input-group-label"><i class="fa fa-anchor" aria-hidden="true"></i></span>');
     toc2select.render()
+    
+    // Search
+    $('.input-group-algolia input').on('focus', function(){
+      $('.input-group-algolia').addClass("input-group-algolia-focus");
+    }).on('focusout', function(){
+      $('.input-group-algolia').removeClass('input-group-algolia-focus');
+    });
   })
 </script>

_includes/head.html

@@ -2,9 +2,8 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-
   <title>dkdeploy | {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
-	<link rel="stylesheet" href="{{ "/assets/css/app.css" | prepend: site.url }}">
+  <link rel="stylesheet" href="{{ "/assets/css/app.css" | prepend: site.url }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
 </head>

_includes/header.html

@@ -19,12 +19,31 @@
             {% endfor %}
           </ul>
         </div>
-        <div class="top-bar-right" id="js-toc"></div>
+        <div class="top-bar-right">
+          <ul class="menu">
+            <li>
+              <div class="input-group" id="js-toc">
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="top-bar-right">
+          <ul class="menu">
+            <li>
+              <div class="input-group input-group-algolia">
+                <span class="input-group-label"><i class="fa fa-search" aria-hidden="true"></i>
+</span>
+<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search ..." />
+              </div>
+            </li>
+          </ul>
+        </div>
+        
       </div>
     </div>
   </div> <!-- end sticky-container -->
   <ul id="mobile-navigation" class="hide-for-medium vertical menu" data-responsive-menu="small-dropdown">
-    <li class="menu-text"><a href="/"><img style="height: 24px; margin-left: -17px" src="/assets/images/3056-73126-dkdeploy-logo.svg"></a></li>
+    <li class="menu-text"><a href="/"><img class="logo" alt="dkdeploy" title="dkdeploy" src="/assets/images/3056-73126-dkdeploy-logo.svg"></a></li>
     {% for nav in site.data.navigation %}
       {% if page.section == nav.section %}
         {% assign active = "active" %}

_layouts/default.html

@@ -5,11 +5,8 @@
   <div id="content" class="row">
     {% include header.html %}
     <div class="large-3 sidebar columns">
-      <input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search in this site..." />
-      
       <ul class="vertical menu docs-menu nav1">
         {% assign current_path = page.url %}
-
         {% for nav in site.data.navigation %}
           {% if page.section == nav.section %}
             {% capture current_nav %}{{nav.href}}{% endcapture %}
@@ -18,7 +15,6 @@
             {% else %}
               {% assign active = "" %}
             {% endif %}
-
             <li class="docs-menu-title {{active}}">
               <a href="{{nav.href}}">{{nav.title}}</a>
               {% if nav.subnav2 != empty %}
@@ -34,7 +30,7 @@
       <div id="main-content" class="large-9 main-content columns">
         <div class="algolia__initial-content js-algolia__initial-content">{{ content }}</div>
           <div class="algolia__search-content js-algolia__search-content">
-             <h2 class="page-title">Search</h2>
+             <h3 class="page-title algolia">Search Results <span>powered by <a href="https://algolia.com/"><img alt="Algolia Search" title="Algolia Search" src="/assets/images/Algolia_logo_bg-white.svg"></a></span></h3>
               <div class="posts algolia__results"></div>
           </div>
         </div>

_layouts/startpage.html

@@ -8,15 +8,14 @@
         <div class="large-4 columns card-1" >
           <div class="inner" data-equalizer-watch>
           <h3>Extended functionality</h3>
-          <p>Beside all the great functionalities Capistrano provides out of the box, <b>dkdeploy</b> gives you 
+          <p>Beside all the great functionalities Capistrano provides out of the box, <b>dkdeploy</b> gives you </p>  
             <ul>
               <li>Granular file permissions</li>
               <li>an extended Rollback Manager</li>
               <li>a Maintenance page during deployment</li>
               <li>a Copy strategy like on Capistrano 2.x</li>
               <li>Bower Integration</li>
             </ul>... and many more great features.
-           </p>
            </div>
         </div>
         <div class="large-4 columns card-2">
@@ -39,20 +38,7 @@ <h3>PHP Ready!</h3>
           </div>
         </div>
       </div>
-      <input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search in this site..." />
-    
-        <div class="algolia__initial-content js-algolia__initial-content"></div>
-          <div class="algolia__search-content js-algolia__search-content" style="background: #fff">
-             <h2 class="page-title">Search</h2>
-              <div class="posts algolia__results"></div>
-          </div>
-        </div>
-
     </div>
-    
     {% include footer.html %}
-  </div>
-  
   </body>
-
 </html>