docs(search): use Algolia for search (sequelize#7864)

guyguyon · Jun 29, 2017 · 5c4ce94 · 5c4ce94
1 parent ca683c0
commit 5c4ce94
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 22 deletions.
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -1,5 +1,38 @@
 @import url(https://fonts.googleapis.com/css?family=Titillium+Web);
 
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header,
+.algolia-autocomplete .algolia-docsearch-suggestion--title,
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column,
+#docs-search-input {
+  font-size: 16px !important;
+  line-height: normal;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--wrapper {
+  padding: 0 !important;
+}
+
+.docs-search-container {
+  float: right;
+  margin-right: 30px;
+}
+
+#docs-search-input {
+  border: none;
+  background: transparent;
+  padding: 10px;
+}
+
+#docs-search-input, .docs-search-container {
+  height: 40px;
+  width: 300px;
+}
+
+/* ESDoc search */
+.search-box {
+  display: none;
+}
+
 div.logo img {
   width: 200px;
   height: 200px;
@@ -60,25 +93,6 @@ a[href^="file/lib/"] {
   display: none;
 }
 
-.search-box {
-  display: none;
-}
-
-.search-container {
-  position: absolute;
-  width: 500px;
-  top: 0;
-  right: 50px;
-  padding-right: 8px;
-  padding-bottom: 10px;
-  line-height: normal;
-  font-size: 12px;
-}
-
-.search-container .gsc-control-cse {
-  padding: 2px 0 0 0 !important;
-}
-
 .manual-color:after  {
   content: '' !important;
 }

diff --git a/docs/plugins/esdoc-sequelize.js b/docs/plugins/esdoc-sequelize.js
@@ -13,9 +13,6 @@ exports.onHandleHTML = function(ev) {
 
   const $header = $('header');
   $header.prepend('<a href="/"><img src="manual/asset/logo-small.png" class="header-logo" /></a>');
-  $header.append('<div class="search-container"><div class="gcse-search"></div></div>');
-  $('head').append('<script type="text/javascript" async=true src="https://cse.google.com/cse.js?cx=015434599481993553871:zku_jjbxubw" />');
-
   $('.repo-url-github').after('<a href="http://sequelize-slack.herokuapp.com/" class="slack-link"><img class="slack-logo" src="manual/asset/slack.svg"/>Join us on Slack</a>');
 
   // remove unnecessary scripts
@@ -24,5 +21,25 @@ exports.onHandleHTML = function(ev) {
     $(`script[src="${script}"]`).remove();
   }
 
+  // Algolia search
+  if (process.env.ALGOLIA_API_KEY) {
+    $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />');
+    $header.append('<div class="docs-search-container"><input type="search" id="docs-search-input" placeholder="Search..."></div>');
+    $('body').append(`
+      <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
+      <script type="text/javascript">
+        docsearch({
+          apiKey: '${process.env.ALGOLIA_API_KEY}',
+          indexName: 'sequelizejs',
+          inputSelector: '#docs-search-input',
+          debug: false // Set debug to true if you want to inspect the dropdown
+        });
+        document.getElementById('docs-search-input').focus();
+      </script>
+    `);
+  } else {
+    console.log('Set ALGOLIA_API_KEY environment variable to enable Algolia search field');
+  }
+
   ev.data.html = $.html();
 };