@myst-theme/site 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,22 +16,22 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/diagrams": "^0.5.0",
-    "@myst-theme/frontmatter": "^0.5.0",
-    "@myst-theme/jupyter": "^0.5.0",
-    "@myst-theme/common": "^0.5.0",
-    "@myst-theme/providers": "^0.5.0",
+    "@myst-theme/diagrams": "^0.5.2",
+    "@myst-theme/frontmatter": "^0.5.2",
+    "@myst-theme/jupyter": "^0.5.2",
+    "@myst-theme/common": "^0.5.2",
+    "@myst-theme/providers": "^0.5.2",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.1.1",
     "myst-spec-ext": "^1.1.1",
     "myst-config": "^1.1.1",
-    "myst-demo": "^0.5.0",
-    "myst-to-react": "^0.5.0",
+    "myst-demo": "^0.5.2",
+    "myst-to-react": "^0.5.2",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",
-    "thebe-react": "^0.3.0",
+    "thebe-react": "^0.3.2",
     "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {

package/src/components/Abstract.tsx

@@ -0,0 +1,40 @@
+import type { GenericParent } from 'myst-common';
+import { ContentBlocks } from './ContentBlocks';
+import classNames from 'classnames';
+
+export function Abstract({ content }: { content: GenericParent }) {
+  if (!content) return null;
+  return (
+    <>
+      <span className="mb-3 font-semibold">Abstract</span>
+      <div className="px-6 py-1 mb-3 rounded-sm bg-slate-50 dark:bg-slate-800">
+        <ContentBlocks mdast={content} className="col-body" />
+      </div>
+    </>
+  );
+}
+
+export function Keywords({
+  keywords,
+  hideKeywords,
+}: {
+  keywords?: string[];
+  hideKeywords?: boolean;
+}) {
+  if (hideKeywords || !keywords || keywords.length === 0) return null;
+  return (
+    <div className="mb-10">
+      <span className="mr-2 font-semibold">Keywords:</span>
+      {keywords.map((k, i) => (
+        <span
+          key={k}
+          className={classNames({
+            "after:content-[','] after:mr-1": i < keywords.length - 1,
+          })}
+        >
+          {k}
+        </span>
+      ))}
+    </div>
+  );
+}

package/src/components/DocumentOutline.tsx

@@ -1,7 +1,14 @@
+import {
+  useBaseurl,
+  useNavLinkProvider,
+  useSiteManifest,
+  withBaseurl,
+} from '@myst-theme/providers';
 import { useNavigation } from '@remix-run/react';
 import classNames from 'classnames';
 import throttle from 'lodash.throttle';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import DocumentChartBarIcon from '@heroicons/react/24/outline/DocumentChartBarIcon';
 
 const SELECTOR = [1, 2, 3, 4].map((n) => `main h${n}`).join(', ');
 const HIGHLIGHT_CLASS = 'highlight';
@@ -180,13 +187,15 @@ const useIntersectionObserver = (highlight: () => void, onScreen: Set<HTMLHeadin
   return { observer };
 };
 
-export function useOutlineHeight<T extends HTMLElement = HTMLElement>() {
+export function useOutlineHeight<T extends HTMLElement = HTMLElement>(
+  existingContainer?: React.RefObject<T>,
+) {
   const container = useRef<T>(null);
   const outline = useRef<T>(null);
   const transitionState = useNavigation().state;
   const setHeight = () => {
     if (!container.current || !outline.current) return;
-    const height = container.current.offsetHeight - window.scrollY;
+    const height = container.current.offsetHeight - window.scrollY + container.current.offsetTop;
     outline.current.style.display = height < 50 ? 'none' : '';
     outline.current.style.height = height > window.innerHeight ? '' : `${height}px`;
     outline.current.style.opacity = height && height > 300 ? '' : '0';
@@ -201,6 +210,11 @@ export function useOutlineHeight<T extends HTMLElement = HTMLElement>() {
       window.removeEventListener('scroll', handleScroll);
     };
   }, [container.current, outline.current, transitionState]);
+
+  useEffect(() => {
+    if (!existingContainer || !existingContainer.current) return;
+    (container as any).current = existingContainer.current;
+  }, [existingContainer?.current]);
   return { container, outline };
 }
 
