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.

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