From 9e785658dcd1f942f0f698c7b4ed87486760ae2f Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Wed, 10 May 2023 17:04:54 +0200
Subject: [PATCH] anchor take into account navbar height
---
components/content/ProseH1.vue | 9 ++++++++-
components/content/ProseH2.vue | 9 ++++++++-
components/content/ProseH3.vue | 29 +++++++++++++++++++++++++++++
3 files changed, 45 insertions(+), 2 deletions(-)
create mode 100644 components/content/ProseH3.vue
diff --git a/components/content/ProseH1.vue b/components/content/ProseH1.vue
index 504cd7b1..25ea7b5a 100644
--- a/components/content/ProseH1.vue
+++ b/components/content/ProseH1.vue
@@ -1,5 +1,6 @@
<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>
diff --git a/components/content/ProseH2.vue b/components/content/ProseH2.vue
index 964db2b7..6461c9ce 100644
--- a/components/content/ProseH2.vue
+++ b/components/content/ProseH2.vue
@@ -1,5 +1,6 @@
<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>
diff --git a/components/content/ProseH3.vue b/components/content/ProseH3.vue
new file mode 100644
index 00000000..5d1e7945
--- /dev/null
+++ b/components/content/ProseH3.vue
@@ -0,0 +1,29 @@
+<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>
--
GitLab