From dbcc82a10ab54d19791aaee26026a4ea0f4f0f33 Mon Sep 17 00:00:00 2001
From: Joseph Montanaro <jfmonty2@gmail.com>
Date: Sat, 14 May 2022 07:43:08 -0700
Subject: [PATCH] fix sidenotes

---
 src/lib/Post.svelte     | 40 +++++++++++++++++++++++++++++-----------
 src/lib/Sidenote.svelte |  1 +
 static/style.css        |  1 +
 svelte.config.js        |  3 +++
 4 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/lib/Post.svelte b/src/lib/Post.svelte
index bf0f154..7808c34 100644
--- a/src/lib/Post.svelte
+++ b/src/lib/Post.svelte
@@ -10,23 +10,41 @@
     export let title, date;
 
     // deal with sidenote collisions
-    onMount(async () => {
+    function tileNotes() {
         const minNoteGap = 15;
-        let sidenotes = Array.from(document.getElementsByClassName('sidenote'));
+        // let sidenotes = Array.from(document.getElementsByClassName('sidenote'));
+        let notes = document.querySelectorAll('.sidenote');
+        if (window.getComputedStyle(notes[0]).position === 'fixed') {
+            // fixed position means we are in mobile territory, so 
+            // get rid of the overflow stuff and then exit
+            for (let note of notes) {
+                note.style.top = '';
+            }
+            return;
+        }
+
+        let labels = document.querySelectorAll('label.counter');
         var prev = 0;
-        for (var i=0; i < sidenotes.length; i++) {
-            let note = sidenotes[i];
-            let {y, height} = note.getBoundingClientRect();
-            y += window.scrollY; // getBoundingClientRect is relative to viewport
-            if (y < prev + minNoteGap) {
-                note.style.top = `${prev + minNoteGap}px`;
-                prev = prev + minNoteGap + height;
+        for (var i=0; i < notes.length; i++) {
+            let labelTop = labels[i].getBoundingClientRect().y + window.scrollY;
+            let noteHeight = notes[i].getBoundingClientRect().height;
+            if (labelTop < prev + minNoteGap) {
+                // there is a collision
+                notes[i].style.top = `${prev + minNoteGap}px`;
+                prev = prev + minNoteGap + noteHeight;
             }
             else {
-                prev = y + height;
+                // no collision
+                notes[i].style.top = `${labelTop}px`;
+                prev = labelTop + noteHeight;
             }
         }
-    })
+    }
+
+    onMount(async () => {
+        tileNotes();
+        window.addEventListener('resize', tileNotes);
+    });
 </script>
 
 <svelte:head>
diff --git a/src/lib/Sidenote.svelte b/src/lib/Sidenote.svelte
index 19a1c5e..d9cd159 100644
--- a/src/lib/Sidenote.svelte
+++ b/src/lib/Sidenote.svelte
@@ -40,6 +40,7 @@
             position: absolute;
             left: calc(50vw + var(--content-width) / 2 + 1rem);
             max-width: 12rem;
+            hyphens: auto;
         }
     }
 
diff --git a/static/style.css b/static/style.css
index bc6e2fa..91225cb 100644
--- a/static/style.css
+++ b/static/style.css
@@ -12,6 +12,7 @@ html {
     font-size: 20px;
     line-height: 1.3;
     letter-spacing: -0.005em;
+    color: #1e1e1e;
 }
 
 body {
diff --git a/svelte.config.js b/svelte.config.js
index bb67542..5b14cdc 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -16,6 +16,9 @@ const config = {
     kit: {
         // hydrate the <div id="svelte"> element in src/app.html
         adapter: staticAdapter(),
+        prerender: {
+            default: true,
+        },
     }
 };