From 54bcec280d81c3a5f09fe0f242a61dd1646efcee Mon Sep 17 00:00:00 2001
From: Joseph Montanaro <jfmonty2@gmail.com>
Date: Sat, 19 Aug 2023 12:12:12 -0700
Subject: [PATCH] fix sidenote width and add partial nesting support

---
 src/lib/Sidenote.svelte | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/lib/Sidenote.svelte b/src/lib/Sidenote.svelte
index 9191f0c..4c69886 100644
--- a/src/lib/Sidenote.svelte
+++ b/src/lib/Sidenote.svelte
@@ -10,7 +10,7 @@
         margin-left: 0.05rem;
 
         &:after {
-            font-size: 0.75rem;
+            font-size: 0.75em;
             position: relative;
             bottom: 0.3rem;
             color: #8c0606;
@@ -23,7 +23,8 @@
 
         &:before {
             content: counter(sidenote) " ";
-            /* absolute positioning puts it at the top-left corner of the sidenote */
+            /* absolute positioning puts it at the top-left corner of the sidenote, overlapping with the content
+            (because the sidenote is floated it counts as a positioned parent, I think) */
             position: absolute;
             /* translate moves it out to the left (and just a touch up to mimic the superscript efect)
             -100% refers to the width of the element, so it pushes it out further if necessary (i.e. two digits instead of one) */
@@ -46,7 +47,7 @@
         .sidenote {
             --gap: 2rem;
             --sidenote-width: min(14rem, calc(50vw - var(--gap) - var(--content-width) / 2));
-            max-width: var(--sidenote-width);
+            width: var(--sidenote-width);
             hyphens: auto;
             position: relative;
             float: right;
@@ -55,6 +56,12 @@
             margin-bottom: 0.7rem;
         }
 
+        .nested.sidenote {
+            margin-right: 0;
+            margin-top: 0.7rem;
+            margin-bottom: 0;
+        }
+
         .dismiss {
             display: none;
         }
@@ -127,6 +134,21 @@
 </script>
 
 <script>
+    import { onMount } from 'svelte';
+
+    let noteBody;
+    let nested = false;
+    onMount(() => {
+        // check to see if the parent node is also a sidenote, if so move this one to the end
+        let parentNote = noteBody.parentElement.closest('span.sidenote');
+        if (parentNote) {
+            noteBody.remove();
+            parentNote.appendChild(noteBody);
+            nested = true;
+        }
+    });
+
+
     const id = Math.random().toString().slice(2);
     let toggle;
 
@@ -146,7 +168,7 @@
 
 <label for={id} on:click={toggleState} class="counter"></label>
 <input {id} bind:this={toggle} type="checkbox" class="sidenote-toggle" />
-<span class="sidenote">
+<span class="sidenote" class:nested bind:this={noteBody}>
     <label class="dismiss" for={id} on:click={toggleState}>&times;</label>
     <slot></slot>
 </span>
\ No newline at end of file