Rework link logic to directive

components/Base/Heading.vue

@@ -40,7 +40,7 @@ const iconSize = computed(() => {
 			<BaseIcon v-if="icon && size !== 'title'" :name="icon" :size="iconSize" :weight="700" />
 
 			<!-- eslint-disable-next-line vue/no-v-html -->
-			<span class="content" v-html="content" />
+			<span v-links class="content" v-html="content" />
 		</component>
 	</div>
 </template>

components/Base/Quote.vue

@@ -12,7 +12,7 @@ defineProps<BaseQuoteProps>();
 <template>
 	<div class="base-quote">
 		<!-- eslint-disable-next-line vue/no-v-html -->
-		<blockquote class="quote" v-html="quote" />
+		<blockquote v-links class="quote" v-html="quote" />
 
 		<BaseByline :name="personName" :title="personTitle" :image="personImage" />
 	</div>

components/Base/Text.vue

@@ -20,42 +20,13 @@ withDefaults(defineProps<BaseTextProps>(), {
 	align: 'start',
 	size: 'medium',
 });
-
-const config = useRuntimeConfig();
-const contentEl = ref<HTMLElement | null>(null);
-
-onMounted(() => {
-	if (!contentEl.value) return;
-
-	// Intercept all the local links
-	const anchors = contentEl.value.getElementsByTagName('a');
-	if (!anchors) return;
-
-	Array.from(anchors).forEach((anchor) => {
-		const url = anchor.getAttribute('href');
-		if (!url) return;
-
-		// Add target blank to external links
-		if (!url.startsWith(config.public.site.url) && !url.startsWith('/')) {
-			anchor.setAttribute('target', '_blank');
-			anchor.setAttribute('rel', 'noopener noreferrer');
-			return;
-		} else {
-			// Add on click event to local links
-			anchor.addEventListener('click', (e) => {
-				e.preventDefault();
-				navigateTo(url);
-			});
-		}
-	});
-});
 </script>
 
 <template>
 	<div class="base-text-container">
 		<!-- eslint-disable vue/no-v-html -->
 		<div
-			ref="contentEl"
+			v-links
 			class="base-text"
 			:class="[`align-${align}`, `size-${size}`, `type-${type}`, `color-${color}`]"
 			v-html="content"

components/Block/Code.vue

@@ -55,6 +55,7 @@ const activeSnippet = ref(0);
 				v-for="(snippet, index) in snippets"
 				v-show="activeSnippet === index"
 				:key="snippet.name"
+				v-links
 				class="snippet"
 				v-html="snippet.html"
 			/>

components/Nav/Banner.vue

@@ -32,7 +32,7 @@ const dismiss = (id: string) => {
 			<NuxtLink class="link" :href="banner.link ?? undefined">
 				<BaseIcon v-if="banner.icon" class="icon" :name="banner.icon" size="small" />
 				<!-- eslint-disable-next-line vue/no-v-html -->
-				<span class="content" v-html="banner.content" />
+				<span v-links class="content" v-html="banner.content" />
 				<BaseIcon class="arrow" name="arrow_forward" size="small" />
 			</NuxtLink>
 

components/Nav/Footer.vue

@@ -58,7 +58,7 @@ const socials = {
 						</NuxtLink>
 
 						<!-- eslint-disable-next-line vue/no-v-html -->
-						<div v-if="globals" class="description" v-html="globals.description" />
+						<div v-if="globals" v-links class="description" v-html="globals.description" />
 					</li>
 
 					<li v-for="group of navPrimary.items" :key="group.id">

plugins/links.ts

@@ -0,0 +1,33 @@
+export default defineNuxtPlugin((nuxtApp) => {
+	nuxtApp.vueApp.directive('links', {
+		mounted(el: HTMLElement) {
+			const anchors = Array.from(el.getElementsByTagName('a'));
+
+			for (const anchor of anchors) {
+				const href = anchor.getAttribute('href');
+
+				if (!href) return;
+
+				const url = new URL(href, window.location.origin);
+
+				const isLocal = url.hostname === 'directus.io';
+
+				if (isLocal) {
+					anchor.addEventListener('click', (e) => {
+						e.preventDefault();
+						const { pathname, searchParams, hash } = new URL(anchor.href);
+
+						navigateTo({
+							path: pathname,
+							hash: hash,
+							query: Object.fromEntries(searchParams.entries()),
+						});
+					});
+				} else {
+					anchor.setAttribute('target', '_blank');
+					anchor.setAttribute('rel', 'noopener noreferrer');
+				}
+			}
+		},
+	});
+});