update for levels

src/lib/components/blog/table-of-contents.svelte

@@ -30,6 +30,8 @@
 
     export let toc: Array<TocItem> = [];
     export let heading: string = 'Table of Contents';
+
+    $: console.log({ toc });
 </script>
 
 <svelte:window on:scroll={handleIsScrolled} />
@@ -50,8 +52,8 @@
                         'before:bg-greyscale-300 before:absolute before:top-0 before:left-0 before:h-6 before:w-px before:rounded-full before:opacity-0 before:transition-opacity',
                         {
                             'font-medium': parent.level && parent.level === 1,
-                            'ps-6': parent.level && parent.level === 2,
+                            'pl-12': parent.level && parent.level === 2,
-                            'ps-12': parent.level && parent.level >= 3,
+                            'ps-16': parent.level && parent.level >= 3,
                             'before:opacity-100': parent.selected
                         }
                     )}

src/markdoc/layouts/Article.svelte

@@ -54,7 +54,8 @@
             title: heading.title,
             href: `#${id}`,
             step: heading.step,
-            selected: selected === id
+            selected: selected === id,
+            level: heading.level
         });
         return carry;
     }, []);

src/markdoc/layouts/Tutorial.svelte

@@ -52,7 +52,8 @@
             title: heading.title,
             href: `#${id}`,
             step: heading.step,
-            selected: selected === id
+            selected: selected === id,
+            level: heading.level
         });
         return carry;
     }, []);