fix: External svgs not rendering in top nav bar (#297)

assets/css/main.css

@@ -179,12 +179,7 @@ img {
   display: block;
   padding: 0 6px;
 }
-.nav-link a svg {
-  height: 20px;
-  margin: -3px auto;
-  stroke-width: 2;
-  width: 20px;
-}
+.nav-link a svg,
 .nav-item a svg {
   height: 20px;
   margin: -3px auto;

assets/js/main.js

@@ -38,6 +38,24 @@ function ready() {
     // Do the injection
     SVGInjector(svgsToInject);
 
+    const observer = new MutationObserver(() => {
+        normalizeSvgPaths();
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    function normalizeSvgPaths() {
+        document.querySelectorAll('a .svg-inject path').forEach(path => {
+            const bbox = path.getBBox();
+            const scaleX = 20 / bbox.width;
+            const scaleY = 20 / bbox.height;
+            const scale = Math.min(scaleX, scaleY);
+
+            path.setAttribute('transform', `scale(${scale}) translate(${-bbox.x}, ${-bbox.y})`);
+            path.setAttribute('fill', 'currentColor');
+        });
+    }
+
     document.getElementById('hamburger-menu-toggle').addEventListener('click', () => {
         const hamburgerMenu = document.getElementsByClassName('nav-hamburger-list')[0]
         const hamburgerMenuToggleTarget = document.getElementById("hamburger-menu-toggle-target")

exampleSite/config.toml

@@ -92,6 +92,12 @@ title = "Gokarna"
     url = "/index.xml"
     weight = 7
 
+  [[menu.main]]
+    identifier = "bluesky"
+    pre = "<img class='svg-inject' src='https://upload.wikimedia.org/wikipedia/commons/7/7a/Bluesky_Logo.svg' />"
+    url = "/index.xml"
+    weight = 8
+
 [markup]
   [markup.tableOfContents]
     startLevel = 1