Algolia DocSearch Integration

docs/.vuepress/config.js

@@ -28,6 +28,12 @@ module.exports = {
     repo: 'vuejs/vuepress',
     editLinks: true,
     docsDir: 'docs',
+    algolia: {
+      appId: 'BH4D9OD16A',
+      apiKey: '85cc3221c9f23bfbaa4e3913dd7625ea',
+      indexName: 'vuejs',
+      algoliaOptions: { facetFilters: ["version:v2"] }
+    },
     locales: {
       '/': {
         label: 'English',

lib/default-theme/AlgoliaSearchBox.vue

@@ -0,0 +1,137 @@
+<template>
+  <form id="search-form" class="algolia-search-wrapper search-box">
+    <input id="algolia-search-input" class="search-query st-default-search-input">
+  </form>
+</template>
+
+<script>
+export default {
+  props: ['options'],
+  mounted () {
+    Promise.all([
+      import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
+      import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
+    ]).then(([docsearch]) => {
+      docsearch = docsearch.default
+      docsearch(Object.assign(this.options, {
+        inputSelector: '#algolia-search-input',
+        autocompleteOptions: {
+          openOnFocus: true
+        }
+      }))
+    })
+  }
+}
+</script>
+
+<style lang="stylus">
+@import './styles/config.styl'
+
+// TODO align with styles/config.styl
+$border = #ddd
+$dark   = #2c3e50
+$medium = #34495e
+$light  = #7f8c8d
+$green  = #42b983
+$border = #dddddd
+$codebg = #f8f8f8
+$red = #ff6666
+$info = #1C90F3
+
+.algolia-search-wrapper
+  & > span
+    vertical-align middle
+  .algolia-autocomplete
+    line-height normal
+    & > input:first-child
+      display none
+    .ds-dropdown-menu
+      background-color #fff
+      border 1px solid #999
+      border-radius 4px
+      font-size 16px
+      margin 6px 0 0
+      padding 4px
+      text-align left
+      &:before
+        border-color #999
+      [class*=ds-dataset-]
+        border none
+        padding 0
+      .ds-suggestions
+        margin-top 0
+      .ds-suggestion
+        border-bottom 1px solid $border
+    .algolia-docsearch-suggestion--highlight
+      color #2c815b
+    .algolia-docsearch-suggestion
+      border-color $border
+      padding 0
+      .algolia-docsearch-suggestion--category-header
+        padding 5px 10px
+        margin-top 0
+        background $green
+        color #fff
+        font-weight 600
+        .algolia-docsearch-suggestion--highlight
+          background rgba(255, 255, 255, 0.6)
+      .algolia-docsearch-suggestion--wrapper
+        padding 0
+      .algolia-docsearch-suggestion--title
+        font-weight 600
+        margin-bottom 0
+        color $dark
+      .algolia-docsearch-suggestion--subcategory-column
+        vertical-align top
+        padding 5px 7px 5px 5px
+        border-color $border
+        background #f1f3f5
+        &:after
+          display none
+      .algolia-docsearch-suggestion--subcategory-column-text
+        color #555
+    .algolia-docsearch-footer
+      border-color $border
+    .ds-cursor .algolia-docsearch-suggestion--content
+      background-color #e7edf3!important
+      color $dark
+
+@media (min-width: $MQMobile)
+  .algolia-search-wrapper
+    .algolia-autocomplete
+      .algolia-docsearch-suggestion
+        .algolia-docsearch-suggestion--subcategory-column
+          float none
+          width 150px
+          min-width 150px
+          display table-cell
+        .algolia-docsearch-suggestion--content
+          float none
+          display table-cell
+          width 100%
+          vertical-align top
+        .ds-dropdown-menu
+          min-width 515px!important
+
+@media (max-width: $MQMobile)
+  .algolia-search-wrapper
+    .algolia-docsearch-suggestion--wrapper
+      padding 5px 7px 5px 5px!important
+    .algolia-docsearch-suggestion--subcategory-column
+      padding 0!important
+      background white!important
+    .algolia-docsearch-suggestion--subcategory-column-text:after
+      content " > "
+      font-size 10px
+      line-height 14.4px
+      display inline-block
+      width 5px
+      margin -3px 3px 0
+      vertical-align middle
+
+@media (max-width: $MQMobileNarrow)
+  .ds-dropdown-menu
+    min-width 320px!important
+    max-width 320px!important
+
+</style>

lib/default-theme/Navbar.vue

@@ -12,19 +12,30 @@
       </span>
     </router-link>
     <div class="links">
-      <SearchBox v-if="$site.themeConfig.search !== false"/>
+      <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="$site.themeConfig.algolia"/>
+      <SearchBox v-if="isSearch"/>
       <NavLinks class="can-hide"/>
     </div>
   </header>
 </template>
 
 <script>
 import SidebarButton from './SidebarButton.vue'
+import AlgoliaSearchBox from './AlgoliaSearchBox.vue'
 import SearchBox from './SearchBox.vue'
 import NavLinks from './NavLinks.vue'
 
 export default {
-  components: { SidebarButton, NavLinks, SearchBox }
+  components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
+  computed: {
+    isAlgoliaSearch () {
+      const { algolia } = this.$site.themeConfig
+      return algolia && algolia.appId && algolia.apiKey && algolia.indexName
+    },
+    isSearch() {
+      return !this.isAlgoliaSearch && this.$site.themeConfig.search !== false
+    }
+  }
 }
 </script>
 

package.json

@@ -51,6 +51,7 @@
     "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.28.11",
     "diacritics": "^1.3.0",
+    "docsearch.js": "^2.5.2",
     "es6-promise": "^4.2.4",
     "escape-html": "^1.0.3",
     "file-loader": "^1.1.11",