fix(docs): restore table of contents layout and parsing

[sudhashrestha]

Restore the xl two-column grid for the TOC rail and parse raw MDX body instead of Velite HTML so headings are extracted correctly.

Summary by CodeRabbit

• Style

  • Increased sidebar width on blog and docs for large screens and made the TOC sidebar visible at slightly smaller breakpoints to improve layout.
  • Adjusted sidebar navigation item styling and added a docs-specific CSS rule for consistent typography.

• Refactor

  • Unified table-of-contents generation across blog and docs to use the same source for consistency and accuracy.

[cloudflare-workers-and-pages]

Deploying animata with    Cloudflare Pages

Latest commit:	21fc463
Status:	✅  Deploy successful!
Preview URL:	https://53bbd835.animata.pages.dev
Branch Preview URL:	https://fix-docs-toc.animata.pages.dev

View logs

[coderabbitai]

📝 Walkthrough

Walkthrough

Blog and docs pages now derive tables of contents from parsed body content and update layouts to use a lg grid with a 200px sidebar; sidebar visibility and sidebar-nav styling were adjusted accordingly.

Changes

Table of Contents Generation and Sidebar Layout

Layer / File(s)	Summary
Blog page TOC and sidebar layout app/(main)/blog/[[...slug]]/page.tsx	Blog page generates TOC from blog.body instead of blog.content; main grid uses lg with a 200px sidebar and the TOC sidebar shows at lg instead of xl.
Docs page TOC generation app/(main)/docs/[[...slug]]/page.tsx	Docs page computes toc from doc.body (via getTableOfContents) and stores it for sidebar rendering.
Docs page JSX restructuring and layout app/(main)/docs/[[...slug]]/page.tsx	Return JSX wrapped in a fragment; main layout changed to lg:grid-cols-[1fr_200px]; conditional TOC sidebar renders the toc and is visible at lg.
Sidebar nav styling and docs CSS components/sidebar-nav.tsx, styles/docs.css	Sidebar nav root adds font-normal/text-foreground; active link class now only applies bg-muted; disabled items remove text-muted-foreground; new .docs-shell aside font rules added.

🎯 3 (Moderate) | ⏱️ ~20 minutes

• codse/animata#497: Overlapping sidebar nav active/disabled styling changes touching the same components/sidebar-nav.tsx logic.

Suggested reviewers:

• hari

"I nibble code and hop in delight,
TOCs now from body, rendered right,
Sidebars wider, tidy and neat,
Classes trimmed for a cleaner seat,
A rabbit cheers — layouts look light! 🐇📚"

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: fixing the table of contents layout (responsive grid breakpoint changes from xl to lg, sidebar width adjustments) and parsing changes (switching from blog/doc.content to blog/doc.body).
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/docs-toc

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

components/sidebar-nav.tsx (2)

343-343: 💤 Low value

Consider removing redundant font-weight declaration.

The font-normal Tailwind utility on line 343 sets font-weight: 400, but the CSS rule at styles/docs.css:18 also explicitly sets font-weight: 400 for .docs-shell aside. Since the CSS selector is more specific, the Tailwind utility is effectively redundant.

For cleaner maintainability, consider removing the font-normal class here and relying solely on the CSS rule.

♻️ Proposed cleanup

-    <div className="grid auto-rows-max grid-flow-row gap-0.5 text-sm font-normal text-foreground">
+    <div className="grid auto-rows-max grid-flow-row gap-0.5 text-sm text-foreground">

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@components/sidebar-nav.tsx` at line 343, Remove the redundant Tailwind font
utility by deleting "font-normal" from the className on the container div in
components/sidebar-nav.tsx (the div with className starting "grid auto-rows-max
grid-flow-row..."); rely on the existing CSS rule in styles/docs.css that sets
font-weight: 400 for .docs-shell aside, and run a quick visual check of the
sidebar to confirm no style regressions.

---

375-376: Ensure disabled sidebar-nav titles stay visually distinct (they rely on opacity-60 + inherited text-foreground)

• In components/sidebar-nav.tsx, the disabled (non-link) row adds cursor-not-allowed opacity-60, but the title span is only truncate (no text-muted-foreground), so the disabled state contrast comes mainly from opacity.
• The item label does keep text-muted-foreground, so the muted styling loss applies to the title text specifically.
• This matches the broader pattern in the repo where disabled states often use disabled:*opacity* (e.g., components/ui/input.tsx, components/ui/command.tsx, components/ui/select.tsx); one exception is animata/widget/water-tracker.tsx which uses text-muted-foreground for its disabled state.

Consider reintroducing a muted/secondary text color for the disabled sidebar title if opacity alone isn’t sufficient for the intended hierarchy.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@components/sidebar-nav.tsx` around lines 375 - 376, The disabled sidebar row
relies only on "opacity-60" (item.disabled) while the title span only has
"truncate" and loses the muted color, so update the conditional classes in
components/sidebar-nav.tsx to apply a muted/secondary text color to the title
when item.disabled is true (use the same "text-muted-foreground" used by the
item label) — target the title span and add a conditional class based on
item.disabled so disabled titles use text-muted-foreground in addition to the
existing opacity/cursor styles.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@components/sidebar-nav.tsx`:
- Line 343: Remove the redundant Tailwind font utility by deleting "font-normal"
from the className on the container div in components/sidebar-nav.tsx (the div
with className starting "grid auto-rows-max grid-flow-row..."); rely on the
existing CSS rule in styles/docs.css that sets font-weight: 400 for .docs-shell
aside, and run a quick visual check of the sidebar to confirm no style
regressions.
- Around line 375-376: The disabled sidebar row relies only on "opacity-60"
(item.disabled) while the title span only has "truncate" and loses the muted
color, so update the conditional classes in components/sidebar-nav.tsx to apply
a muted/secondary text color to the title when item.disabled is true (use the
same "text-muted-foreground" used by the item label) — target the title span and
add a conditional class based on item.disabled so disabled titles use
text-muted-foreground in addition to the existing opacity/cursor styles.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f9fe3282-4194-4484-a140-c84e84de9a33

📥 Commits

Reviewing files that changed from the base of the PR and between 7ba1a46 and 21fc463.

📒 Files selected for processing (4)

• app/(main)/blog/[[...slug]]/page.tsx
• app/(main)/docs/[[...slug]]/page.tsx
• components/sidebar-nav.tsx
• styles/docs.css

🚧 Files skipped from review as they are similar to previous changes (2)

• app/(main)/blog/[[...slug]]/page.tsx
• app/(main)/docs/[[...slug]]/page.tsx