From b813634da065b05f7c06a02d77378f5a93b0460b Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Mon, 10 Jun 2024 17:29:14 +0800
Subject: [PATCH] Set slugified title as the default ID of manual heading
 anchor

---
 eleventy.config.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/eleventy.config.js b/eleventy.config.js
index 7653a3f2..96bf974b 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -4,6 +4,8 @@ const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 const metagen = require('eleventy-plugin-metagen');
 const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime");
 
+const slugify = require("slugify");
+
 module.exports = function (eleventyConfig) {
     // Copy files
     eleventyConfig.addPassthroughCopy("./src/assets/");
@@ -62,7 +64,7 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addShortcode('cite', (str) => `<cite>${str}</cite>`);
 
     // Paired shortcode: Manual heading anchor
-    eleventyConfig.addPairedShortcode('headingAnchor', (title, hLevel, id) => {
+    eleventyConfig.addPairedShortcode('headingAnchor', (title, hLevel, id=slugify(title)) => {
         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>