@myst-theme/site 0.4.2 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,18 +16,18 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/diagrams": "^0.4.2",
-    "@myst-theme/frontmatter": "^0.4.2",
-    "@myst-theme/jupyter": "^0.4.2",
-    "@myst-theme/common": "^0.4.2",
-    "@myst-theme/providers": "^0.4.2",
+    "@myst-theme/diagrams": "^0.5.1",
+    "@myst-theme/frontmatter": "^0.5.1",
+    "@myst-theme/jupyter": "^0.5.1",
+    "@myst-theme/common": "^0.5.1",
+    "@myst-theme/providers": "^0.5.1",
     "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.4.2",
-    "myst-to-react": "^0.4.2",
+    "myst-demo": "^0.5.1",
+    "myst-to-react": "^0.5.1",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/Bibliography.tsx

@@ -1,17 +1,19 @@
-import { useReferences } from '@myst-theme/providers';
+import { useGridSystemProvider, useReferences } from '@myst-theme/providers';
+import classNames from 'classnames';
 import { useState } from 'react';
 
 const HIDE_OVER_N_REFERENCES = 5;
 
 export function Bibliography() {
   const references = useReferences();
+  const grid = useGridSystemProvider();
   const { order, data } = references?.cite ?? {};
   const filtered = order?.filter((l) => l);
   const [hidden, setHidden] = useState(true);
   if (!filtered || !data || filtered.length === 0) return null;
   const refs = hidden ? filtered.slice(0, HIDE_OVER_N_REFERENCES) : filtered;
   return (
-    <section className="article-grid article-subgrid-gap col-screen">
+    <section className={classNames(grid, 'subgrid-gap col-screen')}>
       <div>
         {filtered.length > HIDE_OVER_N_REFERENCES && (
           <button

package/src/components/ContentBlocks.tsx

@@ -7,6 +7,7 @@ import {
   NotebookRunCell,
   NotebookRunCellSpinnerOnly,
 } from '@myst-theme/jupyter';
+import { useGridSystemProvider } from '@myst-theme/providers';
 
 function isACodeCell(node: GenericParent) {
   return (
@@ -30,7 +31,8 @@ function Block({
   node: GenericParent;
   className?: string;
 }) {
-  const subGrid = 'article-grid article-subgrid-gap col-screen';
+  const grid = useGridSystemProvider();
+  const subGrid = `${grid} subgrid-gap col-screen`;
   const dataClassName = typeof node.data?.class === 'string' ? node.data?.class : undefined;
   // Hide the subgrid if either the dataClass or the className exists and includes `col-`
   const noSubGrid =

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

@@ -0,0 +1,74 @@
+import {
+  FrontmatterBlock,
+  GitHubLink,
+  Journal,
+  LicenseBadges,
+  OpenAccessBadge,
+} from '@myst-theme/frontmatter';
+import { useGridSystemProvider } from '@myst-theme/providers';
+import classNames from 'classnames';
+import type { PageFrontmatter } from 'myst-frontmatter';
+
+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]': frontmatter?.banner,
+        },
+        className,
+      )}
+      style={{
+        backgroundImage: frontmatter?.banner ? `url(${frontmatter?.banner})` : undefined,
+      }}
+    >
+      {frontmatter?.banner && (
+        <div className="absolute border-white shadow-2xl bg-white/80 dark:bg-black/80 backdrop-blur top-[2rem] h-[calc(100%-4rem)] w-full col-screen md:col-screen-inset pointer-events-none"></div>
+      )}
+      <div
+        className={classNames('flex w-full align-middle z-10 py-2 mb-[1rem] text-sm', {
+          'col-screen md:col-screen-inset px-4': frontmatter?.banner,
+          'col-page-right': !frontmatter?.banner,
+          'bg-white/80 dark:bg-black/80': frontmatter?.banner,
+        })}
+      >
+        {subject && (
+          <div
+            className={classNames('flex-none pr-2 smallcaps', {
+              'border-r mr-2': venue,
+            })}
+          >
+            {subject}
+          </div>
+        )}
+        <Journal venue={venue} biblio={biblio} />
+        <div className="flex-grow"></div>
+        <LicenseBadges license={frontmatter?.license} />
+        <OpenAccessBadge open_access={frontmatter?.open_access} />
+        <GitHubLink github={frontmatter?.github} />
+      </div>
+      <FrontmatterBlock
+        frontmatter={rest}
+        authorStyle="list"
+        className={classNames('z-10', { 'pt-4': frontmatter?.banner })}
+        hideBadges
+        hideExports
+      />
+      {children}
+    </header>
+  );
+}

package/src/components/Navigation/TableOfContents.tsx

@@ -8,6 +8,7 @@ import {
   useSiteManifest,
   useBaseurl,
   withBaseurl,
+  useGridSystemProvider,
 } from '@myst-theme/providers';
 import { getProjectHeadings, type Heading } from '@myst-theme/common';
 
@@ -139,10 +140,11 @@ export const TableOfContents = ({
   footer,
 }: {
   top?: number;
-  tocRef?: React.RefObject<HTMLDivElement>;
+  tocRef?: React.RefObject<HTMLElement>;
   projectSlug?: string;
   footer?: React.ReactNode;
 }) => {
+  const grid = useGridSystemProvider();
   const footerRef = useRef<HTMLDivElement>(null);
   const [open] = useNavOpen();
   const config = useSiteManifest();
@@ -160,9 +162,11 @@ export const TableOfContents = ({
   if (!headings) return null;
   return (
     <div
-      ref={tocRef}
+      ref={tocRef as any}
       className={classNames(
-        'fixed xl:article-grid article-grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',
+        '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 },
       )}

package/src/components/index.ts

@@ -1,8 +1,9 @@
 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 { ExternalOrInternalLink } from './ExternalOrInternalLink';
 export * from './Navigation';
 export { renderers } from './renderers';

package/src/pages/Root.tsx

@@ -92,7 +92,7 @@ export function AppCatchBoundary() {
   return (
     <Document theme={Theme.light}>
       <article className="article">
-        <main className="article-grid article-subgrid-gap col-screen">
+        <main className="article-grid subgrid-gap col-screen">
           <Error404 />
         </main>
       </article>