@myst-theme/site 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "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.5",
-    "@myst-theme/frontmatter": "^0.2.5",
-    "@myst-theme/jupyter": "^0.2.5",
-    "@myst-theme/providers": "^0.2.5",
+    "@myst-theme/diagrams": "^0.2.7",
+    "@myst-theme/frontmatter": "^0.2.7",
+    "@myst-theme/jupyter": "^0.2.7",
+    "@myst-theme/providers": "^0.2.7",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^0.0.16",
     "myst-config": "^0.0.14",
-    "myst-demo": "^0.2.5",
-    "myst-to-react": "^0.2.5",
+    "myst-demo": "^0.2.7",
+    "myst-to-react": "^0.2.7",
     "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

@@ -58,6 +58,7 @@ const Headings = ({ headings, activeId, highlight }: Props) => (
             el.classList.add(HIGHLIGHT_CLASS);
             highlight?.();
             el.scrollIntoView({ behavior: 'smooth' });
+            history.replaceState(undefined, '', `#${heading.id}`);
           }}
           // Note that the title can have math in it!
           dangerouslySetInnerHTML={{ __html: heading.titleHTML }}

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';
   };