@myst-theme/site 0.0.17

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@myst-theme/site",
+  "version": "0.0.17",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "compile": "tsc",
+    "lint": "eslint src/**/*.ts*",
+    "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\""
+  },
+  "dependencies": {
+    "@curvenote/blocks": "^1.5.16",
+    "@curvenote/connect": "0.0.6",
+    "@curvenote/icons": "^0.0.3",
+    "@curvenote/nbtx": "^0.1.11",
+    "@curvenote/runtime": "^0.2.9",
+    "@curvenote/ui-providers": "^0.0.16",
+    "@headlessui/react": "^1.6.6",
+    "@heroicons/react": "^2.0.12",
+    "@myst-theme/frontmatter": "^0.1.19",
+    "classnames": "^2.3.2",
+    "lodash.throttle": "^4.1.1",
+    "myst-common": "^0.0.11",
+    "myst-config": "^0.0.6",
+    "myst-demo": "^0.1.19",
+    "myst-to-react": "^0.1.19",
+    "mystjs": "^0.0.15",
+    "node-cache": "^5.1.2",
+    "node-fetch": "^2.6.7",
+    "unist-util-select": "^4.0.1"
+  },
+  "peerDependencies": {
+    "@remix-run/node": "^1.7.5",
+    "@remix-run/react": "^1.7.5",
+    "@types/react": "^16.8 || ^17.0 || ^18.0",
+    "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
+  },
+  "devDependencies": {
+    "@types/lodash.throttle": "^4.1.7",
+    "@types/node-fetch": "^2.6.2",
+    "eslint": "^8.21.0",
+    "eslint-config-curvenote": "latest",
+    "tsconfig": "latest",
+    "typescript": "latest"
+  }
+}

package/src/components/Bibliography.tsx

@@ -0,0 +1,51 @@
+import { useReferences } from '@myst-theme/providers';
+import { useState } from 'react';
+
+const HIDE_OVER_N_REFERENCES = 5;
+
+export function Bibliography() {
+  const references = useReferences();
+  const { order, data } = references?.cite ?? {};
+  const filtered = order?.filter((l) => l);
+  const [hidden, setHidden] = useState(true);
+  if (!filtered || !data || filtered.length === 0) return null;
+  const refs = hidden ? filtered.slice(0, HIDE_OVER_N_REFERENCES) : filtered;
+  return (
+    <section>
+      {filtered.length > HIDE_OVER_N_REFERENCES && (
+        <button
+          onClick={() => setHidden(!hidden)}
+          className="float-right text-xs p-1 px-2 border rounded hover:border-blue-500 dark:hover:border-blue-400"
+        >
+          {hidden ? 'Show All' : 'Collapse'}
+        </button>
+      )}
+      <header className="text-lg font-semibold text-stone-900 dark:text-white">References</header>
+      <div className="text-xs mb-8 pl-3 text-stone-500 dark:text-stone-300">
+        <ol>
+          {refs.map((label) => {
+            const { html } = data[label];
+            return (
+              <li
+                key={label}
+                className="break-words"
+                id={`cite-${label}`}
+                dangerouslySetInnerHTML={{ __html: html || '' }}
+              />
+            );
+          })}
+          {filtered.length > HIDE_OVER_N_REFERENCES && (
+            <li className="list-none text-center">
+              <button
+                onClick={() => setHidden(!hidden)}
+                className="p-2 border rounded hover:border-blue-500 dark:hover:border-blue-400"
+              >
+                {hidden ? `Show all ${filtered.length} references` : 'Collapse references'}
+              </button>
+            </li>
+          )}
+        </ol>
+      </div>
+    </section>
+  );
+}

package/src/components/ContentBlocks.tsx

@@ -0,0 +1,20 @@
+import { useParse, DEFAULT_RENDERERS } from 'myst-to-react';
+import type { Parent } from 'myst-spec';
+import { useNodeRenderers } from '@myst-theme/providers';
+
+function Block({ id, node }: { id: string; node: Parent }) {
+  const renderers = useNodeRenderers() ?? DEFAULT_RENDERERS;
+  const children = useParse(node, renderers);
+  return <div id={id}>{children}</div>;
+}
+
+export function ContentBlocks({ mdast }: { mdast: Parent }) {
+  const blocks = mdast.children as Parent[];
+  return (
+    <>
+      {blocks.map((node, index) => {
+        return <Block key={(node as any).key} id={`${index}`} node={node} />;
+      })}
+    </>
+  );
+}

