feat: adding in search

remy · remy · commit 735c334e09c0 · 2018-01-31T17:07:00.000Z
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -7,15 +7,16 @@
     <meta name="description" content="JS Bin help documentation, tips, tricks, features and blog">
     <link rel="icon" href="/images/favicon.png">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:700,400" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
     <link rel="stylesheet" href="/css/help.css">{{ "<!--[if lt IE 9]>" | safeHTML }}
-    <script src="/js/html5shiv.min.js"></script>
-    {{ "<![endif]-->" | safeHTML }}
-  </head>
-  <body data-url="{{ $.GitInfo }}" id="{{ $.URL | replaceRE `/(.*)/` "$1" | replaceRE `/` "-" }}-page">
-    <div id="container">
-      <header>
-        <div class="inner"><a id="back" href="/"><span class="morewords">Back to JS Bin</span></a>
-          <nav>
+      <script src="/js/html5shiv.min.js"></script>
+      {{ "<![endif]-->" | safeHTML }}
+    </head>
+    <body data-url="{{ $.GitInfo }}" id="{{ $.URL | replaceRE `/(.*)/` "$1" | replaceRE `/` "-" }}-page">
+      <div id="container">
+        <header>
+          <div class="inner"><a id="back" href="/"><span class="morewords">Back to JS Bin</span></a>
+            <nav>
             <input id="search" placeholder="Search..." spellcheck="false" autocapitalize="off" autocorrect="off">
             <ol id="results" hidden></ol>
             <a {{if eq $.Section "blog" }}class="selected"{{ end }} href="/blog">Blog</a>
@@ -59,9 +60,23 @@
       s.parentNode.insertBefore(wf, s);
     })();
   </script>
-  <script src="/js/min.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script>
+    docsearch({
+      appId: 'X7U969ZCKA',
+      apiKey: '43c4a4be12146a98c44795c6078dd9d6', // use a SEARCH-ONLY api key here
+      indexName: 'learn-jsbin',
+      inputSelector: '#search',
+      handleSelected: function (input, event, suggestion) {
+        console.log(input, event, suggestion);
+  },
+
+      debug: false // set to `true` if you want to inspect the dropdown menu's CSS
+    });
+  </script>
+
   <script src="/js/permalink.js"></script>
-  <script src="/js/search.js"></script>
+  <script type="foo" src="/js/search.js"></script>
   <script src="/js/xhr.js"></script>
   <script src="/js/keyboard.js"></script>
   <script src="/js/back-button.js"></script>
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,18 +1,3 @@
 {{ define "main" -}}
-<div class="posts">
-{{ range .Data.Pages -}}
-<div class="post">
-  <h1 class="post-title">
-    <a href="{{ .Permalink }}">{{ .Title }}</a>
-  </h1>
-  <span class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
-  {{ .Summary }}
-  {{ if .Truncated }}
-  <div class="read-more-link">
-    <a href="{{ .RelPermalink }}">Read More…</a>
-  </div>
-  {{ end }}
-</div>
+<div class="ignore">Ignore this landing page</div>
 {{- end }}
-</div>
-{{- end }}
diff --git a/static/css/help.css b/static/css/help.css
@@ -321,10 +321,14 @@ hr {
 
 header nav {
   display: inline;
-  padding: 4px 0 0px 0;
+  /* padding: 4px 0 0px 0; */
   position: relative;
 }
 
+#search, .algolia-autocomplete {
+  vertical-align: middle;
+}
+
 header nav input {
   font-size: 14px;
   font-family: system, "helvetica neue", sans-serif;
@@ -338,6 +342,7 @@ header nav a {
   position: relative;
   padding: 10px;
   margin-right: 10px;
+  display: inline-block;
   /* padding-bottom: 0; */
   line-height: 1.2em;
 }
diff --git a/static/js/permalink.js b/static/js/permalink.js
@@ -1,11 +1,10 @@
-function permalink(){
+function permalink() {
   'use strict';
-  /*global $*/
   var anchor = document.createElement('a');
   anchor.className = 'anchor';
   anchor.innerHTML = '<span class="permalink"></span>';
 
-  document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(function (el) {
+  document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(function(el) {
     if (el.id) {
       var clone = anchor.cloneNode(true);
       clone.href = '#' + el.id;
@@ -16,4 +15,4 @@ function permalink(){
 
 if (document.querySelector && Function.prototype.bind) {
   permalink();
-}
+}
