use markdown-it-replace-link

to convert relative .md extension to .html extension

website/.eleventy.js

@@ -18,19 +18,47 @@ module.exports = function (eleventyConfig) {
 
   const markdownIt = require("markdown-it");
   const markdownItAnchor = require("markdown-it-anchor");
+  const markdownItReplaceLink = require('markdown-it-replace-link');
   const slugify = require("slugify");
 
   const markdownLib = markdownIt({
     html: true,
     breaks: true,
-    linkify: true
+    linkify: true,
+    replaceLink: function (link, env) {
+      const dotSepList = link.split(".");
+      if (dotSepList[0] == "") {
+        const hashSepList = dotSepList[dotSepList.length - 1].split("#")
+        if (hashSepList[0] == "md") {
+          let str = `.${dotSepList[1]}`;
+          for (let i = 2; i < dotSepList.length; i++) {
+            if (dotSepList[i].substring(0, 2) != "md") {
+              str += "." + dotSepList[i];
+            } else {
+              str += ".html";
+              break;
+            };
+          }
+          if (hashSepList[1]) {
+            str += "#" + hashSepList[1];
+          }
+          return str;
+        }
+        else {
+          return link;
+        }
+      }
+      else {
+        return link;
+      }
+    }
   }).use(markdownItAnchor, {
     slugify: (str) =>
       slugify(str, {
         lower: true,
         strict: true,
       })
-  });
+  }).use(markdownItReplaceLink);
 
   // replace the default markdown-it instance
   eleventyConfig.setLibrary("md", markdownLib);

website/package.json

@@ -19,5 +19,8 @@
     "markdown-it-anchor": "^8.6.4",
     "slugify": "^1.6.5",
     "tailwindcss": "^3.0.24"
+  },
+  "dependencies": {
+    "markdown-it-replace-link": "^1.1.0"
   }
 }

website/src/_includes/layouts/article.html

@@ -19,8 +19,6 @@
     <div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20">{{ content | safe }}</div>
   </section>
   {% include "footer.html" %}
-
-  <script src="/js/article.js"></script>
 </body>
 
 </html>

website/src/js/article.js

@@ -1,22 +0,0 @@
-// Convert relative blog extension (from .md to .html)
-document.querySelectorAll("a").forEach((a) => {
-    const dotSepList = a.getAttribute("href").split(".");
-    if (dotSepList[0] == "") {
-        const hashSepList = dotSepList[dotSepList.length - 1].split("#")
-        if (hashSepList[0] == "md") {
-            let str = `.${dotSepList[1]}`;
-            for (let i = 2; i < dotSepList.length; i++) {
-                if (dotSepList[i].substring(0, 2) != "md") {
-                    str += "." + dotSepList[i];
-                } else {
-                    str += ".html";
-                    break;
-                };
-            }
-            if (hashSepList[1]) {
-                str += "#" + hashSepList[1];
-            }
-            a.setAttribute("href", str);
-        }
-    }
-});