Migrate to Algolia

config.toml

@@ -18,19 +18,19 @@ pygmentsCodeFencesGuessSyntax=true
   ### Edit content repo (set to automatically enter "edit" mode; this is good for "improve this page" links)
   ghdocsrepo = "https://github.com/rancher/docs"
 
-[outputFormats.Search]
-baseName = "search"
+[outputFormats.Algolia]
+baseName = "algolia"
 isPlaintext = true
 mediaType = "application/json"
 notAlternative = true
 
 [outputs]
-home = ["HTML", "RSS", "Search"]
-page = ["HTML", "Search"]
+home = ["HTML", "RSS", "Algolia"]
+# page = ["HTML", "Algolia"]
 
-[params.search]
-vars = ["title","summary","date","publishdate","expirydate","permalink"]
-params = ["categories","tags"]
+[params.algolia]
+vars = ["title", "summary", "date", "publishdate", "expirydate", "permalink"]
+params = ["categories", "tags"]
 
 [[menu.main]]
 identifier = "what-is-rancher"

gulpfile.babel.js

@@ -13,13 +13,10 @@ import buffer from 'vinyl-buffer';
 import babelify from 'babelify';
 import watch from 'gulp-watch';
 
-const $ = gulpLoadPlugins();
-const browserSync = require('browser-sync').create();
+const $            = gulpLoadPlugins();
+const browserSync  = require('browser-sync').create();
 const isProduction = process.env.NODE_ENV === 'production';