package/src/components/ContentReload.tsx

@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+
+const STORAGE_KEY = 'myst';
+
+async function mystLiveReloadConnect(config: { onOpen?: () => void; port?: string | number }) {
+  if (!config.port || (window as any).mystLiveReloadConnected) return;
+  (window as any).mystLiveReloadConnected = true;
+  setTimeout(() => {
+    const myst = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || '{}');
+    if (myst.scroll) {
+      window.scrollTo(0, myst.scroll);
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  }, 30);
+  console.log(`🔊 Listening to live content changes on port ${config.port}`);
+  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const host = location.hostname;
+  const socketPath = `${protocol}//${host}:${config.port}/socket`;
+  const ws = new WebSocket(socketPath);
+
+  ws.onmessage = (message) => {
+    const event = JSON.parse(message.data);
+    if (event.type === 'LOG') {
+      console.log(event.message);
+    }
+    if (event.type === 'RELOAD') {
+      console.log('🚀 Reloading window ...');
+      console.log(`📌 Keeping scroll for page at ${window.scrollY}`);
+      const myst = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || '{}');
+      myst.scroll = window.scrollY;
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(myst));
+      window.location.reload();
+    }
+  };
+  ws.onopen = () => {
+    if (config && typeof config.onOpen === 'function') {
+      config.onOpen();
+    }
+  };
+  ws.onclose = () => {
+    console.log('MyST content server web socket closed. Reconnecting...');
+    setTimeout(
+      () =>
+        mystLiveReloadConnect({
+          ...config,
+          onOpen: () => window.location.reload(),
+        }),
+      1000,
+    );
+  };
+  ws.onerror = (error: any) => {
+    console.log('MyST content server web socket error:');
+    console.error(error);
+  };
+}
+
+// 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;
+      };

package/src/components/DocumentOutline.tsx

