@myst-theme/site 0.3.7 → 0.4.0

package/package.json

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

package/src/components/ContentBlocks.tsx

@@ -1,7 +1,6 @@
-import { useParse, DEFAULT_RENDERERS } from 'myst-to-react';
-import { SourceFileKind } from 'myst-common';
+import { MyST } from 'myst-to-react';
+import { SourceFileKind } from 'myst-spec-ext';
 import type { GenericParent } from 'myst-common';
-import { useNodeRenderers } from '@myst-theme/providers';
 import classNames from 'classnames';
 import {
   NotebookClearCell,
@@ -31,8 +30,6 @@ function Block({
   node: GenericParent;
   className?: string;
 }) {
-  const renderers = useNodeRenderers() ?? DEFAULT_RENDERERS;
-  const children = useParse(node, renderers);
   const subGrid = 'article-grid article-subgrid-gap col-screen';
   const dataClassName = typeof node.data?.class === 'string' ? node.data?.class : undefined;
   // Hide the subgrid if either the dataClass or the className exists and includes `col-`
@@ -40,7 +37,7 @@ function Block({
     (dataClassName && dataClassName.includes('col-')) || (className && className.includes('col-'));
   return (
     <div
-      key={id}
+      key={`block-${id}`}
       id={id}
       className={classNames('relative group/block', className, dataClassName, {
         [subGrid]: !noSubGrid,
@@ -61,7 +58,7 @@ function Block({
           </div>
         </>
       )}
-      {children}
+      <MyST ast={node.children} />
     </div>
   );
 }

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-sm text-slate-400 leading-6">
+  <ul className="text-sm leading-6 text-slate-400">
     {headings.map((heading) => (
       <li
         key={heading.id}
@@ -43,7 +43,7 @@ const Headings = ({ headings, activeId, highlight, selector }: Props) => (
             'text-slate-500 dark:text-slate-300': heading.level >= 3 && heading.id !== activeId,
             'text-blue-600 dark:text-white font-bold': heading.id === activeId,
             'pr-2': heading.id !== activeId, // Allows for bold to change length
-            'pl-2': heading.level === 2,
+            'pl-2': heading.level === 1 || heading.level === 2,
             'pl-4': heading.level === 3,
             'pl-8 text-xs': heading.level === 4,
             'pl-10 text-xs font-light': heading.level === 5,
@@ -86,11 +86,14 @@ function useHeaders(selector: string) {
 
   const highlight = useCallback(() => {
     const current = [...onScreen.current];
-    const highlighted = current.reduce((a, b) => {
-      if (a) return a;
-      if (b.classList.contains('highlight')) return b.id;
-      return null;
-    }, null as string | null);
+    const highlighted = current.reduce(
+      (a, b) => {
+        if (a) return a;
+        if (b.classList.contains('highlight')) return b.id;
+        return null;
+      },
+      null as string | null,
+    );
     const active = [...onScreen.current].sort((a, b) => a.offsetTop - b.offsetTop)[0];
     if (highlighted || active) setActiveId(highlighted || active.id);
   }, []);
@@ -156,9 +159,6 @@ const useIntersectionObserver = (highlight: () => void, onScreen: Set<HTMLHeadin
   return { observer };
 };
 
-const DOC_OUTLINE_CLASS =
-  'fixed bottom-0 right-[max(0px,calc(50%-45rem))] w-[14rem] lg:w-[18rem] py-10 px-4 lg:px-8 overflow-y-auto hidden lg:block';
-
 export function useOutlineHeight<T extends HTMLElement = HTMLElement>() {
   const container = useRef<T>(null);
   const outline = useRef<T>(null);
@@ -186,7 +186,7 @@ export function useOutlineHeight<T extends HTMLElement = HTMLElement>() {
 export const DocumentOutline = ({
   outlineRef,
   top,
-  className = DOC_OUTLINE_CLASS,
+  className,
   selector = SELECTOR,
 }: {
   outlineRef?: React.RefObject<HTMLElement>;
@@ -204,7 +204,7 @@ export const DocumentOutline = ({
       ref={outlineRef}
       aria-label="Document Outline"
       className={classNames(
-        'not-prose overflow-y-auto hidden',
+        'not-prose overflow-y-auto',
         'transition-opacity duration-700', // Animation on load
         className,
       )}
@@ -213,7 +213,7 @@ export const DocumentOutline = ({
         maxHeight: `calc(100vh - ${(top ?? 0) + 20}px)`,
       }}
     >
-      <div className="mb-4 text-sm uppercase text-slate-900 leading-6 dark:text-slate-100">
+      <div className="mb-4 text-sm leading-6 uppercase text-slate-900 dark:text-slate-100">
         In this article
       </div>
       <Headings headings={headings} activeId={activeId} highlight={highlight} selector={selector} />

package/src/components/renderers.ts

@@ -1,9 +1,10 @@
+import type { NodeRenderer } from '@myst-theme/providers';
 import { DEFAULT_RENDERERS } from 'myst-to-react';
 import { MystDemoRenderer } from 'myst-demo';
 import { MermaidNodeRenderer } from '@myst-theme/diagrams';
 import OUTPUT_RENDERERS from '@myst-theme/jupyter';
 
-export const renderers = {
+export const renderers: Record<string, NodeRenderer> = {
   ...DEFAULT_RENDERERS,
   myst: MystDemoRenderer,
   mermaid: MermaidNodeRenderer,

package/src/loaders/utils.ts

@@ -101,6 +101,17 @@ export function updateSiteManifestStaticLinksInplace(
   if (data.logo_dark) data.logo_dark = updateUrl(data.logo_dark);
   // Update the thumbnails to point at the CDN
   data.projects?.forEach((project) => {
+    if (project.banner) project.banner = updateUrl(project.banner);
+    if (project.bannerOptimized) project.bannerOptimized = updateUrl(project.bannerOptimized);
+    if (project.thumbnail) project.thumbnail = updateUrl(project.thumbnail);
+    if (project.thumbnailOptimized)
+      project.thumbnailOptimized = updateUrl(project.thumbnailOptimized);
+    if (project?.exports) {
+      project.exports = project.exports.map((exp) => {
+        if (!exp.url) return exp;
+        return { ...exp, url: updateUrl(exp.url) };
+      });
+    }
     project.pages
       .filter((page): page is ManifestProjectItem => 'slug' in page)
       .forEach((page) => {
@@ -118,6 +129,12 @@ export function updatePageStaticLinksInplace(data: PageLoader, updateUrl: Update
   if (data?.frontmatter?.thumbnailOptimized) {
     data.frontmatter.thumbnailOptimized = updateUrl(data.frontmatter.thumbnailOptimized);
   }
+  if (data?.frontmatter?.banner) {
+    data.frontmatter.banner = updateUrl(data.frontmatter.banner);
+  }
+  if (data?.frontmatter?.bannerOptimized) {
+    data.frontmatter.bannerOptimized = updateUrl(data.frontmatter.bannerOptimized);
+  }
   if (data?.frontmatter?.exports) {
     data.frontmatter.exports = data.frontmatter.exports.map((exp) => {
       if (!exp.url) return exp;
@@ -142,8 +159,8 @@ export function updatePageStaticLinksInplace(data: PageLoader, updateUrl: Update
   outputs.forEach((node) => {
     if (!node.data) return;
     walkOutputs(node.data, (obj) => {
-      // The path will be defined from output of myst-cli
-      // Here we are re-asigning it to the current domain
+      // The path will be defined from output of myst
+      // Here we are re-assigning it to the current domain
       if (!obj.path) return;
       obj.path = updateUrl(obj.path);
     });

package/src/pages/Article.tsx

@@ -5,7 +5,7 @@ import { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
 import { ErrorProjectNotFound } from './ErrorProjectNotFound';
 import type { PageLoader } from '../types';
 import type { GenericParent } from 'myst-common';
-import { SourceFileKind } from 'myst-common';
+import { SourceFileKind } from 'myst-spec-ext';
 import {
   useComputeOptions,
   ExecuteScopeProvider,
@@ -13,16 +13,24 @@ import {
   NotebookToolbar,
   ConnectionStatusTray,
   BinderBadge,
+  useCanCompute,
+  ErrorTray,
 } from '@myst-theme/jupyter';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
 
-export const ArticlePage = React.memo(function ({ article }: { article: PageLoader }) {
-  const computeOptions = useComputeOptions();
-  const canCompute = computeOptions.canCompute && (article.frontmatter as any)?.thebe !== false;
+export const ArticlePage = React.memo(function ({
+  article,
+  hide_all_footer_links,
+}: {
+  article: PageLoader;
+  hide_all_footer_links?: boolean;
+}) {
+  const canCompute = useCanCompute(article);
+  const { binderBadgeUrl } = useComputeOptions();
   const { hide_title_block, hide_footer_links } = (article.frontmatter as any)?.design ?? {};
 
   // take binder url from article frontmatter or fallback to project
-  const binderUrl = article.frontmatter.binder ?? computeOptions.binderBadgeUrl;
+  const binderUrl = article.frontmatter.binder ?? binderBadgeUrl;
 
   return (
     <ReferencesProvider
@@ -32,7 +40,11 @@ export const ArticlePage = React.memo(function ({ article }: { article: PageLoad
       <BusyScopeProvider>
         <ExecuteScopeProvider contents={article}>
           {!hide_title_block && (
-            <FrontmatterBlock kind={article.kind} frontmatter={article.frontmatter} />
+            <FrontmatterBlock
+              kind={article.kind}
+              frontmatter={article.frontmatter}
+              className="mb-8"
+            />
           )}
           {binderUrl && !canCompute && (
             <div className="flex justify-end">
@@ -40,11 +52,13 @@ export const ArticlePage = React.memo(function ({ article }: { article: PageLoad
             </div>
           )}
           {canCompute && article.kind === SourceFileKind.Notebook && <NotebookToolbar showLaunch />}
-          {/* {canCompute && article.kind === SourceFileKind.Article && <NotebookToolbar />} */}
+          <ErrorTray pageSlug={article.slug} />
           <ContentBlocks pageKind={article.kind} mdast={article.mdast as GenericParent} />
           <Bibliography />
           <ConnectionStatusTray />
-          {!hide_footer_links && <FooterLinksBlock links={article.footer} />}
+          {!hide_footer_links && !hide_all_footer_links && (
+            <FooterLinksBlock links={article.footer} />
+          )}
         </ExecuteScopeProvider>
       </BusyScopeProvider>
     </ReferencesProvider>

package/src/pages/Root.tsx

@@ -12,7 +12,7 @@ import {
   Link,
   NavLink,
 } from '@remix-run/react';
-import { ContentReload, renderers } from '../components';
+import { renderers } from '../components';
 import { Analytics } from '../seo';
 import { Error404 } from './Error404';
 import classNames from 'classnames';
@@ -60,7 +60,7 @@ export function Document({
           analytics_plausible={config?.analytics_plausible}
         />
       </head>
-      <body className="m-0 bg-white transition-colors duration-500 dark:bg-stone-900">
+      <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 publicPath={baseurl}>
@@ -88,21 +88,6 @@ export function App() {
   );
 }
 
-export function AppWithReload() {
-  const { theme, config, CONTENT_CDN_PORT, MODE, BASE_URL } = useLoaderData<SiteLoader>();
-  return (
-    <Document
-      theme={theme}
-      config={config}
-      scripts={MODE === 'static' ? undefined : <ContentReload port={CONTENT_CDN_PORT} />}
-      staticBuild={MODE === 'static'}
-      baseurl={BASE_URL}
-    >
-      <Outlet />
-    </Document>
-  );
-}
-
 export function AppCatchBoundary() {
   return (
     <Document theme={Theme.light}>

package/src/pages/index.ts

@@ -2,4 +2,4 @@ export { ErrorProjectNotFound } from './ErrorProjectNotFound';
 export { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
 export { Error404 } from './Error404';
 export { ArticlePage, ArticlePageCatchBoundary, ProjectPageCatchBoundary } from './Article';
-export { App, AppWithReload, Document, AppCatchBoundary } from './Root';
+export { App, Document, AppCatchBoundary } from './Root';

package/src/types.ts

@@ -1,5 +1,6 @@
 import type { Root } from 'mdast';
-import type { References, Dependency, SourceFileKind } from 'myst-common';
+import type { Dependency, SourceFileKind } from 'myst-spec-ext';
+import type { References } from 'myst-common';
 import type { SiteManifest } from 'myst-config';
 import type { PageFrontmatter } from 'myst-frontmatter';
 import type { Theme } from '@myst-theme/providers';