@myst-theme/site 0.0.17

package/src/components/Navigation/TableOfContents.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import classNames from 'classnames';
+import { NavLink, useParams, useLocation } from '@remix-run/react';
+import type { SiteManifest } from 'myst-config';
+import { CreatedInCurvenote } from '@curvenote/icons';
+import { useNavOpen, useSiteManifest, useUrlbase, withUrlbase } from '@myst-theme/providers';
+import { getProjectHeadings } from '../../loaders';
+import type { Heading } from '../../types';
+
+type Props = {
+  folder?: string;
+  headings: Heading[];
+  sections?: ManifestProject[];
+};
+
+type ManifestProject = Required<SiteManifest>['projects'][0];
+
+const HeadingLink = ({
+  path,
+  isIndex,
+  title,
+  children,
+}: {
+  path: string;
+  isIndex?: boolean;
+  title?: string;
+  children: React.ReactNode;
+}) => {
+  const { pathname } = useLocation();
+  const exact = pathname === path;
+  const urlbase = useUrlbase();
+  const [, setOpen] = useNavOpen();
+  return (
+    <NavLink
+      prefetch="intent"
+      title={title}
+      className={({ isActive }: { isActive: boolean }) =>
+        classNames('block break-words', {
+          'text-blue-600 dark:text-white': !isIndex && isActive,
+          'font-semibold': isActive,
+          'hover:text-slate-800 dark:hover:text-slate-100': !isActive,
+          'border-b pb-1': isIndex,
+          'border-stone-200 dark:border-stone-700': isIndex && !exact,
+          'border-blue-500': isIndex && exact,
+        })
+      }
+      to={withUrlbase(path, urlbase)}
+      suppressHydrationWarning // The pathname is not defined on the server always.
+      onClick={() => {
+        // Close the nav panel if it is open
+        setOpen(false);
+      }}
+    >
+      {children}
+    </NavLink>
+  );
+};
+
+const HEADING_CLASSES = 'text-slate-900 text-lg leading-6 dark:text-slate-100';
+const Headings = ({ folder, headings, sections }: Props) => {
+  const secs = sections || [];
+  return (
+    <ul className="text-slate-500 dark:text-slate-300 leading-6">
+      {secs.map((sec) => {
+        if (sec.slug === folder) {
+          return headings.map((heading, index) => (
+            <li
+              key={heading.slug || index}
+              className={classNames('p-1', {
+                [HEADING_CLASSES]: heading.level === 'index',
+                'font-semibold': heading.level === 'index',
+                'pl-4': heading.level === 2,
+                'pl-6': heading.level === 3,
+                'pl-8': heading.level === 4,
+                'pl-10': heading.level === 5,
+                'pl-12': heading.level === 6,
+              })}
+            >
+              {heading.path ? (
+                <HeadingLink
+                  title={heading.title}
+                  path={heading.path}
+                  isIndex={heading.level === 'index'}
+                >
+                  {heading.title}
+                </HeadingLink>
+              ) : (
+                <h5 className="text-slate-900 font-semibold my-2 text-md leading-6 dark:text-slate-100 break-words">
+                  {heading.title}
+                </h5>
+              )}
+            </li>
+          ));
+        }
+        return (
+          <li key={sec.slug} className={classNames('p-1 my-2 lg:hidden', HEADING_CLASSES)}>
+            <HeadingLink path={`/${sec.slug}`}>{sec.title}</HeadingLink>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export const TableOfContents = ({
+  projectSlug,
+  top,
+  height,
+  showFooter = true,
+}: {
+  top?: number;
+  height?: number;
+  projectSlug?: string;
+  showFooter?: boolean;
+}) => {
+  const [open] = useNavOpen();
+  const config = useSiteManifest();
+  const { folder, project } = useParams();
+  const resolvedProjectSlug = projectSlug || (folder ?? project);
+  if (!config) return null;
+  const headings = getProjectHeadings(config, resolvedProjectSlug, {
+    addGroups: false,
+  });
+  if (!headings) return null;
+  return (
+    <div
+      className={classNames('toc overflow-hidden', {
+        flex: open,
+        'bg-white dark:bg-stone-900': open, // just apply when open, so that theme can transition
+        'hidden xl:flex': !open,
+      })}
+      style={{
+        top: top ?? 0,
+        height:
+          typeof document === 'undefined' || (height && height > window.innerHeight - (top ?? 0))
+            ? undefined
+            : height,
+      }}
+      suppressHydrationWarning
+    >
+      <nav
+        aria-label="Table of Contents"
+        className="flex-grow pt-10 pb-3 px-8 overflow-y-auto transition-opacity"
+        style={{ opacity: height && height > 150 ? undefined : 0 }}
+      >
+        <Headings folder={resolvedProjectSlug} headings={headings} sections={config?.projects} />
+      </nav>
+      {showFooter && (
+        <div className="flex-none py-4">
+          <CreatedInCurvenote />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Navigation/ThemeButton.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from '@myst-theme/providers';
+import { MoonIcon } from '@heroicons/react/24/solid';
+import { SunIcon } from '@heroicons/react/24/outline';
+import classNames from 'classnames';
+
+export function ThemeButton({ className = 'mx-3 h-8 w-8' }: { className?: string }) {
+  const { isDark, nextTheme } = useTheme();
+  return (
+    <button
+      className={classNames(
+        'theme rounded-full border border-white border-solid overflow-hidden text-white hover:text-stone-500 hover:bg-white',
+        className,
+      )}
+      title={`Change theme to ${isDark ? 'light' : 'dark'} mode.`}
+      aria-label={`Change theme to ${isDark ? 'light' : 'dark'} mode.`}
+      onClick={nextTheme}
+    >
+      {isDark ? (
+        <MoonIcon className="h-full w-full p-0.5" />
+      ) : (
+        <SunIcon className="h-full w-full p-0.5" />
+      )}
+    </button>
+  );
+}

package/src/components/Navigation/TopNav.tsx

@@ -0,0 +1,249 @@
+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 type { SiteManifest, SiteNavItem } from 'myst-config';
+import { ThemeButton } from './ThemeButton';
+import { useNavOpen, useSiteManifest } from '@myst-theme/providers';
+import { CurvenoteLogo } from '@curvenote/icons';
+import { LoadingBar } from './Loading';
+
+export const DEFAULT_NAV_HEIGHT = 60;
+
+function ExternalOrInternalLink({
+  to,
+  className,
+  children,
+  nav,
+  prefetch = 'intent',
+}: {
+  to: string;
+  className?: string | ((props: { isActive: boolean }) => string);
+  children: React.ReactNode;
+  nav?: boolean;
+  prefetch?: 'intent' | 'render' | 'none';
+}) {
+  const staticClass = typeof className === 'function' ? className({ isActive: false }) : className;
+  if (to.startsWith('http') || to.startsWith('mailto:')) {
+    return (
+      <a href={to} target="_blank" rel="noopener noreferrer" className={staticClass}>
+        {children}
+      </a>
+    );
+  }
+  if (nav) {
+    return (
+      <NavLink prefetch={prefetch} to={to} className={className}>
+        {children}
+      </NavLink>
+    );
+  }
+  return (
+    <Link prefetch={prefetch} to={to} className={staticClass}>
+      {children}
+    </Link>
+  );
+}
+
+function NavItem({ item }: { item: SiteNavItem }) {
+  if (!('children' in item)) {
+    return (
+      <div className="relative grow-0 inline-block mx-2">
+        <ExternalOrInternalLink
+          nav
+          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',
+              {
+                'border-b border-stone-200': isActive,
+              },
+            )
+          }
+        >
+          {item.title}
+        </ExternalOrInternalLink>
+      </div>
+    );
+  }
+  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">
+          <span>{item.title}</span>
+          <ChevronDownIcon
+            className="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100"
+            aria-hidden="true"
+          />
+        </Menu.Button>
+      </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="origin-top-left absolute left-4 mt-2 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+          {item.children?.map((action) => (
+            <Menu.Item key={action.url}>
+              {/* This is really ugly, BUT, the action needs to be defined HERE or the click away doesn't work for some reason */}
+              {action.url?.startsWith('http') ? (
+                <a
+                  href={action.url || ''}
+                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-black"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {action.title}
+                </a>
+              ) : (
+                <NavLink
+                  to={action.url || ''}
+                  className={({ isActive }) =>
+                    classNames(
+                      'block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-black',
+                      {
+                        'text-black font-bold': isActive,
+                      },
+                    )
+                  }
+                >
+                  {action.title}
+                </NavLink>
+              )}
+            </Menu.Item>
+          ))}
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}
+
+function NavItems({ nav }: { nav?: SiteManifest['nav'] }) {
+  if (!nav) return null;
+  return (
+    <div className="text-md flex-grow hidden lg:block">
+      {nav.map((item) => {
+        return <NavItem key={'url' in item ? item.url : item.title} item={item} />;
+      })}
+    </div>
+  );
+}
+
+function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
+  if (!actions || actions.length === 0) return null;
+  return (
+    <Menu as="div" className="relative">
+      <div>
+        <Menu.Button className="bg-transparent flex text-sm rounded-full focus:outline-none">
+          <span className="sr-only">Open Menu</span>
+          <div className="flex items-center text-stone-200 hover:text-white">
+            <EllipsisVerticalIcon className="h-8 w-8 p-1" />
+          </div>
+        </Menu.Button>
+      </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+          {actions?.map((action) => (
+            <Menu.Item key={action.url}>
+              {({ active }) => (
+                <a
+                  href={action.url}
+                  className={classNames(
+                    active ? 'bg-gray-100' : '',
+                    'block px-4 py-2 text-sm text-gray-700',
+                  )}
+                >
+                  {action.title}
+                </a>
+              )}
+            </Menu.Item>
+          ))}
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}
+
+function HomeLink({ logo, logoText, name }: { logo?: string; logoText?: string; name?: string }) {
+  const nothingSet = !logo && !logoText;
+  return (
+    <Link
+      className="flex items-center 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>}
+      {nothingSet && <CurvenoteLogo className="mr-3" fill="#FFF" size={30} />}
+      <span
+        className={classNames('text-md sm:text-xl tracking-tight sm:mr-5', {
+          'sr-only': !(logoText || nothingSet),
+        })}
+      >
+        {logoText || 'Curvenote'}
+      </span>
+    </Link>
+  );
+}
+
+export function TopNav() {
+  const [open, setOpen] = useNavOpen();
+  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]">
+      <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"
+              onClick={() => {
+                setOpen(!open);
+              }}
+            >
+              <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} />
+        </div>
+        <div className="flex-grow flex items-center w-auto">
+          <NavItems nav={nav} />
+          <div className="block flex-grow"></div>
+          <ThemeButton />
+          <div className="block sm:hidden">
+            <ActionMenu actions={actions} />
+          </div>
+          <div className="hidden sm:block">
+            {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"
+                to={action.url}
+              >
+                {action.title}
+              </ExternalOrInternalLink>
+            ))}
+          </div>
+        </div>
+      </nav>
+      <LoadingBar />
+    </div>
+  );
+}

