@myst-theme/site 0.2.10 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.2.10",
+  "version": "0.3.1",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -14,38 +14,33 @@
     "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\""
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.13",
-    "@heroicons/react": "^2.0.14",
-    "@myst-theme/diagrams": "^0.2.10",
-    "@myst-theme/frontmatter": "^0.2.10",
-    "@myst-theme/jupyter": "^0.2.10",
-    "@myst-theme/providers": "^0.2.10",
+    "@headlessui/react": "^1.7.15",
+    "@heroicons/react": "^2.0.18",
+    "@myst-theme/diagrams": "^0.3.1",
+    "@myst-theme/frontmatter": "^0.3.1",
+    "@myst-theme/jupyter": "^0.3.1",
+    "@myst-theme/providers": "^0.3.1",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^0.0.17",
-    "myst-config": "^0.0.16",
-    "myst-demo": "^0.2.10",
-    "myst-to-react": "^0.2.10",
+    "myst-common": "^1.0.1",
+    "myst-config": "^1.0.0",
+    "myst-demo": "^0.3.1",
+    "myst-to-react": "^0.3.1",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
-    "node-fetch": "^2.6.7",
-    "thebe-react": "^0.0.7",
+    "node-fetch": "^2.6.11",
+    "thebe-react": "^0.2.3",
     "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {
-    "@remix-run/node": "^1.12.0",
-    "@remix-run/react": "^1.12.0",
+    "@remix-run/node": "^1.17.0",
+    "@remix-run/react": "^1.17.0",
     "@types/react": "^16.8 || ^17.0 || ^18.0",
     "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
     "react": "^16.8 || ^17.0 || ^18.0",
     "react-dom": "^16.8 || ^17.0 || ^18.0"
   },
   "devDependencies": {
-    "@types/lodash.throttle": "^4.1.7",
-    "@types/node-fetch": "^2.6.2",
-    "eslint": "^8.21.0",
-    "eslint-config-curvenote": "latest",
-    "tsconfig": "latest",
-    "typescript": "latest"
+    "@types/lodash.throttle": "^4.1.7"
   }
 }

package/src/components/ComputeControls.tsx