-
-require('hugo-search-index/gulp')(gulp);
-
-const onError = (err) => {
+const onError      = (err) => {
   console.log(err);
 }
 
@@ -33,20 +30,30 @@ gulp.task('dev', ['build-dev'], () => {
   gulp.start('init-watch');
 });
 
+gulp.task('dev:search', ['build-dev:search'], () => {
+  gulp.start('init-watch');
+});
+
 gulp.task('build', (cb) => {
-  runSequence('pub-delete', 'sass', 'build:vendor', 'build:app', 'fonts', 'img', 'hugo' , 'hugo-search-index', () => {
+  runSequence('pub-delete', 'sass', 'build:vendor', 'build:app', 'fonts', 'img', 'hugo',  () => {
     cb();
   });
 });
 
 gulp.task('build-staging', (cb) => {
-  runSequence('pub-delete', 'sass', 'build:vendor', 'build:app', 'fonts', 'img', 'hugo-staging' , 'hugo-search-index', () => {
+  runSequence('pub-delete', 'sass', 'build:vendor', 'build:app', 'fonts', 'img', 'hugo-staging', () => {
     cb();
   });
 });
 
 gulp.task('build-dev', (cb) => {
-  runSequence('pub-delete', 'sass', 'build:vendor', 'build:app', 'fonts', 'img', 'hugo-dev' , /* 'hugo-search-index', */ () => {
+  runSequence('pub-delete', 'sass', 'build:vendor', 'build:app', 'fonts', 'img', 'hugo-dev', () => {
+    cb();
+  });
+});
+
+gulp.task('build-dev:search', (cb) => {
+  runSequence('pub-delete', 'sass', 'build:vendor', 'build:app', 'fonts', 'img', 'hugo-dev',  () => {
     cb();
   });
 });
@@ -83,7 +90,17 @@ gulp.task('init-watch', () => {
   watch([ 'src/sass/**/*.scss', 'node_modules/rancher-website-theme/**/*.scss' ], () => runSequence('sass', 'hugo-dev'));
   watch([ 'src/js/**/*.js', 'node_modules/rancher-website-theme/static/js/base.js' ], () => runSequence('build:app', 'hugo-dev'));
   watch('src/img/**/*', () => runSequence('img', 'hugo-dev'));
-  watch(['archetypes/**/*', 'data/**/*', 'content/**/*', 'layouts/**/*', 'node_modules/rancher-website-theme/layouts/**/*', 'node_modules/rancher-website-theme/archetypes/**/*', 'node_modules/rancher-website-theme/data/**/*', 'node_modules/rancher-website-theme/content/**/*', 'themes/**/*', 'config.toml'], () => gulp.start('hugo-dev'));
+  watch([
+    'archetypes/**/*',
+    'data/**/*',
+    'content/**/*',
+    'layouts/**/*',
+    'node_modules/rancher-website-theme/layouts/**/*',
+    'node_modules/rancher-website-theme/archetypes/**/*',
+    'node_modules/rancher-website-theme/data/**/*',
+    'node_modules/rancher-website-theme/content/**/*',
+    'themes/**/*',
+    'config.toml'], () => gulp.start('hugo-dev'));
 });
 
 
@@ -103,7 +120,7 @@ gulp.task('sass', () => {
     .pipe(gulp.dest('static/css'));
 });
 
-const vendors = [/* 'zoom.ts',  */'ml-stack-nav', 'lory.js', 'tingle.js', 'moment', 'jquery'];
+const vendors = [/* 'zoom.ts', */'instantsearch.js', 'ml-stack-nav', 'lory.js', 'tingle.js', 'moment', 'jquery'];
 
 gulp.task('build:vendor', () => {
   const b = browserify();

package.json

@@ -7,9 +7,11 @@
     "dev": "gulp dev",
     "server": "gulp server",
     "server:with-drafts": "gulp server:with-drafts",
-    "cms:delete": "gulp cms-delete"
+    "cms:delete": "gulp cms-delete",
+    "algolia": "atomic-algolia"
   },
   "dependencies": {
+    "atomic-algolia": "^0.3.15",
     "babel-core": "^6.25.0",
     "babel-preset-es2015": "^6.24.1",
     "babelify": "^8.0.0",
@@ -29,6 +31,7 @@
     "gulp-size": "^3.0.0",
     "gulp-uglify": "^3.0.0",
     "gulp-watch": "^5.0.0",
+    "instantsearch.js": "^2.8.0",
     "jquery": "^3.3.1",
     "moment": "^2.20.1",
     "node-sass-tilde-importer": "^1.0.0",
@@ -44,7 +47,6 @@
   },
   "devDependencies": {
     "gulp": "^3.9.1",
-    "hugo-search-index": "^0.4.1",
     "lory.js": "^2.4.1",
     "ml-stack-nav": "^1.1.2",
     "tingle.js": "^0.13.2"

src/js/app.js

@@ -1,2 +1,83 @@
+import $ from 'jquery';
+import instantsearch from 'instantsearch.js';
+
 // This is for any custom JS that may need to be added to individual apps.
 // Main JS is located in Rancher Website Theme
+const bootstrapDocsSearch = function() {
+  const search = instantsearch({
+    appId: '30NEY6C9UY',
+    apiKey: 'b7f43c16886fec97b87981e9e62ef1a5',
+    indexName: 'dev_docs',
+    routing: true,
+  });
+
+  search.addWidget(
+    instantsearch.widgets.searchBox({
+      container: '#search-box',
+      placeholder: 'Search Docs...',
+      magnifier: false,
+      reset: true,
+    })
+  );
+
+  search.addWidget(
+    instantsearch.widgets.infiniteHits({
+      container: '#hits',
+      templates: {
+        empty: '<h3>No results</h3>',
+        item: `<h3><a href="{{permalink}}">{{{_highlightResult.title.value}}}</a></h3><div class="body">{{{_highlightResult.summary.value}}}</div>`
+      },
+      escapeHits: true,
+    })
+  );
+
+  // search.addWidget(
+  //   instantsearch.widgets.hits({
+  //     container: '#hits',
+  //     templates: {
+  //       empty: '<h3>No results</h3>',
+  //       allItems: `<table class="search-results">
+  //                   <tbody>
+  //                     {{#hits}}
+  //                       <tr><td><h3><a href="{{permalink}}">{{title}}</a></h3><div>{{summary}}</div></td></tr>
+  //                     {{/hits}}
+  //                   </tbody>
+  //                  </table>`,
+  //     }
+  //   })
+  // );
+
+  search.start();
+
+  $(window).on('keyup', e => {
+    if (e.which === 27 && $('.container-search').hasClass('open')) {
+      $('.container-search').toggleClass('open');
+      $('.overlay-search').toggleClass('open');
+    }
+  });
+
+  $('header').on('click', '#button-search', e => {
+
+    let container = $('.container-search');
+    let overlay   = $('.overlay-search');
+    // let header    = $(e.currentTarget).closest('header');
+
+    container.toggleClass('open');
+    overlay.toggleClass('open');
+
+    if (container.hasClass('open')) {
+      $('input#search').focus();
+    }
+
+    overlay.css({top: 120});
+  });
+
+}
+
+const bootstrapDocsJS = function() {
+  bootstrapDocsSearch();
+}
+
+$(document).ready(() => {
+  bootstrapDocsJS();
+});

src/sass/app.scss

@@ -3,6 +3,8 @@
 // 7. node
 @import
 '~tingle.js/src/tingle',
+'~instantsearch.js/dist/instantsearch.nomin',
+'~instantsearch.js/dist/instantsearch-theme-algolia.nomin',
 '~ml-stack-nav/src/ml-stack-nav';
 
 // 1. Configuration and helpers