diff --git a/config.toml b/config.toml index 152b97f73bf..7f02944b155 100644 --- a/config.toml +++ b/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" diff --git a/gulpfile.babel.js b/gulpfile.babel.js index ce333e9fff1..0792e5ba369 100644 --- a/gulpfile.babel.js +++ b/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(); diff --git a/package.json b/package.json index 0cb2c49bb74..950649392bd 100644 --- a/package.json +++ b/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" diff --git a/src/js/app.js b/src/js/app.js index 6bc24dcd01d..8626fc5fe9c 100644 --- a/src/js/app.js +++ b/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: '

No results

', + item: `

{{{_highlightResult.title.value}}}

{{{_highlightResult.summary.value}}}
` + }, + escapeHits: true, + }) + ); + + // search.addWidget( + // instantsearch.widgets.hits({ + // container: '#hits', + // templates: { + // empty: '

No results

', + // allItems: ` + // + // {{#hits}} + // + // {{/hits}} + // + //

{{title}}

{{summary}}
`, + // } + // }) + // ); + + 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(); +}); diff --git a/src/sass/app.scss b/src/sass/app.scss index 48829fde1c3..a75f2eff1a6 100644 --- a/src/sass/app.scss +++ b/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