From d9a3eeae1eaf3cd020a55d17b43349a4b10adeae Mon Sep 17 00:00:00 2001
From: osmarks <me@osmarks.net>
Date: Sat, 26 Oct 2024 15:14:51 +0100
Subject: [PATCH] fix sidenote layout and performance enhancements

---
 blog/maghammer.md    |  4 ++--
 src/page.js          | 11 ++++++++++-
 templates/layout.pug |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/blog/maghammer.md b/blog/maghammer.md
index b76f930..14b4e5a 100644
--- a/blog/maghammer.md
+++ b/blog/maghammer.md
@@ -1,5 +1,5 @@
 ---
-title: "Maghammer: My personal data warehouse"
+title: "Maghammer: my personal data warehouse"
 created: 28/08/2023
 updated: 14/05/2024
 description: Powerful search tools as externalized cognition, and how mine work.
@@ -100,4 +100,4 @@ If you have related good ideas or correct opinions, you may tell me them below.
 
 [^5]: This is the size assuming optimal compression, but obviously the actual brain has many other concerns and isn't storing things that way. The actual hardware probably holds, very roughly, 10<sup>15</sup> bits.
 
-[^6]: The SQLite documentation describes use of [recursive common table expressions](https://www.sqlite.org/lang_with.html) to implement graph queries, but this, while cool, is not exactly pleasant and elegant.
\ No newline at end of file
+[^6]: The SQLite documentation describes use of [recursive common table expressions](https://www.sqlite.org/lang_with.html) to implement graph queries, but this, while cool, is not exactly pleasant and elegant.
diff --git a/src/page.js b/src/page.js
index 18ed89d..49accf0 100644
--- a/src/page.js
+++ b/src/page.js
@@ -402,6 +402,15 @@ window.points = (async () => {
     }
 })()
 
+// we don't consider things that might be in a <summary> but it is not relevant here
+const inCollapsedDetails = el => {
+    while (el) {
+        if (el.nodeName === "DETAILS" && el.open === false) return true
+        el = el.parentElement
+    }
+    return false
+}
+
 const footnotes = document.querySelector(".footnotes")
 const sidenotes = document.querySelector(".sidenotes")
 if (sidenotes && footnotes) {
@@ -427,7 +436,7 @@ if (sidenotes && footnotes) {
             const exclusions = [[-Infinity, Math.max(articleRect.top, snRect.top)]]
             for (const codeblock of codeblocks) {
                 const codeblockRect = codeblock.getBoundingClientRect()
-                if (codeblockRect.width !== 0) { // collapsed
+                if (codeblockRect.width !== 0 && !inCollapsedDetails(codeblock)) { // collapsed
                     exclusions.push([codeblockRect.top - BORDER, codeblockRect.top + codeblockRect.height + BORDER])
                 }
             }
diff --git a/templates/layout.pug b/templates/layout.pug
index 134ce94..1a86fb0 100644
--- a/templates/layout.pug
+++ b/templates/layout.pug
@@ -8,7 +8,7 @@ mixin image(src)
         picture
             each pair in src
                 if pair[0] == "_fallback"
-                    img(src=pair[1])
+                    img(src=pair[1], loading="lazy")
                 else
                     source(srcset=pair[1], type=pair[0])