From 171d36ded5e1cb303e1f92bccfb8b8df6735b185 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 18 Sep 2023 14:54:20 -0400
Subject: [PATCH] Rework link logic to directive

---
 components/Base/Heading.vue |  2 +-
 components/Base/Quote.vue   |  2 +-
 components/Base/Text.vue    | 31 +------------------------------
 components/Block/Code.vue   |  1 +
 components/Nav/Banner.vue   |  2 +-
 components/Nav/Footer.vue   |  2 +-
 plugins/links.ts            | 33 +++++++++++++++++++++++++++++++++
 7 files changed, 39 insertions(+), 34 deletions(-)
 create mode 100644 plugins/links.ts

diff --git a/components/Base/Heading.vue b/components/Base/Heading.vue
index 93f6c145..8e45d7a9 100644
--- a/components/Base/Heading.vue
+++ b/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>
diff --git a/components/Base/Quote.vue b/components/Base/Quote.vue
index 022643cc..1a2ab632 100644
--- a/components/Base/Quote.vue
+++ b/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>
diff --git a/components/Base/Text.vue b/components/Base/Text.vue
index 4231d8bb..0a3bc6a3 100644
--- a/components/Base/Text.vue
+++ b/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"
diff --git a/components/Block/Code.vue b/components/Block/Code.vue
index ce33deb3..326cfb18 100644
--- a/components/Block/Code.vue
+++ b/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"
 			/>
diff --git a/components/Nav/Banner.vue b/components/Nav/Banner.vue
index 07006c98..f4917469 100644
--- a/components/Nav/Banner.vue
+++ b/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>
 
diff --git a/components/Nav/Footer.vue b/components/Nav/Footer.vue
index 53d510f0..7ec94ce1 100644
--- a/components/Nav/Footer.vue
+++ b/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">
diff --git a/plugins/links.ts b/plugins/links.ts
new file mode 100644
index 00000000..1bab5ce1
--- /dev/null
+++ b/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');
+				}
+			}
+		},
+	});
+});