Initial commit for Hugo site.
This commit is contained in:
@@ -0,0 +1,58 @@
|
||||
const sitePreference = document.documentElement.getAttribute("data-default-appearance");
|
||||
const userPreference = localStorage.getItem("appearance");
|
||||
|
||||
function getCSSValue(varName) {
|
||||
var cssValue = window.getComputedStyle(document.documentElement).getPropertyValue(varName);
|
||||
return "rgb(" + cssValue.replace(/\s+/g, "") + ")";
|
||||
}
|
||||
|
||||
function setThemeColor() {
|
||||
var metaThemeColor = document.querySelector("meta[name=theme-color]");
|
||||
document.documentElement.classList.contains("dark")
|
||||
? metaThemeColor.setAttribute("content", getCSSValue("--color-neutral-800"))
|
||||
: metaThemeColor.setAttribute("content", getCSSValue("--color-neutral"));
|
||||
return true;
|
||||
}
|
||||
|
||||
if ((sitePreference === "dark" && userPreference === null) || userPreference === "dark") {
|
||||
document.documentElement.classList.add("dark");
|
||||
setThemeColor();
|
||||
}
|
||||
|
||||
if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
|
||||
if (
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches &&
|
||||
userPreference !== "light"
|
||||
) {
|
||||
document.documentElement.classList.add("dark");
|
||||
setThemeColor();
|
||||
}
|
||||
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
|
||||
if (event.matches) {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
setThemeColor();
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
setThemeColor();
|
||||
var switchers = document.querySelectorAll("[id^='appearance-switcher']");
|
||||
switchers.forEach((switcher) => {
|
||||
switcher.addEventListener("click", () => {
|
||||
document.documentElement.classList.toggle("dark");
|
||||
setThemeColor();
|
||||
localStorage.setItem(
|
||||
"appearance",
|
||||
document.documentElement.classList.contains("dark") ? "dark" : "light"
|
||||
);
|
||||
});
|
||||
switcher.addEventListener("contextmenu", (event) => {
|
||||
event.preventDefault();
|
||||
localStorage.removeItem("appearance");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
function css(name) {
|
||||
return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")";
|
||||
}
|
||||
|
||||
Chart.defaults.font.size = 14;
|
||||
Chart.defaults.plugins.colors.enabled = false;
|
||||
Chart.defaults.backgroundColor = css("--color-primary-300");
|
||||
Chart.defaults.elements.point.borderColor = css("--color-primary-400");
|
||||
Chart.defaults.elements.bar.borderColor = css("--color-primary-500");
|
||||
Chart.defaults.elements.bar.borderWidth = 1;
|
||||
Chart.defaults.elements.line.borderColor = css("--color-primary-400");
|
||||
Chart.defaults.elements.arc.backgroundColor = css("--color-primary-200");
|
||||
Chart.defaults.elements.arc.borderColor = css("--color-primary-500");
|
||||
Chart.defaults.elements.arc.borderWidth = 1;
|
||||
@@ -0,0 +1,66 @@
|
||||
var scriptBundle = document.getElementById("script-bundle");
|
||||
var copyText = scriptBundle ? scriptBundle.getAttribute("data-copy") : "Copy";
|
||||
var copiedText = scriptBundle ? scriptBundle.getAttribute("data-copied") : "Copied";
|
||||
|
||||
function createCopyButton(highlightDiv) {
|
||||
const button = document.createElement("button");
|
||||
button.className = "copy-button";
|
||||
button.type = "button";
|
||||
button.ariaLabel = copyText;
|
||||
button.innerText = copyText;
|
||||
button.addEventListener("click", () => copyCodeToClipboard(button, highlightDiv));
|
||||
addCopyButtonToDom(button, highlightDiv);
|
||||
}
|
||||
|
||||
async function copyCodeToClipboard(button, highlightDiv) {
|
||||
const codeToCopy = highlightDiv.querySelector(":last-child > .chroma > code").innerText;
|
||||
try {
|
||||
result = await navigator.permissions.query({ name: "clipboard-write" });
|
||||
if (result.state == "granted" || result.state == "prompt") {
|
||||
await navigator.clipboard.writeText(codeToCopy);
|
||||
} else {
|
||||
copyCodeBlockExecCommand(codeToCopy, highlightDiv);
|
||||
}
|
||||
} catch (_) {
|
||||
copyCodeBlockExecCommand(codeToCopy, highlightDiv);
|
||||
} finally {
|
||||
codeWasCopied(button);
|
||||
}
|
||||
}
|
||||
|
||||
function copyCodeBlockExecCommand(codeToCopy, highlightDiv) {
|
||||
const textArea = document.createElement("textArea");
|
||||
textArea.contentEditable = "true";
|
||||
textArea.readOnly = "false";
|
||||
textArea.className = "copy-textarea";
|
||||
textArea.value = codeToCopy;
|
||||
highlightDiv.insertBefore(textArea, highlightDiv.firstChild);
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(textArea);
|
||||
const sel = window.getSelection();
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(range);
|
||||
textArea.setSelectionRange(0, 999999);
|
||||
document.execCommand("copy");
|
||||
highlightDiv.removeChild(textArea);
|
||||
}
|
||||
|
||||
function codeWasCopied(button) {
|
||||
button.blur();
|
||||
button.innerText = copiedText;
|
||||
setTimeout(function () {
|
||||
button.innerText = copyText;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function addCopyButtonToDom(button, highlightDiv) {
|
||||
highlightDiv.insertBefore(button, highlightDiv.firstChild);
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.className = "highlight-wrapper";
|
||||
highlightDiv.parentNode.insertBefore(wrapper, highlightDiv);
|
||||
wrapper.appendChild(highlightDiv);
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv));
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
Closes the hamburger menu when a link is clicked.
|
||||
*/
|
||||
function close_menu() {
|
||||
document.getElementById("menu-controller").checked = false;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
function css(name) {
|
||||
return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")";
|
||||
}
|
||||
|
||||
let isDark = document.documentElement.classList.contains("dark");
|
||||
|
||||
mermaid.initialize({
|
||||
theme: "base",
|
||||
themeVariables: {
|
||||
background: css("--color-neutral"),
|
||||
primaryTextColor: isDark ? css("--color-neutral-200") : css("--color-neutral-700"),
|
||||
primaryColor: isDark ? css("--color-primary-700") : css("--color-primary-200"),
|
||||
secondaryColor: isDark ? css("--color-secondary-700") : css("--color-secondary-200"),
|
||||
tertiaryColor: isDark ? css("--color-neutral-700") : css("--color-neutral-100"),
|
||||
primaryBorderColor: isDark ? css("--color-primary-500") : css("--color-primary-400"),
|
||||
secondaryBorderColor: css("--color-secondary-400"),
|
||||
tertiaryBorderColor: isDark ? css("--color-neutral-300") : css("--color-neutral-400"),
|
||||
lineColor: isDark ? css("--color-neutral-300") : css("--color-neutral-600"),
|
||||
fontFamily:
|
||||
"ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
|
||||
fontSize: "16px",
|
||||
pieTitleTextSize: "19px",
|
||||
pieSectionTextSize: "16px",
|
||||
pieLegendTextSize: "16px",
|
||||
pieStrokeWidth: "1px",
|
||||
pieOuterStrokeWidth: "0.5px",
|
||||
pieStrokeColor: isDark ? css("--color-neutral-300") : css("--color-neutral-400"),
|
||||
pieOpacity: "1",
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
window.addEventListener("load", () => {
|
||||
quicklink.listen();
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
document.querySelectorAll("pre, .highlight-wrapper").forEach((tag) => (tag.dir = "auto"));
|
||||
});
|
||||
@@ -0,0 +1,161 @@
|
||||
var fuse;
|
||||
var showButtons = document.querySelectorAll("[id^='search-button']");
|
||||
var hideButton = document.getElementById("close-search-button");
|
||||
var wrapper = document.getElementById("search-wrapper");
|
||||
var modal = document.getElementById("search-modal");
|
||||
var input = document.getElementById("search-query");
|
||||
var output = document.getElementById("search-results");
|
||||
var first = output.firstChild;
|
||||
var last = output.lastChild;
|
||||
var searchVisible = false;
|
||||
var indexed = false;
|
||||
var hasResults = false;
|
||||
|
||||
// Listen for events
|
||||
showButtons.forEach((button) => {
|
||||
button.addEventListener("click", displaySearch);
|
||||
});
|
||||
hideButton.addEventListener("click", hideSearch);
|
||||
wrapper.addEventListener("click", hideSearch);
|
||||
modal.addEventListener("click", function (event) {
|
||||
event.stopPropagation();
|
||||
event.stopImmediatePropagation();
|
||||
return false;
|
||||
});
|
||||
document.addEventListener("keydown", function (event) {
|
||||
// Forward slash to open search wrapper
|
||||
if (event.key == "/") {
|
||||
if (!searchVisible) {
|
||||
event.preventDefault();
|
||||
displaySearch();
|
||||
}
|
||||
}
|
||||
|
||||
// Esc to close search wrapper
|
||||
if (event.key == "Escape") {
|
||||
hideSearch();
|
||||
}
|
||||
|
||||
// Down arrow to move down results list
|
||||
if (event.key == "ArrowDown") {
|
||||
if (searchVisible && hasResults) {
|
||||
event.preventDefault();
|
||||
if (document.activeElement == input) {
|
||||
first.focus();
|
||||
} else if (document.activeElement == last) {
|
||||
last.focus();
|
||||
} else {
|
||||
document.activeElement.parentElement.nextSibling.firstElementChild.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Up arrow to move up results list
|
||||
if (event.key == "ArrowUp") {
|
||||
if (searchVisible && hasResults) {
|
||||
event.preventDefault();
|
||||
if (document.activeElement == input) {
|
||||
input.focus();
|
||||
} else if (document.activeElement == first) {
|
||||
input.focus();
|
||||
} else {
|
||||
document.activeElement.parentElement.previousSibling.firstElementChild.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update search on each keypress
|
||||
input.onkeyup = function (event) {
|
||||
executeQuery(this.value);
|
||||
};
|
||||
|
||||
function displaySearch() {
|
||||
if (!indexed) {
|
||||
buildIndex();
|
||||
}
|
||||
if (!searchVisible) {
|
||||
document.body.style.overflow = "hidden";
|
||||
wrapper.style.visibility = "visible";
|
||||
input.focus();
|
||||
searchVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
if (searchVisible) {
|
||||
document.body.style.overflow = "visible";
|
||||
wrapper.style.visibility = "hidden";
|
||||
input.value = "";
|
||||
output.innerHTML = "";
|
||||
document.activeElement.blur();
|
||||
searchVisible = false;
|
||||
}
|
||||
}
|
||||
|
||||
function fetchJSON(path, callback) {
|
||||
var httpRequest = new XMLHttpRequest();
|
||||
httpRequest.onreadystatechange = function () {
|
||||
if (httpRequest.readyState === 4) {
|
||||
if (httpRequest.status === 200) {
|
||||
var data = JSON.parse(httpRequest.responseText);
|
||||
if (callback) callback(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
httpRequest.open("GET", path);
|
||||
httpRequest.send();
|
||||
}
|
||||
|
||||
function buildIndex() {
|
||||
var baseURL = wrapper.getAttribute("data-url");
|
||||
baseURL = baseURL.replace(/\/?$/, "/");
|
||||
fetchJSON(baseURL + "index.json", function (data) {
|
||||
var options = {
|
||||
shouldSort: true,
|
||||
ignoreLocation: true,
|
||||
threshold: 0.0,
|
||||
includeMatches: true,
|
||||
keys: [
|
||||
{ name: "title", weight: 0.8 },
|
||||
{ name: "section", weight: 0.2 },
|
||||
{ name: "summary", weight: 0.6 },
|
||||
{ name: "content", weight: 0.4 },
|
||||
],
|
||||
};
|
||||
fuse = new Fuse(data, options);
|
||||
indexed = true;
|
||||
});
|
||||
}
|
||||
|
||||
function executeQuery(term) {
|
||||
let results = fuse.search(term);
|
||||
let resultsHTML = "";
|
||||
|
||||
if (results.length > 0) {
|
||||
// prettier-ignore
|
||||
resultsHTML = results.map(function (value, key) {
|
||||
return `<li class="mb-2">
|
||||
<a class="flex items-center px-3 py-2 rounded-md appearance-none bg-neutral-100 dark:bg-neutral-700 focus:bg-primary-100 hover:bg-primary-100 dark:hover:bg-primary-900 dark:focus:bg-primary-900 focus:outline-dotted focus:outline-transparent focus:outline-2" href="${value.item.permalink}" tabindex="0">
|
||||
<div class="grow">
|
||||
<div class="-mb-1 text-lg font-bold">${value.item.title}</div>
|
||||
<div class="text-sm text-neutral-500 dark:text-neutral-400">${value.item.section}${value.item.date == null ? '' : `<span class="px-2 text-primary-500">·</span>${value.item.date}</span>`}</div>
|
||||
<div class="text-sm italic">${value.item.summary}</div>
|
||||
</div>
|
||||
<div class="ml-2 ltr:block rtl:hidden text-neutral-500">→</div>
|
||||
<div class="mr-2 ltr:hidden rtl:block text-neutral-500">←</div>
|
||||
</a>
|
||||
</li>`;
|
||||
}).join("");
|
||||
hasResults = true;
|
||||
} else {
|
||||
resultsHTML = "";
|
||||
hasResults = false;
|
||||
}
|
||||
|
||||
output.innerHTML = resultsHTML;
|
||||
if (results.length > 0) {
|
||||
first = output.firstChild.firstElementChild;
|
||||
last = output.lastChild.firstElementChild;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user