@@ -209,16 +223,18 @@ export const DocumentOutline = ({
   top,
   className,
   selector = SELECTOR,
+  children,
 }: {
   outlineRef?: React.RefObject<HTMLElement>;
   top?: number;
   height?: number;
   className?: string;
   selector?: string;
+  children?: React.ReactNode;
 }) => {
   const { activeId, headings, highlight } = useHeaders(selector);
   if (headings.length <= 1 || !onClient) {
-    return <nav suppressHydrationWarning style={{ display: 'none' }} />;
+    return <nav suppressHydrationWarning>{children}</nav>;
   }
   return (
     <nav
@@ -238,6 +254,44 @@ export const DocumentOutline = ({
         In this article
       </div>
       <Headings headings={headings} activeId={activeId} highlight={highlight} selector={selector} />
+      {children}
     </nav>
   );
 };
+
+export function SupportingDocuments() {
+  const { projects } = useSiteManifest() ?? {};
+  const NavLink = useNavLinkProvider();
+  const baseurl = useBaseurl();
+  const pages = projects?.[0]?.pages;
+  if (!pages || pages.length === 0) return null;
+  return (
+    <>
+      <div className="my-4 text-sm leading-6 uppercase text-slate-900 dark:text-slate-100">
+        Supporting Documents
+      </div>
+      <ul className="flex flex-col gap-2 pl-0 text-sm leading-6 list-none text-slate-700 dark:text-slate-300">
+        {pages
+          .filter((p) => 'slug' in p)
+          .map((p) => {
+            return (
+              <li key={p.slug}>
+                <NavLink
+                  to={withBaseurl(`/${p.slug}#main`, baseurl)}
+                  prefetch="intent"
+                  className={({ isActive }) =>
+                    classNames('no-underline flex self-center', {
+                      'text-blue-600': isActive,
+                    })
+                  }
+                >
+                  <DocumentChartBarIcon className="inline h-5 pr-2 shrink-0" />
+                  <span>{p.short_title || p.title}</span>
+                </NavLink>
+              </li>
+            );
+          })}
+      </ul>
+    </>
+  );
+}

package/src/components/Headers.tsx

@@ -9,15 +9,29 @@ import { useGridSystemProvider } from '@myst-theme/providers';
 import classNames from 'classnames';
 import type { PageFrontmatter } from 'myst-frontmatter';
 
-export function ArticleHeader({ frontmatter }: { frontmatter: PageFrontmatter }) {
+export function ArticleHeader({
+  frontmatter,
+  children,
+  className,
+}: {
+  frontmatter: PageFrontmatter;
+  children?: React.ReactNode;
+  className?: string;
+}) {
   const grid = useGridSystemProvider();
   const { subject, venue, biblio, ...rest } = frontmatter ?? {};
   return (
     <header
-      className={classNames('w-full relative pt-[2rem] col-screen article', grid, 'subgrid-gap', {
-        'bg-no-repeat bg-cover bg-top': frontmatter?.banner,
-        'pb-[4rem] min-h-[300px]': frontmatter?.banner,
-      })}
+      className={classNames(
+        'w-full relative pt-[2rem] col-screen article',
+        grid,
+        'subgrid-gap',
+        {
+          'bg-no-repeat bg-cover bg-top': frontmatter?.banner,
+          'pb-[4rem]': frontmatter?.banner,
+        },
+        className,
+      )}
       style={{
         backgroundImage: frontmatter?.banner ? `url(${frontmatter?.banner})` : undefined,
       }}
@@ -54,6 +68,7 @@ export function ArticleHeader({ frontmatter }: { frontmatter: PageFrontmatter })
         hideBadges
         hideExports
       />
+      {children}
     </header>
   );
 }

package/src/components/Navigation/TableOfContents.tsx

@@ -140,7 +140,7 @@ export const TableOfContents = ({
   footer,
 }: {
   top?: number;
-  tocRef?: React.RefObject<HTMLDivElement>;
+  tocRef?: React.RefObject<HTMLElement>;
   projectSlug?: string;
   footer?: React.ReactNode;
 }) => {
@@ -162,7 +162,7 @@ export const TableOfContents = ({
   if (!headings) return null;
   return (
     <div
-      ref={tocRef}
+      ref={tocRef as any}
       className={classNames(
         'fixed',
         `xl:${grid}`, // for example, xl:article-grid

package/src/components/index.ts

@@ -1,9 +1,10 @@
 export { ContentBlocks } from './ContentBlocks';
-export { DocumentOutline, useOutlineHeight } from './DocumentOutline';
+export { DocumentOutline, useOutlineHeight, SupportingDocuments } from './DocumentOutline';
 export { FooterLinksBlock } from './FooterLinksBlock';
 export { ContentReload } from './ContentReload';
 export { Bibliography } from './Bibliography';
 export { ArticleHeader } from './Headers';
+export { Abstract, Keywords } from './Abstract';
 export { ExternalOrInternalLink } from './ExternalOrInternalLink';
 export * from './Navigation';
 export { renderers } from './renderers';

package/src/pages/Article.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ReferencesProvider } from '@myst-theme/providers';
-import { Bibliography, ContentBlocks, FooterLinksBlock } from '../components';
+import { Abstract, Bibliography, ContentBlocks, FooterLinksBlock, Keywords } from '../components';
 import { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
 import { ErrorProjectNotFound } from './ErrorProjectNotFound';
 import type { PageLoader } from '@myst-theme/common';
@@ -17,7 +17,6 @@ import {
   ErrorTray,
 } from '@myst-theme/jupyter';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
-import classNames from 'classnames';
 
 export const ArticlePage = React.memo(function ({
   article,
@@ -61,29 +60,8 @@ export const ArticlePage = React.memo(function ({
           )}
           {canCompute && article.kind === SourceFileKind.Notebook && <NotebookToolbar showLaunch />}
           <ErrorTray pageSlug={article.slug} />
-          {abstract && (
-            <>
-              <span className="font-semibold">Abstract</span>
-              <div className="px-6 py-1 m-3 rounded-sm bg-slate-50 dark:bg-slate-800">
-                <ContentBlocks mdast={abstract as GenericParent} className="col-body" />
-              </div>
-              {!hideKeywords && keywords.length > 0 && (
-                <div className="mb-10">
-                  <span className="mr-2 font-semibold">Keywords:</span>
-                  {keywords.map((k, i) => (
-                    <span
-                      key={k}
-                      className={classNames({
-                        "after:content-[','] after:mr-1": i < keywords.length - 1,
-                      })}
-                    >
-                      {k}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </>
-          )}
+          <Abstract content={abstract as GenericParent} />
+          {abstract && <Keywords keywords={keywords} hideKeywords={hideKeywords} />}
           <ContentBlocks pageKind={article.kind} mdast={tree as GenericParent} />
           <Bibliography />
           <ConnectionStatusTray />