Links inside headings (v2)

[adinvadim]

Hi!

I have issue, that sometimes I need this headings:

##  [Some text](/some-URL)

And this would generate broken HTML code: h2 > a > a

Anybody has a solution for a custom ProseH* component, that will consider the case of including a link and the common case.

[adinvadim]

This is my current solution

const { page } = useContent();
const disableHeadingLink = page.value.disableHeadingLink || false;

<template>
  <h2 :id="id">
    <a v-if="id && generate && !disableHeadingLink" :href="`#${id}`">
      <slot />
    </a>
    <slot v-else />
  </h2>
</template>

<script setup lang="ts">
defineProps<{ id?: string }>();
const heading = 2;
const { anchorLinks } = useRuntimeConfig().public.content;
const generate =
  anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading);

const { page } = useContent();
const disableHeadingLink = page.value.disableHeadingLink || false;
</script>

[nobkd]

You can use the MDC syntax for the headings with external link and provide a custom prop.

My code example for the component would be this:

<!-- components/content/ProseH2.vue -->
<template>
  <h2 :id="id">
    <a v-if="link" :href="link">
      <slot />
    </a>
    <a v-else-if="id && generate" :href="`#${id}`">
      <slot />
    </a>
    <slot v-else />
  </h2>
</template>

<script setup lang="ts">
import { useRuntimeConfig } from '#imports';
defineProps<{ id?: string; link?: string }>();
const heading = 2;
const { anchorLinks } = useRuntimeConfig().public.content;
const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading);
</script>

It adds a prop link that can be of string type or undefined.
If it is defined, the v-if is taken and uses the link provided through the slot to render the link.
If link is undefined, it uses the previous way and generates an anchor link to the current heading (if there is an ID and the generation is turned on).

Here is an example with MDC syntax that shows how you could use it (anchor IDs are still added to the h2).

::h2{link="https://your.url"}
hello
::

This is the MDC syntax without the link prop, which should act exactly like before (by linking to the ID)

::h2
hello
::

---

You can check it out on Stackblitz:
https://stackblitz.com/edit/github-cd4agm?file=components%2Fcontent%2FProseH2.vue,content%2Findex.md

[nobkd]

@adinvadim
I have updated my comment to provide a code example. I hope it helps.