Refactored prose and added style for ToC.astro

src/lib/markdoc/tags.ts

@@ -50,22 +50,16 @@ export function createTags(state: NodeState, resolveLink: ResolveLink): Record<s
           })
         state.markers.add(marker)
         const n = state.sidenotes.length + 1
-        state.sidenotes.push({
-          n,
-          marker,
-          type: noteType,
-          children: inlineOf(text(node.attributes.note)),
-        })
-        return new Tag(
-          'a',
-          {
-            class: 'sidenote-ref',
-            id: `snref-${n}`,
-            href: `#sn-${n}`,
-            style: `anchor-name: --sn-${n}`,
-          },
-          [marker],
-        )
+        const children = inlineOf(text(node.attributes.note))
+        state.sidenotes.push({ n, marker, type: noteType, children })
+        return [
+          new Tag('a', { class: 'sidenote-ref', id: `snref-${n}`, href: `#sn-${n}` }, [marker]),
+          new Tag(
+            'span',
+            { class: `sidenote sidenote--${noteType}`, id: `sn-${n}`, role: 'note' },
+            [new Tag('span', { class: 'sidenote__marker' }, [marker]), ...children],
+          ),
+        ]
       },
     },
     xref: {