falsycat/ar.falsy.cat
1
0
Fork 0
mirror of https://github.com/falsycat/ar.falsy.cat.git synced 2024-12-26 00:14:51 +00:00
Code Issues 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 dc43737896
commit 614a6222a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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}}