H2 anchors generated incorrectly if content generated dynamically

[vincesp]

Describe the bug

Generating the page structure from data is incorrect if the level of h2 headers has to be generated:

<script setup>
const repos = [
  { name: 'Client' },
  { name: 'Server' },
  { name: 'Socket' }
]
</script>

# Repositories

<template v-for="repo in repos">

## {{ repo.name }}

</template>

Resulting HTML uses the wrong id for all h2 elements. Instead of deriving the anchor id from the rendered text, the JavaScript expression repo-name is used:

<div>
  <h1 id="repositories" tabindex="-1">Repositories <a class="header-anchor" href="#repositories"
      aria-label="Permalink to &quot;Repositories&quot;">​</a></h1>
  <h2 id="repo-name" tabindex="-1">Client <a class="header-anchor" href="#repo-name"
      aria-label="Permalink to &quot;{{ repo.name }}&quot;">​</a></h2>
  <h2 id="repo-name" tabindex="-1">Server <a class="header-anchor" href="#repo-name"
      aria-label="Permalink to &quot;{{ repo.name }}&quot;">​</a></h2>
  <h2 id="repo-name" tabindex="-1">Socket <a class="header-anchor" href="#repo-name"
      aria-label="Permalink to &quot;{{ repo.name }}&quot;">​</a></h2>
</div>

This also seems to cause problems with hydration, probably because the ids are not unique.

Reproduction

See https://stackblitz.com/edit/vite-avxyva?file=docs%2Fexample.md

Expected behavior

The 'id' for each 'h2' element is generated properly from the actual text content:

<div>
  <h1 id="repositories" tabindex="-1">Repositories <a class="header-anchor" href="#repositories"
      aria-label="Permalink to &quot;Repositories&quot;">​</a></h1>
  <h2 id="client" tabindex="-1">Client <a class="header-anchor" href="#client"
      aria-label="Permalink to &quot;Client&quot;">​</a></h2>
  <h2 id="server" tabindex="-1">Server <a class="header-anchor" href="#server"
      aria-label="Permalink to &quot;Server&quot;">​</a></h2>
  <h2 id="socket" tabindex="-1">Socket <a class="header-anchor" href="#socket"
      aria-label="Permalink to &quot;Socket&quot;">​</a></h2>
</div>

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Xeon(R) W-11955M CPU @ 2.60GHz
    Memory: 10.40 GB / 31.73 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20231008.002904.0 - C:\ProgramData\chocolatey\bin\watchman.EXE
  Browsers:
    Edge: Spartan (44.19041.3570.0), Chromium (118.0.2088.61)
    Internet Explorer: 11.0.19041.3570
  npmPackages:
    vitepress: ^1.0.0-rc.24 => 1.0.0-rc.24

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Inferring IDs from dynamic content is not possible while converting markdown to vue. You'll need to do something like #960 (comment) (update it to add aria-label, etc.)

[vincesp]

If it is not possible, then maybe it would be helpful to print a warning during build that it is not possible. The resulting page does not work properly due to problems with hydration. Would be great to catch that during build.

[userquin]

We use this script to check anchors are valid:

• https://github.com/iconify/website/blob/main/scripts/validate-links.mjs
• https://github.com/iconify/website/blob/main/package.json#L15

We also use this md plugin, but I don't remember if it is about this issue: https://github.com/iconify/website/blob/main/.vitepress/markdown/html.ts