@myst-theme/site 0.5.9 → 0.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -17,18 +17,19 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/diagrams": "^0.5.9",
-    "@myst-theme/frontmatter": "^0.5.9",
-    "@myst-theme/jupyter": "^0.5.9",
-    "@myst-theme/common": "^0.5.9",
-    "@myst-theme/providers": "^0.5.9",
+    "@myst-theme/common": "^0.5.11",
+    "@myst-theme/diagrams": "^0.5.11",
+    "@myst-theme/frontmatter": "^0.5.11",
+    "@myst-theme/jupyter": "^0.5.11",
+    "@myst-theme/providers": "^0.5.11",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.1.8",
-    "myst-spec-ext": "^1.1.8",
     "myst-config": "^1.1.8",
-    "myst-demo": "^0.5.9",
-    "myst-to-react": "^0.5.9",
+    "myst-demo": "^0.5.11",
+    "myst-spec-ext": "^1.1.8",
+    "myst-to-react": "^0.5.11",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",
@@ -36,10 +37,10 @@
     "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {
+    "@remix-run/node": "^1.17 || ^2.0",
+    "@remix-run/react": "^1.17 || ^2.0",
     "@types/react": "^16.8 || ^17.0 || ^18.0",
     "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
-    "@remix-run/react": "^1.17 || ^2.0",
-    "@remix-run/node": "^1.17 || ^2.0",
     "react": "^16.8 || ^17.0 || ^18.0",
     "react-dom": "^16.8 || ^17.0 || ^18.0"
   },

package/src/components/Abstract.tsx

@@ -2,14 +2,43 @@ import type { GenericParent } from 'myst-common';
 import { ContentBlocks } from './ContentBlocks.js';
 import classNames from 'classnames';
 import { HashLink } from 'myst-to-react';
+import { type KnownParts } from '../utils.js';
 
