feat: use docSearch V3 properly

gulp.d/tasks/build.js

 'use strict'
 
-const autoprefixer = require('autoprefixer')
 const browserify = require('browserify')
-const buffer = require('vinyl-buffer')
 const concat = require('gulp-concat')
 const fs = require('fs-extra')
 const imagemin = require('gulp-imagemin')
@@ -16,9 +14,15 @@ const ospath = require('path')
 const path = ospath.posix
 const postcssUrl = require('postcss-url')
 
+const config = {
+  libsJs: ['node_modules/@docsearch/js/dist/umd/index.js'],
+  libsCss: ['node_modules/@docsearch/css/dist/style.css'],
+}
+
 module.exports = (src, dest, preview) => () => {
   const opts = { base: src, cwd: src }
   const sourcemaps = preview || process.env.SOURCEMAPS === 'true'
+  const autoprefixer = require('autoprefixer')
   const postcssPlugins = [require('@csstools/postcss-sass'),
     autoprefixer(),
     postcssUrl({
@@ -44,6 +48,25 @@ module.exports = (src, dest, preview) => () => {
       },
     })]
 
+  /**
+   * Aggregate js lib
+   */
+  function libJs () {
+    const { src } = require('gulp')
+    return src(config.libsJs)
+      .pipe(concat('js/vendor/libs.js'))
+  }
+
+  /**
+   * Aggregate css files
+   */
+  function libCss () {
+    const { src } = require('gulp')
+    return src(config.libsCss)
+      .pipe(concat('stylesheets/vendor/libs.css'))
+  }
+
+  const buffer = require('vinyl-buffer')
   function scss () {
     return vfs
       .src('stylesheets/site.scss', { ...opts, sourcemaps })
@@ -54,6 +77,8 @@ module.exports = (src, dest, preview) => () => {
   }
 
   return merge(
+    libJs(),
+    libCss(),
     scss(),
     vfs
       .src('js/+([0-9])-*.js', { ...opts, sourcemaps })

package.json

@@ -62,5 +62,8 @@
     "typeface-roboto-mono": "1.1.13",
     "vinyl-buffer": "~1.0",
     "vinyl-fs": "~3.0.3"
+  },
+  "dependencies": {
+    "@docsearch/js": "^3.0.0-alpha.50"
   }
 }

src/partials/footer-scripts.hbs

 <script async src="{{{uiRootPath}}}/js/vendor/asciinema-player.min.js"></script>
 <script src="{{{uiRootPath}}}/js/vendor/highlight.min.js"></script>
+<script src="{{{uiRootPath}}}/js/vendor/libs.js"></script>
 {{!-- DocSearch only available if the search bar is displayed --}}
-{{#unless site.keys.nonProduction}}
-  {{#unless page.attributes.hide-search-bar }}
-    <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.js" integrity="sha256-qybEsgf0PGiQS22AmoozPs09oRnSC7Gu7eBu4fbS2Ac=" crossorigin="anonymous"></script>
-  {{/unless}}
-{{/unless}}
+<!--{{#unless site.keys.nonProduction}}-->
+<!--  {{#unless page.attributes.hide-search-bar }}-->
+<!--    <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.js" integrity="sha256-qybEsgf0PGiQS22AmoozPs09oRnSC7Gu7eBu4fbS2Ac=" crossorigin="anonymous"></script>-->
+<!--  {{/unless}}-->
+<!--{{/unless}}-->
 <script>hljs.initHighlightingOnLoad();</script>
 <script src="{{{uiRootPath}}}/js/site.js"></script>
 
@@ -13,17 +14,24 @@
 {{#unless site.keys.nonProduction}}
   {{#unless page.attributes.hide-search-bar }}
 <script>
-  var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@1.7.1";
-
-  !function (e, a, t, n, s, i, c) {
-    e.AlgoliaAnalyticsObject = s, e[s] = e[s] || function () {
-      (e[s].queue = e[s].queue || []).push(arguments)
-    }, i = a.createElement(t), c = a.getElementsByTagName(t)[0],
-      i.async = 1, i.src = n, c.parentNode.insertBefore(i, c)
-  }(window, document, "script", ALGOLIA_INSIGHTS_SRC, "aa");
+  // var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@1.7.1";
+  //
+  // !function (e, a, t, n, s, i, c) {
+  //   e.AlgoliaAnalyticsObject = s, e[s] = e[s] || function () {
+  //     (e[s].queue = e[s].queue || []).push(arguments)
+  //   }, i = a.createElement(t), c = a.getElementsByTagName(t)[0],
+  //     i.async = 1, i.src = n, c.parentNode.insertBefore(i, c)
+  // }(window, document, "script", ALGOLIA_INSIGHTS_SRC, "aa");
 </script>
 
 <script type="text/javascript">
+  docsearch({
+    container: '#docsearch',
+    appId: 'LWD25NX3CD',
+    apiKey: '6408f799f329e3a010e6a5ac397210d8',
+    indexName: 'bonitasoft',
+  });
+  /*
   docsearch({
     apiKey: '16267f96d135c47df8454efd5b448c9a', // Read only API Key
     indexName: 'bonitasoft',
@@ -50,6 +58,7 @@
     appId: 'BH4D9OD16A',
     apiKey: '16267f96d135c47df8454efd5b448c9a',
   });
+  */
 </script>
   {{/unless}}
 {{/unless}}

src/partials/head-styles.hbs

 {{!-- DocSearch only available if the search bar is displayed --}}
 {{#unless site.keys.nonProduction}}
   {{#unless page.attributes.hide-search-bar }}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.css" integrity="sha256-tY3FCmL2d8yoJBOVyC2aOxdixg8sLT6CHlDWX/VUJaY=" crossorigin="anonymous">
+<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.css" integrity="sha256-tY3FCmL2d8yoJBOVyC2aOxdixg8sLT6CHlDWX/VUJaY=" crossorigin="anonymous">-->
+
   {{/unless}}
 {{/unless}}
 
 <link rel="stylesheet" href="{{{uiRootPath}}}/stylesheets/vendor/asciinema-player.css">
+<link rel="stylesheet" href="{{{uiRootPath}}}/stylesheets/vendor/libs.css">
 <link rel="stylesheet" href="{{{uiRootPath}}}/stylesheets/site.css">
 <link id="highlight-style-lnk" rel="stylesheet" href="{{{uiRootPath}}}/stylesheets/vendor/highlight-light.css">

src/partials/header-content.hbs

@@ -47,8 +47,9 @@
         {{#unless page.attributes.hide-search-bar }}
         <div class="navbar-item search-item hide-for-print">
           {{!-- Algolia search bar --}}
-          <input type="text" placeholder="Search Docs" class="search-bar query ds-input" id="search-query">
-          <i class="search-icon" aria-hidden="true"></i>
+<!--          <input type="text" placeholder="Search Docs" class="search-bar query ds-input" id="search-query">-->
+<!--          <i class="search-icon" aria-hidden="true"></i>-->
+          <div id="docsearch"></div>
         </div>
         {{/unless}}
       {{/unless}}