catch internal links and use router

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

@@ -26,6 +26,7 @@ withDefaults(defineProps<BaseTextProps>(), {
 	<div class="base-text-container">
 		<!-- eslint-disable vue/no-v-html -->
 		<div
+			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">

nuxt.config.ts

@@ -61,6 +61,9 @@ export default defineNuxtConfig({
 			gtm: {
 				id: process.env.GOOGLE_TAG_MANAGER_ID!,
 			},
+			site: {
+				url: process.env.NUXT_PUBLIC_SITE_URL!,
+			},
 		},
 	},
 

plugins/links.ts

@@ -0,0 +1,34 @@
+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) => {
+						const { pathname, searchParams, hash } = new URL(anchor.href);
+
+						navigateTo({
+							path: pathname,
+							hash: hash,
+							query: Object.fromEntries(searchParams.entries()),
+						});
+
+						e.preventDefault();
+					});
+				} else {
+					anchor.setAttribute('target', '_blank');
+					anchor.setAttribute('rel', 'noopener noreferrer');
+				}
+			}
+		},
+	});
+});