docs: table of content

kobaltedev · Feb 25, 2024 · ad3c18e · ad3c18e
1 parent faad31f
commit ad3c18e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 21 deletions.
diff --git a/apps/docs/src/components/table-of-contents.tsx b/apps/docs/src/components/table-of-contents.tsx
@@ -102,7 +102,9 @@ function updateHeadings(setter: Setter<TocItem[]>) {
 		[
 			...document
 				.getElementsByTagName("article")[0]
-				.querySelectorAll("h1, h2, h3, h4, h5, h6"),
+				.querySelectorAll(
+					"h1[data-toc], h2[data-toc], h3[data-toc], h4[data-toc], h5[data-toc], h6[data-toc]",
+				),
 		].map((element) => ({
 			depth: Number(element.tagName.substr(1)),
 			text: element.textContent!,
@@ -130,7 +132,6 @@ export function TableOfContents() {
 	);
 
 	const currentSection = useCurrentSection(toc);
-
 	return (
 		<div class="hidden xl:sticky xl:top-[4.5rem] xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-4 xl:pr-6">
 			<nav aria-labelledby="on-this-page-title" class="w-56">
@@ -143,24 +144,43 @@ export function TableOfContents() {
 					</h2>
 					<ol class="mt-3 text-sm">
 						<For each={toc()}>
-							{(section) => (
-								<li>
-									<h3>
-										<a
-											href={`${path.pathname}#${section.slug}`}
-											class={clsx(
-												"block w-full font-sans transition font-normal rounded px-3 py-2 hover:bg-sky-50 dark:hover:bg-sky-900/20",
-												section.slug === currentSection()
-													? "text-sky-700 dark:text-sky-600"
-													: "text-zinc-600 dark:text-zinc-400",
-												section.depth === 3 && "pl-6",
-											)}
-										>
-											{section.text}
-										</a>
-									</h3>
-								</li>
-							)}
+							{(section) => {
+								let ref: HTMLElement;
+
+								createEffect(
+									on(
+										() => currentSection(),
+										(currentSection) => {
+											if (isServer || section.slug !== currentSection) return;
+
+											ref?.scrollIntoView({
+												behavior: "smooth",
+												block: "nearest",
+											});
+										},
+									),
+								);
+
+								return (
+									<li>
+										<h3>
+											<a
+												ref={ref}
+												href={`${path.pathname}#${section.slug}`}
+												class={clsx(
+													"block w-full font-sans transition font-normal rounded px-3 py-2 hover:bg-sky-50 dark:hover:bg-sky-900/20",
+													section.slug === currentSection()
+														? "text-sky-700 dark:text-sky-600"
+														: "text-zinc-600 dark:text-zinc-400",
+													section.depth === 3 && "pl-6",
+												)}
+											>
+												{section.text}
+											</a>
+										</h3>
+									</li>
+								);
+							}}
 						</For>
 					</ol>
 				</Suspense>

diff --git a/apps/docs/src/mdx-components.tsx b/apps/docs/src/mdx-components.tsx
@@ -10,12 +10,17 @@ export const mdxComponents = {
 		const [local, others] = splitProps(props, ["children"]);
 
 		return (
-			<h1 {...others}>
+			<h1 data-toc="" {...others}>
 				<MetaTitle>{`${local.children} – Kobalte`}</MetaTitle>
 				{local.children}
 			</h1>
 		);
 	},
+	h2: (props: ComponentProps<"h2">) => <h2 data-toc="" {...props} />,
+	h3: (props: ComponentProps<"h3">) => <h3 data-toc="" {...props} />,
+	h4: (props: ComponentProps<"h4">) => <h4 data-toc="" {...props} />,
+	h5: (props: ComponentProps<"h5">) => <h5 data-toc="" {...props} />,
+	h6: (props: ComponentProps<"h6">) => <h6 data-toc="" {...props} />,
 	code: (props: ComponentProps<"code">) => {
 		const [local, others] = splitProps(props, ["class"]);