@myst-theme/site 0.3.2 → 0.3.3

package/package.json

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

package/src/components/Bibliography.tsx

@@ -16,14 +16,14 @@ export function Bibliography() {
         {filtered.length > HIDE_OVER_N_REFERENCES && (
           <button
             onClick={() => setHidden(!hidden)}
-            className="float-right text-xs p-1 px-2 border rounded hover:border-blue-500 dark:hover:border-blue-400"
+            className="float-right p-1 px-2 text-xs border rounded hover:border-blue-500 dark:hover:border-blue-400"
           >
             {hidden ? 'Show All' : 'Collapse'}
           </button>
         )}
         <header className="text-lg font-semibold text-stone-900 dark:text-white">References</header>
       </div>
-      <div className="text-xs mb-8 pl-3 text-stone-500 dark:text-stone-300">
+      <div className="pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300">
         <ol>
           {refs.map((label) => {
             const { html } = data[label];
@@ -37,7 +37,7 @@ export function Bibliography() {
             );
           })}
           {filtered.length > HIDE_OVER_N_REFERENCES && (
-            <li className="list-none text-center">
+            <li className="text-center list-none">
               <button
                 onClick={() => setHidden(!hidden)}
                 className="p-2 border rounded hover:border-blue-500 dark:hover:border-blue-400"

package/src/components/ComputeControls.tsx

@@ -23,7 +23,7 @@ export function Run({
   ) => Promise<(IThebeCellExecuteReturn | null)[]>;
 }) {
   return (
-    <div className="flex relative text-sm">
+    <div className="relative flex text-sm">
       <button
         className={classNames(
           'cursor-pointer text-gray-700 active:text-green-700 hover:opacity-100',
@@ -35,7 +35,7 @@ export function Run({
         disabled={disabled || !ready || executing}
         onClick={() => execute()}
       >
-        <PlayCircleIcon className="h-6 w-6 inline-block align-top" title="run all cells" />
+        <PlayCircleIcon className="inline-block w-6 h-6 align-top" title="run all cells" />
       </button>
       {executing && (
         <span className="absolute top-0 left-0 z-10 w-[22px] h-[22px] opacity-100">
@@ -59,11 +59,11 @@ export function Clear({
 }) {
   return (
     <button
-      className="flex cursor-pointer text-gray-700 active:text-green-700 opacity-60 hover:opacity-100"
+      className="flex text-gray-700 cursor-pointer active:text-green-700 opacity-60 hover:opacity-100"
       disabled={disabled || !ready || executing}
       onClick={() => clear()}
     >
-      <MinusCircleIcon className="h-6 w-6 inline-block align-top" title="clear all outputs" />
+      <MinusCircleIcon className="inline-block w-6 h-6 align-top" title="clear all outputs" />
     </button>
   );
 }
@@ -98,7 +98,7 @@ export function NotebookRunAll() {
 
   return (
     <div className="flex">
-      <div className="group flex relative space-x-1">
+      <div className="relative flex group space-x-1">
         <Run
           ready={ready}
           executing={executing}
@@ -108,20 +108,20 @@ export function NotebookRunAll() {
           }}
         />
         <button
-          className="flex items-center cursor-pointer text-gray-700 active:text-green-700 opacity-60 hover:opacity-100"
+          className="flex items-center text-gray-700 cursor-pointer active:text-green-700 opacity-60 hover:opacity-100"
           disabled={!ready || executing}
           onClick={() => restart()}
         >
-          <ArrowPathIcon className="h-6 w-6" title="restart kernel" />
+          <ArrowPathIcon className="w-6 h-6" title="restart kernel" />
         </button>
         <Clear ready={ready} executing={executing} clear={clear} />
         <button
-          className="flex items-center cursor-pointer text-gray-700 active:text-green-700 opacity-60 hover:opacity-100"
+          className="flex items-center text-gray-700 cursor-pointer active:text-green-700 opacity-60 hover:opacity-100"
           disabled={!ready}
           onClick={clickLaunchInJupyter}
         >
           <ArrowTopRightOnSquareIcon
-            className="h-6 w-6 inline-block align-top"
+            className="inline-block w-6 h-6 align-top"
             title="launch in juptyer"
           />
         </button>

package/src/components/DocumentOutline.tsx

@@ -26,7 +26,7 @@ type Props = {
  * scrollIntoView is used to ensure that when a user clicks on an item, it will smoothly scroll.
  */
 const Headings = ({ headings, activeId, highlight, selector }: Props) => (
-  <ul className="text-slate-400 text-sm leading-6">
+  <ul className="text-sm text-slate-400 leading-6">
     {headings.map((heading) => (
       <li
         key={heading.id}
@@ -213,7 +213,7 @@ export const DocumentOutline = ({
         maxHeight: `calc(100vh - ${(top ?? 0) + 20}px)`,
       }}
     >
-      <div className="text-slate-900 mb-4 text-sm leading-6 dark:text-slate-100 uppercase">
+      <div className="mb-4 text-sm uppercase text-slate-900 leading-6 dark:text-slate-100">
         In this article
       </div>
       <Headings headings={headings} activeId={activeId} highlight={highlight} selector={selector} />

package/src/components/EnableCompute.tsx

@@ -3,6 +3,8 @@ import PowerIcon from '@heroicons/react/24/outline/PowerIcon';
 import { useHasNotebookProvider } from '@myst-theme/jupyter';
 import { useNavigation } from '@remix-run/react';
 import { useEffect, useState } from 'react';
+import { Spinner } from './Spinner';
+import classNames from 'classnames';
 
 export function EnableCompute({
   canCompute,
@@ -10,14 +12,7 @@ export function EnableCompute({
 }: React.PropsWithChildren<{ canCompute: boolean }>) {
   const { load, loading, core } = useThebeLoader();
   const { connect, connecting, ready: serverReady, error: serverError } = useThebeServer();
-  const {
-    start,
-    starting,
-    shutdown,
-    session,
-    ready: sessionReady,
-    error: sessionError,
-  } = useThebeSession();
+  const { start, starting, shutdown, ready: sessionReady, error: sessionError } = useThebeSession();
   const hasNotebookProvider = useHasNotebookProvider();
   const navigation = useNavigation();
   const [enabling, setEnabling] = useState(false);
@@ -36,16 +31,14 @@ export function EnableCompute({
   }, [enabling, core, serverReady, sessionReady]);
 
   if (!canCompute || !hasNotebookProvider) return null;
-  let classes = 'flex text-center mr-1 cursor-pointer rounded-full';
-  const idleClasses = 'text-blue-700 hover:opacity-100 opacity-60';
-  const busyClasses = 'bg-yellow-700 text-yellow-700 opacity-100 font-semibold';
-  const readyClasses = 'bg-green-700 text-green-700 opacity-100 font-semibold';
-  const errorClasses = 'bg-red-700 text-red-700 opacity-100';
-
-  if (busy) classes += busyClasses;
-  else if (serverReady && sessionReady) classes += readyClasses;
-  else if (serverError || sessionError) classes += errorClasses;
-  else classes += idleClasses;
+  let title = 'Connect to a compute server';
+  const error = !!sessionError || !!serverError;
+  if (error) {
+    title = 'Error connecting to compute server';
+  }
+  if (busy) {
+    title = 'Connecting...';
+  }
 
   useEffect(() => {
     if (navigation.state === 'loading') {
@@ -54,10 +47,25 @@ export function EnableCompute({
   }, [shutdown, navigation]);
 
   return (
-    <div className="flex mx-1 items-center mb-2">
-      <button className={classes} onClick={() => setEnabling(true)} disabled={enabling || enabled}>
-        <PowerIcon className="h-6 w-6 mx-1 inline-block align-top" title="enable compute" />
-      </button>
+    <div className="relative flex items-center mx-1 mb-2">
+      {!enabled && (
+        <button
+          className={classNames(
+            'flex text-center mr-1 cursor-pointer rounded-full disabled:opacity-10 text-gray-700',
+            { 'text-red-600 opacity-100': error },
+          )}
+          onClick={() => setEnabling(true)}
+          disabled={connecting || starting}
+          title={title}
+        >
+          <PowerIcon className="inline-block w-6 h-6 mx-1 align-top" />
+        </button>
+      )}
+      {(connecting || starting) && !error && (
+        <span className="absolute top-0 left-1 z-10 w-[22px] h-[22px] opacity-100" title={title}>
+          <Spinner size={24} />
+        </span>
+      )}
       {enabled && <>{children}</>}
     </div>
   );

package/src/components/FooterLinksBlock.tsx

@@ -16,19 +16,19 @@ const FooterLink = ({
   return (
     <Link
       prefetch="intent"
-      className="group flex-1 p-4 block border font-normal hover:border-blue-600 dark:hover:border-blue-400 no-underline hover:text-blue-600 dark:hover:text-blue-400 text-gray-600 dark:text-gray-100 border-gray-200 dark:border-gray-500 rounded shadow-sm hover:shadow-lg dark:shadow-neutral-700"
+      className="flex-1 block p-4 font-normal text-gray-600 no-underline border border-gray-200 rounded group hover:border-blue-600 dark:hover:border-blue-400 hover:text-blue-600 dark:hover:text-blue-400 dark:text-gray-100 dark:border-gray-500 shadow-sm hover:shadow-lg dark:shadow-neutral-700"
       to={withBaseurl(url, baseurl)}
     >
-      <div className="flex align-middle h-full">
+      <div className="flex h-full align-middle">
         {right && (
-          <ArrowLeftIcon className="w-6 h-6 self-center transition-transform group-hover:-translate-x-1 shrink-0" />
+          <ArrowLeftIcon className="self-center w-6 h-6 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="w-6 h-6 self-center transition-transform group-hover:translate-x-1 shrink-0" />
+          <ArrowRightIcon className="self-center w-6 h-6 transition-transform group-hover:translate-x-1 shrink-0" />
         )}
       </div>
     </Link>
@@ -38,7 +38,7 @@ const FooterLink = ({
 export function FooterLinksBlock({ links }: { links?: FooterLinks }) {
   if (!links) return null;
   return (
-    <div className="flex space-x-4 pt-10 mb-10">
+    <div className="flex pt-10 mb-10 space-x-4">
       {links.navigation?.prev && <FooterLink {...links.navigation?.prev} right />}
       {links.navigation?.next && <FooterLink {...links.navigation?.next} />}
     </div>

package/src/components/Navigation/TableOfContents.tsx

@@ -92,7 +92,7 @@ const Headings = ({ folder, headings, sections }: Props) => {
                   {heading.short_title || heading.title}
                 </HeadingLink>
               ) : (
-                <h5 className="mb-3 lg:mt-8 font-semibold break-words dark:text-white">
+                <h5 className="mb-3 font-semibold break-words lg:mt-8 dark:text-white">
                   {heading.short_title || heading.title}
                 </h5>
               )}

package/src/components/Navigation/ThemeButton.tsx

@@ -3,7 +3,7 @@ import MoonIcon from '@heroicons/react/24/solid/MoonIcon';
 import SunIcon from '@heroicons/react/24/outline/SunIcon';
 import classNames from 'classnames';
 
-export function ThemeButton({ className = 'mx-3 h-8 w-8' }: { className?: string }) {
+export function ThemeButton({ className = 'w-8 h-8 mx-3' }: { className?: string }) {
   const { isDark, nextTheme } = useTheme();
   return (
     <button

package/src/components/Navigation/TopNav.tsx

@@ -57,7 +57,7 @@ function ExternalOrInternalLink({
 function NavItem({ item }: { item: SiteNavItem }) {
   if (!('children' in item)) {
     return (
-      <div className="relative grow-0 inline-block mx-2">
+      <div className="relative inline-block mx-2 grow-0">
         <ExternalOrInternalLink
           nav
           to={item.url ?? ''}
@@ -76,9 +76,9 @@ function NavItem({ item }: { item: SiteNavItem }) {
     );
   }
   return (
-    <Menu as="div" className="relative grow-0 inline-block mx-2">
+    <Menu as="div" className="relative inline-block mx-2 grow-0">
       <div className="inline-block">
-        <Menu.Button className="inline-flex items-center justify-center w-full mx-2 py-1 text-md font-medium text-stone-900 dark:text-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+        <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" />
         </Menu.Button>
@@ -92,7 +92,7 @@ function NavItem({ item }: { item: SiteNavItem }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="origin-top-left absolute left-4 mt-2 w-48 rounded-sm shadow-lg py-1 bg-white 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 */}
@@ -131,7 +131,7 @@ function NavItem({ item }: { item: SiteNavItem }) {
 function NavItems({ nav }: { nav?: SiteManifest['nav'] }) {
   if (!nav) return null;
   return (
-    <div className="text-md flex-grow hidden lg:block">
+    <div className="flex-grow hidden text-md lg:block">
       {nav.map((item) => {
         return <NavItem key={'url' in item ? item.url : item.title} item={item} />;
       })}
@@ -144,10 +144,10 @@ function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
   return (
     <Menu as="div" className="relative">
       <div>
-        <Menu.Button className="bg-transparent flex text-sm rounded-full focus:outline-none">
+        <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="h-8 w-8 p-1" />
+            <EllipsisVerticalIcon className="w-8 h-8 p-1" />
           </div>
         </Menu.Button>
       </div>
@@ -160,7 +160,7 @@ function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-sm shadow-lg py-1 bg-white 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 }) => (
@@ -182,19 +182,46 @@ function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
   );
 }
 
-function HomeLink({ logo, logoText, name }: { logo?: string; logoText?: string; name?: string }) {
+function HomeLink({
+  logo,
+  logoDark,
+  logoText,
+  name,
+}: {
+  logo?: string;
+  logoDark?: string;
+  logoText?: string;
+  name?: string;
+}) {
   const Link = useLinkProvider();
   const baseurl = useBaseurl();
   const nothingSet = !logo && !logoText;
   return (
     <Link
-      className="flex items-center dark:text-white w-fit ml-3 md:ml-5 xl:ml-7"
+      className="flex items-center ml-3 dark:text-white w-fit md:ml-5 xl:ml-7"
       to={withBaseurl('/', baseurl)}
       prefetch="intent"
     >
       {logo && (
-        <div className="dark:bg-white dark:rounded p-1 mr-3">
-          <img src={logo} className="h-9" alt={logoText || name} height="2.25rem"></img>
+        <div
+          className={classNames('p-1 mr-3', {
+            'dark:bg-white dark:rounded': !logoDark,
+          })}
+        >
+          <img
+            src={logo}
+            className={classNames('h-9', { 'dark:hidden': !!logoDark })}
+            alt={logoText || name}
+            height="2.25rem"
+          ></img>
+          {logoDark && (
+            <img
+              src={logoDark}
+              className="hidden h-9 dark:block"
+              alt={logoText || name}
+              height="2.25rem"
+            ></img>
+          )}
         </div>
       )}
       <span
@@ -211,7 +238,8 @@ function HomeLink({ logo, logoText, name }: { logo?: string; logoText?: string;
 export function TopNav() {
   const [open, setOpen] = useNavOpen();
   const config = useSiteManifest();
-  const { logo, logo_text, logoText, actions, title, nav } = config ?? ({} as SiteManifest);
+  const { logo, logo_dark, logo_text, logoText, actions, title, nav } =
+    config ?? ({} as SiteManifest);
   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">
@@ -223,15 +251,20 @@ export function TopNav() {
                 setOpen(!open);
               }}
             >
-              <MenuIcon className="h-8 w-8 p-1" />
+              <MenuIcon className="w-8 h-8 p-1" />
               <span className="sr-only">Open Menu</span>
             </button>
           </div>
-          <HomeLink name={title} logo={logo} logoText={logo_text || logoText} />
+          <HomeLink
+            name={title}
+            logo={logo}
+            logoDark={logo_dark}
+            logoText={logo_text || logoText}
+          />
         </div>
-        <div className="flex-grow flex items-center w-auto">
+        <div className="flex items-center flex-grow w-auto">
           <NavItems nav={nav} />
-          <div className="block flex-grow"></div>
+          <div className="flex-grow block"></div>
           <ThemeButton />
           <div className="block sm:hidden">
             <ActionMenu actions={actions} />
@@ -240,7 +273,7 @@ export function TopNav() {
             {actions?.map((action, index) => (
               <ExternalOrInternalLink
                 key={action.url || index}
-                className="inline-block text-md px-4 py-2 mx-1 leading-none border rounded border-stone-700 dark:border-white text-stone-700 dark:text-white hover:text-stone-500 dark:hover:text-neutral-800 hover:bg-neutral-100 mt-0"
+                className="inline-block px-4 py-2 mx-1 mt-0 leading-none border rounded text-md border-stone-700 dark:border-white text-stone-700 dark:text-white hover:text-stone-500 dark:hover:text-neutral-800 hover:bg-neutral-100"
                 to={action.url}
               >
                 {action.title}

package/src/loaders/utils.ts

@@ -96,7 +96,9 @@ export function updateSiteManifestStaticLinksInplace(
     if (!action.static) return;
     action.url = updateUrl(action.url);
   });
+  // TODO: this needs to be based on the template.yml in the future
   if (data.logo) data.logo = updateUrl(data.logo);
+  if (data.logo_dark) data.logo_dark = updateUrl(data.logo_dark);
   // Update the thumbnails to point at the CDN
   data.projects?.forEach((project) => {
     project.pages

package/src/pages/Article.tsx

@@ -10,7 +10,12 @@ import type { GenericParent } from 'myst-common';
 import { SourceFileKind } from 'myst-common';
 import { EnableCompute } from '../components/EnableCompute';
 import { NotebookRunAll } from '../components/ComputeControls';
-import { NotebookProvider, BinderBadge, useComputeOptions } from '@myst-theme/jupyter';
+import {
+  NotebookProvider,
+  BinderBadge,
+  useComputeOptions,
+  ConnectionStatusTray,
+} from '@myst-theme/jupyter';
 
 export const ArticlePage = React.memo(function ({ article }: { article: PageLoader }) {
   const computeOptions = useComputeOptions();
@@ -39,6 +44,7 @@ export const ArticlePage = React.memo(function ({ article }: { article: PageLoad
               )}
             </div>
             <ContentBlocks pageKind={article.kind} mdast={article.mdast as GenericParent} />
+            <ConnectionStatusTray />
             <Bibliography />
             {!hide_footer_links && <FooterLinksBlock links={article.footer} />}
           </NotebookProvider>

package/src/pages/Root.tsx

@@ -63,7 +63,7 @@ export function Document({
       <body className="m-0 transition-colors duration-500 bg-white dark:bg-stone-900">
         <ThemeProvider theme={theme} renderers={renderers} {...links}>
           <BaseUrlProvider baseurl={baseurl}>
-            <ThebeBundleLoaderProvider loadThebeLite>
+            <ThebeBundleLoaderProvider loadThebeLite publicPath={baseurl}>
               <SiteProvider config={config}>
                 <ConfiguredThebeServerProvider>{children}</ConfiguredThebeServerProvider>
               </SiteProvider>