fix: requested changes

src/components/MdLink.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+function fixFragmentLinks(e: MouseEvent) {
+	const targetEl = e.target as HTMLAnchorElement;
+	const to = targetEl?.getAttribute('href');
+
+	if (targetEl?.tagName !== 'A' || !to?.startsWith('#')) {
+		return;
+	}
+
+	e.preventDefault();
+	document.getElementById(to.slice(1))?.scrollTo();
+}
+</script>
+
+<template>
+  <NuxtLink @click="fixFragmentLinks">
+    <slot />
+  </NuxtLink>
+</template>

src/pages/blog/[slug].vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import MdLink from '~/components/MdLink.vue';
+
 const slug = useRoute().params.slug;
 const { data: post } = await useAsyncData(`blog-${slug}`, () => {
 	return queryCollection('blog').path(`/blog/${slug}`).first();
@@ -41,7 +43,10 @@ customSeoMeta({
         </span>
       </div>
 
-      <ContentRenderer :value="post" />
+      <ContentRenderer
+        :value="post"
+        :components="{ 'a': MdLink }"
+      />
     </div>
   </div>
 </template>

src/pages/docs/[...slug].vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-const { path, params } = useRoute();
-const slug = (params.slug as string[]).join('/');
+import MdLink from '~/components/MdLink.vue';
+
+const slug = (useRoute().params.slug as string[]).join('/');
 
 const { data: doc } = await useAsyncData(`docs-${slug}`, () => {
 	return queryCollection('docs').path(`/docs/${slug}`).first();
@@ -10,24 +11,6 @@ if (!doc.value) {
 	throw createError({ statusCode: 404, statusMessage: 'Page Not Found' });
 }
 
-function fixFragmentLinks(e: MouseEvent) {
-	const targetEl = e.target as HTMLAnchorElement;
-	const to = targetEl?.getAttribute('href');
-
-	if (targetEl?.tagName !== 'A' || !to?.startsWith('#')) {
-		return;
-	}
-
-	// nuxt content just drops dashes at the start of the fragment, so we do the same
-	const sanitizedTo = to.replace(/^#-*/, '');
-
-	// a fragment cannot start with a number, so nuxt content prefixes it with an underscore.
-	const newPath = /^[0-9]/.test(sanitizedTo) ? `${path}#_${sanitizedTo}` : `${path}#${sanitizedTo}`;
-
-	e.preventDefault();
-	return navigateTo(newPath, { external: true });
-}
-
 customSeoMeta({
 	subsection: 'docs',
 	title: doc.value.title,
@@ -44,7 +27,7 @@ definePageMeta({
     <ContentRenderer
       v-if="doc"
       :value="doc"
-      @click="fixFragmentLinks"
+      :components="{ 'a': MdLink }"
     />
   </div>
 </template>

src/pages/terms/[slug].vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import MdLink from '~/components/MdLink.vue';
+
 const slug = useRoute().params.slug;
 const { data: termContent } = await useAsyncData(`terms-${slug}`, () => {
 	return queryCollection('terms').path(`/terms/${slug}`).first();
@@ -21,6 +23,7 @@ customSeoMeta({
       <ContentRenderer
         v-if="termContent"
         :value="termContent"
+        :components="{ 'a': MdLink }"
       />
     </div>
   </div>