Automatic anchor generation from titles: hrefs will not work with non-english (latin) characters

bcs-gbl commented 3 years ago

Version

@nuxt/content: v1.11.1 nuxt: v2.14.12 Firefox Developer edition 87.0b9 (64 bit)

Reproduction Link

(none, but every install of this package got this problem)

Steps to reproduce

Add a file for example: /content/something.md with this content: # Bevezetés
Nuxt/content will generate an anchor with special latin chars: #bevezetés
The link, to this anchor will not work on Firefox, only if you click two times on the link: because of the "é" latin char. (or any other: áéóöőúüű)

What is Expected?

The URLs must be not contains special chars, only basic latin alphabetical ones. See the RFC about URIs: https://tools.ietf.org/html/rfc3986#section-1.2

What is actually happening?

Nuxt/content will generate special chararters to the "fragment", that will cause navigtion problems (two click on Firefox, or scrolling animation errors, and others).

Fix:

The fragment generation must use a typical i18n slug generation code, fox example replaces: é->e , ö->o , ä -> a, and so on. An anchor with special latin chars: becomes #bevezetés" -> #bevezetes"

sp0ken commented 3 years ago

Same bug here on the latest version (1.14). It's also present in Chrome as well.

ManasMadrecha commented 3 years ago

Maybe the issue lies not with Nuxt Content, but with the remark plugin of slug which Nuxt Content modules uses in the background. 🤔

ManasMadrecha commented 3 years ago

@bcs-gbl

For temporary workaround, you may add custom heading ID to your non-Latin headings using https://github.com/imcuttle/remark-heading-id

But I don't think having non-Latin letters in URL makes any difference, for e.g., most prominent example is Wikipedia which uses Devanagari characters in URL for Hindi pages.

thomasbnt commented 1 year ago

Hello, sorry to dig up this issue, has it been resolved? I don't see a way out of this concern except to replace with IDs, except that I would like to preserve the fact that in the URL you see the targeted section. 🤔

Edit : In my ToC, I edited to no encoding the link.

<ul class="toc">
    <li
      v-for="link of post.toc"
      :key="link.id"
      :class="{ 'toc2': link.depth === 2, 'toc3': link.depth === 3 }">
+      <a :href="'#' + link.id">{{ link.text }}</a>
-      <!--<NuxtLink :to="`#${link.id}`">{{ link.text }}</NuxtLink>-->
    </li>
  </ul>

nuxt / content