@myst-theme/site 0.1.35 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "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.1.35",
-    "@myst-theme/frontmatter": "^0.1.35",
-    "@myst-theme/jupyter": "^0.1.35",
-    "@myst-theme/providers": "^0.1.35",
+    "@myst-theme/diagrams": "^0.1.36",
+    "@myst-theme/frontmatter": "^0.1.36",
+    "@myst-theme/jupyter": "^0.1.36",
+    "@myst-theme/providers": "^0.1.36",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^0.0.16",
     "myst-config": "^0.0.12",
-    "myst-demo": "^0.1.35",
-    "myst-to-react": "^0.1.35",
+    "myst-demo": "^0.1.36",
+    "myst-to-react": "^0.1.36",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.7",

package/src/components/DocumentOutline.tsx

@@ -1,3 +1,4 @@
+import { useNavigation } from '@remix-run/react';
 import classNames from 'classnames';
 import throttle from 'lodash.throttle';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -155,32 +156,51 @@ 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';
 
+export function useOutlineHeight<T extends HTMLElement = HTMLElement>() {
+  const container = useRef<T>(null);
+  const outline = useRef<T>(null);
+  const transitionState = useNavigation().state;
+  const setHeight = () => {
+    if (!container.current || !outline.current) return;
+    const height = container.current.offsetHeight - window.scrollY;
+    outline.current.style.display = height < 50 ? 'none' : '';
+    outline.current.style.height = height > window.innerHeight ? '' : `${height}px`;
+    outline.current.style.opacity = height && height > 300 ? '' : '0';
+    outline.current.style.pointerEvents = height && height > 300 ? '' : 'none';
+  };
+  useEffect(() => {
+    setHeight();
+    setTimeout(setHeight, 100); // Some lag sometimes
+    const handleScroll = () => setHeight();
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [container, outline, transitionState]);
+  return { container, outline };
+}
+
 export const DocumentOutline = ({
+  outlineRef,
   top,
-  height,
   className = DOC_OUTLINE_CLASS,
 }: {
+  outlineRef?: React.RefObject<HTMLElement>;
   top?: number;
   height?: number;
   className?: string;
 }) => {
   const { activeId, headings, highlight } = useHeaders();
-  if (height && height < 50) return null;
   if (headings.length <= 1) return <nav suppressHydrationWarning />;
   return (
     <nav
+      ref={outlineRef}
       aria-label="Document Outline"
       suppressHydrationWarning
       className={classNames('not-prose transition-opacity overflow-y-auto', className)}
       style={{
         top: top ?? 0,
-        height:
-          typeof document === 'undefined' || (height && height > window.innerHeight)
-            ? undefined
-            : height,
         maxHeight: `calc(100vh - ${(top ?? 0) + 20}px)`,
-        opacity: height && height > 300 ? undefined : 0,
-        pointerEvents: height && height > 300 ? undefined : 'none',
       }}
     >
       <div className="text-slate-900 mb-4 text-sm leading-6 dark:text-slate-100 uppercase">

package/src/components/FooterLinksBlock.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { Link } from '@remix-run/react';
-import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import ArrowLeftIcon from '@heroicons/react/24/outline/ArrowLeftIcon';
+import ArrowRightIcon from '@heroicons/react/24/outline/ArrowRightIcon';
 import type { FooterLinks, NavigationLink } from '../types';
 import { useUrlbase, withUrlbase } from '@myst-theme/providers';
 

package/src/components/Navigation/Navigation.tsx

@@ -5,14 +5,14 @@ export function Navigation({
   children,
   projectSlug,
   top,
-  height,
+  tocRef,
   hide_toc,
   footer,
 }: {
   children?: React.ReactNode;
   projectSlug?: string;
   top?: number;
-  height?: number;
+  tocRef?: React.RefObject<HTMLDivElement>;
   hide_toc?: boolean;
   footer?: React.ReactNode;
 }) {
@@ -23,11 +23,12 @@ export function Navigation({
       {open && (
         <div
           className="fixed inset-0 bg-black opacity-50 z-30"
+          style={{ marginTop: top }}
           onClick={() => setOpen(false)}
         ></div>
       )}
       {children}
-      <TableOfContents projectSlug={projectSlug} top={top} height={height} footer={footer} />
+      <TableOfContents tocRef={tocRef} projectSlug={projectSlug} top={top} footer={footer} />
     </>
   );
 }

package/src/components/Navigation/TableOfContents.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
-import { NavLink, useParams, useLocation } from '@remix-run/react';
+import { NavLink, useParams, useLocation, useNavigation } from '@remix-run/react';
 import type { SiteManifest } from 'myst-config';
 import { useNavOpen, useSiteManifest, useUrlbase, withUrlbase } from '@myst-theme/providers';
 import { getProjectHeadings } from '../../loaders';
@@ -102,14 +102,39 @@ const Headings = ({ folder, headings, sections }: Props) => {
   );
 };
 
+export function useTocHeight<T extends HTMLElement = HTMLElement>(top?: number) {
+  const container = useRef<T>(null);
+  const toc = useRef<HTMLDivElement>(null);
+  const transitionState = useNavigation().state;
+  const setHeight = () => {
+    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)`;
+    const nav = toc.current.querySelector('nav');
+    if (nav) nav.style.opacity = height > 150 ? '1' : '0';
+  };
+  useEffect(() => {
+    setHeight();
+    setTimeout(setHeight, 100); // Some lag sometimes
+    const handleScroll = () => setHeight();
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [container, toc, transitionState]);
+  return { container, toc };
+}
+
 export const TableOfContents = ({
   projectSlug,
   top,
-  height,
+  tocRef,
   footer,
 }: {
   top?: number;
-  height?: number;
+  tocRef?: React.RefObject<HTMLDivElement>;
   projectSlug?: string;
   footer?: React.ReactNode;
 }) => {
@@ -124,13 +149,13 @@ export const TableOfContents = ({
   if (!headings) return null;
   return (
     <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]',
         { hidden: !open },
       )}
       style={{
         top: top ?? 0,
-        height: `min(calc(100vh - ${top ?? 0}px), ${height}px)`,
       }}
     >
       <div
@@ -149,7 +174,6 @@ export const TableOfContents = ({
         <nav
           aria-label="Table of Contents"
           className="flex-grow overflow-y-auto transition-opacity mt-6 pb-3 ml-3 xl:ml-0 mr-3"
-          style={{ opacity: height && height > 150 ? undefined : 0 }}
         >
           <Headings folder={resolvedProjectSlug} headings={headings} sections={config?.projects} />
         </nav>

package/src/components/Navigation/ThemeButton.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@myst-theme/providers';
-import { MoonIcon } from '@heroicons/react/24/solid';
-import { SunIcon } from '@heroicons/react/24/outline';
+import MoonIcon from '@heroicons/react/24/solid/MoonIcon';
+import SunIcon from '@heroicons/react/24/outline/SunIcon';
 import classNames from 'classnames';
 
 export function ThemeButton({ className = 'mx-3 h-8 w-8' }: { className?: string }) {
@@ -8,7 +8,7 @@ export function ThemeButton({ className = 'mx-3 h-8 w-8' }: { className?: string
   return (
     <button
       className={classNames(
-        'theme rounded-full border border-white border-solid overflow-hidden text-white hover:text-stone-500 hover:bg-white',
+        'theme rounded-full border border-stone-700 dark:border-white hover:bg-neutral-100 border-solid overflow-hidden text-stone-700 dark:text-white hover:text-stone-500 dark:hover:text-neutral-800',
         className,
       )}
       title={`Change theme to ${isDark ? 'light' : 'dark'} mode.`}

package/src/components/Navigation/TopNav.tsx

@@ -2,11 +2,9 @@ import { Link, NavLink } from '@remix-run/react';
 import { Fragment } from 'react';
 import classNames from 'classnames';
 import { Menu, Transition } from '@headlessui/react';
-import {
-  EllipsisVerticalIcon,
-  Bars3Icon as MenuIcon,
-  ChevronDownIcon,
-} from '@heroicons/react/24/solid';
+import EllipsisVerticalIcon from '@heroicons/react/24/solid/EllipsisVerticalIcon';
+import MenuIcon from '@heroicons/react/24/solid/Bars3Icon';
+import ChevronDownIcon from '@heroicons/react/24/solid/ChevronDownIcon';
 import type { SiteManifest, SiteNavItem } from 'myst-config';
 import { ThemeButton } from './ThemeButton';
 import { useNavOpen, useSiteManifest } from '@myst-theme/providers';
@@ -58,7 +56,7 @@ function NavItem({ item }: { item: SiteNavItem }) {
           to={item.url ?? ''}
           className={({ isActive }) =>
             classNames(
-              'inline-flex items-center justify-center w-full mx-2 py-1 text-md font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
+              'inline-flex items-center justify-center w-full mx-2 py-1 text-md font-medium dark:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
               {
                 'border-b border-stone-200': isActive,
               },
@@ -73,12 +71,9 @@ function NavItem({ item }: { item: SiteNavItem }) {
   return (
     <Menu as="div" className="relative grow-0 inline-block mx-2">
       <div className="inline-block">
-        <Menu.Button className="inline-flex items-center justify-center w-full mx-2 py-1 text-md font-medium text-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+        <Menu.Button className="inline-flex items-center justify-center w-full mx-2 py-1 text-md font-medium text-stone-900 dark:text-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
           <span>{item.title}</span>
-          <ChevronDownIcon
-            className="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100"
-            aria-hidden="true"
-          />
+          <ChevronDownIcon className="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100" />
         </Menu.Button>
       </div>
       <Transition
@@ -184,11 +179,15 @@ function HomeLink({ logo, logoText, name }: { logo?: string; logoText?: string;
   const nothingSet = !logo && !logoText;
   return (
     <Link
-      className="flex items-center text-white w-fit ml-3 md:ml-5 xl:ml-7"
+      className="flex items-center dark:text-white w-fit ml-3 md:ml-5 xl:ml-7"
       to="/"
       prefetch="intent"
     >
-      {logo && <img src={logo} className="h-9 mr-3" alt={logoText || name} height="2.25rem"></img>}
+      {logo && (
+        <div className="dark:bg-white dark:rounded p-1 mr-3">
+          <img src={logo} className="h-9" alt={logoText || name} height="2.25rem"></img>
+        </div>
+      )}
       <span
         className={classNames('text-md sm:text-xl tracking-tight sm:mr-5', {
           'sr-only': !(logoText || nothingSet),
@@ -205,18 +204,18 @@ export function TopNav() {
   const config = useSiteManifest();
   const { logo, logo_text, logoText, actions, title, nav } = config ?? ({} as SiteManifest);
   return (
-    <div className="bg-stone-700 p-3 md:px-8 fixed w-screen top-0 z-30 h-[60px]">
+    <div className="bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 fixed w-screen top-0 z-30 h-[60px]">
       <nav className="flex items-center justify-between flex-wrap max-w-[1440px] mx-auto">
         <div className="flex flex-row xl:min-w-[19.5rem] mr-2 sm:mr-7 justify-start items-center">
           <div className="block xl:hidden">
             <button
-              className="flex items-center text-stone-200 border-stone-400 hover:text-white"
+              className="flex items-center border-stone-400 text-stone-800 hover:text-stone-900 dark:text-stone-200 hover:dark:text-stone-100"
               onClick={() => {
                 setOpen(!open);
               }}
             >
+              <MenuIcon className="h-8 w-8 p-1" />
               <span className="sr-only">Open Menu</span>
-              <MenuIcon className="fill-current h-8 w-8 p-1" />
             </button>
           </div>
           <HomeLink name={title} logo={logo} logoText={logo_text || logoText} />
@@ -232,7 +231,7 @@ export function TopNav() {
             {actions?.map((action, index) => (
               <ExternalOrInternalLink
                 key={action.url || index}
-                className="inline-block text-md px-4 py-2 mx-1 leading-none border rounded text-white border-white hover:border-transparent hover:text-stone-500 hover:bg-white mt-0"
+                className="inline-block text-md px-4 py-2 mx-1 leading-none border rounded border-stone-700 dark:border-white text-stone-700 dark:text-white hover:text-stone-500 dark:hover:text-neutral-800 hover:bg-neutral-100 mt-0"
                 to={action.url}
               >
                 {action.title}

package/src/components/Navigation/index.tsx

@@ -1,5 +1,5 @@
 export { ThemeButton } from './ThemeButton';
 export { TopNav, DEFAULT_NAV_HEIGHT } from './TopNav';
 export { Navigation } from './Navigation';
-export { TableOfContents } from './TableOfContents';
+export { TableOfContents, useTocHeight } from './TableOfContents';
 export { LoadingBar } from './Loading';

package/src/components/index.ts

@@ -1,5 +1,5 @@
 export { ContentBlocks } from './ContentBlocks';
-export { DocumentOutline } from './DocumentOutline';
+export { DocumentOutline, useOutlineHeight } from './DocumentOutline';
 export { FooterLinksBlock } from './FooterLinksBlock';
 export { ContentReload } from './ContentReload';
 export { Bibliography } from './Bibliography';

package/src/index.ts

@@ -4,4 +4,3 @@ export * from './loaders';
 export * from './components';
 export * from './pages';
 export * from './seo';
-export * from './hooks';

package/src/hooks/index.ts

@@ -1,23 +0,0 @@
-import { useTransition } from '@remix-run/react';
-import { useEffect, useRef, useState } from 'react';
-
-export function useNavigationHeight<T extends HTMLElement = HTMLElement>() {
-  const ref = useRef<T>(null);
-  const [height, setHeightState] = useState(1000);
-  const transitionState = useTransition().state;
-  const setHeight = () => {
-    if (ref.current) {
-      setHeightState(ref.current.offsetHeight - window.scrollY);
-    }
-  };
-  useEffect(() => {
-    setHeight();
-    setTimeout(setHeight, 100); // Some lag sometimes
-    const handleScroll = () => setHeight();
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [ref, transitionState]);
-  return { ref, height };
-}