@@ -0,0 +1,187 @@
+import classNames from 'classnames';
+import throttle from 'lodash.throttle';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const SELECTOR = [1, 2, 3, 4, 5, 6].map((n) => `main h${n}`).join(', ');
+const HIGHLIGHT_CLASS = 'highlight';
+
+const onClient = typeof document !== 'undefined';
+
+type Heading = {
+  id: string;
+  title: string;
+  titleHTML: string;
+  level: number;
+};
+type Props = {
+  headings: Heading[];
+  activeId?: string;
+  highlight?: () => void;
+};
+/**
+ * This renders an item in the table of contents list.
+ * scrollIntoView is used to ensure that when a user clicks on an item, it will smoothly scroll.
+ */
+const Headings = ({ headings, activeId, highlight }: Props) => (
+  <ul className="text-slate-400 text-sm leading-6">
+    {headings.map((heading) => (
+      <li
+        key={heading.id}
+        className={classNames('border-l-2', {
+          'text-blue-600': heading.id === activeId,
+          'border-l-gray-300 dark:border-l-gray-50 hover:border-l-blue-500':
+            heading.id !== activeId,
+          'border-l-blue-500': heading.id === activeId,
+          'bg-blue-50 dark:bg-slate-800': heading.id === activeId,
+        })}
+      >
+        <a
+          className={classNames('block p-1 pl-2 text-slate-800 dark:text-slate-100', {
+            'text-blue-600 dark:text-white font-semibold': heading.id === activeId,
+            'pr-2': heading.id !== activeId,
+            'pl-3': heading.level === 2,
+            'pl-4': heading.level === 3,
+            'pl-5': heading.level === 4,
+            'pl-6': heading.level === 5,
+            'pl-7': heading.level === 6,
+          })}
+          href={`#${heading.id}`}
+          onClick={(e) => {
+            e.preventDefault();
+            const el = document.querySelector(`#${heading.id}`);
+            if (!el) return;
+            getHeaders().forEach((h) => {
+              h.classList.remove(HIGHLIGHT_CLASS);
+            });
+            el.classList.add(HIGHLIGHT_CLASS);
+            highlight?.();
+            el.scrollIntoView({ behavior: 'smooth' });
+          }}
+          // Note that the title can have math in it!
+          dangerouslySetInnerHTML={{ __html: heading.titleHTML }}
+        />
+      </li>
+    ))}
+  </ul>
+);
+
+function getHeaders(): HTMLHeadingElement[] {
+  const headers = Array.from(document.querySelectorAll(SELECTOR)).filter((e) => {
+    const parent = e.closest('.exclude-from-outline');
+    return !(e.classList.contains('title') || parent);
+  });
+  return headers as HTMLHeadingElement[];
+}
+
+function useHeaders() {
+  if (!onClient) return { activeId: '', headings: [] };
+  const onScreen = useRef<Set<HTMLHeadingElement>>(new Set());
+  const [activeId, setActiveId] = useState<string>();
+  const headingsSet = useRef<Set<HTMLHeadingElement>>(new Set());
+
+  const highlight = useCallback(() => {
+    const current = [...onScreen.current];
+    const highlighted = current.reduce((a, b) => {
+      if (a) return a;
+      if (b.classList.contains('highlight')) return b.id;
+      return null;
+    }, null as string | null);
+    const active = [...onScreen.current].sort((a, b) => a.offsetTop - b.offsetTop)[0];
+    if (highlighted || active) setActiveId(highlighted || active.id);
+  }, []);
+
+  const { observer } = useIntersectionObserver(highlight, onScreen.current);
+  const [elements, setElements] = useState<HTMLHeadingElement[]>([]);
+
+  const render = throttle(() => setElements(getHeaders()), 500);
+  useEffect(() => {
+    // We have to look at the document changes for reloads/mutations
+    const main = document.querySelector('main');
+    const mutations = new MutationObserver(render);
+    // Fire when added to the dom
+    render();
+    if (main) {
+      mutations.observe(main, { attributes: true, childList: true, subtree: true });
+    }
+    return () => mutations.disconnect();
+  }, []);
+
+  useEffect(() => {
+    // Re-observe all elements when the observer changes
+    Array.from(elements).map((e) => observer.current?.observe(e));
+  }, [observer]);
+
+  elements.forEach((e) => {
+    if (headingsSet.current.has(e)) return;
+    observer.current?.observe(e);
+    headingsSet.current.add(e);
+  });
+
+  const headings: Heading[] = elements
+    .map((heading) => {
+      return {
+        level: Number(heading.tagName.slice(1)),
+        id: heading.id,
+        text: heading.querySelector('.heading-text'),
+      };
+    })
+    .filter((h) => !!h.text)
+    .map(({ level, text, id }) => {
+      const { innerText: title, innerHTML: titleHTML } = text as HTMLSpanElement;
+      return { title, titleHTML, id, level };
+    });
+
+  return { activeId, highlight, headings };
+}
+
+const useIntersectionObserver = (highlight: () => void, onScreen: Set<HTMLHeadingElement>) => {
+  const observer = useRef<IntersectionObserver | null>(null);
+  if (!onClient) return { observer };
+  useEffect(() => {
+    const callback: IntersectionObserverCallback = (entries) => {
+      entries.forEach((entry) => {
+        onScreen[entry.isIntersecting ? 'add' : 'delete'](entry.target as HTMLHeadingElement);
+      });
+      highlight();
+    };
+    const o = new IntersectionObserver(callback);
+    observer.current = o;
+    return () => o.disconnect();
+  }, [highlight, onScreen]);
+  return { observer };
+};
+
+export const DocumentOutline = ({
+  top,
+  height,
+  className = 'document-outline',
+}: {
+  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
+      aria-label="Document Outline"
+      suppressHydrationWarning
+      className={classNames('not-prose transition-opacity', className)}
+      style={{
+        top: top ?? 0,
+        height:
+          typeof document === 'undefined' || (height && height > window.innerHeight)
+            ? undefined
+            : height,
+        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">
+        In this article
+      </div>
+      {onClient && <Headings headings={headings} activeId={activeId} highlight={highlight} />}
+    </nav>
+  );
+};

package/src/components/ExternalOrInternalLink.tsx

@@ -0,0 +1,30 @@
+import { Link } from '@remix-run/react';
+
+export function ExternalOrInternalLink({
+  to,
+  className,
+  isStatic,
+  prefetch = 'intent',
+  title,
+  children,
+}: {
+  to: string;
+  className?: string;
+  isStatic?: boolean;
+  prefetch?: 'intent' | 'render' | 'none';
+  title?: string;
+  children: React.ReactNode;
+}) {
+  if (to.startsWith('http') || isStatic) {
+    return (
+      <a href={to} className={className} target="_blank" rel="noopener noreferrer" title={title}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <Link to={to} className={className} prefetch={prefetch} title={title}>
+      {children}
+    </Link>
+  );
+}

package/src/components/FooterLinksBlock.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import { Link } from '@remix-run/react';
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import type { FooterLinks, NavigationLink } from '../types';
+import { useUrlbase, withUrlbase } from '@myst-theme/providers';
+
+const FooterLink = ({ title, url, group, right }: NavigationLink & { right?: boolean }) => {
+  const urlbase = useUrlbase();
+  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)}
+    >
+      <div className="flex align-middle h-full">
+        {right && (
+          <ArrowLeftIcon className="w-6 h-6 self-center transition-transform group-hover:-translate-x-1" />
+        )}
+        <div className={classNames('flex-grow', { 'text-right': right })}>
+          <div className="text-xs text-gray-500 dark:text-gray-400">{group || ' '}</div>
+          {title}
+        </div>
+        {!right && (
+          <ArrowRightIcon className="w-6 h-6 self-center transition-transform group-hover:translate-x-1" />
+        )}
+      </div>
+    </Link>
+  );
+};
+
+export function FooterLinksBlock({ links }: { links?: FooterLinks }) {
+  if (!links) return null;
+  return (
+    <div className="flex space-x-4 my-10">
+      {links.navigation?.prev && <FooterLink {...links.navigation?.prev} right />}
+      {links.navigation?.next && <FooterLink {...links.navigation?.next} />}
+    </div>
+  );
+}