@@ -99,7 +99,14 @@ export function NotebookRunAll() {
   return (
     <div className="flex">
       <div className="group flex relative space-x-1">
-        <Run ready={ready} executing={executing} execute={executeAll} />
+        <Run
+          ready={ready}
+          executing={executing}
+          execute={(options) => {
+            clear();
+            return executeAll(options);
+          }}
+        />
         <button
           className="flex items-center cursor-pointer text-gray-700 active:text-green-700 opacity-60 hover:opacity-100"
           disabled={!ready || executing}

package/src/components/EnableCompute.tsx

@@ -1,4 +1,4 @@
-import { useThebeCore, useThebeServer, useThebeSession } from 'thebe-react';
+import { useThebeLoader, useThebeServer, useThebeSession } from 'thebe-react';
 import PowerIcon from '@heroicons/react/24/outline/PowerIcon';
 import { useHasNotebookProvider } from '@myst-theme/jupyter';
 import { useNavigation } from '@remix-run/react';
@@ -8,7 +8,7 @@ export function EnableCompute({
   canCompute,
   children,
 }: React.PropsWithChildren<{ canCompute: boolean }>) {
-  const { load, loading, core } = useThebeCore();
+  const { load, loading, core } = useThebeLoader();
   const { connect, connecting, ready: serverReady, error: serverError } = useThebeServer();
   const {
     start,
@@ -54,7 +54,7 @@ export function EnableCompute({
   }, [shutdown, navigation]);
 
   return (
-    <div className="flex mx-1 items-center">
+    <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>

package/src/components/Navigation/TableOfContents.tsx

@@ -185,7 +185,7 @@ export const TableOfContents = ({
       >
         <nav
           aria-label="Table of Contents"
-          className="flex-grow overflow-y-auto transition-opacity mt-6 pb-3 ml-3 xl:ml-0 mr-3"
+          className="flex-grow overflow-y-auto transition-opacity mt-6 pb-3 ml-3 xl:ml-0 mr-3 max-w-[350px]"
         >
           <Headings folder={projectSlug} headings={headings} sections={config?.projects} />
         </nav>

package/src/loaders/utils.ts

@@ -72,7 +72,7 @@ export function getFooterLinks(
   projectSlug?: string,
   slug?: string,
 ): FooterLinks {
-  if (!projectSlug || !slug || !config) return {};
+  if (!slug || !config) return {};
   const pages = getProjectHeadings(config, projectSlug, {
     addGroups: true,
   });

package/src/pages/Article.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import { ReferencesProvider, useComputeOptions } from '@myst-theme/providers';
+import { ReferencesProvider } from '@myst-theme/providers';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
 import { Bibliography, ContentBlocks, FooterLinksBlock } from '../components';
 import { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
 import { ErrorProjectNotFound } from './ErrorProjectNotFound';
 import type { PageLoader } from '../types';
-import { ThebeSessionProvider } from 'thebe-react';
+import { ThebeRenderMimeRegistryProvider, ThebeSessionProvider } from 'thebe-react';
 import type { GenericParent } from 'myst-common';
 import { SourceFileKind } from 'myst-common';
 import { EnableCompute } from '../components/EnableCompute';
 import { NotebookRunAll } from '../components/ComputeControls';
-import { NotebookProvider, BinderBadge } from '@myst-theme/jupyter';
+import { NotebookProvider, BinderBadge, useComputeOptions } from '@myst-theme/jupyter';
 
 export const ArticlePage = React.memo(function ({ article }: { article: PageLoader }) {
   const computeOptions = useComputeOptions();
@@ -23,25 +23,27 @@ export const ArticlePage = React.memo(function ({ article }: { article: PageLoad
       references={{ ...article.references, article: article.mdast }}
       frontmatter={article.frontmatter}
     >
-      <ThebeSessionProvider start={false} name={article.slug}>
-        {!hide_title_block && (
-          <FrontmatterBlock kind={article.kind} frontmatter={article.frontmatter} />
-        )}
-        <NotebookProvider siteConfig={false} page={article}>
-          <div className="flex items-center">
-            <div className="flex-grow"></div>
-            {binder && <BinderBadge binder={binder} />}
-            {canCompute && isJupyter && (
-              <EnableCompute canCompute={true} key={article.slug}>
-                <NotebookRunAll />
-              </EnableCompute>
-            )}
-          </div>
-          <ContentBlocks pageKind={article.kind} mdast={article.mdast as GenericParent} />
-          <Bibliography />
-          {!hide_footer_links && <FooterLinksBlock links={article.footer} />}
-        </NotebookProvider>
-      </ThebeSessionProvider>
+      <ThebeRenderMimeRegistryProvider>
+        <ThebeSessionProvider start={false} name={article.slug}>
+          {!hide_title_block && (
+            <FrontmatterBlock kind={article.kind} frontmatter={article.frontmatter} />
+          )}
+          <NotebookProvider siteConfig={false} page={article}>
+            <div className="flex items-center">
+              <div className="flex-grow"></div>
+              {binder && <BinderBadge binder={binder} />}
+              {canCompute && isJupyter && (
+                <EnableCompute canCompute={true} key={article.slug}>
+                  <NotebookRunAll />
+                </EnableCompute>
+              )}
+            </div>
+            <ContentBlocks pageKind={article.kind} mdast={article.mdast as GenericParent} />
+            <Bibliography />
+            {!hide_footer_links && <FooterLinksBlock links={article.footer} />}
+          </NotebookProvider>
+        </ThebeSessionProvider>
+      </ThebeRenderMimeRegistryProvider>
     </ReferencesProvider>
   );
 });

package/src/pages/Root.tsx

@@ -16,8 +16,8 @@ import { ContentReload, renderers } from '../components';
 import { Analytics } from '../seo';
 import { Error404 } from './Error404';
 import classNames from 'classnames';
-import { ThebeCoreProvider } from 'thebe-react';
 import { ConfiguredThebeServerProvider } from '@myst-theme/jupyter';
+import { ThebeBundleLoaderProvider } from 'thebe-react';
 
 export function Document({
   children,
@@ -63,11 +63,11 @@ 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}>
-            <ThebeCoreProvider>
+            <ThebeBundleLoaderProvider loadThebeLite>
               <SiteProvider config={config}>
                 <ConfiguredThebeServerProvider>{children}</ConfiguredThebeServerProvider>
               </SiteProvider>
-            </ThebeCoreProvider>
+            </ThebeBundleLoaderProvider>
           </BaseUrlProvider>
         </ThemeProvider>
         <ScrollRestoration />