ID generation with umlauts lead to bad links in table of contents

Version

@nuxt/content: v1.11.1 nuxt: v2.14.12

Reproduction Link

https://codesandbox.io/s/jovial-cray-sphhr?file=/content/index.md:55-119

Steps to reproduce

On the index page, you can not follow the h2 anchor with the umlauts “Ü”.

What is Expected?

The anchor should be reachable.

What is actually happening?

The TOC-example snippet is correct, it encodes the anchor link to https://sphhr.sse.codesandbox.io/#über-uns---does-not-work

The output produced by <nuxt-content /> creates an ID to follow that is not escaped: id="über-uns---does-not-work".

There are two approaches:

a) Avoid URL escaping in the TOC snippet with <a :href="#${link.id}">{{ link.text }}</a> instead.

b) Strip all non-standard characters from TOC and ID generation.

Sadly even Github has its problem with the same topic: https://github.com/adrianrudnik/md-umlauts-test

Clicking the anchor icon in front produces #über-uns---does-not-work, right clicking the anchor icon > copy link will produce #%C3%BCber-uns---does-not-work, so no guidance there.

[wirk]

I just ran into this issue as well and created a small hacky fix to throw into your _slug.vue till this gets properly fixed.

import {slugify} from 'transliteration'

function fixIds(elements = []) {
  const slugifyOptions = {replace: {ü: 'ue', ä: 'ae', ö: 'oe', ß: 'ss'}}
  elements.forEach((el) => {
    if (el.props && el.props.id) {
      el.props.id = slugify(el.props.id, slugifyOptions)
    }
    if (el.id) {
      el.id = slugify(el.id, slugifyOptions)
    }
    if (el.children) {
      fixIds(el.children)
    }
  })
}

export default {
  async asyncData({$content, params}) {
    const article = await $content('articles', params.slug).fetch()
    fixIds(article.body.children)
    fixIds(article.toc)

    return {article}
  },
...

[deraw]

Hi,

I also ran into this issue and I completed @wirk’s solution to also slugify anchors:

import slugify from 'slugify';

interface Element {
	id?: string;
	props?: {
		[key: string]: string;
	};
	children?: Element[];
}

/** @see https://github.com/nuxt/content/issues/702 */
export function slugifyAnchors(elements: Element[] = []): void {
	elements.forEach((el) => {
		if (el.props?.id) {
			el.props.id = slugify(el.props.id);
		}

		if (el.props?.href) {
			const URI = decodeURI(el.props.href);

			const httpScheme = URI.startsWith('http://');
			const httpsScheme = URI.startsWith('https://');
			const isExternalURI = httpScheme || httpsScheme;

			const href = isExternalURI ? URI : '#' + slugify(URI);

			el.props.href = href;
		}

		if (el.id) {
			el.id = slugify(el.id);
		}

		if (el.children) {
			slugifyAnchors(el.children);
		}
	});
}

(Updated to allow external links)