Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sudhashrestha merged 3 commits into from
Jun 12, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7ba1a46
fix(docs): restore table of contents layout and parsing
sudhashrestha Jun 12, 2026
981f17b
fix(docs): improve sidebar nav readability
sudhashrestha Jun 12, 2026
21fc463
fix(docs): show table of contents from lg breakpoint
sudhashrestha Jun 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app/(main)/blog/[[...slug]]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,10 @@ export default async function BlogPage({ params }: BlogPageProps) {
notFound();
}

const toc = await getTableOfContents(blog.content);
const toc = await getTableOfContents(blog.body);

return (
<main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_150px]">
<main className="relative py-6 lg:grid lg:grid-cols-[1fr_200px] lg:gap-10 lg:py-8">
<div className="mx-auto w-full min-w-0">
<div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
<div className="overflow-hidden text-ellipsis whitespace-nowrap">Blog</div>
Expand Down Expand Up @@ -154,7 +154,7 @@ export default async function BlogPage({ params }: BlogPageProps) {
<DocsPager doc={blog} />
</div>
{blog.toc && (
<div className="hidden text-sm xl:block">
<div className="hidden text-sm lg:block">
<div className="sticky top-[6.25rem] -mt-10 pt-4">
<ScrollArea className="pb-10">
<div className="sticky top-[6.25rem] -mt-10 h-[calc(100vh-6.25rem)] py-12">
Expand Down
158 changes: 83 additions & 75 deletions app/(main)/docs/[[...slug]]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,93 +73,101 @@ export default async function DocPage({ params }: DocPageProps) {
notFound();
}

const toc = await getTableOfContents(doc.content);
const toc = await getTableOfContents(doc.body);

return (
<main id="main-content" className="relative py-6 lg:gap-10 lg:py-8 xl:grid">
<>
<DocJsonLd doc={doc} />
<div className="docs-content mx-auto w-full min-w-0">
<div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
<div className="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
<ChevronRightIcon className="h-4 w-4" />
<NavMenu title={doc.title} />
</div>
<div className="space-y-2">
<h1 className={cn("scroll-m-20 text-4xl font-bold tracking-tight")}>{doc.title}</h1>
{doc.description && (
<p className="w-full text-balance text-muted-foreground">{doc.description}</p>
)}
<div
className={cn("flex items-center space-x-2 text-sm text-muted-foreground", {
invisible: !doc.labels?.length,
})}
>
{doc.labels?.map((label) => {
return (
<span key={label} className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}>
{label}
</span>
);
})}
<main
id="main-content"
className="relative py-6 lg:grid lg:grid-cols-[1fr_200px] lg:gap-10 lg:py-8"
>
<div className="docs-content mx-auto w-full min-w-0">
<div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
<div className="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
<ChevronRightIcon className="h-4 w-4" />
<NavMenu title={doc.title} />
</div>
</div>
{doc.links ? (
<div className="flex items-center space-x-2 pt-4">
{doc.links?.doc && (
<Link
href={doc.links.doc}
target="_blank"
rel="noreferrer"
className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
>
Docs
<ExternalLinkIcon className="h-3 w-3" />
</Link>
<div className="space-y-2">
<h1 className={cn("scroll-m-20 text-4xl font-bold tracking-tight")}>{doc.title}</h1>
{doc.description && (
<p className="w-full text-balance text-muted-foreground">{doc.description}</p>
)}
{doc.links?.api && (
<div
className={cn("flex items-center space-x-2 text-sm text-muted-foreground", {
invisible: !doc.labels?.length,
})}
>
{doc.labels?.map((label) => {
return (
<span
key={label}
className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
>
{label}
</span>
);
})}
</div>
</div>
{doc.links ? (
<div className="flex items-center space-x-2 pt-4">
{doc.links?.doc && (
<Link
href={doc.links.doc}
target="_blank"
rel="noreferrer"
className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
>
Docs
<ExternalLinkIcon className="h-3 w-3" />
</Link>
)}
{doc.links?.api && (
<Link
href={doc.links.api}
target="_blank"
rel="noreferrer"
className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
>
API Reference
<ExternalLinkIcon className="h-3 w-3" />
</Link>
)}
</div>
) : null}
<DocDemoLinks docSlug={doc.slugAsParams} />
<div className="relative w-fit overflow-y-hidden">
<CarbonAds />
</div>
<div className="pb-12">
<Mdx code={doc.body} filePath={getMdxFilePath(doc)} />

<div className="my-3 text-right">
<Link
href={doc.links.api}
href={`https://github.com/codse/animata/edit/main/${getMdxFilePath(doc)}`}
target="_blank"
rel="noreferrer"
className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
className="text-sm text-secondary-foreground underline"
>
API Reference
<ExternalLinkIcon className="h-3 w-3" />
Edit this page on GitHub
</Link>
)}
</div>
) : null}
<DocDemoLinks docSlug={doc.slugAsParams} />
<div className="relative w-fit overflow-y-hidden">
<CarbonAds />
</div>
<div className="pb-12">
<Mdx code={doc.body} filePath={getMdxFilePath(doc)} />

<div className="my-3 text-right">
<Link
href={`https://github.com/codse/animata/edit/main/${getMdxFilePath(doc)}`}
target="_blank"
rel="noreferrer"
className="text-sm text-secondary-foreground underline"
>
Edit this page on GitHub
</Link>
</div>
</div>
<DocsPager doc={doc} />
</div>
<DocsPager doc={doc} />
</div>
{doc.toc && (
<div className="hidden text-sm xl:block">
<div className="sticky top-[6.25rem] -mt-10 pt-4">
<ScrollArea className="pb-10">
<div className="sticky top-[6.25rem] -mt-10 h-[calc(100vh-6.25rem)] py-12">
<DashboardTableOfContents toc={toc} />
</div>
</ScrollArea>
{doc.toc && (
<div className="hidden text-sm lg:block">
<div className="sticky top-[6.25rem] -mt-10 pt-4">
<ScrollArea className="pb-10">
<div className="sticky top-[6.25rem] -mt-10 h-[calc(100vh-6.25rem)] py-12">
<DashboardTableOfContents toc={toc} />
</div>
</ScrollArea>
</div>
</div>
</div>
)}
</main>
)}
</main>
</>
);
}
8 changes: 3 additions & 5 deletions components/sidebar-nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,7 +340,7 @@ interface DocsSidebarNavItemsProps {

export function DocsSidebarNavItems({ items, pathname }: DocsSidebarNavItemsProps) {
return items?.length ? (
<div className="grid auto-rows-max grid-flow-row gap-0.5 text-sm">
<div className="grid auto-rows-max grid-flow-row gap-0.5 text-sm font-normal text-foreground">
{items.map((item) => {
const itemKey = item.href ?? item.title;

Expand All @@ -353,9 +353,7 @@ export function DocsSidebarNavItems({ items, pathname }: DocsSidebarNavItemsProp
className={cn(
"group flex w-full items-center rounded-md border border-transparent px-2 py-1 capitalize hover:underline",
item.disabled && "cursor-not-allowed opacity-60",
pathname === item.href
? "bg-muted font-normal text-foreground"
: "text-muted-foreground",
pathname === item.href ? "bg-muted" : undefined,
)}
target={item.external ? "_blank" : ""}
rel={item.external ? "noreferrer" : ""}
Expand All @@ -374,7 +372,7 @@ export function DocsSidebarNavItems({ items, pathname }: DocsSidebarNavItemsProp
<span
key={itemKey}
className={cn(
"flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline",
"flex w-full cursor-not-allowed items-center rounded-md p-2 hover:underline",
item.disabled && "cursor-not-allowed opacity-60",
)}
>
Expand Down
5 changes: 5 additions & 0 deletions styles/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@
font-feature-settings: "ss02", "ss09";
}

.docs-shell aside {
font-family: var(--font-sans);
font-weight: 400;
}

.docs-sidebar-scroller {
scrollbar-width: thin;
scrollbar-color: hsl(var(--border)) transparent;
Expand Down