refactor: General performance/style improvements (#262)

assets/js/clipboard.js

@@ -8,33 +8,38 @@ const addCopyButtons = () => {
     let els = document.getElementsByClassName("highlight");
     // for each highlight
     for (let i = 0; i < els.length; i++) {
-        if (els[i].getElementsByClassName("clipboard-button").length) continue;
+        try {
+            if (els[i].getElementsByClassName("clipboard-button").length) continue;
 
-        // find pre > code inside els[i]
-        let codeBlocks = els[i].getElementsByTagName("code");
+            // find pre > code inside els[i]
+            let codeBlocks = els[i].getElementsByTagName("code");
 
-         // line numbers are inside first code block
-        let lastCodeBlock = codeBlocks[codeBlocks.length - 1];
-        const button = document.createElement("button");
-        button.className = "clipboard-button";
-        button.type = "button";
-        button.innerHTML = svgCopy;
-        // remove every second newline from lastCodeBlock.innerText
-        button.addEventListener("click", () => {
-            navigator.clipboard.writeText(lastCodeBlock.innerText.replace(/\n\n/g, "\n")).then(
-                () => {
-                    button.blur();
-                    button.innerHTML = svgCheck;
-                    setTimeout(() => {
-                    	button.innerHTML = svgCopy
-                    	button.style.borderColor = ""
-                    }, 2000);
-                },
-                (error) => (button.innerHTML = "Error")
-            );
-        });
-        // find chroma inside els[i]
-        let chroma = els[i].getElementsByClassName("chroma")[0];
-        els[i].insertBefore(button, chroma);
+            // line numbers are inside first code block
+            let lastCodeBlock = codeBlocks[codeBlocks.length - 1];
+            const button = document.createElement("button");
+            button.className = "clipboard-button";
+            button.type = "button";
+            button.innerHTML = svgCopy;
+            button.ariaLabel = "opy the shown code";
+            // remove every second newline from lastCodeBlock.innerText
+            button.addEventListener("click", () => {
+                navigator.clipboard.writeText(lastCodeBlock.innerText.replace(/\n\n/g, "\n")).then(
+                  () => {
+                      button.blur();
+                      button.innerHTML = svgCheck;
+                      setTimeout(() => {
+                          button.innerHTML = svgCopy
+                          button.style.borderColor = ""
+                      }, 2000);
+                  },
+                  (error) => (button.innerHTML = "Error")
+                );
+            });
+            // find chroma inside els[i]
+            let chroma = els[i].getElementsByClassName("chroma")[0];
+            els[i].insertBefore(button, chroma);
+        } catch(error) {
+            console.debug(error);
+        }
     }
 }

assets/js/code-title.js

@@ -1,13 +1,17 @@
 
 function addTitleToCodeBlocks() {
-  var els = document.getElementsByClassName("highlight");
-  for (var i = 0; i < els.length; i++) {
-    if (els[i].title.length) {
-      let div = document.createElement("div");
-      if (els[i].getElementsByClassName("code-title").length) continue;
-      div.textContent=els[i].title;
-      div.classList.add("code-title")
-      els[i].insertBefore(div, els[i].firstChild);
+  const els = document.getElementsByClassName("highlight");
+  for (let i = 0; i < els.length; i++) {
+    try {
+      if (els[i].title.length) {
+        let div = document.createElement("div");
+        if (els[i].getElementsByClassName("code-title").length) continue;
+        div.textContent = els[i].title;
+        div.classList.add("code-title")
+        els[i].insertBefore(div, els[i].firstChild);
+      }
+    } catch (error) {
+      console.debug(error);
     }
   }
-};
+}

assets/js/full-text-search.js

@@ -35,7 +35,7 @@
   })
 
   registerHandlers((e) => {
-    term = e.target.value
+    const term = e.target.value
     const searchResults = contentIndex.search(term, [
       {
         field: "content",

assets/js/graph.js

@@ -113,7 +113,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
     .append("svg")
     .attr("width", width)
     .attr("height", height)
-    .attr('viewBox', [-width / 2 * 1 / scale, -height / 2 * 1 / scale, width * 1 / scale, height * 1 / scale])
+    .attr('viewBox', [-width / 2 / scale, -height / 2 / scale, width / scale, height / scale])
 
   if (enableLegend) {
     const legend = [{ Current: "var(--g-node-active)" }, { Note: "var(--g-node)" }, ...pathColors]

assets/js/popover.js

@@ -12,7 +12,7 @@ function initPopover(baseURL, useContextualBacklinks) {
     links
       .filter(li => li.dataset.src || (li.dataset.idx && useContextualBacklinks))
       .forEach(li => {
-        var el
+        let el
         if (li.dataset.ctx) {
           const linkDest = content[li.dataset.src]
           const popoverElement = `<div class="popover">

assets/js/util.js

@@ -40,8 +40,8 @@ const removeMarkdown = (
       .replace(/^\s{0,3}>\s?/g, "")
       .replace(/(^|\n)\s{0,3}>\s?/g, "\n\n")
       .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, "")
-      .replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, "$2")
-      .replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, "$2")
+      .replace(/([\*_]{1,3})(\S.*?\S?)\1/g, "$2")
+      .replace(/([\*_]{1,3})(\S.*?\S?)\1/g, "$2")
       .replace(/(`{3,})(.*?)\1/gm, "$2")
       .replace(/`(.+?)`/g, "$1")
       .replace(/\n{2,}/g, "\n\n")
@@ -65,7 +65,7 @@ const highlight = (content, term) => {
       .split(" ")
       .slice(0, h)
     return (
-      (before.length == h ? `...${before.join(" ")}` : before.join(" ")) +
+      (before.length === h ? `...${before.join(" ")}` : before.join(" ")) +
       `<span class="search-highlight">${term}</span>` +
       after.join(" ")
     )

assets/styles/base.scss

@@ -89,7 +89,7 @@ tbody, li, p {
 
 #TableOfContents > ol {
   counter-reset: section;
-  margin-left: 0em;
+  margin-left: 0;
   padding-left: 1.5em;
   & > li {
     counter-increment: section;
@@ -142,7 +142,7 @@ sup {
 }
 
 blockquote {
-  margin-left: 0em;
+  margin-left: 0;
   border-left: 3px solid var(--secondary);
   padding-left: 1em;
   transition: border-color 0.2s ease;
@@ -183,7 +183,7 @@ article {
     margin-top: 2em;
     font-size: 2em;
   }
-  
+
   & > .meta {
     margin: 0 0 1em 0;
     opacity: 0.7;
@@ -201,11 +201,11 @@ article {
 
       &.broken {
         opacity: 0.5;
-        background-color: transparent; 
+        background-color: transparent;
       }
     }
   }
-  
+
   & p {
     overflow-wrap: anywhere;
   }
@@ -295,7 +295,7 @@ footer {
   text-align: center;
   & ul {
     padding-left: 0;
-  } 
+  }
 }
 
 hr {
@@ -507,7 +507,7 @@ header {
 
   & > .section {
     display: flex;
-    align-items: center; 
+    align-items: center;
 
     @media all and (max-width: 600px) {
       & .tags {
@@ -519,18 +519,18 @@ header {
       font-weight: 700;
       margin: 0;
     }
-    
+
     & p {
       margin: 0;
       padding-right: 1em;
-      flex-basis: 6em; 
+      flex-basis: 6em;
     }
   }
 
   & h3 {
     opacity: 1;
     font-weight: 700;
-    margin: 0em;
+    margin: 0;
   }
 
   & .meta {
@@ -568,7 +568,7 @@ header {
   transition: opacity 0.2s ease, transform 0.2s ease;
   user-select: none;
   overflow-wrap: anywhere;
-  box-shadow: 6px 6px 36px 0px rgba(0,0,0,0.25);
+  box-shadow: 6px 6px 36px 0 rgba(0,0,0,0.25);
 
   @media all and (max-width: 600px) {
     display: none !important;
@@ -596,7 +596,7 @@ header {
   & > p {
     margin: 0;
     padding: 0.5rem 0;
-  } 
+  }
 
   & > p, & > a {
     font-size: 1rem;