@myst-theme/site 0.1.23 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,16 +16,16 @@
   "dependencies": {
     "@headlessui/react": "^1.7.8",
     "@heroicons/react": "^2.0.14",
-    "@myst-theme/diagrams": "^0.1.23",
-    "@myst-theme/frontmatter": "^0.1.23",
-    "@myst-theme/jupyter": "^0.1.23",
-    "@myst-theme/providers": "^0.1.23",
+    "@myst-theme/diagrams": "^0.1.24",
+    "@myst-theme/frontmatter": "^0.1.24",
+    "@myst-theme/jupyter": "^0.1.24",
+    "@myst-theme/providers": "^0.1.24",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^0.0.12",
     "myst-config": "^0.0.9",
-    "myst-demo": "^0.1.23",
-    "myst-to-react": "^0.1.23",
+    "myst-demo": "^0.1.24",
+    "myst-to-react": "^0.1.24",
     "mystjs": "^0.0.15",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",

package/src/components/Bibliography.tsx

@@ -11,7 +11,7 @@ export function Bibliography() {
   if (!filtered || !data || filtered.length === 0) return null;
   const refs = hidden ? filtered.slice(0, HIDE_OVER_N_REFERENCES) : filtered;
   return (
-    <section>
+    <section className="article-grid article-subgrid-gap col-screen">
       {filtered.length > HIDE_OVER_N_REFERENCES && (
         <button
           onClick={() => setHidden(!hidden)}

package/src/components/ContentBlocks.tsx

@@ -1,19 +1,34 @@
 import { useParse, DEFAULT_RENDERERS } from 'myst-to-react';
 import type { Parent } from 'myst-spec';
 import { useNodeRenderers } from '@myst-theme/providers';
+import classNames from 'classnames';
 
-function Block({ id, node }: { id: string; node: Parent }) {
+function Block({ id, node, className }: { id: string; node: Parent; className?: string }) {
   const renderers = useNodeRenderers() ?? DEFAULT_RENDERERS;
   const children = useParse(node, renderers);
-  return <div id={id}>{children}</div>;
+  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-`
+  const noSubGrid =
+    (dataClassName && dataClassName.includes('col-')) || (className && className.includes('col-'));
+  return (
+    <div
+      id={id}
+      className={classNames(className, dataClassName, {
+        [subGrid]: !noSubGrid,
+      })}
+    >
+      {children}
+    </div>
+  );
 }
 
-export function ContentBlocks({ mdast }: { mdast: Parent }) {
+export function ContentBlocks({ mdast, className }: { mdast: Parent; className?: string }) {
   const blocks = mdast.children as Parent[];
   return (
     <>
       {blocks.map((node, index) => {
-        return <Block key={(node as any).key} id={`${index}`} node={node} />;
+        return <Block key={(node as any).key} id={`${index}`} node={node} className={className} />;
       })}
     </>
   );

package/src/components/DocumentOutline.tsx

@@ -151,10 +151,13 @@ const useIntersectionObserver = (highlight: () => void, onScreen: Set<HTMLHeadin
   return { observer };
 };
 
+const DOC_OUTLINE_CLASS =
+  'fixed z-10 bottom-0 right-[max(0px,calc(50%-45rem))] w-[14rem] lg:w-[18rem] py-10 px-4 lg:px-8 overflow-y-auto hidden md:block';
+
 export const DocumentOutline = ({
   top,
   height,
-  className = 'document-outline',
+  className = DOC_OUTLINE_CLASS,
 }: {
   top?: number;
   height?: number;

package/src/components/Navigation/TableOfContents.tsx

@@ -101,6 +101,9 @@ const Headings = ({ folder, headings, sections }: Props) => {
   );
 };
 
+const TOC_CLASS =
+  'flex-col fixed z-30 bottom-0 left-[max(0px,calc(50%-45rem))] w-[19.5rem] border-r border-stone-200 dark:border-stone-700';
+
 export const TableOfContents = ({
   projectSlug,
   top,
@@ -123,7 +126,7 @@ export const TableOfContents = ({
   if (!headings) return null;
   return (
     <div
-      className={classNames('toc overflow-hidden', {
+      className={classNames(TOC_CLASS, 'overflow-hidden', {
         flex: open,
         'bg-white dark:bg-stone-900': open, // just apply when open, so that theme can transition
         'hidden xl:flex': !open,

package/src/pages/Root.tsx

@@ -15,6 +15,7 @@ import {
 import { ContentReload, renderers } from '../components';
 import { Analytics } from '../seo';
 import { ErrorSiteNotFound } from './ErrorSiteNotFound';
+import classNames from 'classnames';
 
 export function Document({
   children,
@@ -22,15 +23,17 @@ export function Document({
   config,
   title,
   CONTENT_CDN_PORT,
+  scrollTopClass = 'scroll-p-20',
 }: {
   children: React.ReactNode;
   theme: Theme;
   config?: SiteManifest;
   title?: string;
   CONTENT_CDN_PORT?: number | string;
+  scrollTopClass?: string;
 }) {
   return (
-    <html lang="en" className={theme}>
+    <html lang="en" className={classNames(theme, scrollTopClass)}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -69,7 +72,7 @@ export function AppCatchBoundary() {
   return (
     <Document theme={Theme.light} title={caught.statusText}>
       <article className="content">
-        <main className="error-content">
+        <main className="article-grid article-subgrid-gap col-screen">
           <ErrorSiteNotFound />
         </main>
       </article>
@@ -81,7 +84,7 @@ export function AppDebugErrorBoundary({ error }: { error: { message: string; sta
   return (
     <Document theme={Theme.light} title="Error">
       <div className="mt-16">
-        <main className="error-content">
+        <main className="article-grid article-subgrid-gap col-screen">
           <h1>An Error Occurred</h1>
           <code>{error.message}</code>
           <pre>{error.stack}</pre>