🚀 Upgrade to v0.8.0 (#14)

Co-authored-by: stevejpurves <[email protected]>
jupyter-book · Mar 22, 2024 · 222af3c · 222af3c
1 parent fce85e2
commit 222af3c
Show file tree

Hide file tree

Showing 7 changed files with 7,886 additions and 13,114 deletions.
diff --git a/theme/.gitignore b/theme/.gitignore
@@ -15,7 +15,7 @@ build
 
 /app/styles/app.css
 /public/*thebe*
-/public/service-worker-*.js
+/public/service-worker.js
 
 .yalc
 yalc.lock
diff --git a/theme/app/components/Page.tsx b/theme/app/components/Page.tsx
@@ -7,7 +7,7 @@ import {
   useSiteManifest,
   useThemeTop,
 } from '@myst-theme/providers';
-import { BusyScopeProvider, ExecuteScopeProvider } from '@myst-theme/jupyter';
+import { BusyScopeProvider, ExecuteScopeProvider, useComputeOptions } from '@myst-theme/jupyter';
 import Logo from './logo-icon.svg';
 import JupyterLogo from './jupyter.svg';
 import VSCodeLogo from './vscode.svg';
@@ -141,9 +141,11 @@ export function ArticleWithProviders({
   children: React.ReactNode;
   article: PageLoader;
 }) {
+  const compute = useComputeOptions();
+
   return (
     <BusyScopeProvider>
-      <ExecuteScopeProvider contents={article}>
+      <ExecuteScopeProvider enable={compute?.enabled ?? false} contents={article}>
         <TabStateProvider>
           <article className="min-h-screen article content article-grid grid-gap">
             {children}

diff --git a/theme/app/routes/$project.($slug).tsx b/theme/app/routes/$project.($slug).tsx
@@ -9,9 +9,10 @@ import {
   Bibliography,
 } from '@myst-theme/site';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
+import { ComputeOptionsProvider, ThebeLoaderAndServer } from '@myst-theme/jupyter';
 import { useLoaderData } from '@remix-run/react';
 import type { SiteManifest } from 'myst-config';
-import { ReferencesProvider, useThemeTop } from '@myst-theme/providers';
+import { ProjectProvider, ReferencesProvider, useThemeTop } from '@myst-theme/providers';
 import { getPage } from '~/utils/loaders.server';
 import { ArticleWithProviders } from '../components/Page';
 import type { GenericParent } from 'myst-common';
@@ -51,27 +52,36 @@ export default function Page() {
   const { container, outline } = useOutlineHeight();
   const article = useLoaderData<PageLoader>() as PageLoader;
   const top = useThemeTop();
+
   return (
     <ReferencesProvider
       references={{ ...article.references, article: article.mdast }}
       frontmatter={article.frontmatter}
     >
-      <main ref={container}>
-        <ArticleWithProviders article={article}>
-          <FrontmatterBlock
-            kind={article.kind}
-            frontmatter={article.frontmatter}
-            className="pt-5"
-          />
-          <div
-            className="sticky z-10 hidden h-0 pt-2 ml-10 col-margin-right lg:block"
-            style={{ top }}
-          >
-            <DocumentOutline top={16} className="relative lg:block" outlineRef={outline} />
-          </div>
-          <ArticlePage article={article} />
-        </ArticleWithProviders>
-      </main>
+      <ProjectProvider>
+        <ComputeOptionsProvider
+          features={{ notebookCompute: true, figureCompute: true, launchBinder: false }}
+        >
+          <ThebeLoaderAndServer baseurl={''}>
+            <main ref={container}>
+              <ArticleWithProviders article={article}>
+                <FrontmatterBlock
+                  kind={article.kind}
+                  frontmatter={article.frontmatter}
+                  className="pt-5"
+                />
+                <div
+                  className="sticky z-10 hidden h-0 pt-2 ml-10 col-margin-right lg:block"
+                  style={{ top }}
+                >
+                  <DocumentOutline top={16} className="relative lg:block" outlineRef={outline} />
+                </div>
+                <ArticlePage article={article} />
+              </ArticleWithProviders>
+            </main>
+          </ThebeLoaderAndServer>
+        </ComputeOptionsProvider>
+      </ProjectProvider>
     </ReferencesProvider>
   );
 }
diff --git a/theme/app/routes/_index.tsx b/theme/app/routes/_index.tsx
@@ -1,11 +1,13 @@
 import type { LinksFunction, LoaderFunction, MetaFunction } from '@remix-run/node';
 import type { PageLoader } from '@myst-theme/common';
 import { getMetaTagsForArticle, KatexCSS, ArticlePage } from '@myst-theme/site';
+import { ComputeOptionsProvider, ThebeLoaderAndServer } from '@myst-theme/jupyter';
 import { getPage } from '~/utils/loaders.server';
 import { useLoaderData } from '@remix-run/react';
 import type { SiteManifest } from 'myst-config';
 import { ArticleAndNavigation, HeaderSection, NavigationAndFooter } from '../components/Page';
 import { Error404 } from '../components/Error404';
+import { ProjectProvider } from '@myst-theme/providers';
 
 export const meta: MetaFunction = (args) => {
   const config = args.parentsData?.root?.config as SiteManifest | undefined;
@@ -31,9 +33,17 @@ export default function LandingPage() {
   (article.frontmatter as any).options = { hide_title_block: true, hide_footer_links: true };
   return (
     <ArticleAndNavigation header={<HeaderSection />} hide_toc>
-      <main className="article content article-grid grid-gap">
-        <ArticlePage article={article} />
-      </main>
+      <ProjectProvider>
+        <ComputeOptionsProvider
+          features={{ notebookCompute: true, figureCompute: true, launchBinder: false }}
+        >
+          <ThebeLoaderAndServer baseurl={''}>
+            <main className="article content article-grid grid-gap">
+              <ArticlePage article={article} />
+            </main>
+          </ThebeLoaderAndServer>
+        </ComputeOptionsProvider>
+      </ProjectProvider>
     </ArticleAndNavigation>
   );
 }

diff --git a/theme/app/routes/overview.($slug).tsx b/theme/app/routes/overview.($slug).tsx
@@ -1,10 +1,11 @@
 import type { LoaderFunction } from '@remix-run/node';
 import type { PageLoader } from '@myst-theme/common';
 import { ArticlePage } from '@myst-theme/site';
+import { ComputeOptionsProvider, ThebeLoaderAndServer } from '@myst-theme/jupyter';
 import { getPage } from '../utils/loaders.server';
 import { NavLink, useLoaderData } from '@remix-run/react';
 import { ArticleAndNavigation, NavigationAndFooter } from '../components/Page';
-import { BaseUrlProvider, useSiteManifest } from '@myst-theme/providers';
+import { BaseUrlProvider, ProjectProvider, useSiteManifest } from '@myst-theme/providers';
 import classNames from 'classnames';
 import { Error404 } from '../components/Error404';
 
@@ -23,32 +24,40 @@ export default function ContentPage() {
   return (
     <ArticleAndNavigation hide_toc>
       <BaseUrlProvider baseurl={`/${baseurl}`}>
-        <main className="article article-grid grid-gap py-[100px]">
-          <h1 className="text-center">{article.frontmatter.title}</h1>
-          <div className="col-body-outset">
-            <div className="border-y border-gray-200 py-3 my-[100px] flex flex-row justify-around">
-              {site?.projects?.[0].pages
-                .filter((p) => 'slug' in p)
-                .map((p) => {
-                  if (p.level === 1)
-                    return (
-                      <NavLink
-                        key={p.slug}
-                        to={`/${baseurl}/${p.slug}`}
-                        prefetch="intent"
-                        className={({ isActive }) =>
-                          classNames('no-underline', { 'text-blue-600': isActive })
-                        }
-                      >
-                        {p.title}
-                      </NavLink>
-                    );
-                  return null;
-                })}
-            </div>
-          </div>
-          <ArticlePage article={article} />
-        </main>
+        <ProjectProvider>
+          <ComputeOptionsProvider
+            features={{ notebookCompute: true, figureCompute: true, launchBinder: false }}
+          >
+            <ThebeLoaderAndServer baseurl={''}>
+              <main className="article article-grid grid-gap py-[100px]">
+                <h1 className="text-center">{article.frontmatter.title}</h1>
+                <div className="col-body-outset">
+                  <div className="border-y border-gray-200 py-3 my-[100px] flex flex-row justify-around">
+                    {site?.projects?.[0].pages
+                      .filter((p) => 'slug' in p)
+                      .map((p) => {
+                        if (p.level === 1)
+                          return (
+                            <NavLink
+                              key={p.slug}
+                              to={`/${baseurl}/${p.slug}`}
+                              prefetch="intent"
+                              className={({ isActive }) =>
+                                classNames('no-underline', { 'text-blue-600': isActive })
+                              }
+                            >
+                              {p.title}
+                            </NavLink>
+                          );
+                        return null;
+                      })}
+                  </div>
+                </div>
+                <ArticlePage article={article} />
+              </main>
+            </ThebeLoaderAndServer>
+          </ComputeOptionsProvider>
+        </ProjectProvider>
       </BaseUrlProvider>
     </ArticleAndNavigation>
   );