From 614a6222a1638c159d2ac9c005be5b2ddec78dd2 Mon Sep 17 00:00:00 2001
From: Adam Brangenberg <adambrangenberg@proton.me>
Date: Thu, 29 Dec 2022 15:43:41 +0000
Subject: [PATCH] refactor: General performance/style improvements (#262)
---
assets/js/full-text-search.js | 2
assets/js/clipboard.js | 57 ++++++++++--------
assets/styles/base.scss | 24 ++++----
layouts/partials/graph.html | 1
assets/js/graph.js | 2
assets/js/popover.js | 2
assets/js/util.js | 6 +-
layouts/partials/head.html | 16 ++--
assets/js/code-title.js | 22 ++++---
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 cd928c1..10e02c6 100644
--- a/assets/js/clipboard.js
+++ b/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);
+ }
}
}
diff --git a/assets/js/code-title.js b/assets/js/code-title.js
index 698edc9..325e16d 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 108db10..709a3b3 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 c89877b..2e05b5c 100644
--- a/assets/js/graph.js
+++ b/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]
diff --git a/assets/js/popover.js b/assets/js/popover.js
index ca13f9a..554291a 100644
--- a/assets/js/popover.js
+++ b/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">
diff --git a/assets/js/util.js b/assets/js/util.js
index 3346b7d..dc549be 100644
--- a/assets/js/util.js
+++ b/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(" ")
)
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index 0696d2f..5863c92 100644
--- a/assets/styles/base.scss
+++ b/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;
diff --git a/layouts/partials/graph.html b/layouts/partials/graph.html
index 3e25c65..39ed3cf 100644
--- a/layouts/partials/graph.html
+++ b/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"
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index b9c5438..57dc546 100644
--- a/layouts/partials/head.html
+++ b/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 }},
diff --git a/layouts/partials/katex.html b/layouts/partials/katex.html
index df53045..8a2f40b 100644
--- a/layouts/partials/katex.html
+++ b/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}}
\ No newline at end of file
--
Gitblit v1.10.0