fix search implementation

packages/docs/components/AlgoliaSearch.vue

@@ -16,22 +16,21 @@ const { getTextColor, setHSLAColor, colors, getColor } = useColors()
 
 const placeholderColor = computed(() => setHSLAColor(getColor(getTextColor(colors.backgroundElement)), { a: 0.7 }))
 
-onMounted(() => {
-  const getPathFromAlgoliaResponse = (url: string): string => {
-    // sometimes is response we have relative url,
-    // so this regexp try to parse absolute url, then try to parse relative url
-    const [, pathFromAbsoluteUrl, pathFromRelativeUrl] = /^https.+?\/[a-z]{2}\/(.*)|^\/[a-z]{2}\/(.*)/.exec(url) || []
+const getUrlObject = (fullPath: string): {pathname: string, hash: string} => {
+  // Algolia sends us urls like this: https://ui.vuestic.dev/ui-elements/table
+  // But vue router doesn't like full urls, so we need to split it apart.
+  const { pathname, hash } = new URL(fullPath)
 
-    return pathFromAbsoluteUrl || pathFromRelativeUrl || ''
+  if (!pathname) {
+    // TODO Report to Sentry.
   }
-  const navigateToPath = (path: string) => {
-    if (!path.length) {
-      return
-    }
 
-    router.push({
-      path: `/${path}`,
-    })
+  return { pathname, hash }
+}
+
+onMounted(() => {
+  const navigateToPath = ({ pathname, hash }: {pathname: string, hash: string}) => {
+    router.push({ path: pathname, hash })
   }
 
   docsearch({
@@ -42,15 +41,16 @@ onMounted(() => {
     // absolutely kekw but docsearch is based on React, so we simulate React.createElement()
     // @ts-ignore
     hitComponent ({ hit, children }) {
-      const path = getPathFromAlgoliaResponse(hit.url)
+      const url = getUrlObject(hit.url)
+
       return {
         type: 'a',
         props: {
-          href: `/${path}`,
+          href: `${url.pathname}#${url.hash}`,
           target: '_blank',
           onClick: (event: MouseEvent) => {
             event.preventDefault()
-            navigateToPath(path)
+            navigateToPath(url)
           },
           children,
         },
@@ -61,10 +61,9 @@ onMounted(() => {
     },
     navigator: { // keyboard navigation
       navigate ({ itemUrl }) {
-        const path = getPathFromAlgoliaResponse(itemUrl)
-        navigateToPath(path)
+        navigateToPath(getUrlObject(itemUrl))
       },
-    },
+    }
   })
 })
 </script>