anchor take into account navbar height

components/content/ProseH1.vue

 <template>
-  <h1 class="text-h3 font-weight-bold" :id="id">
+  <span :id="id" class="anchor"></span>
+  <h1 class="text-h3 font-weight-bold my-6">
     <a v-if="id && generate" :href="`#${id}`" class="text-decoration-none">
       <slot />
     </a>
@@ -21,4 +22,10 @@ const generate =
 a {
   color: inherit;
 }
+anchor {
+  display: block;
+  position: relative;
+  top: -64px;
+  visibility: hidden;
+}
 </style>

components/content/ProseH2.vue

 <template>
-  <h2 class="text-h4 font-weight-bold" :id="id">
+  <span :id="id" class="anchor"></span>
+  <h2 class="text-h4 font-weight-bold my-4">
     <a v-if="id && generate" :href="`#${id}`" class="text-decoration-none">
       <slot />
     </a>
@@ -19,4 +20,10 @@ const generate =
 a {
   color: inherit;
 }
+.anchor {
+  display: block;
+  position: relative;
+  top: -64px;
+  visibility: hidden;
+}
 </style>

components/content/ProseH3.vue

+<template>
+  <span :id="id" class="anchor"></span>
+  <h3 class="text-h6 font-weight-bold my-3">
+    <a v-if="id && generate" :href="`#${id}`" class="text-decoration-none">
+      <slot />
+    </a>
+    <slot v-else />
+  </h3>
+</template>
+
+<script setup lang="ts">
+import { useRuntimeConfig } from "#imports";
+defineProps<{ id?: string }>();
+const heading = 3;
+const { anchorLinks } = useRuntimeConfig().public.content;
+const generate =
+  anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading);
+</script>
+<style scoped>
+a {
+  color: inherit;
+}
+.anchor {
+  display: block;
+  position: relative;
+  top: -64px;
+  visibility: hidden;
+}
+</style>