refactor: General performance/style improvements (#262)

Adam Brangenberg

2022-12-29 614a6222a1638c159d2ac9c005be5b2ddec78dd2

refactor: General performance/style improvements (#262)

 assets/js/clipboard.js

@@ -8,33 +8,38 @@
    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 @@
    .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 @@
    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 @@
      .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 @@
      .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 @@

#TableOfContents > ol {
  counter-reset: section;
  margin-left: 0em;
  margin-left: 0;
  padding-left: 1.5em;
  & > li {
    counter-increment: section;
@@ -142,7 +142,7 @@
}

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 @@
    margin-top: 2em;
    font-size: 2em;
  }
  

  & > .meta {
    margin: 0 0 1em 0;
    opacity: 0.7;
@@ -201,11 +201,11 @@

      &.broken {
        opacity: 0.5;
        background-color: transparent; 
        background-color: transparent;
      }
    }
  }
  

  & p {
    overflow-wrap: anywhere;
  }
@@ -295,7 +295,7 @@
  text-align: center;
  & ul {
    padding-left: 0;
  } 
  }
}

hr {
@@ -507,7 +507,7 @@

  & > .section {
    display: flex;
    align-items: center; 
    align-items: center;

    @media all and (max-width: 600px) {
      & .tags {
@@ -519,18 +519,18 @@
      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 @@
  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 @@
  & > p {
    margin: 0;
    padding: 0.5rem 0;
  } 
  }

  & > p, & > a {
    font-size: 1rem;

 layouts/partials/graph.html

@@ -1,4 +1,5 @@
<script
  async
  src="https://cdn.jsdelivr.net/npm/d3@6.7.0/dist/d3.min.js"
  integrity="sha256-+7jaYCp29O1JusNWHaYtgUn6EhuP0VaFuswhNV06MyI="
  crossorigin="anonymous"

 layouts/partials/head.html

@@ -52,27 +52,27 @@
  {{partial "katex.html" .}}

  {{partial "mermaid.html" .}}
    
  <script src="https://unpkg.com/@floating-ui/core@0.7.3"></script>
  <script src="https://unpkg.com/@floating-ui/dom@0.5.4"></script>

  <script async src="https://unpkg.com/@floating-ui/core@0.7.3"></script>
  <script async src="https://unpkg.com/@floating-ui/dom@0.5.4"></script>
  {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" |
  resources.Minify }}
  <script src="{{$popover.Permalink}}"></script>
  <script async src="{{$popover.Permalink}}"></script>

  <!-- Optional scripts -->
  {{ if $data.enableCodeBlockTitle | default $.Site.Data.config.enableCallouts }}
  {{ $codeTitle := resources.Get "js/code-title.js" | resources.Fingerprint "md5" | resources.Minify }}
  <script src="{{$codeTitle.Permalink}}"></script>
  <script defer src="{{$codeTitle.Permalink}}"></script>
  {{end}}

  {{ if $data.enableCodeBlockCopy | default $.Site.Data.config.enableCodeBlockCopy }}
  {{ $clipboard := resources.Get "js/clipboard.js" | resources.Fingerprint "md5" | resources.Minify }}
  <script src="{{$clipboard.Permalink}}"></script>
  <script defer src="{{$clipboard.Permalink}}"></script>
  {{ end }}

  {{ if $data.enableCallouts | default $.Site.Data.config.enableCallouts }}
  {{ $callouts := resources.Get "js/callouts.js" | resources.Fingerprint "md5" | resources.Minify }}
  <script src="{{$callouts.Permalink}}"></script>
  <script defer src="{{$callouts.Permalink}}"></script>
  {{ end }}

  <!--  Preload page vars  -->
@@ -120,7 +120,7 @@
      {{if $data.enableCallouts | default $.Site.Data.config.enableCallouts -}}
      addCollapsibleCallouts();
      {{ end }}
     

      {{if $data.enableLinkPreview | default $.Site.Data.config.enableLinkPreview}}
      initPopover(
        {{strings.TrimRight "/" .Site.BaseURL }},

 layouts/partials/katex.html

@@ -1,6 +1,14 @@
{{if $.Site.Data.config.enableLatex}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/contrib/copy-tex.min.js" integrity="sha384-ww/583aHhxWkz5DEVn6OKtNiIaLi2iBRNZXfJRiY1Ai7tnJ9UXpEsyvOITVpTl4A" crossorigin="anonymous"></script>
{{end}}
<link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'"
      integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js"
        integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx"
        crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js"
        integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR"
        crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/contrib/copy-tex.min.js"
        integrity="sha384-ww/583aHhxWkz5DEVn6OKtNiIaLi2iBRNZXfJRiY1Ai7tnJ9UXpEsyvOITVpTl4A"
        crossorigin="anonymous"></script>
{{end}}