sanity checks
This commit is contained in:
BIN
assets/.DS_Store
vendored
Normal file
BIN
assets/.DS_Store
vendored
Normal file
Binary file not shown.
@@ -1,175 +1,184 @@
|
||||
|
||||
// COPY BUTTON:
|
||||
|
||||
/* Event listener function for the COPY BUTTON */
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
document.querySelectorAll("pre.src").forEach(function (block) {
|
||||
const button = document.createElement("button");
|
||||
button.innerText = "Copy";
|
||||
button.className = "copy-btn";
|
||||
document.querySelectorAll("pre.src").forEach(function (codeBlock) {
|
||||
const button = document.createElement("button");
|
||||
button.innerText = "Copy";
|
||||
button.className = "copy-btn";
|
||||
|
||||
// Append button inside <pre>
|
||||
block.appendChild(button);
|
||||
// Append button inside <pre>
|
||||
codeBlock.appendChild(button);
|
||||
|
||||
button.addEventListener("click", function () {
|
||||
const text = block.innerText.replace(button.innerText, ""); // exclude button text
|
||||
navigator.clipboard.writeText(text.trim()).then(() => {
|
||||
button.innerText = "Copied!";
|
||||
setTimeout(() => (button.innerText = "Copy"), 1500);
|
||||
});
|
||||
button.addEventListener("click", function () {
|
||||
const text = codeBlock.innerText.replace(button.innerText, ""); // exclude button text
|
||||
navigator.clipboard.writeText(text.trim()).then(() => {
|
||||
button.innerText = "Copied!";
|
||||
setTimeout(() => (button.innerText = "Copy"), 1500);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/* Event listener for footnotes and sidenotes*/
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll('a.footref[href^="#fn"]').forEach(ref => {
|
||||
const sup = ref.closest("sup") || ref;
|
||||
// idempotent: don't insert twice
|
||||
if (sup.nextElementSibling && sup.nextElementSibling.classList?.contains("footnote-sidenote")) return;
|
||||
document.querySelectorAll('a.footref[href^="#fn"]').forEach(ref => {
|
||||
const sup = ref.closest("sup") || ref;
|
||||
// idempotent: don't insert twice
|
||||
if (sup.nextElementSibling && sup.nextElementSibling.classList?.contains("footnote-sidenote")) return;
|
||||
|
||||
const targetId = ref.getAttribute("href").replace(/^#/, ""); // works for fn.2 or fn2
|
||||
const targetId = ref.getAttribute("href").replace(/^#/, ""); // works for fn.2 or fn2
|
||||
|
||||
const anchor = document.getElementById(targetId);
|
||||
if (!anchor) return;
|
||||
const anchor = document.getElementById(targetId);
|
||||
if (!anchor) return;
|
||||
|
||||
const footdef = anchor.closest(".footdef") || anchor.parentElement;
|
||||
if (!footdef) return;
|
||||
const footdef = anchor.closest(".footdef") || anchor.parentElement;
|
||||
if (!footdef) return;
|
||||
|
||||
// 1) Prefer leaf paragraphs to avoid div+p duplication
|
||||
let paras = footdef.querySelectorAll("p.footpara");
|
||||
if (!paras.length) {
|
||||
// fallback: any .footpara elements that don't contain another .footpara
|
||||
paras = footdef.querySelectorAll(".footpara:not(:has(.footpara))");
|
||||
}
|
||||
// 1) Prefer leaf paragraphs to avoid div+p duplication
|
||||
let paras = footdef.querySelectorAll("p.footpara");
|
||||
if (!paras.length) {
|
||||
// fallback: any .footpara elements that don't contain another .footpara
|
||||
paras = footdef.querySelectorAll(".footpara:not(:has(.footpara))");
|
||||
}
|
||||
|
||||
// 2) Build HTML, de-duplicating by text content
|
||||
let parts = [];
|
||||
if (paras.length) {
|
||||
const seen = new Set();
|
||||
parts = Array.from(paras).map(p => {
|
||||
const txt = p.textContent.trim().replace(/\s+/g, " ");
|
||||
if (seen.has(txt)) return "";
|
||||
seen.add(txt);
|
||||
return p.innerHTML.trim();
|
||||
}).filter(Boolean);
|
||||
}
|
||||
// 2) Build HTML, de-duplicating by text content
|
||||
let parts = [];
|
||||
if (paras.length) {
|
||||
const seen = new Set();
|
||||
parts = Array.from(paras).map(p => {
|
||||
const txt = p.textContent.trim().replace(/\s+/g, " ");
|
||||
if (seen.has(txt)) return "";
|
||||
seen.add(txt);
|
||||
return p.innerHTML.trim();
|
||||
}).filter(Boolean);
|
||||
}
|
||||
|
||||
// 3) Fallback: clean full block if no paras found
|
||||
if (!parts.length) {
|
||||
const clone = footdef.cloneNode(true);
|
||||
clone.querySelectorAll("sup.footnum, a[role='doc-backlink']").forEach(n => n.remove());
|
||||
parts = [clone.innerHTML.trim()];
|
||||
}
|
||||
// 3) Fallback: clean full block if no paras found
|
||||
if (!parts.length) {
|
||||
const clone = footdef.cloneNode(true);
|
||||
clone.querySelectorAll("sup.footnum, a[role='doc-backlink']").forEach(n => n.remove());
|
||||
parts = [clone.innerHTML.trim()];
|
||||
}
|
||||
|
||||
// 4) Insert the sidenote
|
||||
const sn = document.createElement("span");
|
||||
sn.className = "sidenote footnote-sidenote";
|
||||
sn.setAttribute("data-fn", (ref.textContent || "").trim());
|
||||
sn.innerHTML = parts.join(" ");
|
||||
// 4) Insert the sidenote
|
||||
const sn = document.createElement("span");
|
||||
sn.className = "sidenote footnote-sidenote";
|
||||
sn.setAttribute("data-fn", (ref.textContent || "").trim());
|
||||
sn.innerHTML = parts.join(" ");
|
||||
|
||||
sup.insertAdjacentElement("afterend", sn);
|
||||
});
|
||||
sup.insertAdjacentElement("afterend", sn);
|
||||
});
|
||||
});
|
||||
(function(){
|
||||
|
||||
|
||||
/* Function for setting the theme */
|
||||
(function(){
|
||||
const root = document.documentElement;
|
||||
const storageKey = "theme";
|
||||
const saved = localStorage.getItem(storageKey);
|
||||
if (saved === "dark" || saved === "light") {
|
||||
root.setAttribute("data-theme", saved);
|
||||
root.setAttribute("data-theme", saved);
|
||||
}
|
||||
const btn = document.getElementById("theme-toggle");
|
||||
if (!btn) return;
|
||||
btn.addEventListener("click", () => {
|
||||
const current = root.getAttribute("data-theme");
|
||||
const next = current === "dark" ? "light" : "dark";
|
||||
// If no current (auto), assume we’re toggling to dark first
|
||||
const target = current ? next : "dark";
|
||||
root.setAttribute("data-theme", target);
|
||||
localStorage.setItem(storageKey, target);
|
||||
const current = root.getAttribute("data-theme");
|
||||
const next = current === "dark" ? "light" : "dark";
|
||||
// If no current (auto), assume we’re toggling to dark first
|
||||
const target = current ? next : "dark";
|
||||
root.setAttribute("data-theme", target);
|
||||
localStorage.setItem(storageKey, target);
|
||||
});
|
||||
})();
|
||||
})();
|
||||
|
||||
|
||||
/* Event listener for scrolling and changing the active label on the TOC */
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const toc = document.querySelector("#text-table-of-contents");
|
||||
if (!toc) { console.warn("No #text-table-of-contents found"); return; }
|
||||
const toc = document.querySelector("#text-table-of-contents");
|
||||
if (!toc) { console.warn("No #text-table-of-contents found"); return; }
|
||||
|
||||
const links = toc.querySelectorAll('a[href^="#"]');
|
||||
if (!links.length) { console.warn("No ToC links found"); return; }
|
||||
const links = toc.querySelectorAll('a[href^="#"]'); // '^=' is a starts with operator.
|
||||
// <a href="#introduction">Intro</a> matches
|
||||
if (!links.length) { console.warn("No ToC links found"); return; }
|
||||
|
||||
// Map: id -> link
|
||||
const linkById = new Map();
|
||||
links.forEach(a => {
|
||||
const id = decodeURIComponent(a.getAttribute("href").slice(1));
|
||||
const el = document.getElementById(id);
|
||||
if (el) linkById.set(id, a);
|
||||
});
|
||||
if (!linkById.size) { console.warn("No matching headings with IDs"); return; }
|
||||
|
||||
// Headings to observe (h2–h4 usually)
|
||||
const headings = [...document.querySelectorAll("h2[id], h3[id], h4[id]")]
|
||||
.filter(h => linkById.has(h.id));
|
||||
|
||||
// Helper to mark active
|
||||
const setActive = (id) => {
|
||||
// Map: id -> link
|
||||
const linkById = new Map();
|
||||
links.forEach(a => {
|
||||
const active = a.getAttribute("href") === `#${id}`;
|
||||
a.classList.toggle("is-active", active);
|
||||
if (active) a.setAttribute("aria-current", "true");
|
||||
else a.removeAttribute("aria-current");
|
||||
const id = decodeURIComponent(a.getAttribute("href").slice(1));
|
||||
const el = document.getElementById(id);
|
||||
if (el) linkById.set(id, a);
|
||||
});
|
||||
};
|
||||
if (!linkById.size) { console.warn("No matching headings with IDs"); return; }
|
||||
|
||||
// Calculate sticky header offset in px
|
||||
const headerOffsetPx = 6.5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
// Headings to observe (h2–h4 usually)
|
||||
const headings = [...document.querySelectorAll("h2[id], h3[id], h4[id]")]
|
||||
.filter(h => linkById.has(h.id));
|
||||
|
||||
// Track visible headings (id -> distance from top)
|
||||
const visible = new Map();
|
||||
// Helper to mark active
|
||||
const setActive = (id) => {
|
||||
links.forEach(a => {
|
||||
const active = a.getAttribute("href") === `#${id}`;
|
||||
a.classList.toggle("is-active", active);
|
||||
if (active) a.setAttribute("aria-current", "true");
|
||||
else a.removeAttribute("aria-current");
|
||||
});
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
const id = entry.target.id;
|
||||
if (entry.isIntersecting) {
|
||||
// How far from the top (after header offset)
|
||||
const dist = entry.target.getBoundingClientRect().top - headerOffsetPx;
|
||||
visible.set(id, dist);
|
||||
} else {
|
||||
visible.delete(id);
|
||||
}
|
||||
// Calculate sticky header offset in px
|
||||
const headerOffsetPx = 6.5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
|
||||
// Track visible headings (id -> distance from top)
|
||||
const visible = new Map();
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
const id = entry.target.id;
|
||||
if (entry.isIntersecting) {
|
||||
// How far from the top (after header offset)
|
||||
const dist = entry.target.getBoundingClientRect().top - headerOffsetPx;
|
||||
visible.set(id, dist);
|
||||
} else {
|
||||
visible.delete(id);
|
||||
}
|
||||
});
|
||||
|
||||
if (visible.size) {
|
||||
// Choose the heading closest to the top (>= -headerOffset)
|
||||
const topMost = [...visible.entries()]
|
||||
.sort((a,b) => Math.abs(a[1]) - Math.abs(b[1]))[0][0];
|
||||
setActive(topMost);
|
||||
// console.log("Active:", topMost, visible);
|
||||
}
|
||||
}, {
|
||||
root: null, // track relative to viewport
|
||||
rootMargin: `-${headerOffsetPx}px 0px -70% 0px`,
|
||||
threshold: [0, 0.01, 0.1] // fire as soon as it enters
|
||||
});
|
||||
|
||||
if (visible.size) {
|
||||
// Choose the heading closest to the top (>= -headerOffset)
|
||||
const topMost = [...visible.entries()]
|
||||
.sort((a,b) => Math.abs(a[1]) - Math.abs(b[1]))[0][0];
|
||||
setActive(topMost);
|
||||
// console.log("Active:", topMost, visible);
|
||||
}
|
||||
}, {
|
||||
root: null, // track relative to viewport
|
||||
rootMargin: `-${headerOffsetPx}px 0px -70% 0px`,
|
||||
threshold: [0, 0.01, 0.1] // fire as soon as it enters
|
||||
});
|
||||
headings.forEach(h => observer.observe(h));
|
||||
|
||||
headings.forEach(h => observer.observe(h));
|
||||
// Initial highlight (in case load mid‑page)
|
||||
let bestId = null, bestDist = Infinity;
|
||||
headings.forEach(h => {
|
||||
const top = h.getBoundingClientRect().top - headerOffsetPx;
|
||||
const dist = top < 0 ? Math.abs(top) : top + 1e6;
|
||||
if (dist < bestDist) { bestDist = dist; bestId = h.id; }
|
||||
});
|
||||
if (bestId) setActive(bestId);
|
||||
|
||||
// Initial highlight (in case you load mid‑page)
|
||||
let bestId = null, bestDist = Infinity;
|
||||
headings.forEach(h => {
|
||||
const top = h.getBoundingClientRect().top - headerOffsetPx;
|
||||
const dist = top < 0 ? Math.abs(top) : top + 1e6;
|
||||
if (dist < bestDist) { bestDist = dist; bestId = h.id; }
|
||||
});
|
||||
if (bestId) setActive(bestId);
|
||||
|
||||
// Optional: smooth-scroll ToC clicks
|
||||
toc.addEventListener("click", (e) => {
|
||||
const a = e.target.closest('a[href^="#"]');
|
||||
if (!a) return;
|
||||
const id = decodeURIComponent(a.hash.slice(1));
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
e.preventDefault();
|
||||
el.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
el.setAttribute("tabindex", "-1");
|
||||
el.focus({ preventScroll: true });
|
||||
history.pushState(null, "", `#${id}`);
|
||||
});
|
||||
// smooth-scroll ToC clicks
|
||||
toc.addEventListener("click", (e) => {
|
||||
const a = e.target.closest('a[href^="#"]');
|
||||
if (!a) return;
|
||||
const id = decodeURIComponent(a.hash.slice(1));
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
e.preventDefault();
|
||||
el.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
el.setAttribute("tabindex", "-1");
|
||||
el.focus({ preventScroll: true });
|
||||
history.pushState(null, "", `#${id}`);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -3,11 +3,17 @@
|
||||
========================= */
|
||||
:root{
|
||||
/* Layout */
|
||||
--content: 880px;
|
||||
|
||||
--gutter: 2rem;
|
||||
--margin: 420px;
|
||||
--body-pad: 1rem;
|
||||
|
||||
--content: clamp(
|
||||
var(--content-min),
|
||||
calc(100vi - 2*var(--body-pad) - 2*(var(--margin) + var(--gutter))),
|
||||
var(--content-max)
|
||||
);
|
||||
--content-min: 60ch;
|
||||
--content-max: 880px;
|
||||
/* Fullwidth media tuning */
|
||||
--bleed: 48px;
|
||||
--fullwidth-cap: 860px;
|
||||
@@ -91,7 +97,7 @@ nav{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px){
|
||||
@media (max-width: 1250px){
|
||||
#preamble.status{
|
||||
padding-right: var(--body-pad);
|
||||
}
|
||||
@@ -139,8 +145,9 @@ footer{
|
||||
.marginnote{
|
||||
float: right;
|
||||
width: var(--margin);
|
||||
margin-right: calc(-1 * ( (95vw - var(--content)) / 2 ));
|
||||
padding-left: var(--gutter);
|
||||
//margin-right: calc(-1 * ( (95vw - var(--content)) / 2 ));
|
||||
margin-right: calc(-1 * ((100vi - var(--content)) / 2));
|
||||
padding-right: var(--gutter);
|
||||
overflow-wrap: break-word; /* preferred */
|
||||
word-wrap: break-word; /* legacy support */
|
||||
word-break: break-word; /* safety for stubborn cases */
|
||||
@@ -207,7 +214,7 @@ body{ counter-reset: sidenote-counter; }
|
||||
text-align: center; font-size: .95rem; color: #666; margin-top: .4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px){
|
||||
@media (max-width: 1250px){
|
||||
#content.content{
|
||||
padding-right: var(--body-pad);
|
||||
}
|
||||
@@ -506,7 +513,7 @@ li ol li::before {
|
||||
.epigraph blockquote footer{ color: var(--muted); }
|
||||
|
||||
/* Mobile sidenote rule uses a light border; make it theme-aware */
|
||||
@media (max-width: 1100px){
|
||||
@media (max-width: 1250px){
|
||||
.sidenote, .marginnote{
|
||||
border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
|
||||
}
|
||||
@@ -577,7 +584,7 @@ li ol li::before {
|
||||
|
||||
/* Mobile: these already stack under content via your media query; nothing special needed,
|
||||
but we can soften the border a touch to match the mobile sidenote rule */
|
||||
@media (max-width: 1100px){
|
||||
@media (max-width: 1250px){
|
||||
.sidenote .mn-img,
|
||||
.marginnote .mn-img{
|
||||
border-color: color-mix(in oklab, var(--fg) 12%, transparent);
|
||||
@@ -600,8 +607,9 @@ li ol li::before {
|
||||
/* push into the left gutter, mirroring .sidenote on the right */
|
||||
float: left;
|
||||
width: var(--margin);
|
||||
margin-left: calc(-1 * ( (95vw - var(--content)) / 2 ));
|
||||
padding-right: var(--gutter);
|
||||
//margin-left: calc(-1 * ( (95vw - var(--content)) / 2 ));
|
||||
margin-left: calc(-1 * ((100vi - var(--content)) / 2));
|
||||
padding-left: var(--gutter);
|
||||
box-sizing: border-box;
|
||||
|
||||
/* sticky behavior */
|
||||
@@ -648,7 +656,7 @@ h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
|
||||
/* =========================
|
||||
Mobile / narrow view
|
||||
========================= */
|
||||
@media (max-width: 1100px){
|
||||
@media (max-width: 1250px){
|
||||
#table-of-contents{
|
||||
float: none;
|
||||
position: static; /* no sticky on small screens */
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
- [[file:blogs/blogs-list.org][Blogs List]]
|
||||
- tags
|
||||
- [[file:tags/introduction.org][Tag: introduction]]
|
||||
- [[file:tags/emacs.org][Tag: emacs]]
|
||||
- [[file:tags/education.org][Tag: education]]
|
||||
- [[file:tags/website.org][Tag: website]]
|
||||
- [[file:tags/review.org][Tag: review]]
|
||||
- [[file:tags/insights.org][Tag: insights]]
|
||||
- [[file:tags/emacs.org][Tag: emacs]]
|
||||
- [[file:tags/website.org][Tag: website]]
|
||||
- [[file:tags/education.org][Tag: education]]
|
||||
- [[file:tags/review.org][Tag: review]]
|
||||
Reference in New Issue
Block a user