🔍 Enable DocSearch in Kata (powered by Algolia)

Author: yasulab

app/assets/stylesheets/clean-blog.css

@@ -83,7 +83,7 @@ hr.small {
   }
   .navbar-custom .nav li a {
     color: white;
-    padding: 20px;
+    padding: 20px 15px;
   }
   .navbar-custom .nav li a:hover,
   .navbar-custom .nav li a:focus {

app/assets/stylesheets/custom.scss

@@ -1,22 +1,63 @@
 @import "bootstrap-sprockets";
 @import "bootstrap";
 
-// Customized by YassLab
+// Customized by YassLab team
 
-/*改行位置の調整*/
-  .ignore-pc{
-        display:none;
-  }
-  .ignore-sp{
-        display:inline;
-  }
+/* DocSearch by Algolia */
+.search {
+  padding-top:    17px;
+  padding-left:   15px;
+  padding-bottom: 10px;
+}
+#searchbox {
+  padding-left: 5px;
+  font-size:    90%;
+}
+.algolia-autocomplete {
+  /* Main dropdown wrapper */
+  //  max-width: 100px;
+}
+.algolia-autocomplete .ds-dropdown-menu {
+  //  width: 200px;
+}
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+  /* Main category (eg. Getting Started) */
+  //  color: darkgray;
+  //  border: 1px solid gray;
+}
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+  /* Category (eg. Downloads) */
+  //  color: gray;
+}
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+  /* Title (eg. Bootstrap CDN) */
+  //  font-weight: bold;
+  //  color: black;
+}
+.algolia-autocomplete .algolia-docsearch-suggestion--text {
+  /* Description description (eg. Bootstrap currently works...) */
+  //  font-size: 0.8rem;
+  //  color: gray;
+}
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+  /* Highlighted text */
+  //  color: blue;
+}
+
+/* 改行位置の調整 */
+.ignore-pc{
+  displayplay:none;
+}
+.ignore-sp{
+  display:inline;
+}
 
 @media screen and (max-width: 640px) {
   .ignore-pc{
-        display:inline;
+    display:inline;
   }
   .ignore-sp{
-        display:none;
+    display:none;
   }
 }
 

app/views/layouts/application.html.haml

@@ -54,12 +54,27 @@
     /[if lt IE 9]
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+
+    / at the end of the HEAD
+    %link{:href => "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css", :rel => "stylesheet"}/
+
   %body
     - flash.each do |message_type, message|
       %div{:class => "alert alert-#{message_type}"}= message
     = yield
     = scrivito_body_tags if using_scrivito?
     = render 'shared/footer'
+    / at the end of the BODY
+    %script{:src  => "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js",
+            :type => "text/javascript"}
+    :javascript
+      docsearch({
+        apiKey: '315da3c406c3fa374a0696590f4821a3',
+        indexName: 'coderdojo',
+        inputSelector: '#searchbox',
+        debug: false // Set debug to true if you want to inspect the dropdown
+      });
+
   #fb-root
   :javascript
     (function(d, s, id) {

app/views/plain_page/index.html.haml

@@ -13,6 +13,10 @@
         / Collect the nav links, forms, and other content for toggling
         #bs-example-navbar-collapse-1.collapse.navbar-collapse
           %ul.nav.navbar-nav.navbar-right
+            %li.search
+              %input#searchbox{ :placeholder => "🔍 検索", :type => "text" }
+              #hits
+              #pagination
             %li
               %a{:href => "#README"} はじめに
             %li