@myst-theme/site 0.5.1 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "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.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",
+    "@myst-theme/diagrams": "^0.5.3",
+    "@myst-theme/frontmatter": "^0.5.3",
+    "@myst-theme/jupyter": "^0.5.3",
+    "@myst-theme/common": "^0.5.3",
+    "@myst-theme/providers": "^0.5.3",
     "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.1",
-    "myst-to-react": "^0.5.1",
+    "myst-demo": "^0.5.3",
+    "myst-to-react": "^0.5.3",
     "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

@@ -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,90 @@ 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 ?? {};
   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 col-page-right',
+              'w-full',
+              'top-[2rem] h-[calc(100%-4rem)] md:top-[4rem] md:h-[calc(100%-8rem)]',
+            )}
+          />
+        </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', {
+            'col-page-right px-4 w-full': frontmatter?.banner,
+            'bg-white/80 dark:bg-black/80': frontmatter?.banner,
+            'col-page-right': !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>
+          <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 })}
+          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/TableOfContents.tsx

@@ -64,6 +64,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 (
@@ -148,10 +149,6 @@ export const TableOfContents = ({
   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
@@ -205,3 +206,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/components/index.ts

@@ -4,6 +4,7 @@ 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 />