186 lines
No EOL
13 KiB
HTML
186 lines
No EOL
13 KiB
HTML
<!DOCTYPE html><html> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22></text></svg>"><meta name="generator" content="Astro v5.1.7"><title>blog | z0x</title><meta name="title" content="blog | z0x"><meta name="description" content="z0x's blog"><meta property="og:type" content="website"><meta property="og:url" content="https://blog.z0x.ca/"><meta property="og:title" content="blog | z0x"><meta property="og:description" content="z0x's blog"><meta property="og:image" content="https://blog.z0x.ca/blog-placeholder-1.jpg"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://blog.z0x.ca/"><meta property="twitter:title" content="blog | z0x"><meta property="twitter:description" content="z0x's blog"><meta property="twitter:image" content="https://blog.z0x.ca/blog-placeholder-1.jpg"><script>
|
|
function init() {
|
|
preloadTheme();
|
|
onScroll();
|
|
updateThemeButtons();
|
|
addCopyCodeButtons();
|
|
|
|
const backToTop = document.getElementById("back-to-top");
|
|
backToTop?.addEventListener("click", (event) => scrollToTop(event));
|
|
|
|
const backToPrev = document.getElementById("back-to-prev");
|
|
backToPrev?.addEventListener("click", () => window.history.back());
|
|
|
|
const lightThemeButton = document.getElementById("light-theme-button");
|
|
lightThemeButton?.addEventListener("click", () => {
|
|
localStorage.setItem("theme", "light");
|
|
toggleTheme(false);
|
|
updateThemeButtons();
|
|
});
|
|
|
|
const darkThemeButton = document.getElementById("dark-theme-button");
|
|
darkThemeButton?.addEventListener("click", () => {
|
|
localStorage.setItem("theme", "dark");
|
|
toggleTheme(true);
|
|
updateThemeButtons();
|
|
});
|
|
|
|
const systemThemeButton = document.getElementById("system-theme-button");
|
|
systemThemeButton?.addEventListener("click", () => {
|
|
localStorage.setItem("theme", "system");
|
|
toggleTheme(window.matchMedia("(prefers-color-scheme: dark)").matches);
|
|
updateThemeButtons();
|
|
});
|
|
|
|
window
|
|
.matchMedia("(prefers-color-scheme: dark)")
|
|
.addEventListener("change", (event) => {
|
|
if (localStorage.theme === "system") {
|
|
toggleTheme(event.matches);
|
|
}
|
|
});
|
|
|
|
document.addEventListener("scroll", onScroll);
|
|
}
|
|
|
|
function updateThemeButtons() {
|
|
const theme = localStorage.getItem("theme");
|
|
const lightThemeButton = document.getElementById("light-theme-button");
|
|
const darkThemeButton = document.getElementById("dark-theme-button");
|
|
const systemThemeButton = document.getElementById("system-theme-button");
|
|
|
|
function removeActiveButtonTheme(button) {
|
|
button?.classList.remove("bg-black/5");
|
|
button?.classList.remove("dark:bg-white/5");
|
|
}
|
|
|
|
function addActiveButtonTheme(button) {
|
|
button?.classList.add("bg-black/5");
|
|
button?.classList.add("dark:bg-white/5");
|
|
}
|
|
|
|
removeActiveButtonTheme(lightThemeButton);
|
|
removeActiveButtonTheme(darkThemeButton);
|
|
removeActiveButtonTheme(systemThemeButton);
|
|
|
|
if (theme === "light") {
|
|
addActiveButtonTheme(lightThemeButton);
|
|
} else if (theme === "dark") {
|
|
addActiveButtonTheme(darkThemeButton);
|
|
} else {
|
|
addActiveButtonTheme(systemThemeButton);
|
|
}
|
|
}
|
|
|
|
function onScroll() {
|
|
if (window.scrollY > 0) {
|
|
document.documentElement.classList.add("scrolled");
|
|
} else {
|
|
document.documentElement.classList.remove("scrolled");
|
|
}
|
|
}
|
|
|
|
function scrollToTop(event) {
|
|
event.preventDefault();
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
}
|
|
|
|
function toggleTheme(dark) {
|
|
const css = document.createElement("style");
|
|
|
|
css.appendChild(
|
|
document.createTextNode(
|
|
`* {
|
|
-webkit-transition: none !important;
|
|
-moz-transition: none !important;
|
|
-o-transition: none !important;
|
|
-ms-transition: none !important;
|
|
transition: none !important;
|
|
}
|
|
`,
|
|
),
|
|
);
|
|
|
|
document.head.appendChild(css);
|
|
|
|
if (dark) {
|
|
document.documentElement.classList.add("dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
}
|
|
|
|
window.getComputedStyle(css).opacity;
|
|
document.head.removeChild(css);
|
|
}
|
|
|
|
function preloadTheme() {
|
|
const userTheme = localStorage.theme;
|
|
|
|
if (userTheme === "light" || userTheme === "dark") {
|
|
toggleTheme(userTheme === "dark");
|
|
} else {
|
|
toggleTheme(window.matchMedia("(prefers-color-scheme: dark)").matches);
|
|
}
|
|
}
|
|
|
|
function addCopyCodeButtons() {
|
|
let copyButtonLabel = "📋";
|
|
let codeBlocks = Array.from(document.querySelectorAll("pre"));
|
|
|
|
async function copyCode(codeBlock, copyButton) {
|
|
const codeText = codeBlock.innerText;
|
|
const buttonText = copyButton.innerText;
|
|
const textToCopy = codeText.replace(buttonText, "");
|
|
|
|
await navigator.clipboard.writeText(textToCopy);
|
|
copyButton.innerText = "✅";
|
|
|
|
setTimeout(() => {
|
|
copyButton.innerText = copyButtonLabel;
|
|
}, 2000);
|
|
}
|
|
|
|
for (let codeBlock of codeBlocks) {
|
|
const wrapper = document.createElement("div");
|
|
wrapper.style.position = "relative";
|
|
|
|
const copyButton = document.createElement("button");
|
|
copyButton.innerText = copyButtonLabel;
|
|
copyButton.classList = "copy-code";
|
|
|
|
codeBlock.setAttribute("tabindex", "0");
|
|
codeBlock.appendChild(copyButton);
|
|
|
|
codeBlock.parentNode.insertBefore(wrapper, codeBlock);
|
|
wrapper.appendChild(codeBlock);
|
|
|
|
copyButton?.addEventListener("click", async () => {
|
|
await copyCode(codeBlock, copyButton);
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => init());
|
|
document.addEventListener("astro:after-swap", () => init());
|
|
preloadTheme();
|
|
</script><link rel="stylesheet" href="/_astro/_id_.4haKnsSH.css"><script>
|
|
(function () {
|
|
var script = document.createElement("script")
|
|
var viewTransitionsEnabled = document.querySelector("meta[name='astro-view-transitions-enabled']")?.content
|
|
|
|
script.setAttribute("src", "https://umami.z0x.ca/script.js")
|
|
script.setAttribute("defer", true)
|
|
script.setAttribute("data-website-id", "b691181e-cad7-4c23-b16a-709872a0a7ab")
|
|
|
|
|
|
if (!!viewTransitionsEnabled) {
|
|
script.setAttribute("data-astro-rerun", true)
|
|
}
|
|
|
|
var head = document.querySelector("head")
|
|
head.appendChild(script)
|
|
})()
|
|
</script></head> <body> <main> <div class="mx-auto max-w-screen-sm px-3"> <aside> <div class="space-y-10"> <div class="space-y-4"> <section class="space-y-4"> <div class="font-semibold text-black dark:text-white"> 2025 </div> <div> <ul class="not-prose flex flex-col gap-4"> <li> <a href="/artix-install-guide" class="not-prose group relative flex flex-nowrap rounded-lg border border-black/15 px-4 py-3 pr-10 transition-colors duration-300 ease-in-out hover:bg-black/5 hover:text-black focus-visible:bg-black/5 focus-visible:text-black dark:border-white/20 dark:hover:bg-white/5 dark:hover:text-white dark:focus-visible:bg-white/5 dark:focus-visible:text-white"> <div class="flex flex-1 flex-col truncate"> <div class="font-semibold"> Artix Linux install guide </div> <div class="text-sm"> Guide to installing Artix Linux with OpenRC and full disk encryption for UEFI and BIOS systems. </div> </div> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="absolute right-2 top-1/2 size-5 -translate-y-1/2 fill-none stroke-current stroke-2"> <line x1="5" y1="12" x2="19" y2="12" class="translate-x-3 scale-x-0 transition-transform duration-300 ease-in-out group-hover:translate-x-0 group-hover:scale-x-100 group-focus-visible:translate-x-0 group-focus-visible:scale-x-100"></line> <polyline points="12 5 19 12 12 19" class="-translate-x-1 transition-transform duration-300 ease-in-out group-hover:translate-x-0 group-focus-visible:translate-x-0"></polyline> </svg> </a> </li> </ul> </div> </section> </div> </div> </aside> </div> </main> <footer> <div class="mx-auto max-w-screen-sm px-3"> <div class="relative"> <div class="absolute -top-12 right-0"> <button id="back-to-top" class="group relative flex w-fit flex-nowrap rounded border border-black/15 py-1.5 pl-8 pr-3 transition-colors duration-300 ease-in-out hover:bg-black/5 hover:text-black focus-visible:bg-black/5 focus-visible:text-black dark:border-white/20 dark:hover:bg-white/5 dark:hover:text-white dark:focus-visible:bg-white/5 dark:focus-visible:text-white"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="absolute left-2 top-1/2 size-4 -translate-y-1/2 rotate-90 fill-none stroke-current stroke-2"> <line x1="5" y1="12" x2="19" y2="12" class="translate-x-2 scale-x-0 transition-transform duration-300 ease-in-out group-hover:translate-x-0 group-hover:scale-x-100 group-focus-visible:translate-x-0 group-focus-visible:scale-x-100"></line> <polyline points="12 5 5 12 12 19" class="translate-x-1 transition-transform duration-300 ease-in-out group-hover:translate-x-0 group-focus-visible:translate-x-0"></polyline> </svg> <div class="text-sm">Back to top</div> </button> </div> </div> <div class="flex items-center justify-between"> <div>© 2025 • z0x</div> <div class="flex flex-wrap items-center gap-1.5"> <a aria-label="RSS" href="/rss.xml" target="_blank" class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white"> <path d="M5 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> <path d="M4 4a16 16 0 0 1 16 16"></path> <path d="M4 11a9 9 0 0 1 9 9"></path> </svg> </a> <button id="light-theme-button" aria-label="Light theme" class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white"> <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> </button> <button id="dark-theme-button" aria-label="Dark theme" class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> </svg> </button> <button id="system-theme-button" aria-label="System theme" class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white"> <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect> <line x1="8" y1="21" x2="16" y2="21"></line> <line x1="12" y1="17" x2="12" y2="21"></line> </svg> </button> </div> </div> </div> </footer> </body></html> |