@myst-theme/site 0.5.13 → 0.5.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "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.13",
-    "@myst-theme/diagrams": "^0.5.13",
-    "@myst-theme/frontmatter": "^0.5.13",
-    "@myst-theme/jupyter": "^0.5.13",
-    "@myst-theme/providers": "^0.5.13",
+    "@myst-theme/common": "^0.5.15",
+    "@myst-theme/diagrams": "^0.5.15",
+    "@myst-theme/frontmatter": "^0.5.15",
+    "@myst-theme/jupyter": "^0.5.15",
+    "@myst-theme/providers": "^0.5.15",
     "@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.13",
-    "myst-spec-ext": "^1.1.13",
-    "myst-to-react": "^0.5.13",
+    "myst-common": "^1.1.15",
+    "myst-config": "^1.1.15",
+    "myst-demo": "^0.5.15",
+    "myst-spec-ext": "^1.1.15",
+    "myst-to-react": "^0.5.15",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/Backmatter.tsx

@@ -6,12 +6,12 @@ import type { KnownParts } from '../utils.js';
 export function BackmatterParts({ parts }: { parts: KnownParts }) {
   return (
     <>
+      <Backmatter title="Acknowledgments" id="acknowledgments" content={parts.acknowledgments} />
       <Backmatter
         title="Data Availability"
         id="data-availability"
         content={parts.data_availability}
       />
-      <Backmatter title="Acknowledgments" id="acknowledgments" content={parts.acknowledgments} />
     </>
   );
 }
@@ -27,16 +27,19 @@ export function Backmatter({
 }) {
   if (!content) return null;
   return (
-    <div className="flex flex-col w-full md:flex-row">
+    <div className="flex flex-col w-full md:flex-row group/backmatter">
       <h2
         id={id}
-        className="mt-5 text-base font-semibold group md:w-[200px] self-start md:flex-none opacity-90"
+        className="mt-5 text-base font-semibold group md:w-[200px] self-start md:flex-none opacity-90 group-hover/backmatter:opacity-100"
       >
         {title}
         <HashLink id={id} title={`Link to ${title}`} hover className="ml-2" />
       </h2>
       <div className="grow">
-        <ContentBlocks mdast={content} className="opacity-80 col-screen" />
+        <ContentBlocks
+          mdast={content}
+          className="opacity-90 group-hover/backmatter:opacity-100 col-screen"
+        />
       </div>
     </div>
   );

package/src/components/ContentBlocks.tsx

@@ -3,6 +3,7 @@ import { SourceFileKind } from 'myst-spec-ext';
 import type { GenericParent } from 'myst-common';
 import classNames from 'classnames';
 import {
+  executableNodesFromBlock,
   NotebookClearCell,
   NotebookRunCell,
   NotebookRunCellSpinnerOnly,
@@ -10,14 +11,7 @@ import {
 import { useGridSystemProvider } from '@myst-theme/providers';
 
 function isACodeCell(node: GenericParent) {
-  return (
-    node &&
-    node.type === 'block' &&
-    node.children &&
-    node.children?.length === 2 &&
-    node.children[0].type === 'code' &&
-    node.children[1].type === 'output'
-  );
+  return !!executableNodesFromBlock(node);
 }
 
 function Block({

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>;
   }