Add sidebar navigation to playbooks

playbooks/README.md

@@ -66,7 +66,7 @@ Write your playbook content in Markdown format. Images, tables, code, and other
 | **Getting Started** | First hands-on step—get users into the tool quickly |
 | **Core Concepts** | Teach the mental model (tables and diagrams help) |
 | **Main Activity** | Where users achieve the payoff moment |
-| **Next Steps** | 3-5 paths forward with links to resources |
+| **Next Steps** | 3-5 paths forward with links to resources and official documentation |
 
 ### OS-Specific Content
 

playbooks/core/comfyui-image-gen/README.md

@@ -166,3 +166,5 @@ Workflows are self-contained—share the JSON file with colleagues, and they can
 - **Browse community workflows**: [ComfyUI Examples](https://github.com/comfyanonymous/ComfyUI_examples) has many ready-to-use workflows
 
 ComfyUI's strength is experimentation: connect nodes differently, adjust parameters, and observe how each change affects the output. This hands-on exploration builds intuition for how diffusion models work.
+
+For more information, check out the [ComfyUI Documentation](https://docs.comfy.org/).

website/src/app/globals.css

@@ -323,4 +323,37 @@ body {
 .playbook-content > .md-h3:first-child,
 .playbook-content > .md-h4:first-child {
   margin-top: 0;
+}
+
+/* Table of Contents Sidebar */
+.toc-sidebar {
+  padding: 1rem;
+  background: rgba(26, 26, 26, 0.6);
+  border: 1px solid var(--border-color);
+  border-radius: 0.75rem;
+  backdrop-filter: blur(8px);
+  max-height: calc(100vh - 8rem);
+  overflow-y: auto;
+}
+
+.toc-sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.toc-sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.toc-sidebar::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 2px;
+}
+
+.toc-sidebar::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* Smooth scroll for anchor links */
+.scroll-mt-28 {
+  scroll-margin-top: 7rem;
 }