start work on sidenotes

src/components/Sidenote.astro

@@ -0,0 +1,18 @@
+---
+const id = crypto.randomUUID();
+SIDENOTE_COUNT += 1
+---
+
+<label for={id} class="counter anchor">{ SIDENOTE_COUNT }</label>
+<input {id} type="checkbox" class="toggle" />
+
+<div class="sidenote">
+    <div class="content">
+        <span class="counter floating">{ SIDENOTE_COUNT }</span>
+        <slot />
+    </div>
+</div>
+
+
+<style>
+</style>

src/env.d.ts

@@ -0,0 +1 @@
+declare var SIDENOTE_COUNT: number;

src/middleware.ts

@@ -0,0 +1,7 @@
+import { defineMiddleware } from 'astro:middleware';
+
+// set SIDENOTE_COUNT to 0 at the start of every request so that as sidenotes are rendered, it only counts them on the current page
+export const onRequest = defineMiddleware((_context, next) => {
+    globalThis.SIDENOTE_COUNT = 0;
+    return next();
+})