@myst-theme/site 0.13.7 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.13.7",
+  "version": "0.14.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -21,22 +21,21 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/common": "^0.13.7",
-    "@myst-theme/diagrams": "^0.13.7",
-    "@myst-theme/frontmatter": "^0.13.7",
-    "@myst-theme/jupyter": "^0.13.7",
-    "@myst-theme/providers": "^0.13.7",
-    "@myst-theme/search": "^0.13.7",
+    "@myst-theme/common": "^0.14.0",
+    "@myst-theme/diagrams": "^0.14.0",
+    "@myst-theme/frontmatter": "^0.14.0",
+    "@myst-theme/providers": "^0.14.0",
+    "@myst-theme/search": "^0.14.0",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^1.7.8",
-    "myst-config": "^1.7.8",
-    "myst-demo": "^0.13.7",
-    "myst-spec-ext": "^1.7.8",
-    "myst-to-react": "^0.13.7",
+    "myst-common": "^1.7.9",
+    "myst-config": "^1.7.9",
+    "myst-demo": "^0.14.0",
+    "myst-spec-ext": "^1.7.9",
+    "myst-to-react": "^0.14.0",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/Abstract.tsx

@@ -1,6 +1,5 @@
 import type { GenericParent } from 'myst-common';
-import { ContentBlocks } from './ContentBlocks.js';
-import { HashLink } from 'myst-to-react';
+import { MyST, HashLink } from 'myst-to-react';
 
 export function Abstract({
   content,
@@ -21,7 +20,7 @@ export function Abstract({
         <HashLink id={id} title={`Link to ${title}`} hover className="ml-2" />
       </h2>
       <div className="px-6 py-1 mb-3 rounded-sm bg-slate-50 dark:bg-slate-800">
-        <ContentBlocks mdast={content} className="col-body" />
+        <MyST ast={content} className="col-body" />
       </div>
     </div>
   );

package/src/components/ContentBlocks.tsx

@@ -1,89 +1,20 @@
-import { Details, MyST } from 'myst-to-react';
-import { SourceFileKind } from 'myst-spec-ext';
+import type { SourceFileKind } from 'myst-spec-ext';
 import type { GenericParent } from 'myst-common';
-import classNames from 'classnames';
-import {
-  NotebookClearCell,
-  NotebookRunCell,
-  NotebookRunCellSpinnerOnly,
-} from '@myst-theme/jupyter';
-import { useGridSystemProvider } from '@myst-theme/providers';
-import { isACodeCell } from '../utils.js';
-
-export function Block({
-  id,
-  pageKind,
-  node,
-  className,
-}: {
-  id: string;
-  pageKind: SourceFileKind;
-  node: GenericParent;
-  className?: string;
-}) {
-  const grid = useGridSystemProvider();
-  const subGrid = node.visibility === 'hide' ? '' : `${grid} 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-`
-  const noSubGrid =
-    (dataClassName && dataClassName.includes('col-')) || (className && className.includes('col-'));
-  const block = (
-    <div
-      key={`block-${id}`}
-      id={id}
-      className={classNames('relative group/block', className, dataClassName, {
-        [subGrid]: !noSubGrid,
-        hidden: node.visibility === 'remove',
-      })}
-    >
-      {pageKind === SourceFileKind.Notebook && isACodeCell(node) && (
-        <>
-          <div className="flex sticky top-[80px] z-10 opacity-70 group-hover/block:opacity-100 group-hover/block:hidden">
-            <div className="absolute top-0 -right-[28px] flex md:flex-col">
-              <NotebookRunCellSpinnerOnly id={id} />
-            </div>
-          </div>
-          <div className="hidden sticky top-[80px] z-10 opacity-70 group-hover/block:opacity-100 group-hover/block:flex">
-            <div className="absolute top-0 -right-[28px] flex md:flex-col">
-              <NotebookRunCell id={id} />
-              <NotebookClearCell id={id} />
-            </div>
-          </div>
-        </>
-      )}
-      <MyST ast={node.children} />
-    </div>
-  );
-  if (node.visibility === 'hide') {
-    return <Details title="Notebook Cell">{block}</Details>;
-  }
-  return block;
-}
+import { MyST, Block as MystBlock } from 'myst-to-react';
 
+/**
+ * @deprecated This component is not maintained, in favor of the generic `MyST` component
+ */
 export function ContentBlocks({
   mdast,
-  pageKind = SourceFileKind.Article,
   className,
 }: {
   mdast: GenericParent;
   pageKind?: SourceFileKind;
   className?: string;
 }) {
-  if (!mdast) return null;
-  const blocks = mdast.children as GenericParent[];
-  return (
-    <>
-      {blocks
-        .filter((node) => node.visibility !== 'remove')
-        .map((node) => (
-          <Block
-            key={node.key}
-            id={node.key}
-            pageKind={pageKind}
-            node={node}
-            className={className}
-          />
-        ))}
-    </>
-  );
+  return <MyST ast={mdast} className={className} />;
 }
+
+/** @deprecated use `import { Block } from 'myst-to-react';` */
+export const Block = MystBlock;

package/src/components/renderers.ts

@@ -2,11 +2,9 @@ import type { NodeRenderers } 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: NodeRenderers = {
   ...DEFAULT_RENDERERS,
   myst: MystDemoRenderer,
   mermaid: MermaidNodeRenderer,
-  ...OUTPUT_RENDERERS,
 };

package/src/pages/index.ts

@@ -2,5 +2,4 @@ export { ErrorProjectNotFound } from './ErrorProjectNotFound.js';
 export { ErrorDocumentNotFound } from './ErrorDocumentNotFound.js';
 export { Error404 } from './Error404.js';
 export { ErrorUnhandled } from './ErrorUnhandled.js';
-export { ArticlePage } from './Article.js';
 export { App, Document, AppErrorBoundary } from './Root.js';

package/src/themeCSS.ts

@@ -12,15 +12,25 @@ function variables(vars: MystThemeVariables) {
     .map(([name, value]) => `--${name}: '${value}';`)
     .join('\n  ');
   if (!css) return '';
-  return `:root {\n  ${css}}`;
+  return `:root {\n  ${css}\n}`;
 }
 
-export function themeCSS(options?: ThemeCssOptions) {
+export function themeCSS(options?: ThemeCssOptions, css?: string): string {
   const numbered_references = !!options?.numbered_references;
   const citationCss = numbered_references
     ? { 'cite-group-open': '[', 'cite-group-close': ']' }
     : {};
-  return variables({ ...citationCss });
+  const vars = variables({ ...citationCss });
+  const themeCss = vars ? `/* MyST Theme Options */\n\n${vars}` : '';
+  const userCss = css
+    ? `/* User Provided Stylesheet */\n\n${css}`
+    : '/* No Custom Stylesheet Provided */';
+  return (
+    [themeCss, userCss]
+      .map((s) => s.trim())
+      .join('\n\n')
+      .trim() + '\n'
+  );
 }
 
 export function cssResponse(css: string): Response {

package/src/utils.ts

@@ -2,7 +2,6 @@ import type { GenericNode, GenericParent } from 'myst-common';
 import { extractPart } from 'myst-common';
 import type { PageLoader } from '@myst-theme/common';
 import type { SiteAction } from 'myst-config';
-import { executableNodesFromBlock } from '@myst-theme/jupyter';
 
 export function getDomainFromRequest(request: Request) {
   const url = new URL(request.url);
@@ -66,7 +65,3 @@ export function getChildren(content?: GenericParent): GenericNode | GenericNode[
   }
   return content as GenericNode;
 }
-
-export function isACodeCell(node: GenericParent) {
-  return !!executableNodesFromBlock(node);
-}

package/src/pages/Article.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { ReferencesProvider, useProjectManifest } from '@myst-theme/providers';
-import {
-  Bibliography,
-  ContentBlocks,
-  FooterLinksBlock,
-  FrontmatterParts,
-  BackmatterParts,
-} from '../components/index.js';
-import type { PageLoader } from '@myst-theme/common';
-import { copyNode, type GenericParent } from 'myst-common';
-import { SourceFileKind } from 'myst-spec-ext';
-import {
-  ExecuteScopeProvider,
-  BusyScopeProvider,
-  NotebookToolbar,
-  ConnectionStatusTray,
-  ErrorTray,
-  useComputeOptions,
-} from '@myst-theme/jupyter';
-import { FrontmatterBlock } from '@myst-theme/frontmatter';
-import { combineDownloads, extractKnownParts } from '../utils.js';
-
-/**
- * @deprecated This component is not maintained, in favor of theme-specific ArticlePages
- *
- * As examples, MyST book and article themes define their own ArticlePage components.
- */
-export const ArticlePage = React.memo(function ({
-  article,
-  hide_all_footer_links,
-  hideKeywords,
-}: {
-  article: PageLoader;
-  hide_all_footer_links?: boolean;
-  hideKeywords?: boolean;
-}) {
-  const manifest = useProjectManifest();
-  const compute = useComputeOptions();
-
-  const { hide_title_block, hide_footer_links } = (article.frontmatter as any)?.options ?? {};
-  const downloads = combineDownloads(manifest?.downloads, article.frontmatter);
-  const tree = copyNode(article.mdast);
-  const keywords = article.frontmatter?.keywords ?? [];
-  const parts = extractKnownParts(tree, article.frontmatter?.parts);
-
-  const { thebe } = manifest as any;
-  const { location } = article;
-
-  return (
-    <ReferencesProvider
-      references={{ ...article.references, article: article.mdast }}
-      frontmatter={article.frontmatter}
-    >
-      <BusyScopeProvider>
-        <ExecuteScopeProvider enable={compute?.enabled ?? false} contents={article}>
-          {!hide_title_block && (
-            <FrontmatterBlock
-              kind={article.kind}
-              frontmatter={{ ...article.frontmatter, downloads }}
-              thebe={thebe}
-              location={location}
-              className="mb-8 pt-9"
-            />
-          )}
-          {compute?.enabled &&
-            compute.features.notebookCompute &&
-            article.kind === SourceFileKind.Notebook && <NotebookToolbar showLaunch />}
-          {compute?.enabled && article.kind === SourceFileKind.Article && (
-            <ErrorTray pageSlug={article.slug} />
-          )}
-          <div id="skip-to-article" />
-          <FrontmatterParts parts={parts} keywords={keywords} hideKeywords={hideKeywords} />
-          <ContentBlocks pageKind={article.kind} mdast={tree as GenericParent} />
-          <BackmatterParts parts={parts} />
-          <Bibliography />
-          <ConnectionStatusTray />
-          {!hide_footer_links && !hide_all_footer_links && (
-            <FooterLinksBlock links={article.footer} />
-          )}
-        </ExecuteScopeProvider>
-      </BusyScopeProvider>
-    </ReferencesProvider>
-  );
-});