From 51dfe70f8407aad5f5ee5427a9e646f37027bddf Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 25 Nov 2020 11:11:34 +0100
Subject: [PATCH 1/7] feat: add Algolia DocSearch

---
 package.json                                  |   3 +
 src/client/theme-default/Layout.vue           |  12 +-
 .../components/AlgoliaSearchBox.vue           | 158 +++++++++++++++++
 src/client/theme-default/styles/vars.css      |   4 +-
 yarn.lock                                     | 162 ++++++++++++++++++
 5 files changed, 336 insertions(+), 3 deletions(-)
 create mode 100644 src/client/theme-default/components/AlgoliaSearchBox.vue

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 6b3f944355bc..9a009ec972f8 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -3,7 +3,9 @@
     <header class="navbar" v-if="showNavbar">
       <NavBar>
         <template #search>
-          <slot name="navbar-search" />
+          <slot name="navbar-search">
+            <AlgoliaSearchBox :options="$site.themeConfig.algolia" />
+          </slot>
         </template>
       </NavBar>
       <ToggleSideBarButton @toggle="toggleSidebar" />
@@ -53,6 +55,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'
 
 const route = useRoute()
 const siteData = useSiteData()
@@ -107,3 +110,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..298e2706313e
--- /dev/null
+++ b/src/client/theme-default/components/AlgoliaSearchBox.vue
@@ -0,0 +1,158 @@
+<template>
+  <div id="docsearch"></div>
+</template>
+
+<script lang="ts">
+import { AlgoliaSearchOptions } from 'algoliasearch'
+// import docsearch from '@docsearch/js'
+// import '@docsearch/css'
+import { useRoute, useRouter } from 'vitepress'
+import { getCurrentInstance, onMounted, PropType, 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
+}
+
+export default {
+  name: 'AlgoliaSearchBox',
+
+  props: {
+    options: {
+      type: Object as PropType<AlgoliaSearchOptions>,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const route = useRoute()
+    const router = useRouter()
+    const vm = getCurrentInstance()
+
+    watch(
+      () => props.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(props.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 4ae1025104a8..2a84f485a5e9 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -28,8 +28,8 @@
    * Z Indexes
    * --------------------------------------------------------------------- */
 
-  --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"

From 2415245a36951b31e5ee6f5bf2feb03c91fe7334 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 25 Nov 2020 11:38:18 +0100
Subject: [PATCH 2/7] chore: add comment about z-index

---
 src/client/theme-default/styles/vars.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 2a84f485a5e9..ab9f559d1cde 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -25,7 +25,8 @@
   --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: 10;

From 2c47fad2cd101b7e2efa4f582c4444675be6c5d4 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 26 Nov 2020 11:10:57 +0100
Subject: [PATCH 3/7] fix: use algolia search if options are provided

---
 src/client/theme-default/Layout.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 9a009ec972f8..2776ebe5dfdb 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -4,7 +4,10 @@
       <NavBar>
         <template #search>
           <slot name="navbar-search">
-            <AlgoliaSearchBox :options="$site.themeConfig.algolia" />
+            <AlgoliaSearchBox
+              v-if="$site.themeConfig.algolia"
+              :options="$site.themeConfig.algolia"
+            />
           </slot>
         </template>
       </NavBar>

From 2ea51e7ee86ef9fcf4e3ecedf80af0cb7ac0cfef Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 26 Nov 2020 11:13:53 +0100
Subject: [PATCH 4/7] refactor: use script setup

---
 .../components/AlgoliaSearchBox.vue           | 225 +++++++++---------
 1 file changed, 106 insertions(+), 119 deletions(-)

diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue
index 298e2706313e..65af89119d3a 100644
--- a/src/client/theme-default/components/AlgoliaSearchBox.vue
+++ b/src/client/theme-default/components/AlgoliaSearchBox.vue
@@ -2,12 +2,10 @@
   <div id="docsearch"></div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { AlgoliaSearchOptions } from 'algoliasearch'
-// import docsearch from '@docsearch/js'
-// import '@docsearch/css'
 import { useRoute, useRouter } from 'vitepress'
-import { getCurrentInstance, onMounted, PropType, watch } from 'vue'
+import { defineProps, getCurrentInstance, onMounted, watch } from 'vue'
 
 function isSpecialClick(event: MouseEvent) {
   return (
@@ -27,126 +25,115 @@ function getRelativePath(absoluteUrl: string) {
   return url
 }
 
-export default {
-  name: 'AlgoliaSearchBox',
-
-  props: {
-    options: {
-      type: Object as PropType<AlgoliaSearchOptions>,
-      required: true,
-    },
-  },
-
-  setup(props) {
-    const route = useRoute()
-    const router = useRouter()
-    const vm = getCurrentInstance()
-
-    watch(
-      () => props.options,
-      newValue => {
-        update(newValue)
-      }
-    )
+const { options } = defineProps<{ 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
+                }
 
-    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)
+                // 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)
               },
-            },
-            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,
-                },
-              }
-            },
-          })
-        )
+              children
+            }
+          }
+        }
       })
-    }
-
-    onMounted(() => {
-      initialize(props.options)
-    })
-  },
+    )
+  })
 }
+
+onMounted(() => {
+  initialize(options)
+})
 </script>
 
 <style>

From 743ece07453e00cddfcb3c9ecc8b48f906f47667 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 26 Nov 2020 11:15:10 +0100
Subject: [PATCH 5/7] fix: use dynamic import for types

---
 src/client/theme-default/components/AlgoliaSearchBox.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue
index 65af89119d3a..b0406531d601 100644
--- a/src/client/theme-default/components/AlgoliaSearchBox.vue
+++ b/src/client/theme-default/components/AlgoliaSearchBox.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script setup lang="ts">
-import { AlgoliaSearchOptions } from 'algoliasearch'
 import { useRoute, useRouter } from 'vitepress'
 import { defineProps, getCurrentInstance, onMounted, watch } from 'vue'
 
@@ -25,7 +24,10 @@ function getRelativePath(absoluteUrl: string) {
   return url
 }
 
-const { options } = defineProps<{ options: AlgoliaSearchOptions }>()
+const { options } = defineProps<{
+  // Using a regular import breaks at runtime
+  options: import('algoliasearch').AlgoliaSearchOptions
+}>()
 
 const route = useRoute()
 const router = useRouter()

From c0218d19e7af9bd83bc4d487ae932168e183957f Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 26 Nov 2020 12:01:25 +0100
Subject: [PATCH 6/7] chore: improve type import

---
 src/client/theme-default/components/AlgoliaSearchBox.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue
index b0406531d601..f63cd450f95a 100644
--- a/src/client/theme-default/components/AlgoliaSearchBox.vue
+++ b/src/client/theme-default/components/AlgoliaSearchBox.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import type { AlgoliaSearchOptions } from 'algoliasearch'
 import { useRoute, useRouter } from 'vitepress'
 import { defineProps, getCurrentInstance, onMounted, watch } from 'vue'
 
@@ -26,7 +27,7 @@ function getRelativePath(absoluteUrl: string) {
 
 const { options } = defineProps<{
   // Using a regular import breaks at runtime
-  options: import('algoliasearch').AlgoliaSearchOptions
+  options: AlgoliaSearchOptions
 }>()
 
 const route = useRoute()

From c38ae1e0c21573b42e1973572fdbcf222828b4f6 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 27 Nov 2020 17:00:52 +0100
Subject: [PATCH 7/7] docs: add search

---
 docs/.vitepress/config.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index e9a69a0ef6b8..bf13b3d88d86 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' },