Switch to algolia search w/ the new index (#126)

* Switch to algolia search w/ the new index

* Keep off-site links intact

* Match Directus TV

* Match directus TV

* Trigger Build

* Tweak order

* Improve logging

* Further logging

* Use item url

* Do some logging

* Use item url

* More logging

* Try without regex

* More logging

* move logging

* Add more logs

* Try string replacing

* Nasty hack

* More logging still

* Even more logging

* Remove some logging

* Remove extra slash

* Remove more logging

* Return item as-is

* Use relative URL

* Try and work around nuxt algolia bug

* Second time's the charm?

* Third time surely is!

* four. I meant four

* fix: conditionally include UContentSearch only for nuxt search backend

---------

Co-authored-by: Carmen Huidobro <[email protected]>
Co-authored-by: Hannes Küttner <[email protected]>

Author: 3 people

app/app.config.ts

@@ -1,6 +1,6 @@
 export default defineAppConfig({
 	search: {
-		backend: 'nuxt', // 'nuxt' | 'algolia',
+		backend: 'algolia', // 'nuxt' | 'algolia',
 	},
 
 	ui: {

app/app.vue

@@ -10,6 +10,8 @@ defineOgImage({
 	url: '/img/og-image.png',
 });
 
+const { search } = useAppConfig();
+
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false });
 </script>
 
@@ -25,7 +27,7 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { defa
 
 		<DocsFooter />
 
-		<ClientOnly>
+		<ClientOnly v-if="search.backend === 'nuxt'">
 			<LazyUContentSearch
 				ref="searchRef"
 				:files="files"

app/components/DocsHeader.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { DocSearchProps } from '@docsearch/react';
 import type { NavItem } from '@nuxt/content';
 import type { HeaderLink } from '@nuxt/ui-pro/types';
 import type { OpenAPIObject } from 'openapi3-ts/oas30';
+import { withoutTrailingSlash } from 'ufo';
 
 const navigation = inject<NavItem[]>('navigation', []);
 const oasSpec = inject<OpenAPIObject>('openapi', { openapi: '3.0', info: { title: 'OAS Spec', version: '0' }, paths: {} });
@@ -10,6 +12,7 @@ const { metaSymbol } = useShortcuts();
 
 const { header, search } = useAppConfig();
 const route = useRoute();
+const router = useRouter();
 
 const links = computed(() =>
 	header.nav.map((link: HeaderLink) => {
@@ -33,6 +36,78 @@ const navigationTree = computed(() => {
 		return item._path.startsWith(routePrefix);
 	})?.children ?? []);
 });
+
+const isSpecialClick = (event: MouseEvent) =>
+	event.button === 1 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+
+const withoutBaseUrl = (url: string) => {
+	const { app } = useRuntimeConfig();
+	const routerBase = withoutTrailingSlash(app.baseURL);
+	const hasBaseURL = routerBase !== '/';
+
+	if (hasBaseURL && url.startsWith(routerBase)) {
+		return url.substring(routerBase.length) || '/';
+	}
+	return url;
+};
+
+// This is needed until https://github.com/nuxt-modules/algolia/issues/208 is resolved
+const algoliaHitComponent: DocSearchProps['hitComponent'] = ({ hit, children }) => {
+	return {
+		type: 'a',
+		constructor: undefined,
+		__v: 1,
+		props: {
+			href: hit.url,
+			children,
+			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.fullPath === hit.url) {
+					return;
+				}
+
+				if (hit.url.startsWith('https://')) {
+					// don't prevent native navigation
+				}
+				else {
+					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 (route.path !== hitPathname) {
+						event.preventDefault();
+					}
+
+					router.push(withoutBaseUrl(hit.url));
+				}
+			},
+		},
+	} as any;
+};
+
+const algoliaNavigator = {
+	navigate: ({ itemUrl }) => {
+		const isAbsoluteUrl = itemUrl.startsWith('https://');
+		const { pathname: hitPathname } = new URL(isAbsoluteUrl ? itemUrl : window.location.origin + itemUrl);
+		// 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 + itemUrl);
+		}
+		else if (isAbsoluteUrl) {
+			navigateTo(itemUrl, { external: true });
+		}
+		else {
+			router.push(withoutBaseUrl(itemUrl));
+		}
+	},
+};
 </script>
 
 <template>
@@ -59,7 +134,11 @@ const navigationTree = computed(() => {
 						color="gray"
 						square
 					>
-						<AlgoliaDocSearch />
+						<AlgoliaDocSearch
+							:transform-items="transformAlgoliaSearchItems"
+							:hit-component="algoliaHitComponent"
+							:navigator="algoliaNavigator"
+						/>
 					</UButton>
 				</UTooltip>
 			</ClientOnly>

app/utils/transformAlgoliaSearchItems.ts

@@ -0,0 +1,29 @@
+import type { DocSearchHit } from "@docsearch/react";
+import { withoutTrailingSlash } from "ufo";
+
+function getRelativePath(absoluteUrl: string) {
+	const { pathname, hash } = new URL(absoluteUrl);
+	const url = window.location.origin;
+	const relativeUrl = pathname.replace(url, '/') + hash;
+	return withoutTrailingSlash(relativeUrl);
+}
+
+/**
+ * Transform Algolia search items to ensure off-site links aren't rendered as relative links
+ */
+export default function (items: DocSearchHit[]): DocSearchHit[] {
+	return items.map((item) => {
+		const relativePath = getRelativePath(item.url);
+
+		let url = relativePath;
+
+		if (!relativePath.startsWith('/docs')) {
+			url = item.url;
+		}
+
+		return {
+			...item,
+			url,
+		};
+	});
+}

nuxt.config.ts

@@ -130,7 +130,7 @@ export default defineNuxtConfig({
 
 	algolia: {
 		docSearch: {
-			indexName: 'directus',
+			indexName: 'directus_unified',
 		},
 	},