From 5bb4730f7f48153ae006d7878431d0b58b0fffee Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva@users.noreply.github.com>
Date: Fri, 27 Nov 2020 17:21:10 +0100
Subject: [PATCH] feat: add Algolia DocSearch (#40) (#153)

close #40
---
 docs/.vitepress/config.js                     |   6 +
 package.json                                  |   3 +
 src/client/theme-default/Layout.vue           |  15 +-
 .../components/AlgoliaSearchBox.vue           | 148 ++++++++++++++++
 src/client/theme-default/styles/vars.css      |   7 +-
 yarn.lock                                     | 162 ++++++++++++++++++
 6 files changed, 337 insertions(+), 4 deletions(-)
 create mode 100644 src/client/theme-default/components/AlgoliaSearchBox.vue

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 41c30bedb5ce..970cec81a83f 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -17,6 +17,12 @@ module.exports = {
       placement: 'vuejsorg'
     },
 
+    algolia: {
+      apiKey: 'c57105e511faa5558547599f120ceeba',
+      indexName: 'vitepress'
+      // algoliaOptions: { facetFilters: ['tags:guide,api'] }
+    },
+
     nav: [
       { text: 'Guide', link: '/' },
       { text: 'Config Reference', link: '/config/basics' },
diff --git a/package.json b/package.json
index 5dfb64057152..178883519d39 100644
--- a/package.json
+++ b/package.json
@@ -62,8 +62,11 @@
     "url": "https://github.com/vuejs/vitepress/issues"
   },
   "dependencies": {
+    "@docsearch/css": "^1.0.0-alpha.28",
+    "@docsearch/js": "^1.0.0-alpha.28",
     "@vue/compiler-sfc": "^3.0.3",
     "@vue/server-renderer": "^3.0.3",
+    "algoliasearch": "^4.8.1",
     "chalk": "^4.1.0",
     "debug": "^4.1.1",
     "diacritics": "^1.3.0",
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index cd5598b84198..f5a388e0d788 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -3,7 +3,12 @@
     <header class="navbar" v-if="showNavbar">
       <NavBar>
         <template #search>
-          <slot name="navbar-search" />
+          <slot name="navbar-search">
+            <AlgoliaSearchBox
+              v-if="$site.themeConfig.algolia"
+              :options="$site.themeConfig.algolia"
+            />
+          </slot>
         </template>
       </NavBar>
       <ToggleSideBarButton @toggle="toggleSidebar" />
@@ -69,6 +74,7 @@ import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
 import { useRoute, useSiteData, useSiteDataByRoute } from 'vitepress'
+import AlgoliaSearchBox from './components/AlgoliaSearchBox.vue'
 import CarbonAds from './components/CarbonAds.vue'
 import BuySellAds from './components/BuySellAds.vue'
 
@@ -125,3 +131,10 @@ watch(route, hideSidebar)
 // TODO: route only changes when the pathname changes
 // listening to hashchange does nothing because it's prevented in router
 </script>
+
+<style>
+/* remove margin added by user agent */
+.DocSearch-SearchBar form {
+  margin-block-end: 0;
+}
+</style>
diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue
new file mode 100644
index 000000000000..f63cd450f95a
--- /dev/null
+++ b/src/client/theme-default/components/AlgoliaSearchBox.vue
@@ -0,0 +1,148 @@
+<template>
+  <div id="docsearch"></div>
+</template>
+
+<script setup lang="ts">
+import type { AlgoliaSearchOptions } from 'algoliasearch'
+import { useRoute, useRouter } from 'vitepress'
+import { defineProps, getCurrentInstance, onMounted, watch } from 'vue'
+
+function isSpecialClick(event: MouseEvent) {
+  return (
+    event.button === 1 ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey
+  )
+}
+
+function getRelativePath(absoluteUrl: string) {
+  const { pathname, hash } = new URL(absoluteUrl)
+  // const url = pathname.replace(this.$site.base, '/') + hash
+  const url = pathname + hash
+
+  return url
+}
+
+const { options } = defineProps<{
+  // Using a regular import breaks at runtime
+  options: AlgoliaSearchOptions
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const vm = getCurrentInstance()
+
+watch(
+  () => options,
+  (newValue) => {
+    update(newValue)
+  }
+)
+
+function update(options: any) {
+  if (vm && vm.vnode.el) {
+    vm.vnode.el.innerHTML = '<div id="docsearch"></div>'
+    initialize(options)
+  }
+}
+
+function initialize(userOptions: any) {
+  Promise.all([
+    import('@docsearch/js'),
+    import('@docsearch/css')
+    // import(/* webpackChunkName: "docsearch" */ '@docsearch/js'),
+    // Promise.resolve(docsearch),
+    // import(/* webpackChunkName: "docsearch" */ '@docsearch/css'),
+  ]).then(([docsearch]) => {
+    docsearch = docsearch.default
+
+    docsearch(
+      Object.assign({}, userOptions, {
+        container: '#docsearch',
+        // #697 Make DocSearch work well in i18n mode.
+        searchParameters: Object.assign(
+          {},
+          // lang && {
+          //   facetFilters: [`lang:${lang}`].concat(
+          //     userOptions.facetFilters || []
+          //   )
+          // },
+          userOptions.searchParameters
+        ),
+        navigator: {
+          navigate: ({ suggestionUrl }: { suggestionUrl: string }) => {
+            const { pathname: hitPathname } = new URL(
+              window.location.origin + suggestionUrl
+            )
+
+            // Vue Router doesn't handle same-page navigation so we use
+            // the native browser location API for anchor navigation.
+            if (route.path === hitPathname) {
+              window.location.assign(window.location.origin + suggestionUrl)
+            } else {
+              router.go(suggestionUrl)
+            }
+          }
+        },
+        transformItems: (items) => {
+          return items.map((item) => {
+            return Object.assign({}, item, {
+              url: getRelativePath(item.url)
+            })
+          })
+        },
+        hitComponent: ({ hit, children }) => {
+          const relativeHit = hit.url.startsWith('http')
+            ? getRelativePath(hit.url as string)
+            : hit.url
+
+          return {
+            type: 'a',
+            ref: undefined,
+            constructor: undefined,
+            key: undefined,
+            props: {
+              href: hit.url,
+              onClick: (event: MouseEvent) => {
+                if (isSpecialClick(event)) {
+                  return
+                }
+
+                // We rely on the native link scrolling when user is
+                // already on the right anchor because Vue Router doesn't
+                // support duplicated history entries.
+                if (route.path === relativeHit) {
+                  return
+                }
+
+                // If the hits goes to another page, we prevent the native link behavior
+                // to leverage the Vue Router loading feature.
+                if (route.path !== relativeHit) {
+                  event.preventDefault()
+                }
+
+                router.go(relativeHit)
+              },
+              children
+            }
+          }
+        }
+      })
+    )
+  })
+}
+
+onMounted(() => {
+  initialize(options)
+})
+</script>
+
+<style>
+.DocSearch {
+  --docsearch-primary-color: #42b983;
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+}
+</style>
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 4957c052e264..677ffc83b20f 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -26,11 +26,12 @@
   --font-family-mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 
   /**
-   * Z Indexes
+   * Z Indexes Algolia SearchBox has a z-index of 200, so make sure not to go
+   * above that value.
    * --------------------------------------------------------------------- */
 
-  --z-index-navbar: 1100;
-  --z-index-sidebar: 1000;
+  --z-index-navbar: 10;
+  --z-index-sidebar: 6;
 
   /**
    * Sizes
diff --git a/yarn.lock b/yarn.lock
index 6095946aada7..7d2d9e6a4fb8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,110 @@
 # yarn lockfile v1
 
 
+"@algolia/cache-browser-local-storage@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.8.1.tgz#1c0230f6f174a37bb22549ec502cad2dc6973c35"
+  integrity sha512-qqudBJE2BzpiO11CbWDbxLual75qiP6lEjHW1zlG2P6jO/NkCnVMsOhPgu2eiJx7lTJ3vhkn981g87qZre8KSg==
+  dependencies:
+    "@algolia/cache-common" "4.8.1"
+
+"@algolia/cache-common@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.8.1.tgz#19c76300d0e75550c4dd88fa1d12b06a75cc290f"
+  integrity sha512-5bJ3KX0trQfNXFzEgDx7IHUcLdrjIvs/6g5fxGMRr0eWJj6x1tSmbIJBff4pdQw7oWZvO1kueWrWD1v0dV9b/Q==
+
+"@algolia/cache-in-memory@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.8.1.tgz#c84a72e75cf614dc75c2ccf0a993c382d3153862"
+  integrity sha512-4EEUi+DHsMKfZ38AYovXVS09oLTLSQlssw1PTswJEx7wuKCAzctWSBfB116+b1eAw8mp6EmiTJw8D2qFhr70oQ==
+  dependencies:
+    "@algolia/cache-common" "4.8.1"
+
+"@algolia/client-account@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.8.1.tgz#7c75a5151860a592abfe720610babd0652b5d822"
+  integrity sha512-zfQSb9EYzZrOsUqsekKJYuizpQVLiq1D0B81KC8V0PjhjtQc13UrAJx68XP3fkNBe7V9K6H3dIRPOaK5XVHYOg==
+  dependencies:
+    "@algolia/client-common" "4.8.1"
+    "@algolia/client-search" "4.8.1"
+    "@algolia/transporter" "4.8.1"
+
+"@algolia/client-analytics@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.8.1.tgz#330c2e001f758fe750820366092ea6f407d6ca9f"
+  integrity sha512-QF6I7MCV9jI8dawi8W/tA/R5EyE+4uKc74tqLTrm6WoUdlwExaTuKgSjsqZtSjRileIDw5TuuJhSGCpgBktDOg==
+  dependencies:
+    "@algolia/client-common" "4.8.1"
+    "@algolia/client-search" "4.8.1"
+    "@algolia/requester-common" "4.8.1"
+    "@algolia/transporter" "4.8.1"
+
+"@algolia/client-common@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.8.1.tgz#a0527d8ac76b41605f3fd6370d9cf1390ea98e10"
+  integrity sha512-iAVBzNUFyUYqX6yyWN3AsxB+sF2g+lWguXmdMaSDAym4XMRAT6cvd3xUKBloHafzm2zWR69XHm/qxUuqJbFnxQ==
+  dependencies:
+    "@algolia/requester-common" "4.8.1"
+    "@algolia/transporter" "4.8.1"
+
+"@algolia/client-recommendation@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/client-recommendation/-/client-recommendation-4.8.1.tgz#ce0577f53eaa0877a40e4f14789714a32d199a50"
+  integrity sha512-WiI86PtQKjU+pmIqlzyJ5skOqfZy6PTc7s6XPgPmVd+XfQxRweXxiejbBG0aQlVcZbN2eetNMmI2vawf1cTDWg==
+  dependencies:
+    "@algolia/client-common" "4.8.1"
+    "@algolia/requester-common" "4.8.1"
+    "@algolia/transporter" "4.8.1"
+
+"@algolia/client-search@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.8.1.tgz#62326038d9d128f8bc87857c514ce7dea91f73b1"
+  integrity sha512-EAeTq5iqpoEPQmi25La1zM5hxvE04hnZzutlUq+5flhrmjwV75z6xNjqNBlDVhPwH545Xg2jcccXQjjNzLHj7A==
+  dependencies:
+    "@algolia/client-common" "4.8.1"
+    "@algolia/requester-common" "4.8.1"
+    "@algolia/transporter" "4.8.1"
+
+"@algolia/logger-common@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.8.1.tgz#46accd128bc5179385c437085a02e0d9c5e721ae"
+  integrity sha512-ENX/9LuroGxLCjPbvuO6yKPoFNkSXFO0LhWHeR/JQY0gdTHhHgj2A2nXT4Qt0PxFGE9XNhXlJ3YYVxtWEG8rww==
+
+"@algolia/logger-console@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.8.1.tgz#a0b42f0cab7a33e5cd09ff8a0e6da1d197c2a7aa"
+  integrity sha512-pFxNb9aOvUsyS+RxHJgMvnTCzt6ewqi0nsICDCCXQ/Lz1VrRFbrfmXcfxD46nQ0W8o8/7esXzaVdjGUKmEmq0Q==
+  dependencies:
+    "@algolia/logger-common" "4.8.1"
+
+"@algolia/requester-browser-xhr@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.8.1.tgz#02ceb6548957d347c73a6eb8c8292750136bb88a"
+  integrity sha512-N0+0UONv1FYMTaZR/a6wl43MUrGFYpAvsqlVgCN8/CFhuG4LFBUXhZQudL8wq9GfMoUENJ6P9spCUk2EcE5mKQ==
+  dependencies:
+    "@algolia/requester-common" "4.8.1"
+
+"@algolia/requester-common@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.8.1.tgz#8d0990aed68d785433e40cd389c8a87701543f43"
+  integrity sha512-ZtG4g4pxPbN2qI8E7ChOthuntZGIauQegzXyqYfRAAlIZ+lkTTc8KPmUDREFhkT9znCKoPD43w0j8YogSVo/4A==
+
+"@algolia/requester-node-http@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.8.1.tgz#23702832093e769a7837107bf96200fba9d77be3"
+  integrity sha512-OyryP9UBcIqD9B9C6TfkjeNbd8G/MCxuaBaK3QfbjP/J7EUVeMBFPs0jo52jTKlm8l4cgRIHCDxa1ctgfhE1Xg==
+  dependencies:
+    "@algolia/requester-common" "4.8.1"
+
+"@algolia/transporter@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.8.1.tgz#a80d41ae4f4b0e9f2606f4c20cef9aa4183cb59b"
+  integrity sha512-JNO0Bs9vmQmrM54daORAFdmA05QFV7IQNoLS7ucbtEKexJAwmxb/mOB+sAH6Ju3V8vGPPvvn9jcgu9fwIkyX3Q==
+  dependencies:
+    "@algolia/cache-common" "4.8.1"
+    "@algolia/logger-common" "4.8.1"
+    "@algolia/requester-common" "4.8.1"
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
@@ -279,6 +383,39 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@docsearch/css@^1.0.0-alpha.28":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-1.0.0-alpha.28.tgz#c8a2cd8c1bb3a6855c51892e9dbdab5d42fe6e23"
+  integrity sha512-1AhRzVdAkrWwhaxTX6/R7SnFHz8yLz1W8I/AldlTrfbNvZs9INk1FZiEFTJdgHaP68nhgQNWSGlQiDiI3y2RYg==
+
+"@docsearch/js@^1.0.0-alpha.28":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@docsearch/js/-/js-1.0.0-alpha.28.tgz#f0fde7b8a6b1e1d8a7ae1e7655c43d959b457b2b"
+  integrity sha512-2g7aPhBy7FoEyeZW2G3LYHWVa8CFvqyozEz8PXt3hyywdFcmEIqmoCRwn8kboVftrOKCjtPcuLCewsaBoB3uiw==
+  dependencies:
+    "@docsearch/react" "^1.0.0-alpha.28"
+    preact "^10.0.0"
+
+"@docsearch/react@^1.0.0-alpha.28":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-1.0.0-alpha.28.tgz#4f039ed79f8b3332b19a57677b219aebc5010e9d"
+  integrity sha512-XjJOnCBXn+UZmtuDmgzlVIHnnvh6yHVwG4aFq8AXN6xJEIX3f180FvGaowFWAxgdtHplJxFGux0Xx4piHqBzIw==
+  dependencies:
+    "@docsearch/css" "^1.0.0-alpha.28"
+    "@francoischalifour/autocomplete-core" "^1.0.0-alpha.28"
+    "@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.28"
+    algoliasearch "^4.0.0"
+
+"@francoischalifour/autocomplete-core@^1.0.0-alpha.28":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.28.tgz#6b9d8491288e77f831e9b345d461623b0d3f5005"
+  integrity sha512-rL9x+72btViw+9icfBKUJjZj87FgjFrD2esuTUqtj4RAX3s4AuVZiN8XEsfjQBSc6qJk31cxlvqZHC/BIyYXgg==
+
+"@francoischalifour/autocomplete-preset-algolia@^1.0.0-alpha.28":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.28.tgz#a5ad7996f42e43e4acbb4e0010d663746d0e9997"
+  integrity sha512-bprfNmYt1opFUFEtD2XfY/kEsm13bzHQgU80uMjhuK0DJ914IjolT1GytpkdM6tJ4MBvyiJPP+bTtWO+BZ7c7w==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -1018,6 +1155,26 @@ ajv@^6.12.3:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+algoliasearch@^4.0.0, algoliasearch@^4.8.1:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.8.1.tgz#ccaa1674459f2266cdc565a041bc59bd41218638"
+  integrity sha512-rK0VQiOC/9DFD6cwAZIl1dq8SrmtSLVmrz9rk2IQ0/jpTKVAE7xstOaml3nvxjBZWcFQsS4+P2qtzsg6NaLaWw==
+  dependencies:
+    "@algolia/cache-browser-local-storage" "4.8.1"
+    "@algolia/cache-common" "4.8.1"
+    "@algolia/cache-in-memory" "4.8.1"
+    "@algolia/client-account" "4.8.1"
+    "@algolia/client-analytics" "4.8.1"
+    "@algolia/client-common" "4.8.1"
+    "@algolia/client-recommendation" "4.8.1"
+    "@algolia/client-search" "4.8.1"
+    "@algolia/logger-common" "4.8.1"
+    "@algolia/logger-console" "4.8.1"
+    "@algolia/requester-browser-xhr" "4.8.1"
+    "@algolia/requester-common" "4.8.1"
+    "@algolia/requester-node-http" "4.8.1"
+    "@algolia/transporter" "4.8.1"
+
 ansi-colors@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
@@ -5097,6 +5254,11 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.32, postcss@^7.0.5
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+preact@^10.0.0:
+  version "10.5.7"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.7.tgz#f1d84725539e18f7ccbea937cf3db5895661dbd3"
+  integrity sha512-4oEpz75t/0UNcwmcsjk+BIcDdk68oao+7kxcpc1hQPNs2Oo3ZL9xFz8UBf350mxk/VEdD41L5b4l2dE3Ug3RYg==
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"