@myst-theme/site 0.5.14 → 0.5.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.5.14",
+  "version": "0.5.16",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -17,19 +17,19 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/common": "^0.5.14",
-    "@myst-theme/diagrams": "^0.5.14",
-    "@myst-theme/frontmatter": "^0.5.14",
-    "@myst-theme/jupyter": "^0.5.14",
-    "@myst-theme/providers": "^0.5.14",
+    "@myst-theme/common": "^0.5.16",
+    "@myst-theme/diagrams": "^0.5.16",
+    "@myst-theme/frontmatter": "^0.5.16",
+    "@myst-theme/jupyter": "^0.5.16",
+    "@myst-theme/providers": "^0.5.16",
     "@radix-ui/react-collapsible": "^1.0.3",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^1.1.13",
-    "myst-config": "^1.1.13",
-    "myst-demo": "^0.5.14",
-    "myst-spec-ext": "^1.1.13",
-    "myst-to-react": "^0.5.14",
+    "myst-common": "^1.1.16",
+    "myst-config": "^1.1.16",
+    "myst-demo": "^0.5.16",
+    "myst-spec-ext": "^1.1.16",
+    "myst-to-react": "^0.5.16",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/DocumentOutline.tsx

@@ -16,6 +16,7 @@ const HIGHLIGHT_CLASS = 'highlight';
 const onClient = typeof document !== 'undefined';
 
 type Heading = {
+  element: HTMLHeadingElement;
   id: string;
   title: string;
   titleHTML: string;
@@ -46,15 +47,15 @@ const Headings = ({ headings, activeId, highlight, selector }: Props) => (
       >
         <a
           className={classNames('block p-1', {
-            'text-slate-900 dark:text-slate-50': heading.level < 3 && heading.id !== activeId,
-            'text-slate-500 dark:text-slate-300': heading.level >= 3 && heading.id !== activeId,
+            'text-slate-900 dark:text-slate-50': heading.level < 2 && heading.id !== activeId,
+            'text-slate-500 dark:text-slate-300': heading.level >= 2 && heading.id !== activeId,
             'text-blue-600 dark:text-white font-bold': heading.id === activeId,
             'pr-2': heading.id !== activeId, // Allows for bold to change length
-            'pl-2': heading.level === 1 || heading.level === 2,
-            'pl-4': heading.level === 3,
-            'pl-8 text-xs': heading.level === 4,
-            'pl-10 text-xs font-light': heading.level === 5,
-            'pl-12 text-xs font-extralight': heading.level === 6,
+            'pl-2': heading.level === 1,
+            'pl-4': heading.level === 2,
+            'pl-8 text-xs': heading.level === 3,
+            'pl-10 text-xs font-light': heading.level === 4,
+            'pl-12 text-xs font-extralight': heading.level === 5,
           })}
           href={`#${heading.id}`}
           onClick={(e) => {
@@ -104,7 +105,7 @@ function getHeaders(selector: string): HTMLHeadingElement[] {
   return headers as HTMLHeadingElement[];
 }
 
-function useHeaders(selector: string) {
+function useHeaders(selector: string, maxdepth: number) {
   if (!onClient) return { activeId: '', headings: [] };
   const onScreen = useRef<Set<HTMLHeadingElement>>(new Set());
   const [activeId, setActiveId] = useState<string>();
@@ -145,28 +146,35 @@ function useHeaders(selector: string) {
     Array.from(elements).map((e) => observer.current?.observe(e));
   }, [observer]);
 
-  elements.forEach((e) => {
-    if (headingsSet.current.has(e)) return;
-    observer.current?.observe(e);
-    headingsSet.current.add(e);
-  });
-
+  let minLevel = 10;
   const headings: Heading[] = elements
-    .map((heading) => {
+    .map((element) => {
       return {
-        level: Number(heading.tagName.slice(1)),
-        id: heading.id,
-        text: heading.querySelector('.heading-text'),
+        element,
+        level: Number(element.tagName.slice(1)),
+        id: element.id,
+        text: element.querySelector('.heading-text'),
       };
     })
     .filter((h) => !!h.text)
-    .map(({ level, text, id }) => {
+    .map(({ element, level, text, id }) => {
       const { innerText: title, innerHTML: titleHTML } = cloneHeadingElement(
         text as HTMLSpanElement,
       );
-      return { title, titleHTML, id, level };
+      minLevel = Math.min(minLevel, level);
+      return { element, title, titleHTML, id, level };
+    })
+    .filter((heading) => {
+      heading.level = heading.level - minLevel + 1;
+      return heading.level < maxdepth + 1;
     });
 
+  headings.forEach(({ element: e }) => {
+    if (headingsSet.current.has(e)) return;
+    observer.current?.observe(e);
+    headingsSet.current.add(e);
+  });
+
   return { activeId, highlight, headings };
 }
 
@@ -224,6 +232,7 @@ export const DocumentOutline = ({
   className,
   selector = SELECTOR,
   children,
+  maxdepth = 4,
 }: {
   outlineRef?: React.RefObject<HTMLElement>;
   top?: number;
@@ -231,8 +240,9 @@ export const DocumentOutline = ({
   className?: string;
   selector?: string;
   children?: React.ReactNode;
+  maxdepth?: number;
 }) => {
-  const { activeId, headings, highlight } = useHeaders(selector);
+  const { activeId, headings, highlight } = useHeaders(selector, maxdepth);
   if (headings.length <= 1 || !onClient) {
     return <nav suppressHydrationWarning>{children}</nav>;
   }