@myst-theme/site 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,16 +16,16 @@
   "dependencies": {
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.14",
-    "@myst-theme/diagrams": "^0.2.4",
-    "@myst-theme/frontmatter": "^0.2.4",
-    "@myst-theme/jupyter": "^0.2.4",
-    "@myst-theme/providers": "^0.2.4",
+    "@myst-theme/diagrams": "^0.2.6",
+    "@myst-theme/frontmatter": "^0.2.6",
+    "@myst-theme/jupyter": "^0.2.6",
+    "@myst-theme/providers": "^0.2.6",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^0.0.16",
     "myst-config": "^0.0.14",
-    "myst-demo": "^0.2.4",
-    "myst-to-react": "^0.2.4",
+    "myst-demo": "^0.2.6",
+    "myst-to-react": "^0.2.6",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.7",

package/src/components/ContentBlocks.tsx

@@ -28,7 +28,7 @@ function Block({
 }) {
   const renderers = useNodeRenderers() ?? DEFAULT_RENDERERS;
   const children = useParse(node, renderers);
-  const subGrid = 'article-grid article-subgrid-gap col-screen';
+  const subGrid = 'article-grid article-subgrid-gap col-screen mb-10';
   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 =

package/src/components/DocumentOutline.tsx

@@ -154,7 +154,7 @@ const useIntersectionObserver = (highlight: () => void, onScreen: Set<HTMLHeadin
 };
 
 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';
+  'fixed 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 function useOutlineHeight<T extends HTMLElement = HTMLElement>() {
   const container = useRef<T>(null);

package/src/components/Navigation/Navigation.tsx

@@ -20,14 +20,14 @@ export function Navigation({
   if (hide_toc) return <>{children}</>;
   return (
     <>
+      {children}
       {open && (
         <div
-          className="fixed inset-0 bg-black opacity-50 z-30"
+          className="fixed inset-0 bg-black opacity-50"
           style={{ marginTop: top }}
           onClick={() => setOpen(false)}
         ></div>
       )}
-      {children}
       <TableOfContents tocRef={tocRef} projectSlug={projectSlug} top={top} footer={footer} />
     </>
   );

package/src/components/Navigation/TableOfContents.tsx

@@ -109,7 +109,7 @@ const Headings = ({ folder, headings, sections }: Props) => {
   );
 };
 
-export function useTocHeight<T extends HTMLElement = HTMLElement>(top?: number) {
+export function useTocHeight<T extends HTMLElement = HTMLElement>(top = 0, inset = 0) {
   const container = useRef<T>(null);
   const toc = useRef<HTMLDivElement>(null);
   const transitionState = useNavigation().state;
@@ -117,8 +117,7 @@ export function useTocHeight<T extends HTMLElement = HTMLElement>(top?: number)
     if (!container.current || !toc.current) return;
     const height = container.current.offsetHeight - window.scrollY;
     const div = toc.current.firstChild as HTMLDivElement;
-    const MAGIC_PADDING = 16; // I dunno, just go with it ...
-    if (div) div.style.height = `min(calc(100vh - ${top ?? 0}px), ${height + MAGIC_PADDING}px)`;
+    if (div) div.style.height = `min(calc(100vh - ${top}px), ${height + inset}px)`;
     const nav = toc.current.querySelector('nav');
     if (nav) nav.style.opacity = height > 150 ? '1' : '0';
   };
@@ -164,7 +163,7 @@ export const TableOfContents = ({
     <div
       ref={tocRef}
       className={classNames(
-        'fixed xl:article-grid article-grid-gap xl:w-screen z-30 xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',
+        'fixed xl:article-grid article-grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',
         { hidden: !open },
       )}
       style={{