tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: General performance/style improvements (#262)

Browse Source
This commit is contained in:
Adam Brangenberg 2022-12-29 16:43:41 +01:00 committed by GitHub
parent 186aa450fd
commit 5fd105f35f
10 changed files with 84 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
assets/js/clipboard.js
View File

@ -8,33 +8,38 @@ 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++) {
if (els[i].getElementsByClassName("clipboard-button").length) continue; try {
if (els[i].getElementsByClassName("clipboard-button").length) continue;
// find pre > code inside els[i] // find pre > code inside els[i]
let codeBlocks = els[i].getElementsByTagName("code"); let codeBlocks = els[i].getElementsByTagName("code");
// line numbers are inside first code block // line numbers are inside first code block
let lastCodeBlock = codeBlocks[codeBlocks.length - 1]; let lastCodeBlock = codeBlocks[codeBlocks.length - 1];
const button = document.createElement("button"); const button = document.createElement("button");
button.className = "clipboard-button"; button.className = "clipboard-button";
button.type = "button"; button.type = "button";
button.innerHTML = svgCopy; button.innerHTML = svgCopy;
// remove every second newline from lastCodeBlock.innerText button.ariaLabel = "opy the shown code";
button.addEventListener("click", () => { // remove every second newline from lastCodeBlock.innerText
navigator.clipboard.writeText(lastCodeBlock.innerText.replace(/\n\n/g, "\n")).then( button.addEventListener("click", () => {
() => { navigator.clipboard.writeText(lastCodeBlock.innerText.replace(/\n\n/g, "\n")).then(
button.blur(); () => {
button.innerHTML = svgCheck; button.blur();
setTimeout(() => { button.innerHTML = svgCheck;
button.innerHTML = svgCopy setTimeout(() => {
button.style.borderColor = "" button.innerHTML = svgCopy
}, 2000); button.style.borderColor = ""
}, }, 2000);
(error) => (button.innerHTML = "Error") },
); (error) => (button.innerHTML = "Error")
}); );
// find chroma inside els[i] });
let chroma = els[i].getElementsByClassName("chroma")[0]; // find chroma inside els[i]
els[i].insertBefore(button, chroma); let chroma = els[i].getElementsByClassName("chroma")[0];
els[i].insertBefore(button, chroma);
} catch(error) {
console.debug(error);
}
} }
} }

22
assets/js/code-title.js
View File

@ -1,13 +1,17 @@
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++) {
if (els[i].title.length) { try {
let div = document.createElement("div"); if (els[i].title.length) {
if (els[i].getElementsByClassName("code-title").length) continue; let div = document.createElement("div");
div.textContent=els[i].title; if (els[i].getElementsByClassName("code-title").length) continue;
div.classList.add("code-title") div.textContent = els[i].title;
els[i].insertBefore(div, els[i].firstChild); div.classList.add("code-title")
els[i].insertBefore(div, els[i].firstChild);
}
} catch (error) {
console.debug(error);
} }
} }
}; }

2
assets/js/full-text-search.js
View File

@ -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",

2
assets/js/graph.js
View File

@ -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]

2
assets/js/popover.js
View File

@ -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">

6
assets/js/util.js
View File

@ -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(" ")
) )

24
assets/styles/base.scss
View File

@ -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;
@ -183,7 +183,7 @@ article {
margin-top: 2em; margin-top: 2em;
font-size: 2em; font-size: 2em;
} }
& > .meta { & > .meta {
margin: 0 0 1em 0; margin: 0 0 1em 0;
opacity: 0.7; opacity: 0.7;
@ -201,11 +201,11 @@ article {
&.broken { &.broken {
opacity: 0.5; opacity: 0.5;
background-color: transparent; background-color: transparent;
} }
} }
} }
& p { & p {
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
@ -295,7 +295,7 @@ footer {
text-align: center; text-align: center;
& ul { & ul {
padding-left: 0; padding-left: 0;
} }
} }
hr { hr {
@ -507,7 +507,7 @@ header {
& > .section { & > .section {
display: flex; display: flex;
align-items: center; align-items: center;
@media all and (max-width: 600px) { @media all and (max-width: 600px) {
& .tags { & .tags {
@ -519,18 +519,18 @@ header {
font-weight: 700; font-weight: 700;
margin: 0; margin: 0;
} }
& p { & p {
margin: 0; margin: 0;
padding-right: 1em; padding-right: 1em;
flex-basis: 6em; flex-basis: 6em;
} }
} }
& 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;
@ -596,7 +596,7 @@ header {
& > p { & > p {
margin: 0; margin: 0;
padding: 0.5rem 0; padding: 0.5rem 0;
} }
& > p, & > a { & > p, & > a {
font-size: 1rem; font-size: 1rem;

1
layouts/partials/graph.html
View File

@ -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"

16
layouts/partials/head.html
View File

@ -52,27 +52,27 @@
{{partial "katex.html" .}} {{partial "katex.html" .}}
{{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 -->
@ -120,7 +120,7 @@
{{if $data.enableCallouts | default $.Site.Data.config.enableCallouts -}} {{if $data.enableCallouts | default $.Site.Data.config.enableCallouts -}}
addCollapsibleCallouts(); addCollapsibleCallouts();
{{ end }} {{ end }}
{{if $data.enableLinkPreview | default $.Site.Data.config.enableLinkPreview}} {{if $data.enableLinkPreview | default $.Site.Data.config.enableLinkPreview}}
initPopover( initPopover(
{{strings.TrimRight "/" .Site.BaseURL }}, {{strings.TrimRight "/" .Site.BaseURL }},

18
layouts/partials/katex.html
View File

@ -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"
{{end}} 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}}