@myst-theme/site 0.1.22 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -14,19 +14,18 @@
     "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\""
   },
   "dependencies": {
-    "@curvenote/icons": "^0.0.3",
     "@headlessui/react": "^1.7.8",
     "@heroicons/react": "^2.0.14",
-    "@myst-theme/diagrams": "^0.1.22",
-    "@myst-theme/frontmatter": "^0.1.22",
-    "@myst-theme/jupyter": "^0.1.22",
-    "@myst-theme/providers": "^0.1.22",
+    "@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.8",
-    "myst-demo": "^0.1.22",
-    "myst-to-react": "^0.1.22",
+    "myst-config": "^0.0.9",
+    "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/Navigation.tsx

@@ -7,12 +7,14 @@ export function Navigation({
   top,
   height,
   hide_toc,
+  footer,
 }: {
   children?: React.ReactNode;
   projectSlug?: string;
   top?: number;
   height?: number;
   hide_toc?: boolean;
+  footer?: React.ReactNode;
 }) {
   const [open, setOpen] = useNavOpen();
   if (hide_toc) return <>{children}</>;
@@ -25,7 +27,7 @@ export function Navigation({
         ></div>
       )}
       {children}
-      <TableOfContents projectSlug={projectSlug} top={top} height={height} />
+      <TableOfContents projectSlug={projectSlug} top={top} height={height} footer={footer} />
     </>
   );
 }

package/src/components/Navigation/TableOfContents.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import classNames from 'classnames';
 import { NavLink, useParams, useLocation } from '@remix-run/react';
 import type { SiteManifest } from 'myst-config';
-import { CreatedInCurvenote } from '@curvenote/icons';
 import { useNavOpen, useSiteManifest, useUrlbase, withUrlbase } from '@myst-theme/providers';
 import { getProjectHeadings } from '../../loaders';
 import type { Heading } from '../../types';
@@ -102,16 +101,19 @@ 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,
   height,
-  showFooter = true,
+  footer,
 }: {
   top?: number;
   height?: number;
   projectSlug?: string;
-  showFooter?: boolean;
+  footer?: React.ReactNode;
 }) => {
   const [open] = useNavOpen();
   const config = useSiteManifest();
@@ -124,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,
@@ -145,11 +147,7 @@ export const TableOfContents = ({
       >
         <Headings folder={resolvedProjectSlug} headings={headings} sections={config?.projects} />
       </nav>
-      {showFooter && (
-        <div className="flex-none py-4">
-          <CreatedInCurvenote />
-        </div>
-      )}
+      {footer && <div className="flex-none py-4">{footer}</div>}
     </div>
   );
 };

package/src/components/Navigation/TopNav.tsx

@@ -10,7 +10,6 @@ import {
 import type { SiteManifest, SiteNavItem } from 'myst-config';
 import { ThemeButton } from './ThemeButton';
 import { useNavOpen, useSiteManifest } from '@myst-theme/providers';
-import { CurvenoteLogo } from '@curvenote/icons';
 import { LoadingBar } from './Loading';
 
 export const DEFAULT_NAV_HEIGHT = 60;
@@ -109,7 +108,7 @@ function NavItem({ item }: { item: SiteNavItem }) {
                   to={action.url || ''}
                   className={({ isActive }) =>
                     classNames(
-                      'block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-black',
+                      ' block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-black ',
                       {
                         'text-black font-bold': isActive,
                       },
@@ -190,13 +189,12 @@ function HomeLink({ logo, logoText, name }: { logo?: string; logoText?: string;
       prefetch="intent"
     >
       {logo && <img src={logo} className="h-9 mr-3" alt={logoText || name} height="2.25rem"></img>}
-      {nothingSet && <CurvenoteLogo className="mr-3" fill="#FFF" size={30} />}
       <span
         className={classNames('text-md sm:text-xl tracking-tight sm:mr-5', {
           'sr-only': !(logoText || nothingSet),
         })}
       >
-        {logoText || 'Curvenote'}
+        {logoText || 'Made with MyST'}
       </span>
     </Link>
   );

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>