wip: toc clause numbers

src/components/SpecSidebar.astro

@@ -31,11 +31,17 @@ const { items } = Astro.props;
             "text-gray-500 hover:text-gray-950 hover:bg-gray-100",
             "dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800",
             item.level === 3 && "pl-6 text-[0.8125rem]",
+            item.clause && "flex",
           ]}
           data-sidebar-link
           data-section-id={item.id}
         >
-          {item.title}
+          {item.clause && (
+            <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600">
+              {item.clause}
+            </span>
+          )}
+          <span>{item.title}</span>
         </a>
       ))
     }
@@ -115,10 +121,16 @@ const { items } = Astro.props;
               "text-gray-500 hover:text-gray-950 hover:bg-gray-100",
               "dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800",
               item.level === 3 && "pl-6 text-[0.8125rem]",
+              item.clause && "flex",
             ]}
             data-toc-link
           >
-            {item.title}
+            {item.clause && (
+              <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600">
+                {item.clause}
+              </span>
+            )}
+            <span>{item.title}</span>
           </a>
         ))
       }

src/utils/parseSpecContent.ts

@@ -13,6 +13,7 @@ export interface TocItem {
   id: string;
   title: string;
   level: number;
+  clause?: string;
 }
 
 export interface FAQItem {
@@ -25,6 +26,7 @@ export interface SpecSection {
   id: string;
   title: string;
   content: string;
+  clause: string;
 }
 
 export interface ParsedSpec {
@@ -182,11 +184,13 @@ function findSpecSections(nodes: RootContent[]): SpecSection[] {
   for (const node of nodes) {
     if (node.type === "list" && (node as List).ordered) {
       const titles = extractListItemTitles(node as List);
-      for (const title of titles) {
+      for (let i = 0; i < titles.length; i++) {
+        const title = titles[i];
         sections.push({
           id: `spec-${slugify(title)}`,
           title,
           content: "",
+          clause: `${i + 1}.`,
         });
       }
       break; // Only process first ordered list
@@ -286,7 +290,12 @@ function buildTocItems(parsed: Partial<ParsedSpec>): TocItem[] {
 
     if (parsed.specSections) {
       for (const section of parsed.specSections) {
-        items.push({ id: section.id, title: section.title, level: 3 });
+        items.push({
+          id: section.id,
+          title: section.title,
+          level: 3,
+          clause: section.clause,
+        });
       }
     }
   }