@myst-theme/site 0.1.37 → 0.1.38

package/package.json

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

package/src/components/ContentBlocks.tsx

@@ -1,13 +1,16 @@
 import { useParse, DEFAULT_RENDERERS } from 'myst-to-react';
-import type { GenericParent, SourceFileKind } from 'myst-common';
+import { SourceFileKind } from 'myst-common';
+import type { GenericParent } from 'myst-common';
 import { useNodeRenderers } from '@myst-theme/providers';
 import classNames from 'classnames';
 import { ClearCell, RunCell } from './ComputeControls';
 
 function isACodeCell(node: GenericParent) {
   return (
+    node &&
     node.type === 'block' &&
-    node.children.length === 2 &&
+    node.children &&
+    node.children?.length === 2 &&
     node.children[0].type === 'code' &&
     node.children[1].type === 'output'
   );
@@ -50,16 +53,15 @@ function Block({
 }
 
 export function ContentBlocks({
-  name,
-  pageKind,
   mdast,
+  pageKind = SourceFileKind.Article,
   className,
 }: {
-  name: string;
-  pageKind: SourceFileKind;
   mdast: GenericParent;
+  pageKind?: SourceFileKind;
   className?: string;
 }) {
+  if (!mdast) return null;
   const blocks = mdast.children as GenericParent[];
   return (
     <>

package/src/components/ContentReload.tsx

@@ -55,12 +55,9 @@ async function mystLiveReloadConnect(config: { onOpen?: () => void; port?: strin
 }
 
 // Inspired by the LiveReload component in Remix
-export const ContentReload =
-  process.env.NODE_ENV !== 'development'
-    ? () => null
-    : ({ port }: { port?: string | number }) => {
-        useEffect(() => {
-          mystLiveReloadConnect({ port });
-        }, []);
-        return null;
-      };
+export function ContentReload({ port }: { port?: string | number }) {
+  useEffect(() => {
+    mystLiveReloadConnect({ port });
+  }, []);
+  return null;
+}

package/src/components/DocumentOutline.tsx

@@ -1,7 +1,7 @@
 import { useNavigation } from '@remix-run/react';
 import classNames from 'classnames';
 import throttle from 'lodash.throttle';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 const SELECTOR = [1, 2, 3, 4, 5, 6].map((n) => `main h${n}`).join(', ');
 const HIGHLIGHT_CLASS = 'highlight';
@@ -176,7 +176,7 @@ export function useOutlineHeight<T extends HTMLElement = HTMLElement>() {
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
-  }, [container, outline, transitionState]);
+  }, [container.current, outline.current, transitionState]);
   return { container, outline };
 }
 
@@ -191,13 +191,18 @@ export const DocumentOutline = ({
   className?: string;
 }) => {
   const { activeId, headings, highlight } = useHeaders();
-  if (headings.length <= 1) return <nav suppressHydrationWarning />;
+  if (headings.length <= 1 || !onClient) {
+    return <nav suppressHydrationWarning />;
+  }
   return (
     <nav
       ref={outlineRef}
       aria-label="Document Outline"
-      suppressHydrationWarning
-      className={classNames('not-prose transition-opacity overflow-y-auto', className)}
+      className={classNames(
+        'not-prose overflow-y-auto hidden',
+        'transition-opacity duration-700', // Animation on load
+        className,
+      )}
       style={{
         top: top ?? 0,
         maxHeight: `calc(100vh - ${(top ?? 0) + 20}px)`,
@@ -206,7 +211,7 @@ export const DocumentOutline = ({
       <div className="text-slate-900 mb-4 text-sm leading-6 dark:text-slate-100 uppercase">
         In this article
       </div>
-      {onClient && <Headings headings={headings} activeId={activeId} highlight={highlight} />}
+      <Headings headings={headings} activeId={activeId} highlight={highlight} />
     </nav>
   );
 };

package/src/components/ExternalOrInternalLink.tsx

@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react';
+import { useLinkProvider } from '@myst-theme/providers';
 
 export function ExternalOrInternalLink({
   to,
@@ -15,6 +15,7 @@ export function ExternalOrInternalLink({
   title?: string;
   children: React.ReactNode;
 }) {
+  const Link = useLinkProvider();
   if (to.startsWith('http') || isStatic) {
     return (
       <a href={to} className={className} target="_blank" rel="noopener noreferrer" title={title}>

package/src/components/FooterLinksBlock.tsx

@@ -1,13 +1,12 @@
 import classNames from 'classnames';
-import { Link } from '@remix-run/react';
 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';
-import { useEffect, useState } from 'react';
+import { useLinkProvider, useUrlbase, withUrlbase } from '@myst-theme/providers';
 
 const FooterLink = ({ title, url, group, right }: NavigationLink & { right?: boolean }) => {
   const urlbase = useUrlbase();
+  const Link = useLinkProvider();
   return (
     <Link
       prefetch="intent"

package/src/components/Navigation/Loading.tsx

@@ -1,4 +1,4 @@
-import { useTransition } from '@remix-run/react';
+import { useNavigation } from '@remix-run/react';
 import { useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
 
@@ -6,7 +6,7 @@ import classNames from 'classnames';
  * Show a loading progess bad if the load takes more than 150ms
  */
 function useLoading() {
-  const transitionState = useTransition().state;
+  const transitionState = useNavigation().state;
   const ref = useMemo<{ start?: NodeJS.Timeout; finish?: NodeJS.Timeout }>(() => ({}), []);
   const [showLoading, setShowLoading] = useState(false);
 

package/src/components/Navigation/TableOfContents.tsx

@@ -138,6 +138,7 @@ export const TableOfContents = ({
   projectSlug?: string;
   footer?: React.ReactNode;
 }) => {
+  const footerRef = useRef<HTMLDivElement>(null);
   const [open] = useNavOpen();
   const config = useSiteManifest();
   const { folder, project } = useParams();
@@ -146,6 +147,13 @@ export const TableOfContents = ({
   const headings = getProjectHeadings(config, resolvedProjectSlug, {
     addGroups: false,
   });
+  useEffect(() => {
+    setTimeout(() => {
+      if (!footerRef.current) return;
+      footerRef.current.style.opacity = '1';
+      footerRef.current.style.transform = 'none';
+    }, 500);
+  }, [footerRef]);
   if (!headings) return null;
   return (
     <div
@@ -177,7 +185,14 @@ export const TableOfContents = ({
         >
           <Headings folder={resolvedProjectSlug} headings={headings} sections={config?.projects} />
         </nav>
-        {footer && <div className="flex-none py-4">{footer}</div>}
+        {footer && (
+          <div
+            className="flex-none py-4 opacity-0 transition-all duration-700 translate-y-6"
+            ref={footerRef}
+          >
+            {footer}
+          </div>
+        )}
       </div>
     </div>
   );

package/src/components/Navigation/TopNav.tsx

@@ -1,4 +1,4 @@
-import { Link, NavLink } from '@remix-run/react';
+import { NavLink } from '@remix-run/react';
 import { Fragment } from 'react';
 import classNames from 'classnames';
 import { Menu, Transition } from '@headlessui/react';
@@ -7,7 +7,7 @@ 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';
+import { useLinkProvider, useNavOpen, useSiteManifest } from '@myst-theme/providers';
 import { LoadingBar } from './Loading';
 
 export const DEFAULT_NAV_HEIGHT = 60;
@@ -25,6 +25,7 @@ function ExternalOrInternalLink({
   nav?: boolean;
   prefetch?: 'intent' | 'render' | 'none';
 }) {
+  const Link = useLinkProvider();
   const staticClass = typeof className === 'function' ? className({ isActive: false }) : className;
   if (to.startsWith('http') || to.startsWith('mailto:')) {
     return (
@@ -176,6 +177,7 @@ function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
 }
 
 function HomeLink({ logo, logoText, name }: { logo?: string; logoText?: string; name?: string }) {
+  const Link = useLinkProvider();
   const nothingSet = !logo && !logoText;
   return (
     <Link

package/src/pages/Article.tsx

@@ -37,11 +37,7 @@ export const ArticlePage = React.memo(function ({ article }: { article: PageLoad
               </EnableCompute>
             )}
           </div>
-          <ContentBlocks
-            name={article.slug}
-            pageKind={article.kind}
-            mdast={article.mdast as GenericParent}
-          />
+          <ContentBlocks pageKind={article.kind} mdast={article.mdast as GenericParent} />
           <Bibliography />
           {!hide_footer_links && <FooterLinksBlock links={article.footer} />}
         </NotebookProvider>

package/src/pages/Root.tsx

@@ -21,17 +21,17 @@ import { ConfiguredThebeServerProvider } from '@myst-theme/jupyter';
 
 export function Document({
   children,
+  scripts,
   theme,
   config,
   title,
-  CONTENT_CDN_PORT,
   scrollTopClass = 'scroll-p-20',
 }: {
   children: React.ReactNode;
+  scripts?: React.ReactNode;
   theme: Theme;
   config?: SiteManifest;
   title?: string;
-  CONTENT_CDN_PORT?: number | string;
   scrollTopClass?: string;
 }) {
   return (
@@ -58,16 +58,25 @@ export function Document({
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
-        <ContentReload port={CONTENT_CDN_PORT} />
+        {scripts}
       </body>
     </html>
   );
 }
 
 export function App() {
+  const { theme, config } = useLoaderData<SiteLoader>();
+  return (
+    <Document theme={theme} config={config}>
+      <Outlet />
+    </Document>
+  );
+}
+
+export function AppWithReload() {
   const { theme, config, CONTENT_CDN_PORT } = useLoaderData<SiteLoader>();
   return (
-    <Document theme={theme} config={config} CONTENT_CDN_PORT={CONTENT_CDN_PORT}>
+    <Document theme={theme} config={config} scripts={<ContentReload port={CONTENT_CDN_PORT} />}>
       <Outlet />
     </Document>
   );

package/src/pages/index.ts

@@ -2,4 +2,4 @@ export { ErrorProjectNotFound } from './ErrorProjectNotFound';
 export { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
 export { ErrorSiteNotFound } from './ErrorSiteNotFound';
 export { ArticlePage, ArticlePageCatchBoundary, ProjectPageCatchBoundary } from './Article';
-export { App, Document, AppCatchBoundary, AppDebugErrorBoundary } from './Root';
+export { App, AppWithReload, Document, AppCatchBoundary, AppDebugErrorBoundary } from './Root';