@myst-theme/site 0.1.23 → 0.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,17 +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.25",
+    "@myst-theme/frontmatter": "^0.1.25",
+    "@myst-theme/jupyter": "^0.1.25",
+    "@myst-theme/providers": "^0.1.25",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^0.0.12",
+    "myst-common": "^0.0.14",
     "myst-config": "^0.0.9",
-    "myst-demo": "^0.1.23",
-    "myst-to-react": "^0.1.23",
-    "mystjs": "^0.0.15",
+    "myst-demo": "^0.1.25",
+    "myst-to-react": "^0.1.25",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.7",

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

@@ -27,23 +27,24 @@ const Headings = ({ headings, activeId, highlight }: Props) => (
     {headings.map((heading) => (
       <li
         key={heading.id}
-        className={classNames('border-l-2', {
+        className={classNames('border-l-2 hover:border-l-blue-500', {
           'text-blue-600': heading.id === activeId,
-          'border-l-gray-300 dark:border-l-gray-50 hover:border-l-blue-500':
-            heading.id !== activeId,
+          'border-l-gray-300 dark:border-l-gray-50': heading.id !== activeId,
           'border-l-blue-500': heading.id === activeId,
           'bg-blue-50 dark:bg-slate-800': heading.id === activeId,
         })}
       >
         <a
-          className={classNames('block p-1 pl-2 text-slate-800 dark:text-slate-100', {
-            'text-blue-600 dark:text-white font-semibold': heading.id === activeId,
+          className={classNames('block p-1 pl-2', {
+            'text-slate-900 dark:text-slate-50': heading.level < 3 && heading.id !== activeId,
+            '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,
-            'pl-3': heading.level === 2,
+            'pl-2': heading.level === 2,
             'pl-4': heading.level === 3,
-            'pl-5': heading.level === 4,
-            'pl-6': heading.level === 5,
-            'pl-7': heading.level === 6,
+            'pl-8 text-xs': heading.level === 4,
+            'pl-10 text-xs font-light': heading.level === 5,
+            'pl-12 text-xs font-extralight': heading.level === 6,
           })}
           href={`#${heading.id}`}
           onClick={(e) => {
@@ -151,10 +152,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 lg:block';
+
 export const DocumentOutline = ({
   top,
   height,
-  className = 'document-outline',
+  className = DOC_OUTLINE_CLASS,
 }: {
   top?: number;
   height?: number;

package/src/components/Navigation/TableOfContents.tsx

@@ -35,12 +35,13 @@ const HeadingLink = ({
       title={title}
       className={({ isActive }: { isActive: boolean }) =>
         classNames('block break-words', {
-          'text-blue-600 dark:text-white': !isIndex && isActive,
+          'mb-8 lg:mb-3 font-semibold': isIndex,
+          'text-slate-900 dark:text-slate-200': isIndex && !exact,
+          'text-blue-500 dark:text-blue-400': isIndex && exact,
+          'border-l pl-4 text-blue-500 border-current dark:text-blue-400': !isIndex && isActive,
           'font-semibold': isActive,
-          'hover:text-slate-800 dark:hover:text-slate-100': !isActive,
-          'border-b pb-1': isIndex,
-          'border-stone-200 dark:border-stone-700': isIndex && !exact,
-          'border-blue-500': isIndex && exact,
+          'border-l pl-4 border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300':
+            !isActive,
         })
       }
       to={withUrlbase(path, urlbase)}
@@ -55,24 +56,24 @@ const HeadingLink = ({
   );
 };
 
-const HEADING_CLASSES = 'text-slate-900 text-lg leading-6 dark:text-slate-100';
+const HEADING_CLASSES = 'text-slate-900 leading-5 dark:text-slate-100';
 const Headings = ({ folder, headings, sections }: Props) => {
   const secs = sections || [];
   return (
-    <ul className="text-slate-500 dark:text-slate-300 leading-6">
+    <ul className="space-y-6 lg:space-y-2">
       {secs.map((sec) => {
         if (sec.slug === folder) {
           return headings.map((heading, index) => (
             <li
               key={heading.slug || index}
-              className={classNames('p-1', {
+              className={classNames('', {
                 [HEADING_CLASSES]: heading.level === 'index',
                 'font-semibold': heading.level === 'index',
-                'pl-4': heading.level === 2,
-                'pl-6': heading.level === 3,
-                'pl-8': heading.level === 4,
-                'pl-10': heading.level === 5,
-                'pl-12': heading.level === 6,
+                // 'pl-4': heading.level === 2,
+                // 'pl-6': heading.level === 3,
+                // 'pl-8': heading.level === 4,
+                // 'pl-10': heading.level === 5,
+                // 'pl-12': heading.level === 6,
               })}
             >
               {heading.path ? (
@@ -84,7 +85,7 @@ const Headings = ({ folder, headings, sections }: Props) => {
                   {heading.short_title || heading.title}
                 </HeadingLink>
               ) : (
-                <h5 className="text-slate-900 font-semibold my-2 text-md leading-6 dark:text-slate-100 break-words">
+                <h5 className="mb-3 lg:mt-8 font-semibold break-words dark:text-white">
                   {heading.short_title || heading.title}
                 </h5>
               )}
@@ -123,28 +124,34 @@ export const TableOfContents = ({
   if (!headings) return null;
   return (
     <div
-      className={classNames('toc overflow-hidden', {
-        flex: open,
-        'bg-white dark:bg-stone-900': open, // just apply when open, so that theme can transition
-        'hidden xl:flex': !open,
-      })}
+      className="fixed article-grid article-grid-gap w-screen z-30 pointer-events-none"
       style={{
         top: top ?? 0,
-        height:
-          typeof document === 'undefined' || (height && height > window.innerHeight - (top ?? 0))
-            ? undefined
-            : height,
+        height: `calc(100vh - ${top ?? 0}px)`,
       }}
-      suppressHydrationWarning
     >
-      <nav
-        aria-label="Table of Contents"
-        className="flex-grow pt-10 pb-3 px-8 overflow-y-auto transition-opacity"
-        style={{ opacity: height && height > 150 ? undefined : 0 }}
+      <div
+        className={classNames(
+          'pointer-events-auto',
+          'col-margin-left flex-col',
+          'overflow-hidden',
+          // 'border-r border-stone-200 dark:border-stone-700',
+          {
+            flex: open,
+            'bg-white dark:bg-stone-900': open, // just apply when open, so that theme can transition
+            'hidden xl:flex': !open,
+          },
+        )}
       >
-        <Headings folder={resolvedProjectSlug} headings={headings} sections={config?.projects} />
-      </nav>
-      {footer && <div className="flex-none py-4">{footer}</div>}
+        <nav
+          aria-label="Table of Contents"
+          className="flex-grow overflow-y-auto transition-opacity mt-6 mr-3"
+          style={{ opacity: height && height > 150 ? undefined : 0 }}
+        >
+          <Headings folder={resolvedProjectSlug} headings={headings} sections={config?.projects} />
+        </nav>
+        {footer && <div className="flex-none py-4">{footer}</div>}
+      </div>
     </div>
   );
 };

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>