1 files changed, 44 insertions, 14 deletions

diff --git a/public/footnotes.js b/public/footnotes.js
index 50f709e..57ded98 100644
--- a/public/footnotes.js
+++ b/public/footnotes.js
@@ -1,27 +1,45 @@
+document.documentElement.classList.add("js");
+
+const SIDENOTES = {
+  inside: true, // true: notes inside the frame, right of the post. false: outside, in the margin
+  insideShare: 0.21, // share of the post area given to the notes when inside (0.3 = 70/30)
+  border: false, // border around each note
+  // readingWidth: "70ch", // max width of the post text, null = no cap
+  readingWidth: null, // max width of the post text, null = no cap
+};
+
 document.addEventListener("DOMContentLoaded", () => {
   const area = document.querySelector("[data-scroll-area]");
+  const article = area?.querySelector("article");
+  if (!area || !article) return;
+
+  article.style.maxWidth = SIDENOTES.readingWidth ?? "none";
+  if (SIDENOTES.inside)
+    article.style.marginRight = `${SIDENOTES.insideShare * 100}%`;
+
   const refs = [...document.querySelectorAll("a.footnote-ref")];
-  if (!area || refs.length === 0) return;
+  if (refs.length === 0) return;
 
   const panel = document.createElement("div");
-  panel.className = "sidenotes";
+  panel.className = "sidenotes" + (SIDENOTES.border ? " bordered" : "");
   document.body.append(panel);
 
   const items = refs.map((ref) => {
     ref.addEventListener("click", (e) => e.preventDefault());
 
     const note = document.getElementById(ref.getAttribute("href").slice(1));
-    const num = document.createElement("span");
-    num.className = "sidenote-num";
-    num.textContent = ref.textContent;
-
     const body = document.createElement("div");
     body.append(...note.cloneNode(true).childNodes);
     body.querySelector(".footnote-backref")?.remove();
 
+    const num = document.createElement("sup");
+    num.className = "sidenote-num";
+    num.textContent = ref.textContent;
+    (body.querySelector("p") ?? body).prepend(num);
+
     const el = document.createElement("div");
     el.className = "sidenote";
-    el.append(num, body);
+    el.append(body);
     panel.append(el);
     return { ref, el };
   });
@@ -31,22 +49,34 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const layout = () => {
     queued = false;
-    const rect = area.getBoundingClientRect();
-    const frame = document.querySelector(".terminal").getBoundingClientRect();
     const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    const left = frame.right + rem;
+    const top0 = area.getBoundingClientRect().top + area.clientTop;
+
+    let left, right;
+    if (SIDENOTES.inside) {
+      const r = area.getBoundingClientRect();
+      left = article.getBoundingClientRect().right + rem;
+      right =
+        r.left +
+        area.clientLeft +
+        area.clientWidth -
+        parseFloat(getComputedStyle(area).paddingRight);
+    } else {
+      left = area.closest("main").getBoundingClientRect().right + rem;
+      right = window.innerWidth - rem;
+    }
 
     Object.assign(panel.style, {
       left: `${left}px`,
-      top: `${rect.top}px`,
-      width: `${window.innerWidth - left - rem}px`,
-      height: `${rect.height}px`,
+      top: `${top0}px`,
+      width: `${Math.max(0, right - left)}px`,
+      height: `${area.clientHeight}px`,
     });
 
     let bottom = -Infinity;
     for (const { ref, el } of items) {
       const top = Math.max(
-        ref.getBoundingClientRect().top - rect.top,
+        ref.getBoundingClientRect().top - top0,
         bottom + gap,
       );
       el.style.top = `${top}px`;