Updated: Prose anchors

Author: helltraitor

components/content/ProseH1.vue

@@ -3,7 +3,7 @@ interface ProseH1Properties {
   id: string
 }
 
-defineProps<ProseH1Properties>()
+const { id } = defineProps<{ id: string }>()
 
 const runtimeConfig = useRuntimeConfig()
 
@@ -13,6 +13,8 @@ const { depth: anchorDepth, exclude: anchorExcluded } = runtimeConfig.public.con
 const anchorLinkEnabled = ANCHOR_LINK_LEVEL <= anchorDepth && !anchorExcluded.includes(ANCHOR_LINK_LEVEL)
 
 const { scrollToAnchor } = useAnchorScroll()
+
+const fixedId = `real-${id}`
 </script>
 
 <template>
@@ -22,7 +24,7 @@ const { scrollToAnchor } = useAnchorScroll()
     flex flex-row gap-4 align-baseline
   >
     <h1
-      :id="id"
+      :id="fixedId"
       text-4xl font-extrabold font-inter
     >
       <slot />
@@ -32,7 +34,7 @@ const { scrollToAnchor } = useAnchorScroll()
       :href="`#${id}`"
       mb-a mt-a
       text-2xl
-      @click="scrollToAnchor(id)"
+      @click="scrollToAnchor(fixedId)"
     >
       #
     </NuxtLink>

components/content/ProseH2.vue

@@ -3,7 +3,7 @@ interface ProseH2Properties {
   id: string
 }
 
-defineProps<ProseH2Properties>()
+const { id } = defineProps<{ id: string }>()
 
 const runtimeConfig = useRuntimeConfig()
 
@@ -13,6 +13,8 @@ const { depth: anchorDepth, exclude: anchorExcluded } = runtimeConfig.public.con
 const anchorLinkEnabled = ANCHOR_LINK_LEVEL <= anchorDepth && !anchorExcluded.includes(ANCHOR_LINK_LEVEL)
 
 const { scrollToAnchor } = useAnchorScroll()
+
+const fixedId = `real-${id}`
 </script>
 
 <template>
@@ -22,7 +24,7 @@ const { scrollToAnchor } = useAnchorScroll()
     flex flex-row gap-4 align-baseline
   >
     <h2
-      :id="id"
+      :id="fixedId"
       text-3xl font-extrabold font-inter
     >
       <slot />
@@ -32,7 +34,7 @@ const { scrollToAnchor } = useAnchorScroll()
       :href="`#${id}`"
       mb-a mt-a
       text-xl
-      @click="scrollToAnchor(id)"
+      @click="scrollToAnchor(fixedId)"
     >
       #
     </NuxtLink>

components/content/ProseH3.vue

@@ -3,7 +3,7 @@ interface ProseH3Properties {
   id: string
 }
 
-defineProps<ProseH3Properties>()
+const { id } = defineProps<{ id: string }>()
 
 const runtimeConfig = useRuntimeConfig()
 
@@ -13,6 +13,8 @@ const { depth: anchorDepth, exclude: anchorExcluded } = runtimeConfig.public.con
 const anchorLinkEnabled = ANCHOR_LINK_LEVEL <= anchorDepth && !anchorExcluded.includes(ANCHOR_LINK_LEVEL)
 
 const { scrollToAnchor } = useAnchorScroll()
+
+const fixedId = `real-${id}`
 </script>
 
 <template>
@@ -22,7 +24,7 @@ const { scrollToAnchor } = useAnchorScroll()
     flex flex-row gap-4 align-baseline
   >
     <h3
-      :id="id"
+      :id="fixedId"
       text-2xl font-bold font-inter
     >
       <slot />
@@ -32,7 +34,7 @@ const { scrollToAnchor } = useAnchorScroll()
       :href="`#${id}`"
       mb-a mt-a
       text-lg
-      @click="scrollToAnchor(id)"
+      @click="scrollToAnchor(fixedId)"
     >
       #
     </NuxtLink>

