refactor: General performance/style improvements (#262)

Adam Brangenberg

2022-12-29 614a6222a1638c159d2ac9c005be5b2ddec78dd2

refactor: General performance/style improvements (#262)

 assets/js/clipboard.js

@@ -8,6 +8,7 @@
    let els = document.getElementsByClassName("highlight");
    // for each highlight
    for (let i = 0; i < els.length; i++) {
        try {
        if (els[i].getElementsByClassName("clipboard-button").length) continue;

        // find pre > code inside els[i]
@@ -19,6 +20,7 @@
        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(
@@ -36,5 +38,8 @@
        // 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,7 +1,8 @@

function addTitleToCodeBlocks() {
  var els = document.getElementsByClassName("highlight");
  for (var i = 0; i < els.length; i++) {
  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;
@@ -9,5 +10,8 @@
      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;
@@ -530,7 +530,7 @@
  & 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;

 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

@@ -53,26 +53,26 @@

  {{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  -->

 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>
<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}}