@myst-theme/site 0.5.3 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,18 +16,18 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/diagrams": "^0.5.3",
-    "@myst-theme/frontmatter": "^0.5.3",
-    "@myst-theme/jupyter": "^0.5.3",
-    "@myst-theme/common": "^0.5.3",
-    "@myst-theme/providers": "^0.5.3",
+    "@myst-theme/diagrams": "^0.5.4",
+    "@myst-theme/frontmatter": "^0.5.4",
+    "@myst-theme/jupyter": "^0.5.4",
+    "@myst-theme/common": "^0.5.4",
+    "@myst-theme/providers": "^0.5.4",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.1.1",
     "myst-spec-ext": "^1.1.1",
     "myst-config": "^1.1.1",
-    "myst-demo": "^0.5.3",
-    "myst-to-react": "^0.5.3",
+    "myst-demo": "^0.5.4",
+    "myst-to-react": "^0.5.4",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/DocumentOutline.tsx

@@ -220,7 +220,7 @@ export function useOutlineHeight<T extends HTMLElement = HTMLElement>(
 
 export const DocumentOutline = ({
   outlineRef,
-  top,
+  top = 0,
   className,
   selector = SELECTOR,
   children,
@@ -246,8 +246,8 @@ export const DocumentOutline = ({
         className,
       )}
       style={{
-        top: top ?? 0,
-        maxHeight: `calc(100vh - ${(top ?? 0) + 20}px)`,
+        top: top,
+        maxHeight: `calc(100vh - ${top + 20}px)`,
       }}
     >
       <div className="mb-4 text-sm leading-6 uppercase text-slate-900 dark:text-slate-100">

package/src/components/Headers.tsx

@@ -23,6 +23,14 @@ export function ArticleHeader({
 }) {
   const grid = useGridSystemProvider();
   const { subject, venue, biblio, ...rest } = frontmatter ?? {};
+  const positionBackground = {
+    'col-page-right': grid === 'article-left-grid',
+    'col-page': grid === 'article-grid',
+  };
+  const positionFrontmatter = {
+    'col-body': grid === 'article-left-grid',
+    'col-page-left': grid === 'article-grid',
+  };
   return (
     <header className="relative col-screen">
       {frontmatter?.banner && (
@@ -39,9 +47,10 @@ export function ArticleHeader({
         >
           <div
             className={classNames(
-              'absolute border-white shadow-2xl bg-white/80 dark:bg-black/80 backdrop-blur col-page-right',
+              'absolute border-white shadow-2xl bg-white/80 dark:bg-black/80 backdrop-blur',
               'w-full',
               'top-[2rem] h-[calc(100%-4rem)] md:top-[4rem] md:h-[calc(100%-8rem)]',
+              positionBackground,
             )}
           />
         </div>
@@ -60,9 +69,9 @@ export function ArticleHeader({
       >
         <div
           className={classNames('flex w-full align-middle py-2 mb-[1rem] text-sm', {
-            'col-page-right px-4 w-full': frontmatter?.banner,
+            'px-4 w-full': frontmatter?.banner,
             'bg-white/80 dark:bg-black/80': frontmatter?.banner,
-            'col-page-right': !frontmatter?.banner,
+            ...positionBackground,
           })}
         >
           {subject && (
@@ -86,7 +95,7 @@ export function ArticleHeader({
         <FrontmatterBlock
           frontmatter={rest}
           authorStyle="list"
-          className={classNames({ 'pt-4 px-6': frontmatter?.banner })}
+          className={classNames({ 'pt-4 px-6': frontmatter?.banner, ...positionFrontmatter })}
           hideBadges
           hideExports
         />

package/src/components/Navigation/Navigation.tsx

@@ -1,22 +1,21 @@
-import { useNavOpen } from '@myst-theme/providers';
+import { useNavOpen, useThemeTop } from '@myst-theme/providers';
 import { TableOfContents } from './TableOfContents';
 
 export function Navigation({
   children,
   projectSlug,
-  top,
   tocRef,
   hide_toc,
   footer,
 }: {
   children?: React.ReactNode;
   projectSlug?: string;
-  top?: number;
   tocRef?: React.RefObject<HTMLDivElement>;
   hide_toc?: boolean;
   footer?: React.ReactNode;
 }) {
   const [open, setOpen] = useNavOpen();
+  const top = useThemeTop();
   if (hide_toc) return <>{children}</>;
   return (
     <>
@@ -28,7 +27,7 @@ export function Navigation({
           onClick={() => setOpen(false)}
         ></div>
       )}
-      <TableOfContents tocRef={tocRef} projectSlug={projectSlug} top={top} footer={footer} />
+      <TableOfContents tocRef={tocRef} projectSlug={projectSlug} footer={footer} />
     </>
   );
 }

package/src/components/Navigation/TableOfContents.tsx

@@ -9,6 +9,7 @@ import {
   useBaseurl,
   withBaseurl,
   useGridSystemProvider,
+  useThemeTop,
 } from '@myst-theme/providers';
 import { getProjectHeadings, type Heading } from '@myst-theme/common';
 
@@ -136,15 +137,14 @@ export function useTocHeight<T extends HTMLElement = HTMLElement>(top = 0, inset
 
 export const TableOfContents = ({
   projectSlug,
-  top,
   tocRef,
   footer,
 }: {
-  top?: number;
   tocRef?: React.RefObject<HTMLElement>;
   projectSlug?: string;
   footer?: React.ReactNode;
 }) => {
+  const top = useThemeTop();
   const grid = useGridSystemProvider();
   const footerRef = useRef<HTMLDivElement>(null);
   const [open] = useNavOpen();
@@ -171,9 +171,7 @@ export const TableOfContents = ({
         { hidden: !open },
         { 'z-30': open },
       )}
-      style={{
-        top: top ?? 0,
-      }}
+      style={{ top }}
     >
       <div
         className={classNames(

package/src/pages/Article.tsx

@@ -50,7 +50,7 @@ export const ArticlePage = React.memo(function ({
             <FrontmatterBlock
               kind={article.kind}
               frontmatter={article.frontmatter}
-              className="mb-8"
+              className="pt-5 mb-8"
             />
           )}
           {binderUrl && !canCompute && (

package/src/pages/Root.tsx

@@ -12,7 +12,7 @@ import {
   Link,
   NavLink,
 } from '@remix-run/react';
-import { renderers } from '../components';
+import { DEFAULT_NAV_HEIGHT, renderers } from '../components';
 import { Analytics } from '../seo';
 import { Error404 } from './Error404';
 import classNames from 'classnames';
@@ -25,18 +25,18 @@ export function Document({
   theme,
   config,
   title,
-  scrollTopClass = 'scroll-p-20',
   staticBuild,
   baseurl,
+  top = DEFAULT_NAV_HEIGHT,
 }: {
   children: React.ReactNode;
   scripts?: React.ReactNode;
   theme: Theme;
   config?: SiteManifest;
   title?: string;
-  scrollTopClass?: string;
   staticBuild?: boolean;
   baseurl?: string;
+  top?: number;
 }) {
   const links = staticBuild
     ? {
@@ -48,7 +48,7 @@ export function Document({
         NavLink: NavLink as any,
       };
   return (
-    <html lang="en" className={classNames(theme, scrollTopClass)}>
+    <html lang="en" className={classNames(theme)} style={{ scrollPadding: top }}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -61,7 +61,7 @@ export function Document({
         />
       </head>
       <body className="m-0 transition-colors duration-500 bg-white dark:bg-stone-900">
-        <ThemeProvider theme={theme} renderers={renderers} {...links}>
+        <ThemeProvider theme={theme} renderers={renderers} {...links} top={top}>
           <BaseUrlProvider baseurl={baseurl}>
             <ThebeBundleLoaderProvider loadThebeLite publicPath={baseurl}>
               <SiteProvider config={config}>