refactor: General performance/style improvements (#262)
This commit is contained in:
		
							parent
							
								
									dc43737896
								
							
						
					
					
						commit
						614a6222a1
					
				
					 10 changed files with 84 additions and 66 deletions
				
			
		| 
						 | 
					@ -8,6 +8,7 @@ const addCopyButtons = () => {
 | 
				
			||||||
    let els = document.getElementsByClassName("highlight");
 | 
					    let els = document.getElementsByClassName("highlight");
 | 
				
			||||||
    // for each highlight
 | 
					    // for each highlight
 | 
				
			||||||
    for (let i = 0; i < els.length; i++) {
 | 
					    for (let i = 0; i < els.length; i++) {
 | 
				
			||||||
 | 
					        try {
 | 
				
			||||||
            if (els[i].getElementsByClassName("clipboard-button").length) continue;
 | 
					            if (els[i].getElementsByClassName("clipboard-button").length) continue;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            // find pre > code inside els[i]
 | 
					            // find pre > code inside els[i]
 | 
				
			||||||
| 
						 | 
					@ -19,6 +20,7 @@ const addCopyButtons = () => {
 | 
				
			||||||
            button.className = "clipboard-button";
 | 
					            button.className = "clipboard-button";
 | 
				
			||||||
            button.type = "button";
 | 
					            button.type = "button";
 | 
				
			||||||
            button.innerHTML = svgCopy;
 | 
					            button.innerHTML = svgCopy;
 | 
				
			||||||
 | 
					            button.ariaLabel = "opy the shown code";
 | 
				
			||||||
            // remove every second newline from lastCodeBlock.innerText
 | 
					            // remove every second newline from lastCodeBlock.innerText
 | 
				
			||||||
            button.addEventListener("click", () => {
 | 
					            button.addEventListener("click", () => {
 | 
				
			||||||
                navigator.clipboard.writeText(lastCodeBlock.innerText.replace(/\n\n/g, "\n")).then(
 | 
					                navigator.clipboard.writeText(lastCodeBlock.innerText.replace(/\n\n/g, "\n")).then(
 | 
				
			||||||
| 
						 | 
					@ -36,5 +38,8 @@ const addCopyButtons = () => {
 | 
				
			||||||
            // find chroma inside els[i]
 | 
					            // find chroma inside els[i]
 | 
				
			||||||
            let chroma = els[i].getElementsByClassName("chroma")[0];
 | 
					            let chroma = els[i].getElementsByClassName("chroma")[0];
 | 
				
			||||||
            els[i].insertBefore(button, chroma);
 | 
					            els[i].insertBefore(button, chroma);
 | 
				
			||||||
 | 
					        } catch(error) {
 | 
				
			||||||
 | 
					            console.debug(error);
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,7 +1,8 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function addTitleToCodeBlocks() {
 | 
					function addTitleToCodeBlocks() {
 | 
				
			||||||
  var els = document.getElementsByClassName("highlight");
 | 
					  const els = document.getElementsByClassName("highlight");
 | 
				
			||||||
  for (var i = 0; i < els.length; i++) {
 | 
					  for (let i = 0; i < els.length; i++) {
 | 
				
			||||||
 | 
					    try {
 | 
				
			||||||
      if (els[i].title.length) {
 | 
					      if (els[i].title.length) {
 | 
				
			||||||
        let div = document.createElement("div");
 | 
					        let div = document.createElement("div");
 | 
				
			||||||
        if (els[i].getElementsByClassName("code-title").length) continue;
 | 
					        if (els[i].getElementsByClassName("code-title").length) continue;
 | 
				
			||||||
| 
						 | 
					@ -9,5 +10,8 @@ function addTitleToCodeBlocks() {
 | 
				
			||||||
        div.classList.add("code-title")
 | 
					        div.classList.add("code-title")
 | 
				
			||||||
        els[i].insertBefore(div, els[i].firstChild);
 | 
					        els[i].insertBefore(div, els[i].firstChild);
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
					    } catch (error) {
 | 
				
			||||||
 | 
					      console.debug(error);
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
};
 | 
					 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -35,7 +35,7 @@
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  registerHandlers((e) => {
 | 
					  registerHandlers((e) => {
 | 
				
			||||||
    term = e.target.value
 | 
					    const term = e.target.value
 | 
				
			||||||
    const searchResults = contentIndex.search(term, [
 | 
					    const searchResults = contentIndex.search(term, [
 | 
				
			||||||
      {
 | 
					      {
 | 
				
			||||||
        field: "content",
 | 
					        field: "content",
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -113,7 +113,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
 | 
				
			||||||
    .append("svg")
 | 
					    .append("svg")
 | 
				
			||||||
    .attr("width", width)
 | 
					    .attr("width", width)
 | 
				
			||||||
    .attr("height", height)
 | 
					    .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) {
 | 
					  if (enableLegend) {
 | 
				
			||||||
    const legend = [{ Current: "var(--g-node-active)" }, { Note: "var(--g-node)" }, ...pathColors]
 | 
					    const legend = [{ Current: "var(--g-node-active)" }, { Note: "var(--g-node)" }, ...pathColors]
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -12,7 +12,7 @@ function initPopover(baseURL, useContextualBacklinks) {
 | 
				
			||||||
    links
 | 
					    links
 | 
				
			||||||
      .filter(li => li.dataset.src || (li.dataset.idx && useContextualBacklinks))
 | 
					      .filter(li => li.dataset.src || (li.dataset.idx && useContextualBacklinks))
 | 
				
			||||||
      .forEach(li => {
 | 
					      .forEach(li => {
 | 
				
			||||||
        var el
 | 
					        let el
 | 
				
			||||||
        if (li.dataset.ctx) {
 | 
					        if (li.dataset.ctx) {
 | 
				
			||||||
          const linkDest = content[li.dataset.src]
 | 
					          const linkDest = content[li.dataset.src]
 | 
				
			||||||
          const popoverElement = `<div class="popover">
 | 
					          const popoverElement = `<div class="popover">
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -40,8 +40,8 @@ const removeMarkdown = (
 | 
				
			||||||
      .replace(/^\s{0,3}>\s?/g, "")
 | 
					      .replace(/^\s{0,3}>\s?/g, "")
 | 
				
			||||||
      .replace(/(^|\n)\s{0,3}>\s?/g, "\n\n")
 | 
					      .replace(/(^|\n)\s{0,3}>\s?/g, "\n\n")
 | 
				
			||||||
      .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, "")
 | 
					      .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, "")
 | 
				
			||||||
      .replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, "$2")
 | 
					      .replace(/([\*_]{1,3})(\S.*?\S?)\1/g, "$2")
 | 
				
			||||||
      .replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, "$2")
 | 
					      .replace(/([\*_]{1,3})(\S.*?\S?)\1/g, "$2")
 | 
				
			||||||
      .replace(/(`{3,})(.*?)\1/gm, "$2")
 | 
					      .replace(/(`{3,})(.*?)\1/gm, "$2")
 | 
				
			||||||
      .replace(/`(.+?)`/g, "$1")
 | 
					      .replace(/`(.+?)`/g, "$1")
 | 
				
			||||||
      .replace(/\n{2,}/g, "\n\n")
 | 
					      .replace(/\n{2,}/g, "\n\n")
 | 
				
			||||||
| 
						 | 
					@ -65,7 +65,7 @@ const highlight = (content, term) => {
 | 
				
			||||||
      .split(" ")
 | 
					      .split(" ")
 | 
				
			||||||
      .slice(0, h)
 | 
					      .slice(0, h)
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      (before.length == h ? `...${before.join(" ")}` : before.join(" ")) +
 | 
					      (before.length === h ? `...${before.join(" ")}` : before.join(" ")) +
 | 
				
			||||||
      `<span class="search-highlight">${term}</span>` +
 | 
					      `<span class="search-highlight">${term}</span>` +
 | 
				
			||||||
      after.join(" ")
 | 
					      after.join(" ")
 | 
				
			||||||
    )
 | 
					    )
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -89,7 +89,7 @@ tbody, li, p {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#TableOfContents > ol {
 | 
					#TableOfContents > ol {
 | 
				
			||||||
  counter-reset: section;
 | 
					  counter-reset: section;
 | 
				
			||||||
  margin-left: 0em;
 | 
					  margin-left: 0;
 | 
				
			||||||
  padding-left: 1.5em;
 | 
					  padding-left: 1.5em;
 | 
				
			||||||
  & > li {
 | 
					  & > li {
 | 
				
			||||||
    counter-increment: section;
 | 
					    counter-increment: section;
 | 
				
			||||||
| 
						 | 
					@ -142,7 +142,7 @@ sup {
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
blockquote {
 | 
					blockquote {
 | 
				
			||||||
  margin-left: 0em;
 | 
					  margin-left: 0;
 | 
				
			||||||
  border-left: 3px solid var(--secondary);
 | 
					  border-left: 3px solid var(--secondary);
 | 
				
			||||||
  padding-left: 1em;
 | 
					  padding-left: 1em;
 | 
				
			||||||
  transition: border-color 0.2s ease;
 | 
					  transition: border-color 0.2s ease;
 | 
				
			||||||
| 
						 | 
					@ -530,7 +530,7 @@ header {
 | 
				
			||||||
  & h3 {
 | 
					  & h3 {
 | 
				
			||||||
    opacity: 1;
 | 
					    opacity: 1;
 | 
				
			||||||
    font-weight: 700;
 | 
					    font-weight: 700;
 | 
				
			||||||
    margin: 0em;
 | 
					    margin: 0;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  & .meta {
 | 
					  & .meta {
 | 
				
			||||||
| 
						 | 
					@ -568,7 +568,7 @@ header {
 | 
				
			||||||
  transition: opacity 0.2s ease, transform 0.2s ease;
 | 
					  transition: opacity 0.2s ease, transform 0.2s ease;
 | 
				
			||||||
  user-select: none;
 | 
					  user-select: none;
 | 
				
			||||||
  overflow-wrap: anywhere;
 | 
					  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) {
 | 
					  @media all and (max-width: 600px) {
 | 
				
			||||||
    display: none !important;
 | 
					    display: none !important;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,4 +1,5 @@
 | 
				
			||||||
<script
 | 
					<script
 | 
				
			||||||
 | 
					  async
 | 
				
			||||||
  src="https://cdn.jsdelivr.net/npm/d3@6.7.0/dist/d3.min.js"
 | 
					  src="https://cdn.jsdelivr.net/npm/d3@6.7.0/dist/d3.min.js"
 | 
				
			||||||
  integrity="sha256-+7jaYCp29O1JusNWHaYtgUn6EhuP0VaFuswhNV06MyI="
 | 
					  integrity="sha256-+7jaYCp29O1JusNWHaYtgUn6EhuP0VaFuswhNV06MyI="
 | 
				
			||||||
  crossorigin="anonymous"
 | 
					  crossorigin="anonymous"
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -53,26 +53,26 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  {{partial "mermaid.html" .}}
 | 
					  {{partial "mermaid.html" .}}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  <script src="https://unpkg.com/@floating-ui/core@0.7.3"></script>
 | 
					  <script async 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/dom@0.5.4"></script>
 | 
				
			||||||
  {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" |
 | 
					  {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" |
 | 
				
			||||||
  resources.Minify }}
 | 
					  resources.Minify }}
 | 
				
			||||||
  <script src="{{$popover.Permalink}}"></script>
 | 
					  <script async src="{{$popover.Permalink}}"></script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  <!-- Optional scripts -->
 | 
					  <!-- Optional scripts -->
 | 
				
			||||||
  {{ if $data.enableCodeBlockTitle | default $.Site.Data.config.enableCallouts }}
 | 
					  {{ if $data.enableCodeBlockTitle | default $.Site.Data.config.enableCallouts }}
 | 
				
			||||||
  {{ $codeTitle := resources.Get "js/code-title.js" | resources.Fingerprint "md5" | resources.Minify }}
 | 
					  {{ $codeTitle := resources.Get "js/code-title.js" | resources.Fingerprint "md5" | resources.Minify }}
 | 
				
			||||||
  <script src="{{$codeTitle.Permalink}}"></script>
 | 
					  <script defer src="{{$codeTitle.Permalink}}"></script>
 | 
				
			||||||
  {{end}}
 | 
					  {{end}}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  {{ if $data.enableCodeBlockCopy | default $.Site.Data.config.enableCodeBlockCopy }}
 | 
					  {{ if $data.enableCodeBlockCopy | default $.Site.Data.config.enableCodeBlockCopy }}
 | 
				
			||||||
  {{ $clipboard := resources.Get "js/clipboard.js" | resources.Fingerprint "md5" | resources.Minify }}
 | 
					  {{ $clipboard := resources.Get "js/clipboard.js" | resources.Fingerprint "md5" | resources.Minify }}
 | 
				
			||||||
  <script src="{{$clipboard.Permalink}}"></script>
 | 
					  <script defer src="{{$clipboard.Permalink}}"></script>
 | 
				
			||||||
  {{ end }}
 | 
					  {{ end }}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  {{ if $data.enableCallouts | default $.Site.Data.config.enableCallouts }}
 | 
					  {{ if $data.enableCallouts | default $.Site.Data.config.enableCallouts }}
 | 
				
			||||||
  {{ $callouts := resources.Get "js/callouts.js" | resources.Fingerprint "md5" | resources.Minify }}
 | 
					  {{ $callouts := resources.Get "js/callouts.js" | resources.Fingerprint "md5" | resources.Minify }}
 | 
				
			||||||
  <script src="{{$callouts.Permalink}}"></script>
 | 
					  <script defer src="{{$callouts.Permalink}}"></script>
 | 
				
			||||||
  {{ end }}
 | 
					  {{ end }}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  <!--  Preload page vars  -->
 | 
					  <!--  Preload page vars  -->
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,6 +1,14 @@
 | 
				
			||||||
{{if $.Site.Data.config.enableLatex}}
 | 
					{{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">
 | 
					<link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" as="style"
 | 
				
			||||||
<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>
 | 
					      onload="this.onload=null;this.rel='stylesheet'"
 | 
				
			||||||
<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>
 | 
					      integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">
 | 
				
			||||||
<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>
 | 
					<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}}
 | 
					{{end}}
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue