Update prose components for content

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>

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>

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>

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(),