@myst-theme/site 0.5.2 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "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.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",
+    "@myst-theme/diagrams": "^0.5.4",
+    "@myst-theme/frontmatter": "^0.5.4",
+    "@myst-theme/jupyter": "^0.5.4",
+    "@myst-theme/common": "^0.5.4",
+    "@myst-theme/providers": "^0.5.4",
     "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.2",
-    "myst-to-react": "^0.5.2",
+    "myst-demo": "^0.5.4",
+    "myst-to-react": "^0.5.4",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/DocumentOutline.tsx

@@ -220,7 +220,7 @@ export function useOutlineHeight<T extends HTMLElement = HTMLElement>(
 
 export const DocumentOutline = ({
   outlineRef,
-  top,
+  top = 0,
   className,
   selector = SELECTOR,
   children,
@@ -246,8 +246,8 @@ export const DocumentOutline = ({
         className,
       )}
       style={{
-        top: top ?? 0,
-        maxHeight: `calc(100vh - ${(top ?? 0) + 20}px)`,
+        top: top,
+        maxHeight: `calc(100vh - ${top + 20}px)`,
       }}
     >
       <div className="mb-4 text-sm leading-6 uppercase text-slate-900 dark:text-slate-100">
@@ -280,12 +280,16 @@ export function SupportingDocuments() {
                   to={withBaseurl(`/${p.slug}#main`, baseurl)}
                   prefetch="intent"
                   className={({ isActive }) =>
-                    classNames('no-underline flex self-center', {
+                    classNames('no-underline flex self-center hover:text-blue-700', {
                       'text-blue-600': isActive,
                     })
                   }
                 >
-                  <DocumentChartBarIcon className="inline h-5 pr-2 shrink-0" />
+                  <DocumentChartBarIcon
+                    width="1.25rem"
+                    height="1.25rem"
+                    className="inline mr-2 shrink-0"
+                  />
                   <span>{p.short_title || p.title}</span>
                 </NavLink>
               </li>

package/src/components/FooterLinksBlock.tsx

@@ -21,14 +21,22 @@ const FooterLink = ({
     >
       <div className="flex h-full align-middle">
         {right && (
-          <ArrowLeftIcon className="self-center w-6 h-6 transition-transform group-hover:-translate-x-1 shrink-0" />
+          <ArrowLeftIcon
+            width="1.5rem"
+            height="1.5rem"
+            className="self-center transition-transform group-hover:-translate-x-1 shrink-0"
+          />
         )}
         <div className={classNames('flex-grow', { 'text-right': right })}>
           <div className="text-xs text-gray-500 dark:text-gray-400">{group || ' '}</div>
           {short_title || title}
         </div>
         {!right && (
-          <ArrowRightIcon className="self-center w-6 h-6 transition-transform group-hover:translate-x-1 shrink-0" />
+          <ArrowRightIcon
+            width="1.5rem"
+            height="1.5rem"
+            className="self-center transition-transform group-hover:translate-x-1 shrink-0"
+          />
         )}
       </div>
     </Link>

package/src/components/Headers.tsx

@@ -8,67 +8,99 @@ import {
 import { useGridSystemProvider } from '@myst-theme/providers';
 import classNames from 'classnames';
 import type { PageFrontmatter } from 'myst-frontmatter';
+import { ThemeButton } from './Navigation';
 
 export function ArticleHeader({
   frontmatter,
   children,
+  toggleTheme,
   className,
 }: {
   frontmatter: PageFrontmatter;
   children?: React.ReactNode;
+  toggleTheme?: boolean;
   className?: string;
 }) {
   const grid = useGridSystemProvider();
   const { subject, venue, biblio, ...rest } = frontmatter ?? {};
+  const positionBackground = {
+    'col-page-right': grid === 'article-left-grid',
+    'col-page': grid === 'article-grid',
+  };
+  const positionFrontmatter = {
+    'col-body': grid === 'article-left-grid',
+    'col-page-left': grid === 'article-grid',
+  };
   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,
-      }}
-    >
+    <header className="relative col-screen">
       {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>
+        // This is the banner contained in a full-bleed div
+        <div
+          className={classNames(
+            'absolute',
+            grid,
+            'subgrid-gap col-screen bg-no-repeat bg-cover bg-top w-full h-full -z-10 pointer-events-none',
+          )}
+          style={{
+            backgroundImage: `url(${frontmatter?.banner})`,
+          }}
+        >
+          <div
+            className={classNames(
+              'absolute border-white shadow-2xl bg-white/80 dark:bg-black/80 backdrop-blur',
+              'w-full',
+              'top-[2rem] h-[calc(100%-4rem)] md:top-[4rem] md:h-[calc(100%-8rem)]',
+              positionBackground,
+            )}
+          />
+        </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,
-        })}
+        className={classNames(
+          'w-full relative col-screen article',
+          grid,
+          'subgrid-gap',
+          {
+            'my-[2rem] pb-[2rem] md:my-[4rem]': frontmatter?.banner,
+            'my-[2rem]': !frontmatter?.banner,
+          },
+          className,
+        )}
       >
-        {subject && (
-          <div
-            className={classNames('flex-none pr-2 smallcaps', {
-              'border-r mr-2': venue,
-            })}
-          >
-            {subject}
+        <div
+          className={classNames('flex w-full align-middle py-2 mb-[1rem] text-sm', {
+            'px-4 w-full': frontmatter?.banner,
+            'bg-white/80 dark:bg-black/80': frontmatter?.banner,
+            ...positionBackground,
+          })}
+        >
+          {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>
+          <div className="hidden sm:block">
+            <LicenseBadges license={frontmatter?.license} />
+            <OpenAccessBadge open_access={frontmatter?.open_access} />
+            <GitHubLink github={frontmatter?.github} />
           </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} />
+          {toggleTheme && <ThemeButton className="inline-block w-5 h-5 mt-0.5 ml-1" />}
+        </div>
+        <FrontmatterBlock
+          frontmatter={rest}
+          authorStyle="list"
+          className={classNames({ 'pt-4 px-6': frontmatter?.banner, ...positionFrontmatter })}
+          hideBadges
+          hideExports
+        />
+        {children}
       </div>
-      <FrontmatterBlock
-        frontmatter={rest}
-        authorStyle="list"
-        className={classNames('z-10', { 'pt-4': frontmatter?.banner })}
-        hideBadges
-        hideExports
-      />
-      {children}
     </header>
   );
 }

package/src/components/Navigation/Navigation.tsx

@@ -1,22 +1,21 @@
-import { useNavOpen } from '@myst-theme/providers';
+import { useNavOpen, useThemeTop } from '@myst-theme/providers';
 import { TableOfContents } from './TableOfContents';
 
 export function Navigation({
   children,
   projectSlug,
-  top,
   tocRef,
   hide_toc,
   footer,
 }: {
   children?: React.ReactNode;
   projectSlug?: string;
-  top?: number;
   tocRef?: React.RefObject<HTMLDivElement>;
   hide_toc?: boolean;
   footer?: React.ReactNode;
 }) {
   const [open, setOpen] = useNavOpen();
+  const top = useThemeTop();
   if (hide_toc) return <>{children}</>;
   return (
     <>
@@ -28,7 +27,7 @@ export function Navigation({
           onClick={() => setOpen(false)}
         ></div>
       )}
-      <TableOfContents tocRef={tocRef} projectSlug={projectSlug} top={top} footer={footer} />
+      <TableOfContents tocRef={tocRef} projectSlug={projectSlug} footer={footer} />
     </>
   );
 }

package/src/components/Navigation/TableOfContents.tsx

@@ -9,6 +9,7 @@ import {
   useBaseurl,
   withBaseurl,
   useGridSystemProvider,
+  useThemeTop,
 } from '@myst-theme/providers';
 import { getProjectHeadings, type Heading } from '@myst-theme/common';
 
@@ -64,6 +65,7 @@ const HeadingLink = ({
 };
 
 const HEADING_CLASSES = 'text-slate-900 leading-5 dark:text-slate-100';
+
 const Headings = ({ folder, headings, sections }: Props) => {
   const secs = sections || [];
   return (
@@ -135,23 +137,18 @@ export function useTocHeight<T extends HTMLElement = HTMLElement>(top = 0, inset
 
 export const TableOfContents = ({
   projectSlug,
-  top,
   tocRef,
   footer,
 }: {
-  top?: number;
   tocRef?: React.RefObject<HTMLElement>;
   projectSlug?: string;
   footer?: React.ReactNode;
 }) => {
+  const top = useThemeTop();
   const grid = useGridSystemProvider();
   const footerRef = useRef<HTMLDivElement>(null);
   const [open] = useNavOpen();
   const config = useSiteManifest();
-  if (!config) return null;
-  const headings = getProjectHeadings(config, projectSlug, {
-    addGroups: false,
-  });
   useEffect(() => {
     setTimeout(() => {
       if (!footerRef.current) return;
@@ -159,6 +156,10 @@ export const TableOfContents = ({
       footerRef.current.style.transform = 'none';
     }, 500);
   }, [footerRef]);
+  if (!config) return null;
+  const headings = getProjectHeadings(config, projectSlug, {
+    addGroups: false,
+  });
   if (!headings) return null;
   return (
     <div
@@ -170,9 +171,7 @@ export const TableOfContents = ({
         { hidden: !open },
         { 'z-30': open },
       )}
-      style={{
-        top: top ?? 0,
-      }}
+      style={{ top }}
     >
       <div
         className={classNames(
@@ -205,3 +204,25 @@ export const TableOfContents = ({
     </div>
   );
 };
+
+export const InlineTableOfContents = ({
+  projectSlug,
+  tocRef,
+  className = 'flex-grow overflow-y-auto max-w-[350px]',
+}: {
+  projectSlug?: string;
+  className?: string;
+  tocRef?: React.RefObject<HTMLElement>;
+}) => {
+  const config = useSiteManifest();
+  if (!config) return null;
+  const headings = getProjectHeadings(config, projectSlug, {
+    addGroups: false,
+  });
+  if (!headings) return null;
+  return (
+    <nav aria-label="Table of Contents" className={className} ref={tocRef}>
+      <Headings folder={projectSlug} headings={headings} sections={config?.projects} />
+    </nav>
+  );
+};

package/src/components/Navigation/TopNav.tsx

@@ -80,7 +80,11 @@ function NavItem({ item }: { item: SiteNavItem }) {
       <div className="inline-block">
         <Menu.Button className="inline-flex items-center justify-center w-full py-1 mx-2 font-medium rounded-md text-md text-stone-900 dark:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
           <span>{item.title}</span>
-          <ChevronDownIcon className="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100" />
+          <ChevronDownIcon
+            width="1.25rem"
+            height="1.25rem"
+            className="ml-2 -mr-1 text-violet-200 hover:text-violet-100"
+          />
         </Menu.Button>
       </div>
       <Transition
@@ -92,7 +96,7 @@ function NavItem({ item }: { item: SiteNavItem }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute w-48 py-1 mt-2 bg-white rounded-sm shadow-lg origin-top-left left-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute w-48 py-1 mt-2 origin-top-left bg-white rounded-sm shadow-lg left-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
           {item.children?.map((action) => (
             <Menu.Item key={action.url}>
               {/* This is really ugly, BUT, the action needs to be defined HERE or the click away doesn't work for some reason */}
@@ -147,7 +151,7 @@ function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
         <Menu.Button className="flex text-sm bg-transparent rounded-full focus:outline-none">
           <span className="sr-only">Open Menu</span>
           <div className="flex items-center text-stone-200 hover:text-white">
-            <EllipsisVerticalIcon className="w-8 h-8 p-1" />
+            <EllipsisVerticalIcon width="2rem" height="2rem" className="p-1" />
           </div>
         </Menu.Button>
       </div>
@@ -160,7 +164,7 @@ function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 w-48 py-1 mt-2 bg-white rounded-sm shadow-lg origin-top-right ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute right-0 w-48 py-1 mt-2 origin-top-right bg-white rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
           {actions?.map((action) => (
             <Menu.Item key={action.url}>
               {({ active }) => (
@@ -251,7 +255,7 @@ export function TopNav() {
                 setOpen(!open);
               }}
             >
-              <MenuIcon className="w-8 h-8 p-1" />
+              <MenuIcon width="2rem" height="2rem" className="m-1" />
               <span className="sr-only">Open Menu</span>
             </button>
           </div>

package/src/components/Navigation/index.tsx

@@ -1,5 +1,5 @@
 export { ThemeButton } from './ThemeButton';
 export { TopNav, DEFAULT_NAV_HEIGHT } from './TopNav';
 export { Navigation } from './Navigation';
-export { TableOfContents, useTocHeight } from './TableOfContents';
+export { TableOfContents, InlineTableOfContents, useTocHeight } from './TableOfContents';
 export { LoadingBar } from './Loading';

package/src/pages/Article.tsx

@@ -50,7 +50,7 @@ export const ArticlePage = React.memo(function ({
             <FrontmatterBlock
               kind={article.kind}
               frontmatter={article.frontmatter}
-              className="mb-8"
+              className="pt-5 mb-8"
             />
           )}
           {binderUrl && !canCompute && (

package/src/pages/Root.tsx

@@ -12,7 +12,7 @@ import {
   Link,
   NavLink,
 } from '@remix-run/react';
-import { renderers } from '../components';
+import { DEFAULT_NAV_HEIGHT, renderers } from '../components';
 import { Analytics } from '../seo';
 import { Error404 } from './Error404';
 import classNames from 'classnames';
@@ -25,18 +25,18 @@ export function Document({
   theme,
   config,
   title,
-  scrollTopClass = 'scroll-p-20',
   staticBuild,
   baseurl,
+  top = DEFAULT_NAV_HEIGHT,
 }: {
   children: React.ReactNode;
   scripts?: React.ReactNode;
   theme: Theme;
   config?: SiteManifest;
   title?: string;
-  scrollTopClass?: string;
   staticBuild?: boolean;
   baseurl?: string;
+  top?: number;
 }) {
   const links = staticBuild
     ? {
@@ -48,7 +48,7 @@ export function Document({
         NavLink: NavLink as any,
       };
   return (
-    <html lang="en" className={classNames(theme, scrollTopClass)}>
+    <html lang="en" className={classNames(theme)} style={{ scrollPadding: top }}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -61,7 +61,7 @@ export function Document({
         />
       </head>
       <body className="m-0 transition-colors duration-500 bg-white dark:bg-stone-900">
-        <ThemeProvider theme={theme} renderers={renderers} {...links}>
+        <ThemeProvider theme={theme} renderers={renderers} {...links} top={top}>
           <BaseUrlProvider baseurl={baseurl}>
             <ThebeBundleLoaderProvider loadThebeLite publicPath={baseurl}>
               <SiteProvider config={config}>