claude changes

2026-03-08 13:40:14 +00:00
parent b19e3c1039
commit d5ac83d160
4 changed files with 843 additions and 589 deletions
--- a/assets/scripts/script.js
+++ b/assets/scripts/script.js
@@ -12,7 +12,6 @@ document.addEventListener("DOMContentLoaded", () => {
  restoreStackFromURL();
  initClearPanesButton();
  initInitialPaneControls();
-
 });

 /* =========================================================
@@ -21,22 +20,22 @@ document.addEventListener("DOMContentLoaded", () => {

 function initCopyButtons() {
  document.querySelectorAll("pre.src").forEach(codeBlock => {
-    if (codeBlock.querySelector(".copy-btn")) return; // idempotent
+    if (codeBlock.querySelector(".copy-btn")) return;

    const button = document.createElement("button");
    button.className = "copy-btn";
-    button.textContent = "Copy";
+    button.textContent = "copy";
    codeBlock.appendChild(button);

    button.addEventListener("click", async () => {
      const text = codeBlock.innerText.replace(button.innerText, "").trim();
      try {
        await navigator.clipboard.writeText(text);
-        button.textContent = "Copied!";
-        setTimeout(() => (button.textContent = "Copy"), 1500);
+        button.textContent = "copied";
+        setTimeout(() => (button.textContent = "copy"), 1600);
      } catch {
-        button.textContent = "Failed";
-        setTimeout(() => (button.textContent = "Copy"), 1500);
+        button.textContent = "failed";
+        setTimeout(() => (button.textContent = "copy"), 1600);
      }
    });
  });
@@ -103,18 +102,27 @@ function initThemeToggle() {
  const key = "theme";
  const saved = localStorage.getItem(key);

-  if (saved === "dark" || saved === "light") {
-    root.setAttribute("data-theme", saved);
-  }
+  // Apply saved preference, defaulting to dark
+  const initial = (saved === "dark" || saved === "light") ? saved : "dark";
+  root.setAttribute("data-theme", initial);

  const btn = document.getElementById("theme-toggle");
  if (!btn) return;

+  const updateIcon = theme => {
+    btn.textContent = theme === "dark" ? "☀" : "☽";
+    btn.setAttribute("aria-label",
+      theme === "dark" ? "Switch to light theme" : "Switch to dark theme");
+  };
+
+  updateIcon(initial);
+
  btn.addEventListener("click", () => {
    const current = root.getAttribute("data-theme");
    const next = current === "dark" ? "light" : "dark";
    root.setAttribute("data-theme", next);
    localStorage.setItem(key, next);
+    updateIcon(next);
  });
 }

@@ -234,7 +242,6 @@ function initTOCHighlighting() {

 let fullscreenSnapshot = null;

-
 /* =========================================================
   STACKED NAVIGATION (PANES)
   ========================================================= */
@@ -256,16 +263,34 @@ function initStackedNavigation() {
  });
 }

+function scrollPaneIntoView(pane) {
+  // Scroll the horizontal stack container, not the page, to avoid
+  // the browser jumping the whole viewport vertically.
+  const root = document.getElementById("stack-root");
+  if (!root) return;
+  const paneLeft = pane.offsetLeft;
+  const paneRight = paneLeft + pane.offsetWidth;
+  const viewRight = root.scrollLeft + root.offsetWidth;
+  if (paneLeft < root.scrollLeft || paneRight > viewRight) {
+    root.scrollTo({ left: paneLeft, behavior: "smooth" });
+  }
+}
+
 async function pushPane(pathname, hash = "") {
  const track = document.querySelector(".stack-track");
  if (!track) return;

  const existing = [...track.children].find(p => p.dataset.url === pathname);
  if (existing) {
-    existing.scrollIntoView({ behavior: "smooth", inline: "end" });
+    scrollPaneIntoView(existing);
    return;
  }

+  // If in fullscreen, exit first so the new pane is immediately visible
+  if (document.body.classList.contains("pane-fullscreen")) {
+    await exitFullscreen();
+  }
+
  const res = await fetch(pathname);
  const doc = new DOMParser().parseFromString(await res.text(), "text/html");

@@ -278,18 +303,28 @@ async function pushPane(pathname, hash = "") {

  pane.appendChild(content);
  track.appendChild(pane);
-  pane.scrollIntoView({ behavior: "smooth", inline: "end" });
+  scrollPaneIntoView(pane);

  if (hash) {
    requestAnimationFrame(() => {
-      pane.querySelector(`#${CSS.escape(hash)}`)
-        ?.scrollIntoView({ behavior: "smooth", block: "start" });
+      const target = pane.querySelector(`#${CSS.escape(hash)}`);
+      if (target) {
+        pane.scrollTop = target.offsetTop;
+      }
    });
  }

-  // Find the title-section and attach event listeners to the controls
+  attachPaneControls(pane);
+  updateURL();
+}
+
+function attachPaneControls(pane) {
  const titleSection = pane.querySelector(".title-section");
-  if (titleSection) {
+  if (!titleSection) return;
+
+  // Remove edit button if present
+  titleSection.querySelectorAll(".pane-edit").forEach(btn => btn.remove());
+
  const closeBtn = titleSection.querySelector(".pane-close");
  const fullscreenBtn = titleSection.querySelector(".pane-fullscreen");

@@ -299,8 +334,11 @@ async function pushPane(pathname, hash = "") {
        exitFullscreen({ removePane: pane });
        return;
      }
+      pane.style.animation = "pane-out var(--dur-mid) var(--ease-in) forwards";
+      setTimeout(() => {
        pane.remove();
        updateURL();
+      }, 200);
    });
  }