-export function Abstract({ content }: { content: GenericParent }) {
-  if (!content) return <div className="hidden" aria-label="this article has no abstract" />;
+export function FrontmatterParts({
+  parts,
+  keywords,
+  hideKeywords,
+}: {
+  parts: KnownParts;
+  keywords?: string[];
+  hideKeywords?: boolean;
+}) {
+  if (!parts.abstract && !parts.keypoints && !parts.summary) return null;
+  return (
+    <>
+      <Abstract content={parts.abstract} />
+      <Abstract content={parts.keypoints} title="Key Points" id="keypoints" />
+      <Abstract content={parts.summary} title="Plain Language Summary" id="summary" />
+      <Keywords keywords={keywords} hideKeywords={hideKeywords} />
+    </>
+  );
+}
+
+export function Abstract({
+  content,
+  title = 'Abstract',
+  id = 'abstract',
+}: {
+  title?: string;
+  id?: string;
+  content?: GenericParent;
+}) {
+  if (!content) return null;
   return (
     <>
-      <h2 id="abstract" className="mb-3 text-base font-semibold group">
-        Abstract
-        <HashLink id="abstract" title="Link to Abstract" hover className="ml-2" />
+      <h2 id={id} className="mb-3 text-base font-semibold group">
+        {title}
+        <HashLink id={id} title={`Link to ${title}`} hover className="ml-2" />
       </h2>
       <div className="px-6 py-1 mb-3 rounded-sm bg-slate-50 dark:bg-slate-800">
         <ContentBlocks mdast={content} className="col-body" />
@@ -25,8 +54,7 @@ export function Keywords({
   keywords?: string[];
   hideKeywords?: boolean;
 }) {
-  if (hideKeywords || !keywords || keywords.length === 0)
-    return <div className="hidden" aria-label="this article has no keywords" />;
+  if (hideKeywords || !keywords || keywords.length === 0) return null;
   return (
     <div className="mb-10 group">
       <span className="mr-2 font-semibold">Keywords:</span>

package/src/components/Backmatter.tsx

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

package/src/components/Bibliography.tsx

@@ -1,5 +1,6 @@
 import { useGridSystemProvider, useReferences } from '@myst-theme/providers';
 import classNames from 'classnames';
+import { HashLink } from 'myst-to-react';
 import { useState } from 'react';
 
 const HIDE_OVER_N_REFERENCES = 5;
@@ -13,7 +14,7 @@ export function Bibliography() {
   if (!filtered || !data || filtered.length === 0) return null;
   const refs = hidden ? filtered.slice(0, HIDE_OVER_N_REFERENCES) : filtered;
   return (
-    <section className={classNames(grid, 'subgrid-gap col-screen')}>
+    <section id="references" className={classNames(grid, 'subgrid-gap col-screen')}>
       <div>
         {filtered.length > HIDE_OVER_N_REFERENCES && (
           <button
@@ -23,7 +24,10 @@ export function Bibliography() {
             {hidden ? 'Show All' : 'Collapse'}
           </button>
         )}
-        <header className="text-lg font-semibold text-stone-900 dark:text-white">References</header>
+        <header className="text-lg font-semibold text-stone-900 dark:text-white group">
+          References
+          <HashLink id="references" title="Link to References" hover className="ml-2" />
+        </header>
       </div>
       <div className="pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300">
         <ol>

package/src/components/ContentBlocks.tsx

@@ -78,9 +78,17 @@ export function ContentBlocks({
   const blocks = mdast.children as GenericParent[];
   return (
     <>
-      {blocks.map((node) => (
-        <Block key={node.key} id={node.key} pageKind={pageKind} node={node} className={className} />
-      ))}
+      {blocks
+        .filter((node) => node.visibility !== 'remove')
+        .map((node) => (
+          <Block
+            key={node.key}
+            id={node.key}
+            pageKind={pageKind}
+            node={node}
+            className={className}
+          />
+        ))}
     </>
   );
 }

package/src/components/Navigation/TableOfContents.tsx

@@ -1,115 +1,14 @@
 import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
-import { useLocation, useNavigation } from '@remix-run/react';
-import type { SiteManifest } from 'myst-config';
+import { useNavigation } from '@remix-run/react';
 import {
-  useNavLinkProvider,
   useNavOpen,
   useSiteManifest,
-  useBaseurl,
-  withBaseurl,
   useGridSystemProvider,
   useThemeTop,
 } from '@myst-theme/providers';
-import { getProjectHeadings, type Heading } from '@myst-theme/common';
-
-type Props = {
-  folder?: string;
-  headings: Heading[];
-  sections?: ManifestProject[];
-};
-
-type ManifestProject = Required<SiteManifest>['projects'][0];
-
-const HeadingLink = ({
-  path,
-  isIndex,
-  title,
-  children,
-}: {
-  path: string;
-  isIndex?: boolean;
-  title?: string;
-  children: React.ReactNode;
-}) => {
-  const { pathname } = useLocation();
-  const NavLink = useNavLinkProvider();
-  const exact = pathname === path;
-  const baseurl = useBaseurl();
-  const [, setOpen] = useNavOpen();
-  return (
-    <NavLink
-      prefetch="intent"
-      title={title}
-      className={({ isActive }: { isActive: boolean }) =>
-        classNames('block break-words', {
-          'mb-8 lg:mb-3 font-semibold': isIndex,
-          'text-slate-900 dark:text-slate-200': isIndex && !exact,
-          'text-blue-500 dark:text-blue-400': isIndex && exact,
-          'border-l pl-4 text-blue-500 border-current dark:text-blue-400': !isIndex && isActive,
-          'font-semibold': isActive,
-          'border-l pl-4 border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300':
-            !isIndex && !isActive,
-        })
-      }
-      to={withBaseurl(path, baseurl)}
-      suppressHydrationWarning // The pathname is not defined on the server always.
-      onClick={() => {
-        // Close the nav panel if it is open
-        setOpen(false);
-      }}
-    >
-      {children}
-    </NavLink>
-  );
-};
-
-const HEADING_CLASSES = 'text-slate-900 leading-5 dark:text-slate-100';
-
-const Headings = ({ folder, headings, sections }: Props) => {
-  const secs = sections || [];
-  return (
-    <ul className="space-y-6 lg:space-y-2">
-      {secs.map((sec) => {
-        if (sec.slug === folder) {
-          return headings.map((heading, index) => (
-            <li
-              key={heading.slug || index}
-              className={classNames('', {
-                [HEADING_CLASSES]: heading.level === 'index',
-                'font-semibold': heading.level === 'index',
-                // 'pl-4': heading.level === 2,
-                // 'pl-6': heading.level === 3,
-                // 'pl-8': heading.level === 4,
-                // 'pl-10': heading.level === 5,
-                // 'pl-12': heading.level === 6,
-              })}
-            >
-              {heading.path ? (
-                <HeadingLink
-                  title={heading.title}
-                  path={heading.path}
-                  isIndex={heading.level === 'index'}
-                >
-                  {heading.short_title || heading.title}
-                </HeadingLink>
-              ) : (
-                <h5 className="mb-3 font-semibold break-words lg:mt-8 dark:text-white">
-                  {heading.short_title || heading.title}
-                </h5>
-              )}
-            </li>
-          ));
-        }
-        return (
-          <li key={sec.slug} className={classNames('p-1 my-2 lg:hidden', HEADING_CLASSES)}>
-            <HeadingLink path={`/${sec.slug}`}>{sec.short_title || sec.title}</HeadingLink>
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
+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);
@@ -189,7 +88,7 @@ export const TableOfContents = ({
           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]"
         >
-          <Headings folder={projectSlug} headings={headings} sections={config?.projects} />
+          <Toc headings={headings} />
         </nav>
         {footer && (
           <div
@@ -221,7 +120,7 @@ export const InlineTableOfContents = ({
   if (!headings) return null;
   return (
     <nav aria-label="Table of Contents" className={className} ref={tocRef}>
-      <Headings folder={projectSlug} headings={headings} sections={config?.projects} />
+      <Toc headings={headings} />
     </nav>
   );
 };

package/src/components/Navigation/TableOfContentsItems.tsx

@@ -0,0 +1,162 @@
+import React, { useEffect } from 'react';
+import classNames from 'classnames';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import type { Heading } from '@myst-theme/common';
+import { useBaseurl, useNavLinkProvider, useNavOpen, withBaseurl } from '@myst-theme/providers';
+import { useLocation, useNavigation } from '@remix-run/react';
+import { ChevronRightIcon } from '@heroicons/react/24/solid';
+
+type NestedHeading = Heading & { id: string; children: NestedHeading[] };
+
+function nestToc(toc: Heading[]): NestedHeading[] {
+  const items: NestedHeading[] = [];
+  const stack: (Omit<NestedHeading, 'level'> & { level: number })[] = [];
+
+  toc.forEach((tocItem, id) => {
+    const item = tocItem as NestedHeading;
+    item.children = [];
+    item.id = String(id);
+    if (item.level === 'index') {
+      while (stack.length) stack.pop();
+      items.push(item);
+      return;
+    }
+    while (stack.length && stack[stack.length - 1].level >= item.level) {
+      stack.pop();
+    }
+    const top = stack[stack.length - 1];
+    if (top) {
+      top.children.push(item);
+    } else {
+      items.push(item);
+    }
+    stack.push(item as any);
+  });
+  return items;
+}
+
+function childrenOpen(headings: NestedHeading[], pathname: string): string[] {
+  return headings
+    .map((heading) => {
+      if (heading.path === pathname) return [heading.id];
+      const open = childrenOpen(heading.children, pathname);
+      if (open.length === 0) return [];
+      return [heading.id, ...open];
+    })
+    .flat();
+}
+
+export const Toc = ({ headings }: { headings: Heading[] }) => {
+  const nested = nestToc(headings);
+  return (
+    <div className="w-full px-1 dark:text-white">
+      {nested.map((item) => (
+        <NestedToc heading={item} key={item.id} />
+      ))}
+    </div>
+  );
+};
+
+function LinkItem({
+  className,
+  heading,
+  onClick,
+}: {
+  className?: string;
+  heading: NestedHeading;
+  onClick?: () => void;
+}) {
+  const NavLink = useNavLinkProvider();
+  const baseurl = useBaseurl();
+  const [, setOpen] = useNavOpen();
+  if (!heading.path) {
+    return (
+      <div
+        title={heading.title}
+        className={classNames('block break-words rounded', className)}
+        onClick={() => {
+          onClick?.();
+        }}
+      >
+        {heading.short_title || heading.title}
+      </div>
+    );
+  }
+  return (
+    <NavLink
+      prefetch="intent"
+      title={heading.title}
+      className={classNames(
+        'block break-words focus:outline outline-blue-200 outline-2 rounded',
+        className,
+      )}
+      to={withBaseurl(heading.path, baseurl)}
+      onClick={() => {
+        onClick?.();
+        setOpen(false);
+      }}
+    >
+      {heading.short_title || heading.title}
+    </NavLink>
+  );
+}
+
+const NestedToc = ({ heading }: { heading: NestedHeading }) => {
+  const { pathname } = useLocation();
+  const startOpen = childrenOpen([heading], pathname).includes(heading.id);
+  const nav = useNavigation();
+  nav.state;
+  const [open, setOpen] = React.useState(startOpen);
+  useEffect(() => {
+    if (nav.state === 'idle') setOpen(startOpen);
+  }, [nav.state]);
+  const exact = pathname === heading.path;
+  if (!heading.children || heading.children.length === 0) {
+    return (
+      <LinkItem
+        className={classNames('p-2 my-1 rounded-lg', {
+          'bg-blue-300/30': exact,
+          'hover:bg-slate-300/30': !exact,
+          'font-bold': heading.level === 'index',
+        })}
+        heading={heading}
+      />
+    );
+  }
+  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',
+          {
+            'bg-blue-300/30': exact,
+            'hover:bg-slate-300/30': !exact,
+          },
+        )}
+      >
+        <LinkItem
+          className={classNames('py-2 grow', {
+            'font-semibold text-blue-800 dark:text-blue-200': startOpen,
+            'cursor-pointer': !heading.path,
+          })}
+          heading={heading}
+          onClick={() => setOpen(heading.path ? true : !open)}
+        />
+        <Collapsible.Trigger asChild>
+          <button className="self-center flex-none rounded-md group hover:bg-slate-300/30 focus:outline outline-blue-200 outline-2">
+            <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">
+        {heading.children.map((item) => (
+          <NestedToc heading={item} key={item.id} />
+        ))}
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};

package/src/components/Navigation/TopNav.tsx

@@ -244,8 +244,8 @@ function HomeLink({
 export function TopNav() {
   const [open, setOpen] = useNavOpen();
   const config = useSiteManifest();
-  const { logo, logo_dark, logo_text, logoText, actions, title, nav } =
-    config ?? ({} as SiteManifest);
+  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">
@@ -261,12 +261,7 @@ export function TopNav() {
               <span className="sr-only">Open Menu</span>
             </button>
           </div>
-          <HomeLink
-            name={title}
-            logo={logo}
-            logoDark={logo_dark}
-            logoText={logo_text || logoText}
-          />
+          <HomeLink name={title} logo={logo} logoDark={logo_dark} logoText={logo_text} />
         </div>
         <div className="flex items-center flex-grow w-auto">
           <NavItems nav={nav} />

package/src/components/index.ts

@@ -4,7 +4,8 @@ export { FooterLinksBlock } from './FooterLinksBlock.js';
 export { ContentReload } from './ContentReload.js';
 export { Bibliography } from './Bibliography.js';
 export { ArticleHeader } from './Headers.js';
-export { Abstract, Keywords } from './Abstract.js';
+export { FrontmatterParts, Abstract, Keywords } from './Abstract.js';
+export { BackmatterParts, Backmatter } from './Backmatter.js';
 export { ExternalOrInternalLink } from './ExternalOrInternalLink.js';
 export * from './Navigation/index.js';
 export { renderers } from './renderers.js';

package/src/pages/Article.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { ReferencesProvider } from '@myst-theme/providers';
 import {
-  Abstract,
   Bibliography,
   ContentBlocks,
   FooterLinksBlock,
-  Keywords,
+  FrontmatterParts,
+  BackmatterParts,
 } from '../components/index.js';
 import { ErrorDocumentNotFound } from './ErrorDocumentNotFound.js';
 import { ErrorProjectNotFound } from './ErrorProjectNotFound.js';
 import type { PageLoader } from '@myst-theme/common';
-import { copyNode, extractPart, type GenericParent } from 'myst-common';
+import { copyNode, type GenericParent } from 'myst-common';
 import { SourceFileKind } from 'myst-spec-ext';
 import {
   ExecuteScopeProvider,
@@ -21,24 +21,24 @@ import {
   ErrorTray,
 } from '@myst-theme/jupyter';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
+import { extractKnownParts } from '../utils.js';
 
 export const ArticlePage = React.memo(function ({
   article,
   hide_all_footer_links,
-  showAbstract,
   hideKeywords,
 }: {
   article: PageLoader;
   hide_all_footer_links?: boolean;
-  showAbstract?: boolean;
   hideKeywords?: boolean;
 }) {
-  const canCompute = useCanCompute(article);
-  const { hide_title_block, hide_footer_links } = (article.frontmatter as any)?.design ?? {};
+  const canCompute = useCanCompute();
+
+  const { hide_title_block, hide_footer_links } = (article.frontmatter as any)?.options ?? {};
 
   const tree = copyNode(article.mdast);
   const keywords = article.frontmatter?.keywords ?? [];
-  const abstract = showAbstract ? extractPart(tree, 'abstract') : undefined;
+  const parts = extractKnownParts(tree);
 
   return (
     <ReferencesProvider
@@ -57,9 +57,9 @@ export const ArticlePage = React.memo(function ({
           {canCompute && article.kind === SourceFileKind.Notebook && <NotebookToolbar showLaunch />}
           <ErrorTray pageSlug={article.slug} />
           <div id="skip-to-article" />
-          <Abstract content={abstract as GenericParent} />
-          {abstract && <Keywords keywords={keywords} hideKeywords={hideKeywords} />}
+          <FrontmatterParts parts={parts} keywords={keywords} hideKeywords={hideKeywords} />
           <ContentBlocks pageKind={article.kind} mdast={tree as GenericParent} />
+          <BackmatterParts parts={parts} />
           <Bibliography />
           <ConnectionStatusTray />
           {!hide_footer_links && !hide_all_footer_links && (

package/src/utils.ts

@@ -1,5 +1,25 @@
+import type { GenericParent } from 'myst-common';
+import { extractPart } from 'myst-common';
+
 export function getDomainFromRequest(request: Request) {
   const url = new URL(request.url);
   const domain = `${url.protocol}//${url.hostname}${url.port ? `:${url.port}` : ''}`;
   return domain;
 }
+
+export type KnownParts = {
+  abstract?: GenericParent;
+  summary?: GenericParent;
+  keypoints?: GenericParent;
+  data_availability?: GenericParent;
+  acknowledgments?: GenericParent;
+};
+
+export function extractKnownParts(tree: GenericParent): KnownParts {
+  const abstract = extractPart(tree, 'abstract');
+  const summary = extractPart(tree, 'summary');
+  const keypoints = extractPart(tree, 'keypoints');
+  const data_availability = extractPart(tree, 'data_availability');
+  const acknowledgments = extractPart(tree, 'acknowledgments');
+  return { abstract, summary, keypoints, data_availability, acknowledgments };
+}