Add manual heading anchor paired shortcode

eleventy.config.js

@@ -61,6 +61,14 @@ module.exports = function (eleventyConfig) {
     // Shortcode: <cite> tag
     eleventyConfig.addShortcode('cite', (str) => `<cite>${str}</cite>`);
 
+    // Paired shortcode: Manual heading anchor
+    eleventyConfig.addPairedShortcode('headingAnchor', (title, hLevel, id) => {
+        return `<div class="heading-wrapper h${hLevel}">
+            <h${hLevel} id="${id}">${title}</h2>
+            <a class="heading-anchor" href="#${id}" aria-labelledby="${id}"><span hidden="">#</span></a>
+        </div>`;
+    });
+
     return {
         dir: {
             input: "src"

src/_includes/main/changelogs-list.njk

@@ -1,7 +1,7 @@
 {% for log in changelogList | reverse %}
-    <div class="heading-wrapper h2">
+    {% headingAnchor 2, log.fileSlug %}
-        <h2 id="{{ log.fileSlug }}">{{ log.date | formatDate }}</h2>
+        {{ log.date | formatDate }}
-        <a class="heading-anchor" href="#{{ log.fileSlug }}" aria-labelledby="{{ log.fileSlug }}"><span hidden="">#</span></a>
+    {% endheadingAnchor %}
-    </div>
+
     {{ log.templateContent | safe }}
 {%- endfor %}