fix sidenote layout and performance enhancements

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.
+[^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.

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])
                 }
             }

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])