import Link from 'next/link';
import { cx } from '@nx/nx-dev/ui-primitives';
import { useHeadingsObserver } from './use-headings-observer';
import { ProcessedDocument } from '@nx/nx-dev/models-document';
interface Heading {
id: string;
level: number;
title: string;
highlightColor?: 'blue' | 'yellow' | 'green' | 'red';
}
export function collectHeadings(
node: any,
sections: Heading[] = []
): Heading[] {
if (node) {
if (node.name && node.name === 'Heading') {
function childToString(child: any) {
if (typeof child === 'string') {
return child;
}
if (child.children) {
return child.children.map(childToString).join(' ');
}
return '';
}
const title = node.children.map(childToString).join(' ');
if (typeof title === 'string') {
sections.push({
...node.attributes,
title,
});
}
}
if (node.children) {
for (const child of node.children) {
collectHeadings(child, sections);
}
}
}
return sections;
}
export function TableOfContents({
elementRef,
headings,
path,
children,
document,
}: {
elementRef: any;
headings: Heading[];
path: string;
children: React.ReactNode;
document: ProcessedDocument;
}): JSX.Element {
const headingLevelTargets: number[] = [1, 2, 3]; // matching to: H1, H2, H3...
const items = headings.filter(
(item) => item.id && headingLevelTargets.includes(item.level)
);
const activeId = useHeadingsObserver(
elementRef,
{
threshold: [0, 0.25, 0.5, 0.75, 1],
root: null,
rootMargin: '-10% 0% -45% 0%',
},
headings.find((i) => i.level === 1)?.title || null
);
return (
<>
{children}
);
}