starting work on abstracting card design

src/pages/meta/design.astro

@@ -4,13 +4,31 @@ import BaseLayout from '../../layouts/BaseLayout.astro'
 import Header from '../../components/Header.astro'
 import Footer from '../../components/Footer.astro'
 
-import { Content } from '../../content/meta/design.mdx'
+import CodeBlockPreview from '../../components/meta/CodeBlockPreview.astro'
+
+import { Content, getHeadings } from '../../content/meta/design.mdx'
+
+const headings = getHeadings()
 ---
 
 <BaseLayout {...Astro.props} pageName="design">
     <Header />
+    <aside>
+        <nav>
+            <h2>Indice</h2>
+            <ul>
+                {
+                    headings.map(heading => (
+                        <li style={{ '--depth': heading.depth }}>
+                            <a href={`#${heading.slug}`}>{heading.text}</a>
+                        </li>
+                    ))
+                }
+            </ul>
+        </nav>
+    </aside>
     <main class="text-content center">
-        <Content />
+        <Content components={{ pre: CodeBlockPreview }} />
     </main>
     <Footer />
 </BaseLayout>