package/src/components/Navigation/index.tsx

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

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export { ContentBlocks } from './ContentBlocks';
+export { DocumentOutline } from './DocumentOutline';
+export { FooterLinksBlock } from './FooterLinksBlock';
+export { ContentReload } from './ContentReload';
+export { Bibliography } from './Bibliography';
+export { ExternalOrInternalLink } from './ExternalOrInternalLink';
+export * from './Navigation';
+export { renderers } from './renderers';

package/src/components/renderers.ts

@@ -0,0 +1,7 @@
+import { DEFAULT_RENDERERS } from 'myst-to-react';
+import { MystDemoRenderer } from 'myst-demo';
+
+export const renderers = {
+  ...DEFAULT_RENDERERS,
+  myst: MystDemoRenderer,
+};

package/src/hooks/index.ts

@@ -0,0 +1,23 @@
+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 };
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './utils';
+export * from './types';
+export * from './loaders';
+export * from './components';
+export * from './pages';
+export * from './seo';
+export * from './hooks';
+export * from './store';

package/src/loaders/cdn.server.ts

@@ -0,0 +1,145 @@
+import fetch from 'node-fetch';
+import NodeCache from 'node-cache';
+import type { SiteManifest as Config } from 'myst-config';
+import { responseNoArticle, responseNoSite } from './errors.server';
+import {
+  getFooterLinks,
+  getProject,
+  updatePageStaticLinksInplace,
+  updateSiteManifestStaticLinksInplace,
+} from './utils';
+import { redirect } from '@remix-run/node';
+import type { PageLoader } from '../types';
+
+interface CdnRouter {
+  cdn?: string;
+}
+
+declare global {
+  // Disable multiple caches when this file is rebuilt
+  // eslint-disable-next-line
+  var cdnRouterCache: NodeCache | undefined, configCache: NodeCache | undefined;
+}
+
+const CDN = 'https://cdn.curvenote.com/';
+
+function getCdnRouterCache() {
+  if (global.cdnRouterCache) return global.cdnRouterCache;
+  console.log('Creating cdnRouterCache');
+  // The router should update every minute
+  global.cdnRouterCache = new NodeCache({ stdTTL: 30 });
+  return global.cdnRouterCache;
+}
+
+function getConfigCache() {
+  if (global.configCache) return global.configCache;
+  console.log('Creating configCache');
+  // The config can be long lived as it is static (0 == ∞)
+  global.configCache = new NodeCache({ stdTTL: 0 });
+  return global.configCache;
+}
+
+async function getCdnPath(hostname: string): Promise<string | undefined> {
+  const cached = getCdnRouterCache().get<CdnRouter>(hostname);
+  if (cached) return cached.cdn;
+  const response = await fetch(`https://api.curvenote.com/routers/${hostname}`);
+  if (response.status === 404) {
+    // Always hit the API again if it is not found!
+    return;
+  }
+  const data = (await response.json()) as CdnRouter;
+  getCdnRouterCache().set<CdnRouter>(hostname, data);
+  return data.cdn;
+}
+
+function withCDN<T extends string | undefined>(id: string, url: T): T {
+  if (!url) return url;
+  return `${CDN}${id}/public${url}` as T;
+}
+
+/**
+ * Basic comparison for checking that the title and (possible) slug are the same
+ */
+function foldTitleString(title?: string): string | undefined {
+  return title?.replace(/[-\s_]/g, '').toLowerCase();
+}
+
+/**
+ * If the site title and the first nav item are the same, remove it.
+ */
+function removeSingleNavItems(config: Config) {
+  if (
+    config?.nav?.length === 1 &&
+    foldTitleString(config.nav[0].title) === foldTitleString(config.title)
+  ) {
+    config.nav = [];
+  }
+}
+
+export async function getConfig(hostname: string): Promise<Config> {
+  const id = await getCdnPath(hostname);
+  if (!id) throw responseNoSite();
+  const cached = getConfigCache().get<Config>(id);
+  // Load the data from an in memory cache.
+  if (cached) return cached;
+  const response = await fetch(`${CDN}${id}/config.json`);
+  if (response.status === 404) throw responseNoSite();
+  const data = (await response.json()) as Config;
+  data.id = id;
+  removeSingleNavItems(data);
+  updateSiteManifestStaticLinksInplace(data, (url) => withCDN(id, url));
+  getConfigCache().set<Config>(id, data);
+  return data;
+}
+
+export async function getObjectsInv(hostname: string): Promise<Buffer | undefined> {
+  const id = await getCdnPath(hostname);
+  if (!id) return;
+  const url = `${CDN}${id}/objects.inv`;
+  const response = await fetch(url);
+  if (response.status === 404) return;
+  const buffer = await response.buffer();
+  return buffer;
+}
+
+export async function getData(
+  config?: Config,
+  project?: string,
+  slug?: string,
+): Promise<PageLoader | null> {
+  if (!project || !slug || !config) throw responseNoArticle();
+  const { id } = config;
+  if (!id) throw responseNoSite();
+  const response = await fetch(`${CDN}${id}/content/${project}/${slug}.json`);
+  if (response.status === 404) throw responseNoArticle();
+  const data = (await response.json()) as PageLoader;
+  return updatePageStaticLinksInplace(data, (url) => withCDN(id, url));
+}
+
+export async function getPage(
+  hostname: string,
+  opts: {
+    domain?: string;
+    project?: string;
+    loadIndexPage?: boolean;
+    slug?: string;
+    redirect?: boolean | string;
+  },
+): Promise<PageLoader | Response | null> {
+  const projectName = opts.project;
+  const config = await getConfig(hostname);
+  if (!config) throw responseNoSite();
+  const project = getProject(config, projectName);
+  if (!project) throw responseNoArticle();
+  if (opts.slug === project.index && opts.redirect) {
+    return redirect(`${typeof opts.redirect === 'string' ? opts.redirect : '/'}${projectName}`);
+  }
+  const slug = opts.loadIndexPage || opts.slug == null ? project.index : opts.slug;
+  const loader = await getData(config, projectName, slug).catch((e) => {
+    console.error(e);
+    return null;
+  });
+  if (!loader) throw responseNoArticle();
+  const footer = getFooterLinks(config, projectName, slug);
+  return { ...loader, footer, domain: opts.domain as string };
+}

package/src/loaders/errors.server.ts

@@ -0,0 +1,20 @@
+export enum ErrorStatus {
+  noSite = 'Site was not found',
+  noArticle = 'Article was not found',
+}
+
+export function responseNoSite(): Response {
+  // note: error boundary logic is dependent on the string sent here
+  return new Response(ErrorStatus.noSite, {
+    status: 404,
+    statusText: ErrorStatus.noSite,
+  });
+}
+
+export function responseNoArticle() {
+  // note: error boundary logic is dependent on the string sent here
+  return new Response(ErrorStatus.noArticle, {
+    status: 404,
+    statusText: ErrorStatus.noArticle,
+  });
+}

package/src/loaders/index.ts

@@ -0,0 +1,5 @@
+export * from './errors.server';
+export * as cdn from './cdn.server';
+export * from './utils';
+export * from './links';
+export * from './theme.server';

package/src/loaders/links.ts

@@ -0,0 +1,8 @@
+import type { HtmlLinkDescriptor } from '@remix-run/react';
+
+export const KatexCSS: HtmlLinkDescriptor = {
+  rel: 'stylesheet',
+  href: 'https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css',
+  integrity: 'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ',
+  crossOrigin: 'anonymous',
+};