WIP: Enable DocSearch powered by Algolia

Author: yasulab

app/assets/stylesheets/custom.scss

@@ -3,20 +3,27 @@
 
 // Customized by YassLab
 
-/*改行位置の調整*/
-  .ignore-pc{
-        display:none;
-  }
-  .ignore-sp{
-        display:inline;
-  }
+/* DocSearch by Algolia */
+body {
+  font-family: sans-serif;
+  padding: 1em;
+}
+.ais-SearchBox { margin: 1em 0; }
+
+/* 改行位置の調整 */
+.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/home/show.html.haml

@@ -45,6 +45,13 @@
     が制作した動画です。道場の雰囲気が伝われば幸いです ;)
   = render partial: 'shared/sns'
 
+  .ais-InstantSearch
+    .right-panel
+      %input#searchbox
+      #hits
+      #pagination
+  
+
 /
   %section#events.detail-introduction.text-center
   %h2 直近のイベント

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) {