chore: outline svg border for header (#319)

* chore: svg border

* chore: update for nav-link

Author: yashmehrotra

assets/js/main.js

@@ -3,11 +3,11 @@ document.addEventListener('DOMContentLoaded', ready, false);
 const THEME_PREF_STORAGE_KEY = "theme-preference";
 const THEME_TO_ICON_CLASS = {
     'dark': 'feather-moon',
-    'light':'feather-sun'
+    'light': 'feather-sun'
 };
 const THEME_TO_ICON_TEXT_CLASS = {
     'dark': 'Dark mode',
-    'light':'Light mode'
+    'light': 'Light mode'
 };
 let toggleIcon = '';
 let darkThemeCss = '';
@@ -24,7 +24,7 @@ function ready() {
     setThemeByUserPref();
 
     if (document.querySelector('main#content > .container') !== null &&
-            document.querySelector('main#content > .container').classList.contains('post')) {
+        document.querySelector('main#content > .container').classList.contains('post')) {
         if (document.getElementById('TableOfContents') !== null) {
             fixTocItemsIndent();
             createScrollSpy();
@@ -38,6 +38,26 @@ function ready() {
     // Do the injection
     SVGInjector(svgsToInject);
 
+    const observer = new MutationObserver(() => {
+        normalizeSvgPaths();
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    function normalizeSvgPaths() {
+        document.querySelectorAll('.nav-link a .svg-inject').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('stroke', 'currentColor');
+            path.setAttribute('stroke-width', '1');
+            path.setAttribute('fill', 'transparent');
+        });
+    }
+
     document.getElementById('hamburger-menu-toggle').addEventListener('click', () => {
         const hamburgerMenu = document.getElementsByClassName('nav-hamburger-list')[0]
         const hamburgerMenuToggleTarget = document.getElementById("hamburger-menu-toggle-target")
@@ -62,22 +82,22 @@ window.addEventListener('scroll', () => {
 
 function fixTocItemsIndent() {
     document.querySelectorAll('#TableOfContents a').forEach($tocItem => {
-      const itemId = $tocItem.getAttribute("href").substring(1)
-      $tocItem.classList.add(HEADING_TO_TOC_CLASS[document.getElementById(itemId).tagName]);
+        const itemId = $tocItem.getAttribute("href").substring(1)
+        $tocItem.classList.add(HEADING_TO_TOC_CLASS[document.getElementById(itemId).tagName]);
     });
 }
 
 function createScrollSpy() {
     var elements = document.querySelectorAll('#toc a');
-    document.addEventListener('scroll', function () {
-        elements.forEach(function (element) {
-          const boundingRect = document.getElementById(element.getAttribute('href').substring(1)).getBoundingClientRect();
-          if (boundingRect.top <= 55 && boundingRect.bottom >= 0) {
-            elements.forEach(function (elem) {
-              elem.classList.remove('active');
-            });
-            element.classList.add('active');
-          }
+    document.addEventListener('scroll', function() {
+        elements.forEach(function(element) {
+            const boundingRect = document.getElementById(element.getAttribute('href').substring(1)).getBoundingClientRect();
+            if (boundingRect.top <= 55 && boundingRect.bottom >= 0) {
+                elements.forEach(function(elem) {
+                    elem.classList.remove('active');
+                });
+                element.classList.add('active');
+            }
         });
     });
 }
@@ -97,10 +117,10 @@ function toggleHeaderShadow(scrollY) {
 function setThemeByUserPref() {
     darkThemeCss = document.getElementById("dark-theme");
     const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) ||
-        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light');
+        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
     const darkThemeToggles = document.querySelectorAll('.dark-theme-toggle');
     setTheme(savedTheme, darkThemeToggles);
-    darkThemeToggles.forEach(el => el.addEventListener('click', toggleTheme, {capture: true}))
+    darkThemeToggles.forEach(el => el.addEventListener('click', toggleTheme, { capture: true }))
 }
 
 function toggleTheme(event) {