@@ -315,40 +353,14 @@ async function pushPane(pathname, hash = "") {
  }
 }

-  updateURL();
-}
-
 function initInitialPaneControls() {
-  // Initialize controls for the initial pane (pane-root) that's already in the HTML
  const initialPane = document.querySelector(".pane-root");
  if (!initialPane) return;

-  const titleSection = initialPane.querySelector(".title-section");
-  if (!titleSection) return;
+  // Remove edit button
+  initialPane.querySelectorAll(".pane-edit").forEach(btn => btn.remove());

-  const closeBtn = titleSection.querySelector(".pane-close");
-  const fullscreenBtn = titleSection.querySelector(".pane-fullscreen");
-  
-  if (closeBtn) {
-    closeBtn.addEventListener("click", () => {
-      if (document.body.classList.contains("pane-fullscreen")) {
-        exitFullscreen({ removePane: initialPane });
-        return;
-      }
-      initialPane.remove();
-      updateURL();
-    });
-  }
-  
-  if (fullscreenBtn) {
-    fullscreenBtn.addEventListener("click", () => {
-      if (initialPane.classList.contains("is-fullscreen")) {
-        exitFullscreen();
-      } else {
-        enterFullscreen(initialPane);
-      }
-    });
-  }
+  attachPaneControls(initialPane);
 }

 document.addEventListener("keydown", e => {
@@ -357,7 +369,6 @@ document.addEventListener("keydown", e => {
  }
 });

-
 function enterFullscreen(pane) {
  if (!fullscreenSnapshot) {
    fullscreenSnapshot = [...document.querySelectorAll(".stack-pane")]
@@ -374,7 +385,6 @@ function enterFullscreen(pane) {
  updateURL();
 }

-
 async function exitFullscreen({ removePane } = {}) {
  if (!fullscreenSnapshot) return;

@@ -386,7 +396,6 @@ async function exitFullscreen({ removePane } = {}) {
    .querySelectorAll(".stack-pane.is-fullscreen")
    .forEach(p => p.remove());

-  // Restore stack EXCEPT the removed pane
  for (const url of fullscreenSnapshot) {
    if (url === removeUrl) continue;
    await pushPane(url);
@@ -396,12 +405,9 @@ async function exitFullscreen({ removePane } = {}) {
  updateURL();
 }

-
 function clearAllPanes() {
  const panes = [...document.querySelectorAll(".stack-pane")];
-
  panes.slice(1).forEach(pane => pane.remove());
-
  updateURL();
 }

@@ -423,6 +429,7 @@ async function restoreStackFromURL() {
    await pushPane(url);
  }
 }
+
 function initClearPanesButton() {
  const btn = document.getElementById("close-all");
  if (!btn) return;
@@ -431,3 +438,16 @@ function initClearPanesButton() {
    clearAllPanes();
  });
 }
+
+/* =========================================================
+   PANE EXIT ANIMATION (keyframe injected at runtime)
+   ========================================================= */
+
+const style = document.createElement("style");
+style.textContent = `
+  @keyframes pane-out {
+    from { opacity: 1; transform: translateX(0); }
+    to   { opacity: 0; transform: translateX(16px); }
+  }
+`;
+document.head.appendChild(style);
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
--- a/lisp/build.el
+++ b/lisp/build.el
@@ -96,9 +96,7 @@
           html
           nil t))

-    ;; Wrap title with metadata section - use lambda to properly capture title
-    ;; Handle titles with nested HTML tags by matching everything between opening and closing h1 tags
-    ;; Use .* to match any characters (greedy) - will match up to the last </h1> which should be our closing tag
+    ;; Wrap title with metadata section — edit button removed
    (setq html
          (replace-regexp-in-string
           "<h1 class=\"title\">\\(.*\\)</h1>"
@@ -107,18 +105,17 @@
               (format
                "<div class=\"title-section\">
  <div class=\"title-controls\">
-    <button class=\"pane-fullscreen\" aria-label=\"Fullscreen\">F</button>
-    <button class=\"pane-edit\" aria-label=\"Edit pane\">E</button>
+    <button class=\"pane-fullscreen\" aria-label=\"Fullscreen\">⤢</button>
    <button class=\"pane-close\" aria-label=\"Close pane\">×</button>
  </div>
  <h1 class=\"title\">%s</h1>
  <div class=\"title-metadata\">
    <span class=\"metadata-item\">
-      <span class=\"metadata-label\">planted:</span>
+      <span class=\"metadata-label\">planted</span>
      <span class=\"metadata-value\">%s</span>
    </span>
    <span class=\"metadata-item\">
-      <span class=\"metadata-label\">last tended to:</span>
+      <span class=\"metadata-label\">tended</span>
      <span class=\"metadata-value\">%s</span>
    </span>
  </div>
@@ -175,8 +172,10 @@
    <div id=\"search-results\"></div>
  </div>

-<a href=\"https://zainezq.com\"> <img src=\"/assets/2_to_1.svg\" alt=\"Web logo\" class=\"web-logo\" /> </a>
-<button id=\"close-all\">Close All</button>
+<div class=\"banner-actions\">
+  <button id=\"theme-toggle\" aria-label=\"Toggle theme\" title=\"Toggle light/dark\"></button>
+  <button id=\"close-all\">close all</button>
+</div>
 </div>
 "
  )
@@ -185,7 +184,7 @@
  "<footer>
 <div class=\"copyright-container\">
 <div class=\"copyright\">
-Copyright &copy; 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.</div></div>
+Copyright &copy; 2022-2026 Zaine Qayyum. All rights reserved unless otherwise noted.</div></div>
 <div class=\"generated\">
 Created with %c on <a href=\"https://www.archlinux.org/\">Arch</a> <a href=\"https://www.gnu.org\">GNU</a>/<a href=\"https://www.kernel.org/\">Linux</a>
 </div>
@@ -237,20 +236,6 @@ Created with %c on <a href=\"https://www.archlinux.org/\">Arch</a> <a href=\"htt
        nil))))


