@myst-theme/site 0.1.37 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.1.37",
+  "version": "0.2.0",
   "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.2.0",
+    "@myst-theme/frontmatter": "^0.2.0",
+    "@myst-theme/jupyter": "^0.2.0",
+    "@myst-theme/providers": "^0.2.0",
     "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.2.0",
+    "myst-to-react": "^0.2.0",
     "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,18 +1,17 @@
 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, useBaseurl, withBaseurl } from '@myst-theme/providers';
 
 const FooterLink = ({ title, url, group, right }: NavigationLink & { right?: boolean }) => {
-  const urlbase = useUrlbase();
+  const baseurl = useBaseurl();
+  const Link = useLinkProvider();
   return (
     <Link
       prefetch="intent"
       className="group flex-1 p-4 block border font-normal hover:border-blue-600 dark:hover:border-blue-400 no-underline hover:text-blue-600 dark:hover:text-blue-400 text-gray-600 dark:text-gray-100 border-gray-200 dark:border-gray-500 rounded shadow-sm hover:shadow-lg dark:shadow-neutral-700"
-      to={withUrlbase(url, urlbase)}
+      to={withBaseurl(url, baseurl)}
     >
       <div className="flex align-middle h-full">
         {right && (

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

@@ -1,8 +1,14 @@
 import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
-import { NavLink, useParams, useLocation, useNavigation } from '@remix-run/react';
+import { useLocation, useNavigation } from '@remix-run/react';
 import type { SiteManifest } from 'myst-config';
-import { useNavOpen, useSiteManifest, useUrlbase, withUrlbase } from '@myst-theme/providers';
+import {
+  useNavLinkProvider,
+  useNavOpen,
+  useSiteManifest,
+  useBaseurl,
+  withBaseurl,
+} from '@myst-theme/providers';
 import { getProjectHeadings } from '../../loaders';
 import type { Heading } from '../../types';
 
@@ -26,8 +32,9 @@ const HeadingLink = ({
   children: React.ReactNode;
 }) => {
   const { pathname } = useLocation();
+  const NavLink = useNavLinkProvider();
   const exact = pathname === path;
-  const urlbase = useUrlbase();
+  const baseurl = useBaseurl();
   const [, setOpen] = useNavOpen();
   return (
     <NavLink
@@ -44,7 +51,7 @@ const HeadingLink = ({
             !isActive,
         })
       }
-      to={withUrlbase(path, urlbase)}
+      to={withBaseurl(path, baseurl)}
       suppressHydrationWarning // The pathname is not defined on the server always.
       onClick={() => {
         // Close the nav panel if it is open
@@ -138,14 +145,20 @@ export const TableOfContents = ({
   projectSlug?: string;
   footer?: React.ReactNode;
 }) => {
+  const footerRef = useRef<HTMLDivElement>(null);
   const [open] = useNavOpen();
   const config = useSiteManifest();
-  const { folder, project } = useParams();
-  const resolvedProjectSlug = projectSlug || (folder ?? project);
   if (!config) return null;
-  const headings = getProjectHeadings(config, resolvedProjectSlug, {
+  const headings = getProjectHeadings(config, projectSlug, {
     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
@@ -175,9 +188,16 @@ export const TableOfContents = ({
           aria-label="Table of Contents"
           className="flex-grow overflow-y-auto transition-opacity mt-6 pb-3 ml-3 xl:ml-0 mr-3"
         >
-          <Headings folder={resolvedProjectSlug} headings={headings} sections={config?.projects} />
+          <Headings folder={projectSlug} 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,13 @@ 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 {
+  useBaseurl,
+  useLinkProvider,
+  useNavOpen,
+  useSiteManifest,
+  withBaseurl,
+} from '@myst-theme/providers';
 import { LoadingBar } from './Loading';
 
 export const DEFAULT_NAV_HEIGHT = 60;
@@ -25,6 +31,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,11 +183,13 @@ function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
 }
 
 function HomeLink({ logo, logoText, name }: { logo?: string; logoText?: string; name?: string }) {
+  const Link = useLinkProvider();
+  const baseurl = useBaseurl();
   const nothingSet = !logo && !logoText;
   return (
     <Link
       className="flex items-center dark:text-white w-fit ml-3 md:ml-5 xl:ml-7"
-      to="/"
+      to={withBaseurl('/', baseurl)}
       prefetch="intent"
     >
       {logo && (

package/src/loaders/utils.ts

@@ -16,7 +16,8 @@ export function getProject(
   config?: SiteManifest,
   projectSlug?: string,
 ): ManifestProject | undefined {
-  if (!projectSlug || !config) return undefined;
+  if (!config) return undefined;
+  if (!projectSlug) return config.projects?.[0];
   const project = config.projects?.find((p) => p.slug === projectSlug);
   return project;
 }
@@ -32,12 +33,12 @@ export function getProjectHeadings(
     {
       title: project.title,
       slug: project.index,
-      path: `/${project.slug}`,
+      path: project.slug ? `/${project.slug}` : '/',
       level: 'index',
     },
     ...project.pages.map((p) => {
       if (!('slug' in p)) return p;
-      return { ...p, path: `/${project.slug}/${p.slug}` };
+      return { ...p, path: projectSlug ? `/${project.slug}/${p.slug}` : `/${p.slug}` };
     }),
   ];
   if (opts.addGroups) {

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/Error404.tsx

@@ -0,0 +1,8 @@
+export function Error404() {
+  return (
+    <>
+      <h1>No Site Found - 404</h1>
+      <p>No website is available at this url, or an error occurred. Please double check the url.</p>
+    </>
+  );
+}

package/src/pages/Root.tsx

@@ -1,6 +1,6 @@
 import type { SiteManifest } from 'myst-config';
 import type { SiteLoader } from '../types';
-import { SiteProvider, Theme, ThemeProvider } from '@myst-theme/providers';
+import { BaseUrlProvider, SiteProvider, Theme, ThemeProvider } from '@myst-theme/providers';
 import {
   Links,
   LiveReload,
@@ -8,32 +8,45 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-  useCatch,
   useLoaderData,
-  Link as RemixLink,
+  Link,
+  NavLink,
 } from '@remix-run/react';
 import { ContentReload, renderers } from '../components';
 import { Analytics } from '../seo';
-import { ErrorSiteNotFound } from './ErrorSiteNotFound';
+import { Error404 } from './Error404';
 import classNames from 'classnames';
 import { ThebeCoreProvider } from 'thebe-react';
 import { ConfiguredThebeServerProvider } from '@myst-theme/jupyter';
 
 export function Document({
   children,
+  scripts,
   theme,
   config,
   title,
-  CONTENT_CDN_PORT,
   scrollTopClass = 'scroll-p-20',
+  staticBuild,
+  baseurl,
 }: {
   children: React.ReactNode;
+  scripts?: React.ReactNode;
   theme: Theme;
   config?: SiteManifest;
   title?: string;
-  CONTENT_CDN_PORT?: number | string;
   scrollTopClass?: string;
+  staticBuild?: boolean;
+  baseurl?: string;
 }) {
+  const links = staticBuild
+    ? {
+        Link: (props: any) => <Link {...{ ...props, reloadDocument: true }} />,
+        NavLink: (props: any) => <NavLink {...{ ...props, reloadDocument: true }} />,
+      }
+    : {
+        Link: Link as any,
+        NavLink: NavLink as any,
+      };
   return (
     <html lang="en" className={classNames(theme, scrollTopClass)}>
       <head>
@@ -48,54 +61,56 @@ export function Document({
         />
       </head>
       <body className="m-0 transition-colors duration-500 bg-white dark:bg-stone-900">
-        <ThemeProvider theme={theme} renderers={renderers} Link={RemixLink as any}>
-          <ThebeCoreProvider>
-            <SiteProvider config={config}>
-              <ConfiguredThebeServerProvider>{children}</ConfiguredThebeServerProvider>
-            </SiteProvider>
-          </ThebeCoreProvider>
+        <ThemeProvider theme={theme} renderers={renderers} {...links}>
+          <BaseUrlProvider baseurl={baseurl}>
+            <ThebeCoreProvider>
+              <SiteProvider config={config}>
+                <ConfiguredThebeServerProvider>{children}</ConfiguredThebeServerProvider>
+              </SiteProvider>
+            </ThebeCoreProvider>
+          </BaseUrlProvider>
         </ThemeProvider>
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
-        <ContentReload port={CONTENT_CDN_PORT} />
+        {!staticBuild && <LiveReload />}
+        {scripts}
       </body>
     </html>
   );
 }
 
 export function App() {
-  const { theme, config, CONTENT_CDN_PORT } = useLoaderData<SiteLoader>();
+  const { theme, config } = useLoaderData<SiteLoader>();
   return (
-    <Document theme={theme} config={config} CONTENT_CDN_PORT={CONTENT_CDN_PORT}>
+    <Document theme={theme} config={config}>
       <Outlet />
     </Document>
   );
 }
 
-export function AppCatchBoundary() {
-  const caught = useCatch();
+export function AppWithReload() {
+  const { theme, config, CONTENT_CDN_PORT, MODE, BASE_URL } = useLoaderData<SiteLoader>();
   return (
-    <Document theme={Theme.light} title={caught.statusText}>
-      <article className="content">
-        <main className="article-grid article-subgrid-gap col-screen">
-          <ErrorSiteNotFound />
-        </main>
-      </article>
+    <Document
+      theme={theme}
+      config={config}
+      scripts={MODE === 'static' ? undefined : <ContentReload port={CONTENT_CDN_PORT} />}
+      staticBuild={MODE === 'static'}
+      baseurl={BASE_URL}
+    >
+      <Outlet />
     </Document>
   );
 }
 
-export function AppDebugErrorBoundary({ error }: { error: { message: string; stack: string } }) {
+export function AppCatchBoundary() {
   return (
-    <Document theme={Theme.light} title="Error">
-      <div className="mt-16">
+    <Document theme={Theme.light}>
+      <article className="article">
         <main className="article-grid article-subgrid-gap col-screen">
-          <h1>An Error Occurred</h1>
-          <code>{error.message}</code>
-          <pre>{error.stack}</pre>
+          <Error404 />
         </main>
-      </div>
+      </article>
     </Document>
   );
 }

package/src/pages/index.ts

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

package/src/seo/sitemap.ts

@@ -145,14 +145,15 @@ export function getSiteSlugs(
   const slugs =
     site.projects
       ?.map((project) => {
+        const projectSlug = project.slug ? `/${project.slug}` : '';
         const pages = project.pages
           .filter((page): page is ManifestProjectItem => 'slug' in page)
-          .map((page) => `${baseurl}/${project.slug}/${page.slug}`);
+          .map((page) => `${baseurl}${projectSlug}/${page.slug}`);
         if (opts?.excludeIndex) return [...pages];
         return [
           opts?.explicitIndex
-            ? `${baseurl}/${project.slug}/${project.index}`
-            : `${baseurl}/${project.slug}`,
+            ? `${baseurl}${projectSlug}/${project.index}`
+            : `${baseurl}${projectSlug}`,
           ...pages,
         ];
       })

package/src/types.ts

@@ -17,6 +17,8 @@ export type SiteLoader = {
   theme: Theme;
   config?: SiteManifest;
   CONTENT_CDN_PORT?: string | number;
+  MODE?: 'app' | 'static';
+  BASE_URL?: string;
 };
 
 export type NavigationLink = {
@@ -38,6 +40,7 @@ export type PageLoader = {
   sha256: string;
   slug: string;
   domain: string; // This is written in at render time in the site
+  project: string; // This is written in at render time in the site
   frontmatter: PageFrontmatter;
   mdast: Root;
   references: References;

package/src/pages/ErrorSiteNotFound.tsx

@@ -1,30 +0,0 @@
-export function ErrorSiteNotFound() {
-  return (
-    <>
-      <h1>No Site Found</h1>
-      <p>No website is available at this url, please double check the url.</p>
-      <h3>What&apos;s next?</h3>
-      <p>
-        If you are expecting to see <span className="font-semibold">your website</span> here and you
-        think that something has gone wrong, please send an email to{' '}
-        <a
-          href={`mailto:support@curvenote.com?subject=Website%20Unavailable&body=${encodeURIComponent(
-            `My website is not available. 😥`,
-          )}`}
-        >
-          support@curvenote.com
-        </a>
-        , or let us know on our <a href="https://slack.curvenote.dev">community slack</a>, and
-        we&apos;ll help out.
-      </p>
-      <p>
-        Or create a new temporary website from Markdown and Jupyter Notebooks using{' '}
-        <a href="https://try.curvenote.com">try.curvenote.com</a>.
-      </p>
-      <p>
-        Or find out more about Curvenote&apos;s scientific writing, collaboration and publishing
-        tools at <a href="https://curvenote.com">curvenote.com</a>.
-      </p>
-    </>
-  );
-}