changes for code items in right side bar styled differently

Author: JohnWeidner

site_jaspr/lib/extensions/code_aware_toc.dart

@@ -0,0 +1,97 @@
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:jaspr_content/jaspr_content.dart';
+import 'package:jaspr_router/jaspr_router.dart';
+
+/// A post-processing extension that runs after [TableOfContentsExtension]
+/// to preserve `<code>` formatting in TOC entries.
+///
+/// Headings written with backticks in markdown (e.g. `` ### `types` ``) will
+/// render their TOC link text inside a `<code>` element, matching Docusaurus
+/// behavior where code-styled headings look visually distinct from regular
+/// headings in the table of contents.
+class CodeAwareTocPostProcessor implements PageExtension {
+  static final _headerRegex = RegExp(r'^h(\d)$', caseSensitive: false);
+
+  @override
+  Future<List<Node>> apply(Page page, List<Node> nodes) async {
+    final codeHeadingIds = <String>{};
+    _findCodeHeadings(nodes, codeHeadingIds);
+
+    if (codeHeadingIds.isNotEmpty) {
+      final toc = page.data['toc'];
+      if (toc is TableOfContents) {
+        page.apply(data: {
+          'toc': _CodeAwareTableOfContents(toc.entries, codeHeadingIds),
+        });
+      }
+    }
+
+    return nodes;
+  }
+
+  void _findCodeHeadings(List<Node> nodes, Set<String> codeIds) {
+    for (final node in nodes) {
+      if (node is ElementNode) {
+        if (_headerRegex.hasMatch(node.tag)) {
+          final id = node.attributes['id'];
+          if (id != null && _hasCodeChild(node)) {
+            codeIds.add(id);
+          }
+        }
+        if (node.children != null) {
+          _findCodeHeadings(node.children!, codeIds);
+        }
+      }
+    }
+  }
+
+  bool _hasCodeChild(ElementNode node) {
+    for (final child in node.children ?? const <Node>[]) {
+      if (child is ElementNode) {
+        if (child.tag == 'code') return true;
+        if (_hasCodeChild(child)) return true;
+      }
+    }
+    return false;
+  }
+}
+
+class _CodeAwareTableOfContents extends TableOfContents {
+  _CodeAwareTableOfContents(super.entries, this._codeEntryIds);
+
+  final Set<String> _codeEntryIds;
+
+  @override
+  Component build() {
+    return ul([..._buildToc(entries)]);
+  }
+
+  Iterable<Component> _buildToc(List<TocEntry> toc, [int indent = 0]) sync* {
+    for (final entry in toc) {
+      final isCode = _codeEntryIds.contains(entry.id);
+      yield li(
+        styles: Styles(padding: Padding.only(left: (0.75 * indent).em)),
+        [
+          Builder(
+            builder: (context) {
+              final route = RouteState.of(context);
+              return a(
+                href: '${route.path}#${entry.id}',
+                [
+                  if (isCode)
+                    code([Component.text(entry.text)])
+                  else
+                    Component.text(entry.text),
+                ],
+              );
+            },
+          ),
+        ],
+      );
+      if (entry.children.isNotEmpty) {
+        yield* _buildToc(entry.children, indent + 1);
+      }
+    }
+  }
+}

site_jaspr/lib/main.server.dart

@@ -21,6 +21,7 @@ import 'package:jaspr_content/theme.dart';
 
 import 'components/breadcrumb.dart';
 import 'components/doc_callout.dart';
+import 'extensions/code_aware_toc.dart';
 import 'components/edit_page_link.dart';
 import 'components/homepage_layout.dart';
 import 'components/icon_link.dart';
@@ -48,6 +49,7 @@ void main() {
       extensions: [
         HeadingAnchorsExtension(),
         TableOfContentsExtension(),
+        CodeAwareTocPostProcessor(),
       ],
       components: [
         DocCallout(),

site_jaspr/lib/styles/site_styles.dart

@@ -356,8 +356,8 @@ List<StyleRule> get siteStyles => [
   // ───────────────────────────────────────────────────────────────────────
   // Sidebar width: match Docusaurus 300px (--doc-sidebar-width)
   // Use high specificity to override DocsLayout's .docs .main-container .sidebar-container
-  css('.docs .main-container .sidebar-container').styles(width: 300.px),
-  css('.docs .sidebar').styles(width: 300.px),
+  css('.docs .main-container .sidebar-container').styles(width: 300.px, overflow: Overflow.hidden),
+  css('.docs .sidebar').styles(width: 300.px, raw: {'overflow-x': 'hidden'}),
   // Sidebar border-right: match Docusaurus 1px solid border
   css('.docs .sidebar-container').styles(
     border: Border.only(
@@ -532,12 +532,13 @@ List<StyleRule> get siteStyles => [
     color: Color('#2a48df'),
     fontWeight: FontWeight.w500,
   ),
-  // TOC sub-items (h3+): rounded pill border (matching Docusaurus nested items)
-  css('.toc li[style*="0.75"] a').styles(
+  // TOC code sub-items (backtick headings): rounded pill border
+  css('.toc a code').styles(
     padding: Padding.symmetric(horizontal: 0.5.rem, vertical: 0.125.rem),
     border: Border.all(color: Color('#dadde1'), width: 1.px),
     radius: BorderRadius.circular(12.px),
     fontSize: 11.px,
+    raw: {'font-family': 'inherit'},
   ),
   // Dark mode TOC
   css('[data-theme="dark"] .docs .main-container main > div aside.toc > div').styles(
@@ -554,7 +555,7 @@ List<StyleRule> get siteStyles => [
   css('[data-theme="dark"] .toc a.toc-active').styles(
     color: Color('#66fbd1'),
   ),
-  css('[data-theme="dark"] .toc li[style*="0.75"] a').styles(
+  css('[data-theme="dark"] .toc a code').styles(
     border: Border.all(color: Color('#444950'), width: 1.px),
   ),
   // ───────────────────────────────────────────────────────────────────────
@@ -621,6 +622,14 @@ List<StyleRule> get siteStyles => [
       padding: Padding.symmetric(vertical: 0.25.rem),
     ),
   ]),
+  // Mobile TOC code sub-items: pill border (same as sidebar TOC)
+  css('.mobile-toc .mobile-toc-content a code').styles(
+    padding: Padding.symmetric(horizontal: 0.5.rem, vertical: 0.125.rem),
+    border: Border.all(color: Color('#dadde1'), width: 1.px),
+    radius: BorderRadius.circular(12.px),
+    fontSize: 11.px,
+    raw: {'font-family': 'inherit'},
+  ),
   // Mobile TOC links: use higher specificity to override .content-container a
   css('.mobile-toc .mobile-toc-content a').styles(
     color: Color('#1c1e21'),
@@ -645,10 +654,8 @@ List<StyleRule> get siteStyles => [
   css('[data-theme="dark"] .mobile-toc .mobile-toc-content a:hover').styles(
     color: Color('#66fbd1'),
   ),
-
-  // Dark mode TOC: remove pill borders
-  css('[data-theme="dark"] .toc li[style] a').styles(
-    border: Border.none,
+  css('[data-theme="dark"] .mobile-toc .mobile-toc-content a code').styles(
+    border: Border.all(color: Color('#444950'), width: 1.px),
   ),
 
   // ───────────────────────────────────────────────────────────────────────