From ae3748394c7618020780e2e3799277e409e29a15 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Tue, 9 May 2023 17:35:14 +0200
Subject: [PATCH] Make use of vuetify for prose elems
---
components/content/ProseH1.vue | 13 ++++++++++---
components/content/ProseH2.vue | 22 ++++++++++++++++++++++
components/content/ProseOl.vue | 9 +++++++++
components/content/ProseP.vue | 4 +++-
4 files changed, 44 insertions(+), 4 deletions(-)
create mode 100644 components/content/ProseH2.vue
create mode 100644 components/content/ProseOl.vue
diff --git a/components/content/ProseH1.vue b/components/content/ProseH1.vue
index bbc49f62..504cd7b1 100644
--- a/components/content/ProseH1.vue
+++ b/components/content/ProseH1.vue
@@ -1,10 +1,10 @@
<template>
- <div class="text-h1" :id="id">
- <a v-if="id && generate" :href="`#${id}`">
+ <h1 class="text-h3 font-weight-bold" :id="id">
+ <a v-if="id && generate" :href="`#${id}`" class="text-decoration-none">
<slot />
</a>
<slot v-else />
- </div>
+ </h1>
</template>
<script setup lang="ts">
@@ -12,6 +12,13 @@ import { useRuntimeConfig } from "#imports";
defineProps<{ id?: string }>();
const heading = 1;
const { anchorLinks } = useRuntimeConfig().public.content;
+console.log(anchorLinks);
+
const generate =
anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading);
</script>
+<style scoped>
+a {
+ color: inherit;
+}
+</style>
diff --git a/components/content/ProseH2.vue b/components/content/ProseH2.vue
new file mode 100644
index 00000000..964db2b7
--- /dev/null
+++ b/components/content/ProseH2.vue
@@ -0,0 +1,22 @@
+<template>
+ <h2 class="text-h4 font-weight-bold" :id="id">
+ <a v-if="id && generate" :href="`#${id}`" class="text-decoration-none">
+ <slot />
+ </a>
+ <slot v-else />
+ </h2>
+</template>
+
+<script setup lang="ts">
+import { useRuntimeConfig } from "#imports";
+defineProps<{ id?: string }>();
+const heading = 2;
+const { anchorLinks } = useRuntimeConfig().public.content;
+const generate =
+ anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading);
+</script>
+<style scoped>
+a {
+ color: inherit;
+}
+</style>
diff --git a/components/content/ProseOl.vue b/components/content/ProseOl.vue
new file mode 100644
index 00000000..4c630ffc
--- /dev/null
+++ b/components/content/ProseOl.vue
@@ -0,0 +1,9 @@
+<template>
+ <v-card flat color="transparent">
+ <v-card-text>
+ <ol>
+ <slot />
+ </ol>
+ </v-card-text>
+ </v-card>
+</template>
diff --git a/components/content/ProseP.vue b/components/content/ProseP.vue
index d73d0fd6..f0692523 100644
--- a/components/content/ProseP.vue
+++ b/components/content/ProseP.vue
@@ -1,3 +1,5 @@
<template>
- <v-card-text><slot /></v-card-text>
+ <v-card flat color="transparent">
+ <v-card-text class="px-0 py-2"><slot /></v-card-text>
+ </v-card>
</template>
--
GitLab