rework sidenotes to make nesting possible

src/plugins/rehype.js

@@ -12,6 +12,7 @@ export function localRehype() {
         const needsDropcap = vfile.data.fm.dropcap !== false
         let dropcapAdded = false;
 
+        let sidenotesCount = 0;
         let moduleScript;
         let imports = new Set();
         if (needsDropcap) {
@@ -35,7 +36,13 @@ export function localRehype() {
             if (needsDropcap && !dropcapAdded && isParagraph(node)) {
                 addDropcap(node);
                 dropcapAdded = true;
-                return SKIP;
+            }
+
+            // add `count` prop to each <Sidenote> component
+            if (isSidenote(node)) {
+                // increment the counter first so that the count starts at 1
+                sidenotesCount += 1;
+                addSidenoteCount(node, sidenotesCount);
             }
         });
 
@@ -52,6 +59,9 @@ export function localRehype() {
 
             moduleScript.value = `${openingTag}\n\t${importScript}${remainder}`;
         }
+
+        // const name = vfile.filename.split('/').findLast(() => true);
+        // writeFileSync(`scratch/${name}.json`, JSON.stringify(tree, undefined, 4));
     }
 }
 
@@ -78,6 +88,17 @@ function addDropcap(par) {
 }
 
 
+function addSidenoteCount(node, count) {
+    // get the index of the closing >
+    const i = node.value.search(/>\s*$/);
+    if (i < 0) {
+        throw new Error('Failed to add counter to element, closing angle bracket not found.');
+    }
+    // splice in the count prop
+    node.value = `${node.value.slice(0, i)} count={${count}}>`;
+}
+
+
 function isHeading(node) {
     return node.type === 'element' && node.tagName.match(/h[1-6]/);
 }
@@ -89,3 +110,7 @@ function isModuleScript(node) {
 function isParagraph(node) {
     return node.type === 'element' && node.tagName === 'p';
 }
+
+function isSidenote(node) {
+    return node.type === 'raw' && node.value.match(/<\s*Sidenote/);
+}