-(defun my/org-export-insert-backlinks (_backend)
-  "Insert Org-roam backlinks before export, with HTML attributes."
-  (when (and (featurep 'org-roam)
-             (org-roam-node-at-point))
-    (let ((backlinks (my/get-org-roam-backlinks (buffer-file-name))))
-      (when backlinks
-        (goto-char (point-max))
-        (insert "\n#+ATTR_HTML: :class backlinks-section :id backlinks\n Backlinks\n")
-        (insert "#+ATTR_HTML: :class backlinks-list\n")
-        (dolist (bl backlinks)
-          (insert (format "- %s\n"
-                          (plist-get bl :link))))))))
-
-
 (defun my/org-export-insert-backlinks (_backend)
  "Insert Org-roam backlinks before export."
  (when (and (buffer-file-name)
--- a/orgroam-build.log
+++ b/orgroam-build.log
@@ -9,5 +9,5 @@ Generating the JSON output...
 Building project (full rebuild with search index)...
 emacs -Q --script lisp/build.el
 Loading /home/zaine/master-folder/org_files/org_roam/lisp/macros.el (source)...
-Starting full rebuild at 2026-03-08 12:44:25
-✅ Full rebuild complete in 6.49 seconds
+Starting full rebuild at 2026-03-08 13:37:37
+✅ Full rebuild complete in 6.37 seconds