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 144660372b
commit cfe923a1fd
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");
// 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);
}
}
}

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

@ -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);
}
}
};
}

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

@ -35,7 +35,7 @@
})
registerHandlers((e) => {
term = e.target.value
const term = e.target.value
const searchResults = contentIndex.search(term, [
{
field: "content",

2
assets/js/graph.js
View File

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

2
assets/js/popover.js
View File

@ -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 = `<div class="popover">

6
assets/js/util.js
View File

@ -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(" ")) +
`<span class="search-highlight">${term}</span>` +
after.join(" ")
)

24
assets/styles/base.scss
View File

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

1
layouts/partials/graph.html
View File

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

16
layouts/partials/head.html
View File

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

18
layouts/partials/katex.html
View File

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