From 5fd105f35f9dbeb590b21acce3d8384d0a1c2ebc Mon Sep 17 00:00:00 2001 From: Adam Brangenberg Date: Thu, 29 Dec 2022 16:43:41 +0100 Subject: [PATCH] refactor: General performance/style improvements (#262) --- assets/js/clipboard.js | 57 +++++++++++++++++++---------------- assets/js/code-title.js | 22 ++++++++------ assets/js/full-text-search.js | 2 +- assets/js/graph.js | 2 +- assets/js/popover.js | 2 +- assets/js/util.js | 6 ++-- assets/styles/base.scss | 24 +++++++-------- layouts/partials/graph.html | 1 + layouts/partials/head.html | 16 +++++----- layouts/partials/katex.html | 18 ++++++++--- 10 files changed, 84 insertions(+), 66 deletions(-) diff --git a/assets/js/clipboard.js b/assets/js/clipboard.js index cd928c1a..10e02c68 100644 --- a/assets/js/clipboard.js +++ b/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); + } } } diff --git a/assets/js/code-title.js b/assets/js/code-title.js index 698edc9b..325e16d5 100644 --- a/assets/js/code-title.js +++ b/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); } } -}; +} diff --git a/assets/js/full-text-search.js b/assets/js/full-text-search.js index 108db109..709a3b36 100644 --- a/assets/js/full-text-search.js +++ b/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", diff --git a/assets/js/graph.js b/assets/js/graph.js index c89877b9..2e05b5cb 100644 --- a/assets/js/graph.js +++ b/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] diff --git a/assets/js/popover.js b/assets/js/popover.js index ca13f9a6..554291a0 100644 --- a/assets/js/popover.js +++ b/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 = `
diff --git a/assets/js/util.js b/assets/js/util.js index 3346b7d4..dc549beb 100644 --- a/assets/js/util.js +++ b/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(" ")) + `${term}` + after.join(" ") ) diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 0696d2f4..5863c92c 100644 --- a/assets/styles/base.scss +++ b/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; diff --git a/layouts/partials/graph.html b/layouts/partials/graph.html index 3e25c657..39ed3cfa 100644 --- a/layouts/partials/graph.html +++ b/layouts/partials/graph.html @@ -1,4 +1,5 @@ - + + + {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" | resources.Minify }} - + {{ if $data.enableCodeBlockTitle | default $.Site.Data.config.enableCallouts }} {{ $codeTitle := resources.Get "js/code-title.js" | resources.Fingerprint "md5" | resources.Minify }} - + {{end}} {{ if $data.enableCodeBlockCopy | default $.Site.Data.config.enableCodeBlockCopy }} {{ $clipboard := resources.Get "js/clipboard.js" | resources.Fingerprint "md5" | resources.Minify }} - + {{ end }} {{ if $data.enableCallouts | default $.Site.Data.config.enableCallouts }} {{ $callouts := resources.Get "js/callouts.js" | resources.Fingerprint "md5" | resources.Minify }} - + {{ end }} @@ -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 }}, diff --git a/layouts/partials/katex.html b/layouts/partials/katex.html index df53045b..8a2f40b4 100644 --- a/layouts/partials/katex.html +++ b/layouts/partials/katex.html @@ -1,6 +1,14 @@ {{if $.Site.Data.config.enableLatex}} - - - - -{{end}} + + + + +{{end}} \ No newline at end of file