package/src/components/Navigation/Loading.tsx

@@ -0,0 +1,59 @@
+import { useTransition } from '@remix-run/react';
+import { useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+
+/**
+ * Show a loading progess bad if the load takes more than 150ms
+ */
+function useLoading() {
+  const transitionState = useTransition().state;
+  const ref = useMemo<{ start?: NodeJS.Timeout; finish?: NodeJS.Timeout }>(() => ({}), []);
+  const [showLoading, setShowLoading] = useState(false);
+
+  useEffect(() => {
+    if (transitionState === 'loading') {
+      ref.start = setTimeout(() => {
+        setShowLoading(true);
+      }, 150);
+    } else {
+      if (ref.start) {
+        // We have stoped loading in <150ms
+        clearTimeout(ref.start);
+        delete ref.start;
+        setShowLoading(false);
+        return;
+      }
+      ref.finish = setTimeout(() => {
+        setShowLoading(false);
+      }, 150);
+    }
+    return () => {
+      if (ref.start) {
+        clearTimeout(ref.start);
+        delete ref.start;
+      }
+      if (ref.finish) {
+        clearTimeout(ref.finish);
+        delete ref.finish;
+      }
+    };
+  }, [transitionState]);
+
+  return { showLoading, isLoading: transitionState === 'loading' };
+}
+
+export function LoadingBar() {
+  const { isLoading, showLoading } = useLoading();
+  if (!showLoading) return null;
+  return (
+    <div
+      className={classNames(
+        'w-screen h-[2px] bg-blue-500 absolute left-0 bottom-0 transition-transform',
+        {
+          'animate-load scale-x-40': isLoading,
+          'scale-x-100': !isLoading,
+        },
+      )}
+    />
+  );
+}

package/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,31 @@
+import { useNavOpen } from '@myst-theme/providers';
+import { TableOfContents } from './TableOfContents';
+
+export function Navigation({
+  children,
+  projectSlug,
+  top,
+  height,
+  hide_toc,
+}: {
+  children?: React.ReactNode;
+  projectSlug?: string;
+  top?: number;
+  height?: number;
+  hide_toc?: boolean;
+}) {
+  const [open, setOpen] = useNavOpen();
+  if (hide_toc) return <>{children}</>;
+  return (
+    <>
+      {open && (
+        <div
+          className="fixed inset-0 bg-black opacity-50 z-30"
+          onClick={() => setOpen(false)}
+        ></div>
+      )}
+      {children}
+      <TableOfContents projectSlug={projectSlug} top={top} height={height} />
+    </>
+  );
+}