Extract shared ProseHeading component from prose h2/h3 overrides

Move the heading markup, anchor glyph, and accessibility attributes
into a generic ProseHeading component that accepts an `as` prop
(h1–h6) and an optional `glyph` prop (defaults to `#`).

ProseH2 and ProseH3 become thin wrappers delegating to ProseHeading.
Shared ProseHeadingProps interface lives in utils/ for auto-import.

Signed-off-by: Alejandro Mery <amery@apptly.co>
Signed-off-by: Claude <noreply@anthropic.com>

Author: claude

app/components/content/prose-h2.vue

@@ -1,22 +1,14 @@
 <script setup lang="ts">
-/** Prose h2 override — plain heading with hover-visible `#` anchor glyph. */
-const props = defineProps<{
-  /** Heading anchor ID, used for the `id` attribute and `#` permalink. */
-  id?: string
-}>();
+/** Prose h2 override — delegates to ProseHeading with anchor glyph. */
+const props = defineProps<ProseHeadingProps>();
 </script>
 
 <template>
-  <h2
-    :id="id"
-    class="group"
+  <ProseHeading
+    :id="props.id"
+    :glyph="props.glyph"
+    as="h2"
   >
     <slot />
-    <a
-      v-if="props.id"
-      :href="`#${props.id}`"
-      class="ml-2 no-underline text-gray-300 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 hover:text-gray-500"
-      aria-label="Permalink to this section"
-    >#</a>
-  </h2>
+  </ProseHeading>
 </template>

app/components/content/prose-h3.vue

@@ -1,22 +1,14 @@
 <script setup lang="ts">
-/** Prose h3 override — plain heading with hover-visible `#` anchor glyph. */
-const props = defineProps<{
-  /** Heading anchor ID, used for the `id` attribute and `#` permalink. */
-  id?: string
-}>();
+/** Prose h3 override — delegates to ProseHeading with anchor glyph. */
+const props = defineProps<ProseHeadingProps>();
 </script>
 
 <template>
-  <h3
-    :id="id"
-    class="group"
+  <ProseHeading
+    :id="props.id"
+    :glyph="props.glyph"
+    as="h3"
   >
     <slot />
-    <a
-      v-if="props.id"
-      :href="`#${props.id}`"
-      class="ml-2 no-underline text-gray-300 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 hover:text-gray-500"
-      aria-label="Permalink to this section"
-    >#</a>
-  </h3>
+  </ProseHeading>
 </template>

app/components/content/prose-heading.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+/** Generic prose heading with hover-visible anchor glyph. */
+const props = withDefaults(defineProps<ProseHeadingProps & {
+  /** HTML heading element to render. */
+  as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}>(), {
+  glyph: '#',
+});
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :id="props.id"
+    class="group"
+  >
+    <slot />
+    <a
+      v-if="props.id"
+      :href="`#${props.id}`"
+      class="ml-2 no-underline text-gray-300 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 hover:text-gray-500"
+      aria-label="Permalink to this section"
+    >{{ props.glyph }}</a>
+  </component>
+</template>

app/utils/index.ts

@@ -1,6 +1,14 @@
 // Virtual slug for the "Other" group (projects not under any umbrella).
 export const OTHER_SLUG = '_';
 
+/** Shared props for prose heading overrides. */
+export interface ProseHeadingProps {
+  /** Heading anchor ID, used for the `id` attribute and `#` permalink. */
+  id?: string
+  /** Anchor glyph shown on hover. */
+  glyph?: string
+}
+
 /**
  * Type-safe Array.includes that accepts a wider search value.
  *