fix: update algolia search component

tsedio · Dec 13, 2022 · e9e889f · e9e889f
1 parent 6d5bf2d
commit e9e889f
Show file tree

Hide file tree

Showing 4 changed files with 2,958 additions and 2,953 deletions.
diff --git a/packages/vuepress-common/src/components/molecules/algolia-search-box/AlgoliaSearchBox.vue b/packages/vuepress-common/src/components/molecules/algolia-search-box/AlgoliaSearchBox.vue
@@ -3,6 +3,9 @@
 </template>
 
 <script>
+import docsearch from '@docsearch/js'
+import '@docsearch/css/dist/style.css'
+
 function isSpecialClick (event) {
   return (
       event.button === 1 ||
@@ -32,98 +35,71 @@ export default {
 
   methods: {
     getRelativePath (absoluteUrl) {
-      const { pathname, hash } = new URL(absoluteUrl)
+      const {pathname, hash} = new URL(absoluteUrl)
       return pathname.replace(this.$site.base, '/') + hash
     },
     initialize (userOptions, lang) {
-      Promise.all([
-        import(/* webpackChunkName: "docsearch" */ '@docsearch/js'),
-        import(/* webpackChunkName: "docsearch" */ '@docsearch/css')
-      ]).then(([docsearch]) => {
-        docsearch = docsearch.default
-
-        docsearch(
-            Object.assign(
-                {
-                  placeholder: this.$site.themeConfig.searchPlaceholder
+      const router = this.$router
+      docsearch(
+          {
+            placeholder: this.$site.themeConfig.searchPlaceholder,
+            ...userOptions,
+            container: '#docsearch',
+            // #697 Make DocSearch work well in i18n mode.
+            searchParameters: Object.assign(
+                {},
+                lang && {
+                  facetFilters: [`lang:${lang}`].concat(
+                      userOptions.facetFilters || []
+                  )
                 },
-                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 }) => {
-                      const { pathname: hitPathname } = new URL(
-                          window.location.origin + suggestionUrl
-                      )
+                userOptions.searchParameters
+            ),
+            navigator: {
+              navigate: ({suggestionUrl}) => {
+                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 (this.$router.history.current.path === hitPathname) {
-                        window.location.assign(
-                            window.location.origin + suggestionUrl
-                        )
-                      } else {
-                        this.$router.push(suggestionUrl)
+                // Vue Router doesn't handle same-page navigation so we use
+                // the native browser location API for anchor navigation.
+                if (router.history.current.path === hitPathname) {
+                  window.location.assign(
+                      window.location.origin + suggestionUrl
+                  )
+                } else {
+                  router.push(suggestionUrl)
+                }
+              }
+            },
+            transformItems: items => {
+              return items.map(item => {
+                return Object.assign({}, item, {
+                  url: this.getRelativePath(item.url)
+                })
+              })
+            },
+            hitComponent:  ({ hit, children }) =>
+                ({
+                  type: 'a',
+                  ref: undefined,
+                  constructor: undefined,
+                  key: undefined,
+                  props: {
+                    href: hit.url,
+                    // handle `onClick` by `router.push`
+                    onClick: (event) => {
+                      if (isSpecialClick(event)) {
+                        return
                       }
-                    }
+                      event.preventDefault()
+                      router.push(hit.url)
+                    },
+                    children,
                   },
-                  transformItems: items => {
-                    return items.map(item => {
-                      return Object.assign({}, item, {
-                        url: this.getRelativePath(item.url)
-                      })
-                    })
-                  },
-                  hitComponent: ({ hit, children }) => {
-                    return {
-                      type: 'a',
-                      ref: undefined,
-                      constructor: undefined,
-                      key: undefined,
-                      props: {
-                        href: hit.url,
-                        onClick: event => {
-                          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 (this.$router.history.current.fullPath === hit.url) {
-                            return
-                          }
-
-                          const { pathname: hitPathname } = new URL(
-                              window.location.origin + hit.url
-                          )
-
-                          // If the hits goes to another page, we prevent the native link behavior
-                          // to leverage the Vue Router loading feature.
-                          if (this.$router.history.current.path !== hitPathname) {
-                            event.preventDefault()
-                          }
-
-                          this.$router.push(hit.url)
-                        },
-                        children
-                      }
-                    }
-                  }
-                }
-            )
-        )
-      })
+                  __v: null,
+                })
+          })
     },
 
     update (options, lang) {
@@ -139,4 +115,4 @@ export default {
   --docsearch-highlight-color: var(--docsearch-primary-color);
   --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
 }
-</style>
+</style>
diff --git a/packages/vuepress-theme-tsed/docs/.vuepress/config.js b/packages/vuepress-theme-tsed/docs/.vuepress/config.js
@@ -57,10 +57,11 @@ module.exports = {
     apiRedirectUrl: 'https://api-doc.tsed.io',
     smoothScroll: true,
     lastUpdated: 'Last updated',
-    // algolia: {
-    //   apiKey: 'f8a038207e461aaac0e2fd16403c2b01',
-    //   indexName: 'ts_ed'
-    // },
+    algolia: {
+      apiKey: "f8a038207e461aaac0e2fd16403c2b01",
+      indexName: "ts_ed",
+      appId: 'DH8VVM2E1E'
+    },
     locales: {
       '/': {
         label: 'English',

diff --git a/packages/vuepress-theme-tsed/package.json b/packages/vuepress-theme-tsed/package.json
@@ -14,8 +14,9 @@
     "serve:prod": "lite-server --baseDir=\"docs/.vuepress/dist\""
   },
   "dependencies": {
-    "@docsearch/css": "3.1.0",
-    "@docsearch/js": "3.1.0",
+    "@docsearch/css": "^3.3.0",
+    "@docsearch/js": "^3.3.0",
+    "@docsearch/react": "^3.3.0",
     "@sass-collective/sass-rem": "^1.7.0",
     "@silvanite/vuepress-plugin-tailwind": "^1.3.0",
     "@tsed/markdown-it-symbols": "3.20.5",
@@ -63,4 +64,4 @@
     "semantic-release": "19.0.2"
   },
   "peerDependencies": {}
-}
+}