Add search to the commands and topics

public/styles.css

@@ -247,25 +247,13 @@ body.topics.whos-using-redis ul:first-of-type li img { vertical-align: middle; m
 #commands li .command { white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; font-family: "Monaco", "Menlo", monospace; display: block; margin: 0 0 2px 0; color: #0066aa; }
 #commands li .command .args { color: #555555; }
 #commands li .summary { display: block; font-size: 0.8em; line-height: 1.5em; }
-#commands nav { margin: 0 auto; background-color: #f0f0f0; width: 100%; font-size: 0.85em; display: block; padding: 10px 0; }
-#commands nav a { color: #555555; text-decoration: none; display: inline-block; padding: 0.3em 0.5em; }
-#commands nav a.current { background-color: #666666; color: white; }
-#commands nav label { margin: 0 10px; }
-#commands nav label span { display: none; }
-#commands nav select, #commands nav input { border: 1px solid #bbbbbb; font-size: 14px; margin: 0 5px; }
-#commands nav input { border-radius: 5px; padding: 5px 5px 6px 5px; width: 100px; }
-#commands nav input:focus { outline: none; }
-#commands nav select { height: 32px; }
 
 h1.command { margin-bottom: 0.5em; }
 
 .betacmd { background-color: #d42e15; border-radius: 0.5em; color: white; padding: 0.2em 0.3em; }
 
 @media only screen and (min-width: 992px) { #commands .command { font-size: 0.9em; }
   #commands .command .args { font-size: 0.8em; }
-  #commands nav label { margin: 0 10px 0 0; }
-  #commands nav label span { display: inline; }
-  #commands nav input { width: 200px; }
   #commands ul li { float: left; margin: 1em 1.5%; overflow: hidden; width: 30%; }
   #commands ul li a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background-color: #fafafa; height: 6em; } }
 #buzz { text-align: right; }
@@ -329,3 +317,9 @@ body { width: 100%; height: 100%; }
 .mobile-menu .menu-section-list a { display: block; padding: 10px 20px; }
 .mobile-menu .menu-section-list a:hover { background-color: rgba(255, 255, 255, 0.1); text-decoration: none; }
 .mobile-menu .logo { width: 120px; height: 106px; }
+
+
+#search { margin: 0 auto; background-color: #f0f0f0; width: 100%; font-size: 0.85em; display: block; padding: 10px 0; text-align: center;}
+#search .algolia-autocomplete { width: 600px; margin: 0 auto; }
+#search .search-bar { border-radius: 5px; padding: 5px 5px 6px 5px; width: 100%;}
+#search .search-bar:focus { outline: none; }

views/commands.haml

@@ -1,20 +1,4 @@
 %section#commands
-  %nav
-    .container
-      %label
-        %span Filter by group:
-
-        %select.command-reference-filter
-          %option(value="") All
-
-          - Reference::GROUPS.sort_by(&:last).each do |name, description|
-            %option(value="#{name}")= description
-
-      or
-
-      %label
-        %span search for:
-        %input.js-command-reference-search(placeholder="e.g. #{@commands.sample.name}" autofocus)
 
   .container
     %ul

views/layout.haml

@@ -5,6 +5,7 @@
     %meta(charset="utf-8")
     %title= [@title, "Redis"].compact.join(" – ")
     %link(rel="stylesheet" href="/styles.css")
+    %link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css")
     %link(rel="shortcut icon" href="/images/favicon.png")
     %link(rel="search" type="application/opensearchdescription+xml" title="Look up a Redis command" href="/opensearch.xml")
     %meta(name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0")
@@ -69,6 +70,10 @@
         %aside.wide-callout
           .container
             <a href="https://redislabs.com/community/redis-day-london-2018/">Join us at Redis Day London</a>: a day of Redis user stories and development updates. <a href="https://www.eventbrite.com/e/redis-day-london-tickets-47448914982">REGISTER FOR FREE</a>.
+
+      %section#search
+        .container
+          %input.search-bar(placeholder="Search for any command or topic")
 
       = content
 
@@ -86,3 +91,12 @@
 
     %script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js")
     %script(src="/app.js?#{File.mtime("public/app.js").to_i}")
+    %script(src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js")
+    :javascript
+      docsearch({
+        appId: 'SQLJNQ4TNW',
+        apiKey: '102a9f557f6dbbf7f3cc6755f8f4b7b1',
+        indexName: 'redis',
+        inputSelector: '#search .search-bar',
+        debug: true
+      });