components/content/ProseH4.vue

@@ -3,7 +3,7 @@ interface ProseH4Properties {
   id: string
 }
 
-defineProps<ProseH4Properties>()
+const { id } = defineProps<{ id: string }>()
 
 const runtimeConfig = useRuntimeConfig()
 
@@ -13,6 +13,8 @@ const { depth: anchorDepth, exclude: anchorExcluded } = runtimeConfig.public.con
 const anchorLinkEnabled = ANCHOR_LINK_LEVEL <= anchorDepth && !anchorExcluded.includes(ANCHOR_LINK_LEVEL)
 
 const { scrollToAnchor } = useAnchorScroll()
+
+const fixedId = `real-${id}`
 </script>
 
 <template>
@@ -22,7 +24,7 @@ const { scrollToAnchor } = useAnchorScroll()
     flex flex-row gap-4 align-baseline
   >
     <h4
-      :id="id"
+      :id="fixedId"
       text-xl font-bold font-inter
     >
       <slot />
@@ -31,7 +33,7 @@ const { scrollToAnchor } = useAnchorScroll()
       v-if="anchorLinkEnabled"
       :href="`#${id}`"
       mb-a mt-a
-      @click="scrollToAnchor(id)"
+      @click="scrollToAnchor(fixedId)"
     >
       #
     </NuxtLink>

components/content/ProseH5.vue

@@ -3,7 +3,7 @@ interface ProseH5Properties {
   id: string
 }
 
-defineProps<ProseH5Properties>()
+const { id } = defineProps<{ id: string }>()
 
 const runtimeConfig = useRuntimeConfig()
 
@@ -13,6 +13,8 @@ const { depth: anchorDepth, exclude: anchorExcluded } = runtimeConfig.public.con
 const anchorLinkEnabled = ANCHOR_LINK_LEVEL <= anchorDepth && !anchorExcluded.includes(ANCHOR_LINK_LEVEL)
 
 const { scrollToAnchor } = useAnchorScroll()
+
+const fixedId = `real-${id}`
 </script>
 
 <template>
@@ -22,7 +24,7 @@ const { scrollToAnchor } = useAnchorScroll()
     flex flex-row gap-4 align-baseline
   >
     <h5
-      :id="id"
+      :id="fixedId"
       text-lg font-bold font-inter
     >
       <slot />
@@ -32,7 +34,7 @@ const { scrollToAnchor } = useAnchorScroll()
       :href="`#${id}`"
       mb-a mt-a
       text-sm
-      @click="scrollToAnchor(id)"
+      @click="scrollToAnchor(fixedId)"
     >
       #
     </NuxtLink>

components/content/ProseH6.vue

@@ -3,7 +3,7 @@ interface ProseH6Properties {
   id: string
 }
 
-defineProps<ProseH6Properties>()
+const { id } = defineProps<{ id: string }>()
 
 const runtimeConfig = useRuntimeConfig()
 
@@ -13,6 +13,8 @@ const { depth: anchorDepth, exclude: anchorExcluded } = runtimeConfig.public.con
 const anchorLinkEnabled = ANCHOR_LINK_LEVEL <= anchorDepth && !anchorExcluded.includes(ANCHOR_LINK_LEVEL)
 
 const { scrollToAnchor } = useAnchorScroll()
+
+const fixedId = `real-${id}`
 </script>
 
 <template>
@@ -22,7 +24,7 @@ const { scrollToAnchor } = useAnchorScroll()
     flex flex-row gap-4 align-baseline
   >
     <h6
-      :id="id"
+      :id="fixedId"
       text-lg font-500 font-inter
     >
       <slot />
@@ -32,7 +34,7 @@ const { scrollToAnchor } = useAnchorScroll()
       :href="`#${id}`"
       mb-a mt-a
       text-sm
-      @click="scrollToAnchor(id)"
+      @click="scrollToAnchor(fixedId)"
     >
       #
     </NuxtLink>