From ba22ac16e2d9be87a8e6f7e5d85d3c9ef30ac926 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Mon, 6 Nov 2023 23:57:17 +0100
Subject: [PATCH] Update prose components for content

---
 src/components/content/ProseA.vue  | 26 ++++++++++++++++++++++++++
 src/components/content/ProseH2.vue | 21 +++++++++++++++++++++
 src/pages/writing/[slug].vue       |  8 +++++++-
 tailwind.config.ts                 |  2 ++
 4 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/components/content/ProseA.vue
 create mode 100644 src/components/content/ProseH2.vue

diff --git a/src/components/content/ProseA.vue b/src/components/content/ProseA.vue
new file mode 100644
index 0000000..11d62c4
--- /dev/null
+++ b/src/components/content/ProseA.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps({
+  href: {
+    type: String,
+    default: '',
+  },
+  target: {
+    type: String,
+    default: undefined,
+    required: false,
+  },
+})
+
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <NuxtLink
+    :href="href"
+    :target="target"
+    class="border-b border-zinc-200 dark:border-zinc-700/70 duration-300"
+    :class="`hover:border-${appConfig.ui.primary}-500 dark:hover:border-${appConfig.ui.primary}-500`"
+  >
+    <slot />
+  </NuxtLink>
+</template>
diff --git a/src/components/content/ProseH2.vue b/src/components/content/ProseH2.vue
new file mode 100644
index 0000000..90131de
--- /dev/null
+++ b/src/components/content/ProseH2.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && headings?.anchorLinks?.h2)
+</script>
+
+<template>
+  <h2 :id="id">
+    <a
+      v-if="id && generate"
+      :href="`#${id}`"
+      class="pl-6 border-l border-zinc-200 dark:border-zinc-700/70 duration-300"
+    >
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
+</template>
diff --git a/src/pages/writing/[slug].vue b/src/pages/writing/[slug].vue
index 769cd7e..28e5ac5 100644
--- a/src/pages/writing/[slug].vue
+++ b/src/pages/writing/[slug].vue
@@ -87,7 +87,7 @@ async function handleLike() {
             </div>
             <ClientOnly>
               <ContentRenderer
-                class="mt-12 prose dark:prose-invert max-w-none"
+                class="mt-12 prose dark:prose-invert max-w-none prose-style"
                 :class="`prose-${appConfig.ui.primary}`"
                 :value="postContent"
               />
@@ -160,3 +160,9 @@ async function handleLike() {
     </div>
   </section>
 </template>
+
+<style lang="scss">
+.prose-style {
+  @apply prose-a:no-underline
+}
+</style>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5decabd..40e0e97 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -8,6 +8,8 @@ export default {
   ],
   safelist: [
     ...Object.values(ColorsTheme).map(color => `prose-${color}`),
+    ...Object.values(ColorsTheme).map(color => `hover:border-${color}-500`),
+    ...Object.values(ColorsTheme).map(color => `dark:hover:border-${color}-500`),
   ],
   plugins: [
     typography(),