From d94033a514047170e97f66ef461c485e4b16574e Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sun, 30 Jun 2024 01:25:46 +0200
Subject: [PATCH] Working on blog post

---
 app/components/content/ProseH2.vue | 23 +++++++++++++++++++++++
 app/components/content/ProseH3.vue |  5 +++++
 app/components/content/ProseP.vue  |  5 +++++
 app/pages/writings/[slug].vue      |  2 +-
 4 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 app/components/content/ProseH2.vue
 create mode 100644 app/components/content/ProseH3.vue
 create mode 100644 app/components/content/ProseP.vue

diff --git a/app/components/content/ProseH2.vue b/app/components/content/ProseH2.vue
new file mode 100644
index 0000000..3fe8c07
--- /dev/null
+++ b/app/components/content/ProseH2.vue
@@ -0,0 +1,23 @@
+<template>
+  <h2
+    :id="id"
+  >
+    <a
+      v-if="id && generate"
+      :href="`#${id}`"
+      class="font-semibold border-transparent border-b-2 hover:border-black dark:hover:border-white duration-300"
+    >
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
+</template>
+
+<script lang="ts" setup>
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
+</script>
diff --git a/app/components/content/ProseH3.vue b/app/components/content/ProseH3.vue
new file mode 100644
index 0000000..0fc4c24
--- /dev/null
+++ b/app/components/content/ProseH3.vue
@@ -0,0 +1,5 @@
+<template>
+  <h3 class="text-base text-neutral-700 dark:text-neutral-300">
+    <slot />
+  </h3>
+</template>
diff --git a/app/components/content/ProseP.vue b/app/components/content/ProseP.vue
new file mode 100644
index 0000000..52e9e2a
--- /dev/null
+++ b/app/components/content/ProseP.vue
@@ -0,0 +1,5 @@
+<template>
+  <p class="text-neutral-700 dark:text-neutral-300">
+    <slot />
+  </p>
+</template>
diff --git a/app/pages/writings/[slug].vue b/app/pages/writings/[slug].vue
index c48f121..25ae4f3 100644
--- a/app/pages/writings/[slug].vue
+++ b/app/pages/writings/[slug].vue
@@ -24,7 +24,7 @@ useHead({
   <main v-if="post">
     <div class="flex">
       <NuxtLink
-        class="flex items-center gap-2 mb-4 group text-sm hover:text-black dark:hover:text-white duration-300"
+        class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
         to="/writings"
       >
         <UIcon