@myst-theme/site 0.1.38 → 0.2.1

package/package.json

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

package/src/components/FooterLinksBlock.tsx

@@ -2,16 +2,16 @@ import classNames from 'classnames';
 import ArrowLeftIcon from '@heroicons/react/24/outline/ArrowLeftIcon';
 import ArrowRightIcon from '@heroicons/react/24/outline/ArrowRightIcon';
 import type { FooterLinks, NavigationLink } from '../types';
-import { useLinkProvider, useUrlbase, withUrlbase } from '@myst-theme/providers';
+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/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
@@ -141,10 +148,8 @@ export const TableOfContents = ({
   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(() => {
@@ -183,7 +188,7 @@ 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

package/src/components/Navigation/TopNav.tsx

@@ -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 { useLinkProvider, 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;
@@ -178,11 +184,12 @@ 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/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,13 +8,13 @@ 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';
@@ -26,6 +26,8 @@ export function Document({
   config,
   title,
   scrollTopClass = 'scroll-p-20',
+  staticBuild,
+  baseurl,
 }: {
   children: React.ReactNode;
   scripts?: React.ReactNode;
@@ -33,7 +35,18 @@ export function Document({
   config?: SiteManifest;
   title?: 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,16 +61,18 @@ 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 />
+        {!staticBuild && <LiveReload />}
         {scripts}
       </body>
     </html>
@@ -74,37 +89,28 @@ export function App() {
 }
 
 export function AppWithReload() {
-  const { theme, config, CONTENT_CDN_PORT } = useLoaderData<SiteLoader>();
+  const { theme, config, CONTENT_CDN_PORT, MODE, BASE_URL } = useLoaderData<SiteLoader>();
   return (
-    <Document theme={theme} config={config} scripts={<ContentReload port={CONTENT_CDN_PORT} />}>
+    <Document
+      theme={theme}
+      config={config}
+      scripts={MODE === 'static' ? undefined : <ContentReload port={CONTENT_CDN_PORT} />}
+      staticBuild={MODE === 'static'}
+      baseurl={BASE_URL}
+    >
       <Outlet />
     </Document>
   );
 }
 
 export function AppCatchBoundary() {
-  const caught = useCatch();
   return (
-    <Document theme={Theme.light} title={caught.statusText}>
-      <article className="content">
+    <Document theme={Theme.light}>
+      <article className="article">
         <main className="article-grid article-subgrid-gap col-screen">
-          <ErrorSiteNotFound />
+          <Error404 />
         </main>
       </article>
     </Document>
   );
 }
-
-export function AppDebugErrorBoundary({ error }: { error: { message: string; stack: string } }) {
-  return (
-    <Document theme={Theme.light} title="Error">
-      <div className="mt-16">
-        <main className="article-grid article-subgrid-gap col-screen">
-          <h1>An Error Occurred</h1>
-          <code>{error.message}</code>
-          <pre>{error.stack}</pre>
-        </main>
-      </div>
-    </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, AppWithReload, 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>
-    </>
-  );
-}