@myst-theme/site 0.9.9 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.9.9",
+  "version": "0.10.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -10,35 +10,39 @@
   "license": "MIT",
   "sideEffects": false,
   "scripts": {
+    "clean": "rimraf dist",
     "compile": "tsc --noEmit",
     "lint": "eslint src/**/*.ts*",
-    "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\""
+    "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\"",
+    "dev": "npm-run-all --parallel \"build:* -- --watch\"",
+    "build:esm": "tsc",
+    "build": "npm-run-all -l clean -p build:esm"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/common": "^0.9.9",
-    "@myst-theme/diagrams": "^0.9.9",
-    "@myst-theme/frontmatter": "^0.9.9",
-    "@myst-theme/jupyter": "^0.9.9",
-    "@myst-theme/providers": "^0.9.9",
+    "@myst-theme/common": "^0.10.0",
+    "@myst-theme/diagrams": "^0.10.0",
+    "@myst-theme/frontmatter": "^0.10.0",
+    "@myst-theme/jupyter": "^0.10.0",
+    "@myst-theme/providers": "^0.10.0",
     "@radix-ui/react-collapsible": "^1.0.3",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^1.4.4",
-    "myst-config": "^1.4.4",
-    "myst-demo": "^0.9.9",
-    "myst-spec-ext": "^1.4.4",
-    "myst-to-react": "^0.9.9",
+    "myst-common": "^1.5.0",
+    "myst-config": "^1.5.0",
+    "myst-demo": "^0.10.0",
+    "myst-spec-ext": "^1.5.0",
+    "myst-to-react": "^0.10.0",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",
-    "thebe-react": "^0.4.6",
+    "thebe-react": "0.4.7",
     "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {
-    "@remix-run/node": "^1.17 || ^2.0",
-    "@remix-run/react": "^1.17 || ^2.0",
+    "@remix-run/node": "^1.19",
+    "@remix-run/react": "^1.19",
     "@types/react": "^16.8 || ^17.0 || ^18.0",
     "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
     "react": "^16.8 || ^17.0 || ^18.0",

package/src/components/Headers.tsx

@@ -85,7 +85,7 @@ export function ArticleHeader({
               frontmatter={rest}
               authorStyle="list"
               className={classNames('flex-grow', {
-                'pt-4 px-6': frontmatter?.banner,
+                'pt-6 px-6': frontmatter?.banner,
                 ...positionFrontmatter,
               })}
               hideBadges

package/src/components/Navigation/InlineTableOfContents.tsx

@@ -0,0 +1,25 @@
+import { useSiteManifest } from '@myst-theme/providers';
+import { getProjectHeadings } from '@myst-theme/common';
+import { Toc } from './TableOfContentsItems.js';
+
+export const InlineTableOfContents = ({
+  projectSlug,
+  sidebarRef,
+  className = 'flex-grow overflow-y-auto max-w-[350px]',
+}: {
+  projectSlug?: string;
+  className?: string;
+  sidebarRef?: React.RefObject<HTMLElement>;
+}) => {
+  const config = useSiteManifest();
+  if (!config) return null;
+  const headings = getProjectHeadings(config, projectSlug, {
+    addGroups: false,
+  });
+  if (!headings) return null;
+  return (
+    <nav aria-label="Table of Contents" className={className} ref={sidebarRef}>
+      <Toc headings={headings} />
+    </nav>
+  );
+};

package/src/components/Navigation/Link.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useLinkProvider, useNavLinkProvider } from '@myst-theme/providers';
+
+export function ExternalOrInternalLink({
+  to,
+  className,
+  children,
+  nav,
+  onClick,
+  prefetch = 'intent',
+}: {
+  to: string;
+  className?: string | ((props: { isActive: boolean }) => string);
+  children: React.ReactNode;
+  nav?: boolean;
+  onClick?: () => void;
+  prefetch?: 'intent' | 'render' | 'none';
+}) {
+  const Link = useLinkProvider();
+  const NavLink = useNavLinkProvider();
+  const staticClass = typeof className === 'function' ? className({ isActive: false }) : className;
+  if (to.startsWith('http') || to.startsWith('mailto:')) {
+    return (
+      <a
+        href={to}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={staticClass}
+        onClick={onClick}
+      >
+        {children}
+      </a>
+    );
+  }
+  if (nav) {
+    return (
+      <NavLink prefetch={prefetch} to={to} className={className} onClick={onClick}>
+        {children}
+      </NavLink>
+    );
+  }
+  return (
+    <Link prefetch={prefetch} to={to} className={staticClass} onClick={onClick}>
+      {children}
+    </Link>
+  );
+}

package/src/components/Navigation/Navigation.tsx

@@ -1,37 +1,106 @@
-import { useNavOpen, useThemeTop } from '@myst-theme/providers';
-import { TableOfContents } from './TableOfContents.js';
+import { useNavOpen, useSiteManifest, useThemeTop } from '@myst-theme/providers';
+import { PrimarySidebar } from './PrimarySidebar.js';
+import type { Heading } from '@myst-theme/common';
+import { getProjectHeadings } from '@myst-theme/common';
+import type { SiteManifest } from 'myst-config';
 
-export function Navigation({
+/**
+ * PrimaryNavigation will load nav links and headers from the site manifest and display
+ * them in a mobile-friendly format.
+ */
+export const PrimaryNavigation = ({
   children,
   projectSlug,
-  tocRef,
+  sidebarRef,
   hide_toc,
+  mobileOnly,
   footer,
 }: {
   children?: React.ReactNode;
   projectSlug?: string;
-  tocRef?: React.RefObject<HTMLDivElement>;
+  sidebarRef?: React.RefObject<HTMLDivElement>;
   hide_toc?: boolean;
+  mobileOnly?: boolean;
   footer?: React.ReactNode;
-}) {
+}) => {
+  const config = useSiteManifest();
+  if (!config) return null;
+
+  const headings = getProjectHeadings(config, projectSlug, {
+    addGroups: false,
+  });
+
+  const { nav } = config;
+
+  return (
+    <ConfigurablePrimaryNavigation
+      children={children}
+      sidebarRef={sidebarRef}
+      hide_toc={hide_toc}
+      mobileOnly={mobileOnly}
+      nav={nav}
+      headings={headings}
+      footer={footer}
+    />
+  );
+};
+
+/**
+@deprecated use PrimaryNavigation instead
+ */
+export const Navigation = PrimaryNavigation;
+
+/**
+ * ConfigurablePrimaryNavigation will display a mobile-friendly navigation sidebar based on the
+ * nav, headings, and footer provided by the caller. Use this in situations where the PrimaryNavigation
+ * component may pick up the wrong SiteManifest.
+ */
+export const ConfigurablePrimaryNavigation = ({
+  children,
+  sidebarRef,
+  hide_toc,
+  mobileOnly,
+  nav,
+  headings,
+  footer,
+}: {
+  children?: React.ReactNode;
+  sidebarRef?: React.RefObject<HTMLDivElement>;
+  hide_toc?: boolean;
+  mobileOnly?: boolean;
+  nav?: SiteManifest['nav'];
+  headings?: Heading[];
+  footer?: React.ReactNode;
+}) => {
   const [open, setOpen] = useNavOpen();
   const top = useThemeTop();
+
   if (children)
     console.warn(
       `Including children in Navigation can break keyboard accessbility and is deprecated. Please move children to the page component.`,
     );
+
+  // the logic on the following line looks wrong, this will return `null` or `<></>`
+  // we should just return `null` if `hide_toc` is true?
   if (hide_toc) return children ? null : <>{children}</>;
+
   return (
     <>
-      {open && (
+      {open && !mobileOnly && headings && (
         <div
           className="fixed inset-0 z-30 bg-black opacity-50"
           style={{ marginTop: top }}
           onClick={() => setOpen(false)}
         ></div>
       )}
-      <TableOfContents tocRef={tocRef} projectSlug={projectSlug} footer={footer} />
+      <PrimarySidebar
+        sidebarRef={sidebarRef}
+        nav={nav}
+        headings={headings}
+        footer={footer}
+        mobileOnly={mobileOnly}
+      />
       {children}
     </>
   );
-}
+};

package/src/components/Navigation/PrimarySidebar.tsx

@@ -0,0 +1,201 @@
+import React, { useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import { useNavigation } from '@remix-run/react';
+import {
+  useNavOpen,
+  useSiteManifest,
+  useGridSystemProvider,
+  useThemeTop,
+} from '@myst-theme/providers';
+import type { Heading } from '@myst-theme/common';
+import { Toc } from './TableOfContentsItems.js';
+import { ExternalOrInternalLink } from './Link.js';
+import type { SiteManifest, SiteNavItem } from 'myst-config';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { ChevronRightIcon } from '@heroicons/react/24/solid';
+
+export function SidebarNavItem({ item }: { item: SiteNavItem }) {
+  if (!item.children?.length) {
+    return (
+      <ExternalOrInternalLink
+        nav
+        to={item.url ?? ''}
+        className={classNames(
+          'p-2 my-1 rounded-lg',
+          'hover:bg-slate-300/30',
+          'block break-words focus:outline outline-blue-200 outline-2 rounded',
+        )}
+      >
+        {item.title}
+      </ExternalOrInternalLink>
+    );
+  }
+  const [open, setOpen] = React.useState(false);
+  return (
+    <Collapsible.Root className="w-full" open={open} onOpenChange={setOpen}>
+      <div
+        className={classNames(
+          'flex flex-row w-full gap-2 px-2 my-1 text-left rounded-lg outline-none',
+          'hover:bg-slate-300/30',
+        )}
+      >
+        <ExternalOrInternalLink
+          nav
+          to={item.url ?? ''}
+          className={classNames('py-2 grow', {})}
+          onClick={() => setOpen(!open)}
+        >
+          {item.title}
+        </ExternalOrInternalLink>
+        <Collapsible.Trigger asChild>
+          <button
+            className="self-center flex-none rounded-md group hover:bg-slate-300/30 focus:outline outline-blue-200 outline-2"
+            aria-label="Open Folder"
+          >
+            <ChevronRightIcon
+              className="transition-transform duration-300 group-data-[state=open]:rotate-90 text-text-slate-700 dark:text-slate-100"
+              height="1.5rem"
+              width="1.5rem"
+            />
+          </button>
+        </Collapsible.Trigger>
+      </div>
+      <Collapsible.Content className="pl-3 pr-[2px] collapsible-content">
+        {item.children.map((action) => (
+          <ExternalOrInternalLink
+            nav
+            key={action.url}
+            to={action.url || ''}
+            className={classNames(
+              'p-2 my-1 rounded-lg',
+              'hover:bg-slate-300/30',
+              'block break-words focus:outline outline-blue-200 outline-2 rounded',
+            )}
+          >
+            {action.title}
+          </ExternalOrInternalLink>
+        ))}
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+}
+
+export function SidebarNav({ nav }: { nav?: SiteManifest['nav'] }) {
+  if (!nav) return null;
+  return (
+    <div className="w-full px-1 dark:text-white">
+      {nav.map((item) => {
+        return <SidebarNavItem key={'url' in item ? item.url : item.title} item={item} />;
+      })}
+    </div>
+  );
+}
+
+export function useSidebarHeight<T extends HTMLElement = HTMLElement>(top = 0, inset = 0) {
+  const container = useRef<T>(null);
+  const toc = useRef<HTMLDivElement>(null);
+  const transitionState = useNavigation().state;
+  const setHeight = () => {
+    if (!container.current || !toc.current) return;
+    const height = container.current.offsetHeight - window.scrollY;
+    const div = toc.current.firstChild as HTMLDivElement;
+    if (div) div.style.height = `min(calc(100vh - ${top}px), ${height + inset}px)`;
+    const nav = toc.current.querySelector('nav');
+    if (nav) nav.style.opacity = height > 150 ? '1' : '0';
+  };
+  useEffect(() => {
+    setHeight();
+    setTimeout(setHeight, 100); // Some lag sometimes
+    const handleScroll = () => setHeight();
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [container, toc, transitionState]);
+  return { container, toc };
+}
+
+export const PrimarySidebar = ({
+  sidebarRef,
+  nav,
+  footer,
+  headings,
+  mobileOnly,
+}: {
+  sidebarRef?: React.RefObject<HTMLElement>;
+  nav?: SiteManifest['nav'];
+  headings?: Heading[];
+  footer?: React.ReactNode;
+  mobileOnly?: boolean;
+}) => {
+  const top = useThemeTop();
+  const grid = useGridSystemProvider();
+  const footerRef = useRef<HTMLDivElement>(null);
+  const [open] = useNavOpen();
+  const config = useSiteManifest();
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (!footerRef.current) return;
+      footerRef.current.style.opacity = '1';
+      footerRef.current.style.transform = 'none';
+    }, 500);
+  }, [footerRef]);
+  if (!config) return null;
+
+  return (
+    <div
+      ref={sidebarRef as any}
+      className={classNames(
+        'fixed',
+        `xl:${grid}`, // for example, xl:article-grid
+        'grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',
+        { hidden: !open, 'z-30': open, 'z-10': !open },
+      )}
+      style={{ top }}
+    >
+      <div
+        className={classNames(
+          'pointer-events-auto',
+          'xl:col-margin-left flex-col',
+          'overflow-hidden',
+          {
+            flex: open,
+            'bg-white dark:bg-stone-900': open, // just apply when open, so that theme can transition
+            'hidden xl:flex': !open && !mobileOnly,
+            hidden: !open && mobileOnly,
+            'lg:hidden': mobileOnly && !headings,
+          },
+        )}
+      >
+        <div className="flex-grow py-6 overflow-y-auto">
+          {nav && (
+            <nav
+              aria-label="Navigation"
+              className="overflow-y-hidden transition-opacity ml-3 xl:ml-0 mr-3 max-w-[350px] lg:hidden"
+            >
+              <SidebarNav nav={nav} />
+            </nav>
+          )}
+          {nav && headings && <div className="my-3 border-b-2 lg:hidden" />}
+          {headings && (
+            <nav
+              aria-label="Table of Contents"
+              className="flex-grow overflow-y-hidden transition-opacity ml-3 xl:ml-0 mr-3 max-w-[350px]"
+            >
+              <Toc headings={headings} />
+            </nav>
+          )}
+        </div>
+        {footer && (
+          <div
+            className="flex-none py-6 transition-all duration-700 translate-y-6 opacity-0"
+            ref={footerRef}
+          >
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/Navigation/TopNav.tsx

@@ -13,46 +13,10 @@ import {
 import { LoadingBar } from './Loading.js';
 import { HomeLink } from './HomeLink.js';
 import { ActionMenu } from './ActionMenu.js';
+import { ExternalOrInternalLink } from './Link.js';
 
 export const DEFAULT_NAV_HEIGHT = 60;
 
-function ExternalOrInternalLink({
-  to,
-  className,
-  children,
-  nav,
-  prefetch = 'intent',
-}: {
-  to: string;
-  className?: string | ((props: { isActive: boolean }) => string);
-  children: React.ReactNode;
-  nav?: boolean;
-  prefetch?: 'intent' | 'render' | 'none';
-}) {
-  const Link = useLinkProvider();
-  const NavLink = useNavLinkProvider();
-  const staticClass = typeof className === 'function' ? className({ isActive: false }) : className;
-  if (to.startsWith('http') || to.startsWith('mailto:')) {
-    return (
-      <a href={to} target="_blank" rel="noopener noreferrer" className={staticClass}>
-        {children}
-      </a>
-    );
-  }
-  if (nav) {
-    return (
-      <NavLink prefetch={prefetch} to={to} className={className}>
-        {children}
-      </NavLink>
-    );
-  }
-  return (
-    <Link prefetch={prefetch} to={to} className={staticClass}>
-      {children}
-    </Link>
-  );
-}
-
 export function NavItem({ item }: { item: SiteNavItem }) {
   const NavLink = useNavLinkProvider();
   if (!('children' in item)) {
@@ -143,26 +107,28 @@ export function NavItems({ nav }: { nav?: SiteManifest['nav'] }) {
   );
 }
 
-export function TopNav() {
+export function TopNav({ hideToc }: { hideToc?: boolean }) {
   const [open, setOpen] = useNavOpen();
   const config = useSiteManifest();
   const { title, nav, actions } = config ?? {};
   const { logo, logo_dark, logo_text } = config?.options ?? {};
   return (
-    <div className="bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 fixed w-screen top-0 z-30 h-[60px]">
-      <nav className="flex items-center justify-between flex-wrap max-w-[1440px] mx-auto">
-        <div className="flex flex-row xl:min-w-[19.5rem] mr-2 sm:mr-7 justify-start items-center">
-          <div className="block xl:hidden">
-            <button
-              className="flex items-center border-stone-400 text-stone-800 hover:text-stone-900 dark:text-stone-200 hover:dark:text-stone-100"
-              onClick={() => {
-                setOpen(!open);
-              }}
-            >
-              <MenuIcon width="2rem" height="2rem" className="m-1" />
-              <span className="sr-only">Open Menu</span>
-            </button>
-          </div>
+    <div className="bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 sticky w-screen top-0 z-30 h-[60px]">
+      <nav className="flex items-center justify-between flex-nowrap max-w-[1440px] mx-auto">
+        <div className="flex flex-row xl:min-w-[19.5rem] mr-2 sm:mr-7 justify-start items-center shrink-0">
+          {!hideToc && (
+            <div className="block xl:hidden">
+              <button
+                className="flex items-center border-stone-400 text-stone-800 hover:text-stone-900 dark:text-stone-200 hover:dark:text-stone-100"
+                onClick={() => {
+                  setOpen(!open);
+                }}
+              >
+                <MenuIcon width="2rem" height="2rem" className="m-1" />
+                <span className="sr-only">Open Menu</span>
+              </button>
+            </div>
+          )}
           <HomeLink name={title} logo={logo} logoDark={logo_dark} logoText={logo_text} />
         </div>
         <div className="flex items-center flex-grow w-auto">

package/src/components/Navigation/index.tsx

@@ -1,7 +1,8 @@
 export { ThemeButton } from './ThemeButton.js';
 export { TopNav, NavItems, NavItem, DEFAULT_NAV_HEIGHT } from './TopNav.js';
-export { Navigation } from './Navigation.js';
-export { TableOfContents, InlineTableOfContents, useTocHeight } from './TableOfContents.js';
+export { Navigation, PrimaryNavigation, ConfigurablePrimaryNavigation } from './Navigation.js';
+export { PrimarySidebar, useSidebarHeight } from './PrimarySidebar.js';
+export { InlineTableOfContents } from './InlineTableOfContents.js';
 export { LoadingBar } from './Loading.js';
 export { ActionMenu } from './ActionMenu.js';
 export { HomeLink } from './HomeLink.js';

package/src/pages/Article.tsx

@@ -57,7 +57,7 @@ export const ArticlePage = React.memo(function ({
             <FrontmatterBlock
               kind={article.kind}
               frontmatter={{ ...article.frontmatter, downloads }}
-              className="pt-5 mb-8"
+              className="mb-8 pt-9"
             />
           )}
           {compute?.enabled &&

package/src/components/Navigation/TableOfContents.tsx

@@ -1,126 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import { useNavigation } from '@remix-run/react';
-import {
-  useNavOpen,
-  useSiteManifest,
-  useGridSystemProvider,
-  useThemeTop,
-} from '@myst-theme/providers';
-import { getProjectHeadings } from '@myst-theme/common';
-import { Toc } from './TableOfContentsItems.js';
-
-export function useTocHeight<T extends HTMLElement = HTMLElement>(top = 0, inset = 0) {
-  const container = useRef<T>(null);
-  const toc = useRef<HTMLDivElement>(null);
-  const transitionState = useNavigation().state;
-  const setHeight = () => {
-    if (!container.current || !toc.current) return;
-    const height = container.current.offsetHeight - window.scrollY;
-    const div = toc.current.firstChild as HTMLDivElement;
-    if (div) div.style.height = `min(calc(100vh - ${top}px), ${height + inset}px)`;
-    const nav = toc.current.querySelector('nav');
-    if (nav) nav.style.opacity = height > 150 ? '1' : '0';
-  };
-  useEffect(() => {
-    setHeight();
-    setTimeout(setHeight, 100); // Some lag sometimes
-    const handleScroll = () => setHeight();
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [container, toc, transitionState]);
-  return { container, toc };
-}
-
-export const TableOfContents = ({
-  projectSlug,
-  tocRef,
-  footer,
-}: {
-  tocRef?: React.RefObject<HTMLElement>;
-  projectSlug?: string;
-  footer?: React.ReactNode;
-}) => {
-  const top = useThemeTop();
-  const grid = useGridSystemProvider();
-  const footerRef = useRef<HTMLDivElement>(null);
-  const [open] = useNavOpen();
-  const config = useSiteManifest();
-  useEffect(() => {
-    setTimeout(() => {
-      if (!footerRef.current) return;
-      footerRef.current.style.opacity = '1';
-      footerRef.current.style.transform = 'none';
-    }, 500);
-  }, [footerRef]);
-  if (!config) return null;
-  const headings = getProjectHeadings(config, projectSlug, {
-    addGroups: false,
-  });
-  if (!headings) return null;
-  return (
-    <div
-      ref={tocRef as any}
-      className={classNames(
-        'fixed',
-        `xl:${grid}`, // for example, xl:article-grid
-        'grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',
-        { hidden: !open, 'z-30': open, 'z-10': !open },
-      )}
-      style={{ top }}
-    >
-      <div
-        className={classNames(
-          'pointer-events-auto',
-          'xl:col-margin-left flex-col',
-          'overflow-hidden',
-          // 'border-r border-stone-200 dark:border-stone-700',
-          {
-            flex: open,
-            'bg-white dark:bg-stone-900': open, // just apply when open, so that theme can transition
-            'hidden xl:flex': !open,
-          },
-        )}
-      >
-        <nav
-          aria-label="Table of Contents"
-          className="flex-grow overflow-y-auto transition-opacity mt-6 pb-3 ml-3 xl:ml-0 mr-3 max-w-[350px]"
-        >
-          <Toc headings={headings} />
-        </nav>
-        {footer && (
-          <div
-            className="flex-none py-4 transition-all duration-700 translate-y-6 opacity-0"
-            ref={footerRef}
-          >
-            {footer}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const InlineTableOfContents = ({
-  projectSlug,
-  tocRef,
-  className = 'flex-grow overflow-y-auto max-w-[350px]',
-}: {
-  projectSlug?: string;
-  className?: string;
-  tocRef?: React.RefObject<HTMLElement>;
-}) => {
-  const config = useSiteManifest();
-  if (!config) return null;
-  const headings = getProjectHeadings(config, projectSlug, {
-    addGroups: false,
-  });
-  if (!headings) return null;
-  return (
-    <nav aria-label="Table of Contents" className={className} ref={tocRef}>
-      <Toc headings={headings} />
-    </nav>
-  );
-};