Table of Contents

Copyexport interface TOCItemType {
  title: ReactNode;
  url: string;
  depth: number;
  /** [remark-steps] the step number */
  _step?: number;
}
 
export type TableOfContents = TOCItemType[];

Copyexport function getTableOfContents(
  content: Compatible,
  remarkPlugins?: PluggableList,
): TOCItemType[] | Promise<TOCItemType[]> {
  if (remarkPlugins) {
    return remark()
      .use(remarkPlugins)
      .use(remarkHeading)
      .process(content)
      .then((result) => {
        if ('toc' in result.data) return result.data.toc as TOCItemType[];
 
        return [];
      });
  }
 
  const result = remark().use(remarkHeading).processSync(content);
 
  if ('toc' in result.data) return result.data.toc as TOCItemType[];
  return [];
}

Copyexport function renderToc(opts: {
  toc: PortableTextBlock[];
  render: (body: PortableTextBlock) => ReactNode;
}): TOCItemType[] {
  const { render, toc } = opts;
 
  return toc.map(
    (item): TOCItemType => ({
      depth: Number(item.level ?? 0),
      title: render({ ...item, style: undefined }),
      url: `#${item._key}`,
    }),
  );
}

Copyexport function toStaticData(
  page: GeneratedPageProps,
  doc: Document,
): {
  toc: TOCItemType[];
  structuredData: StructuredData;
} {
  const slugger = new Slugger();
  const toc: TOCItemType[] = [];
  const structuredData: StructuredData = { headings: [], contents: [] };
 
  function pathItem(item: OperationObject, defaultTitle: string) {
    if (page.showTitle && item.operationId) {
      const title = item.summary || (item.operationId ? idToTitle(item.operationId) : defaultTitle);
      const id = slugger.slug(title);
 
      toc.push({
        depth: 2,
        title,
        url: `#${id}`,
      });
      structuredData.headings.push({
        content: title,
        id,
      });
    }

Copyexport function AnchorProvider({ toc, single = false, children }: AnchorProviderProps) {
  const observer = useMemo(() => new Observer(), []);
 
  observer.single = single;
  useEffect(() => {
    observer.setItems(toc);
  }, [observer, toc]);
 
  useEffect(() => {
    observer.watch({
      threshold: 0.9,
    });
 
    return () => observer.unwatch();
  }, [observer]);
 
  return <ObserverContext value={observer}>{children}</ObserverContext>;
}

Copyconst TOCContext = createContext<Primitive.TOCItemType[]>([]);
 
export function useTOCItems(): Primitive.TOCItemType[] {
  return use(TOCContext);
}
 
export type TOCProviderProps = Primitive.AnchorProviderProps;
 
export const { useActiveAnchor, useActiveAnchors, useItems } = Primitive;
 
export function TOCProvider({ toc, children, ...props }: TOCProviderProps) {
  return (
    <TOCContext value={toc}>
      <Primitive.AnchorProvider toc={toc} {...props}>
        {children}
      </Primitive.AnchorProvider>
    </TOCContext>
  );
}

Copyexport function TOCProvider({ toc, children, ...props }: TOCProviderProps) {
  return (
    <TOCContext value={toc}>
      <Primitive.AnchorProvider toc={toc} {...props}>
        {children}
      </Primitive.AnchorProvider>
    </TOCContext>
  );
}

Copyexport function TOCScrollArea({ ref, className, ...props }: ComponentProps<'div'>) {
  const viewRef = useRef<HTMLDivElement>(null);
 
  return (
    <div
      ref={mergeRefs(viewRef, ref)}
      className={cn(
        'relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3',
        className,
      )}
      {...props}
    >
      <Primitive.ScrollProvider containerRef={viewRef}>{props.children}</Primitive.ScrollProvider>
    </div>
  );

Copyfor (let i = 0; i < items.length; i++) {
  const item = items[i];
  const element: HTMLElement | null = container.querySelector(`a[href="${item.url}"]`);
  if (!element) continue;
 
  const styles = getComputedStyle(element);
  const x = getLineOffset(item.depth) + 0.5;
  const top = element.offsetTop + parseFloat(styles.paddingTop);
  const bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
 
  w = Math.max(x + 8, w);
  h = Math.max(h, bottom);
 
  if (i === 0) {
    d += ` M${x} ${top} L${x} ${bottom}`;
  } else {
    const [, upperBottom, upperX] = i > 0 ? positions[i - 1] : [0, 0, 0];
 
    d += ` C ${upperX} ${top - 4} ${x} ${upperBottom + 4} ${x} ${top} L${x} ${bottom}`;
  }
 
  if (item._step !== undefined) {
    output.push(
      <g key={i} transform={`translate(${x}, ${(top + bottom) / 2})`}>
        <circle cx="0" cy="0" r="8" className="fill-fd-primary" />
        <text
          cx="0"
          cy="0"
          textAnchor="middle"
          alignmentBaseline="central"
          dominantBaseline="middle"
          className="fill-fd-primary-foreground font-medium text-xs leading-none font-mono rtl:-scale-x-100"
        >
          {item._step}
        </text>
      </g>,
    );
  }
 
  positions.push([top, bottom, x]);
}

Copyfunction ThumbTrack({ computed }: { computed: ComputedSVG }) {
  const ref = useRef<HTMLDivElement>(null);
  const tocInfo = Primitive.useTOC();
 
  function calculate(items: Primitive.TOCItemInfo[]) {
    const out: Record<string, string> = {};
    const startIdx = items.findIndex((item) => item.active);
    if (startIdx === -1) return out;
 
    const endIdx = items.findLastIndex((item) => item.active);
    out['--track-top'] = `${computed.positions[startIdx][0]}px`;
    out['--track-bottom'] = `${computed.positions[endIdx][1]}px`;
    return out;
  }
 
  Primitive.useTOCListener((items) => {
    const element = ref.current;
    if (!element) return;
 
    for (const [k, v] of Object.entries(calculate(items))) {
      element.style.setProperty(k, v);
    }
  });
 
  return (
    <div
      ref={ref}
      className="absolute top-0 inset-s-0 origin-center rtl:-scale-x-100"
      style={{
        width: computed.width,
        height: computed.height,
        ...calculate(tocInfo.get()),
      }}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox={`0 0 ${computed.width} ${computed.height}`}
        className="absolute transition-[clip-path]"
        style={{
          width: computed.width,
          height: computed.height,
          clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))`,
        }}
      >
        {computed.content}
      </svg>
    </div>
  );
}

Copy'use client';
 
import { ChevronDown } from 'lucide-react';
import type { TOCItemType } from 'fumadocs-core/toc';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
import type { ComponentProps } from 'react';
import { cn } from '@/utils/cn';
import { useTranslations } from '@fuma-translate/react';
 
export interface InlineTocProps extends ComponentProps<typeof Collapsible> {
  items: TOCItemType[];
}

Copyexport function InlineTOC({ items, ...props }: InlineTocProps) {
  const t = useTranslations({ note: 'inline table of contents' });
 
  return (
    <Collapsible
      {...props}
      className={cn(
        'not-prose rounded-lg border bg-fd-card text-fd-card-foreground',
        props.className,
      )}
    >
      <CollapsibleTrigger className="group inline-flex w-full items-center justify-between px-4 py-2.5 font-medium">
        {props.children ?? t('Table of Contents')}
        <ChevronDown className="size-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
      </CollapsibleTrigger>
      <CollapsibleContent>
        <div className="flex flex-col p-4 pt-0 text-sm text-fd-muted-foreground">
          {items.map((item) => (
            <a
              key={item.url}
              href={item.url}
              className="border-s py-1.5 hover:text-fd-accent-foreground"
              style={{
                paddingInlineStart: 12 * Math.max(item.depth - 1, 0),
              }}
            >
              {item.title}
            </a>
          ))}
        </div>
      </CollapsibleContent>
    </Collapsible>
  );

Copyfunction PageTOCPopover(props: ComponentProps<'div'>) {
  const [container, setContainer] = useState<HTMLElement | null>(null);
 
  useEffect(() => {
    const element = document.getElementById('flux-layout-slot');
    if (!element) return;
    setContainer(element);
  }, []);
 
  if (!container) return;
  return createPortal(<PageTOCPopoverPhysical {...props} />, container);
}

Copyexport function TOC({ container, header, footer, style = 'normal', list }: TOCProps) {
  const t = useTranslations({ note: 'table of contents' });
  const items = Base.useTOCItems();
  const { TOCItems, TOCEmpty, TOCItem } = style === 'clerk' ? TocClerk : TocDefault;
 
  if (items.length === 0 && !footer && !header) {
    return <div id="nd-toc-placeholder" className="hidden xl:layout:[--fd-toc-width:268px]" />;
  }

Copy<ProgressCircle
  value={(items.findLastIndex((item) => item.active) + 1) / Math.max(1, items.length)}
  max={1}
  className={cn('shrink-0', open && 'text-fd-primary')}
/>