Some header permalinks do not work

[the-blank-x]

Examples

• https://genderdysphoria.fyi/en/ (table of contents header has ID table-of-contents:, while the permalink points to #table-of-contents)
• https://genderdysphoria.fyi/en/social-dysphoria (one of us header has ID “one-of-us!”, while the permalink points to #one-of-us)

Additional information

Here, the link that the anchor points to is specifically set, instead of the ID of the header tag that it links to.

GenderDysphoria.fyi/build/engines.js

Lines 46 to 52 in 7bf1990

	.use(mAnchor, {
	permalink: mAnchor.permalink.linkInsideHeader({
	class: 'header-link',
	symbol: '<img src="/images/svg/paragraph.svg">',
	renderHref: (input) => '#' + slugify(decodeURIComponent(input)),
	ariaHidden: true,
	}),

A more proper solution (and thus fix) is to set the slugify parameter, as shown:

    .use(mAnchor, {
      slugify,
      permalink: mAnchor.permalink.linkInsideHeader({
        class: 'header-link',
        symbol: '<img src="/images/svg/paragraph.svg">',
        ariaHidden: true,
      }),
    })

I am slightly reluctant to make a pull request since I don't know why there is decodeURIComponent(input), hence this issue.

[Twipped]

Hmm. The decode uri was added to address a similar issue, but I don't remember specifically which headers were causing the problem. See commit d542e8b

[the-blank-x]

It seems like the default slugify function converts strings like "Thinner & Softer Fingernails" to "thinner-%26-softer-fingernails", which, when called with the custom slugify function, turns into "thinner-26-softer-fingernails". The call to decodeURIComponent is probably used to convert "thinner-%26-softer-fingernails" to "thinner-&-softer-fingernails", which becomes slugified into "thinner-softer-fingernails", making the URL nicer. ...but this doesn't change the ID for the header, which is still "thinner-%26-softer-fingernails", not "thinner-softer-fingernails".