@Kevin I am using this thread here for further discussion since my current topic is closely related to h2-sections.
I am using scrollnav.com in order to create a Table of Content (ToC). Scrollnav adds the id to each <h2> unless it already exists.
Since the Koenig html renderer already applys this functionality, scrollnav does not need to add further ids.
However, my content is written in German and therefore we take usage of the so-called “Umlaute”. More specifically, our authors use characters such as “ä”, “ö” or “ü” for their headlines.
As a result <h2>Was bedeutet VPN überhaupt</h2> becomes <h2 id="was-bedeutet-vpn-%C3%BCberhaupt">Was bedeutet VPN überhaupt</h2>.
This situation now produces in combination with scrollnav.js the following errors:
Uncaught DOMException: Failed to execute 'querySelector' on 'Document':
Actually, the solution would not be too difficult, I guess. We would need to modify your mobiledoc-html-renderer.js in the slugify() function. In concrete:
const slugify = function (inputString, {ghostVersion = '4.0'} = {}) {
const version = semver.coerce(ghostVersion);
if (semver.satisfies(version, '<4.x')) {
// backwards compatible slugs used in Ghost 2.x to 3.x mobiledoc
return inputString.replace(/[<>&"?]/g, '')
.trim()
.replace(/[^\w]/g, '-')
.replace(/-{2,}/g, '-')
.toLowerCase();
} else {
// news slugs introduced in 4.0
// allows all chars except symbols but will urlEncode everything
// produces %-encoded chars in src but browsers show real chars in status bar and url bar
return encodeURIComponent(inputString.trim()
.toLowerCase()
.replace(/[\][!"#$%&'()*+,./:;<=>?@\\^_{|}~]/g, '')
.replace(/\s+/g, '-')
.replace(/^-|-{2,}|-$/g, '')
.replace(/\u00e4/g, "ae")
.replace(/\u00fc/g, "ue")
.replace(/\u00f6/g, "oe")
);
}
};
Since I think this is the solution, there are several opportunities.
First, we could adjust the code in Github.
Second, I could adjust the code for my setup which would be my desired solution. However, I was not able finding the package in node_modules.
Could you help me out for this specific case and tell me where I can make the concrete adjustments?
Best regards
