Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

H2 anchors generated incorrectly if content generated dynamically #3133

Open
4 tasks done
vincesp opened this issue Oct 24, 2023 · 3 comments · May be fixed by #3151
Open
4 tasks done

H2 anchors generated incorrectly if content generated dynamically #3133

vincesp opened this issue Oct 24, 2023 · 3 comments · May be fixed by #3151
Labels
bug: pending triage Maybe a bug, waiting for confirmation stale

Comments

@vincesp
Copy link

vincesp commented Oct 24, 2023 •
edited

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
@vincesp vincesp added the bug: pending triage Maybe a bug, waiting for confirmation label Oct 24, 2023
@brc-dd
Copy link
Member

brc-dd commented Oct 24, 2023

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
Copy link
Author

vincesp commented Oct 27, 2023

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
Copy link
Collaborator

We use this script to check anchors are valid:

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

@userquin userquin linked a pull request Oct 28, 2023 that will close this issue
Draft
@github-actions github-actions bot added the stale label Dec 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug: pending triage Maybe a bug, waiting for confirmation stale
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(node): add duplicated ids and bad anchor links detection vuejs/vitepress
3 participants
@vincesp @userquin @brc-dd