myst-to-react 0.1.14

package/src/index.tsx

@@ -0,0 +1,59 @@
+import type { NodeRenderer } from './types';
+import type { GenericParent } from 'mystjs';
+import { mystToReact } from './convertToReact';
+import BASIC_RENDERERS from './basic';
+import ADMONITION_RENDERERS from './admonitions';
+import CITE_RENDERERS from './cite';
+import FOOTNOTE_RENDERERS from './footnotes';
+import CODE_RENDERERS from './code';
+import MATH_RENDERERS from './math';
+import REACTIVE_RENDERERS from './reactive';
+import IFRAME_RENDERERS from './iframe';
+import IMAGE_RENDERERS from './image';
+import LINK_RENDERERS from './links';
+import OUTPUT_RENDERERS from './output';
+import HEADING_RENDERERS from './heading';
+import CROSS_REFERENCE_RENDERERS from './crossReference';
+import TAB_RENDERERS from './tabs';
+import MYST_RENDERERS from './myst';
+import MERMAID_RENDERERS from './mermaid';
+export { MySTRenderer } from './myst';
+import EXT_RENDERERS from './extensions';
+
+export type { NodeRenderer } from './types';
+export { Bibliography } from './cite';
+export { CopyIcon } from './components/CopyIcon';
+
+export const DEFAULT_RENDERERS: Record<string, NodeRenderer> = {
+  ...BASIC_RENDERERS,
+  ...IMAGE_RENDERERS,
+  ...LINK_RENDERERS,
+  ...CODE_RENDERERS,
+  ...MATH_RENDERERS,
+  ...CITE_RENDERERS,
+  ...TAB_RENDERERS,
+  ...IFRAME_RENDERERS,
+  ...FOOTNOTE_RENDERERS,
+  ...ADMONITION_RENDERERS,
+  ...REACTIVE_RENDERERS,
+  ...OUTPUT_RENDERERS,
+  ...HEADING_RENDERERS,
+  ...CROSS_REFERENCE_RENDERERS,
+  ...MYST_RENDERERS,
+  ...MERMAID_RENDERERS,
+  ...EXT_RENDERERS,
+};
+
+export function useParse(
+  node: GenericParent | null,
+  renderers: Record<string, NodeRenderer> = DEFAULT_RENDERERS,
+) {
+  if (!node) return null;
+  try {
+    const nodes = mystToReact(node, renderers);
+    return nodes;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}

package/src/inlineError.tsx

@@ -0,0 +1,15 @@
+import { ExclamationIcon } from '@heroicons/react/outline';
+
+interface Props {
+  value: string;
+  message?: string;
+}
+
+export function InlineError({ value, message }: Props) {
+  return (
+    <span className="text-yellow-600" title={message || value}>
+      <ExclamationIcon className="inline h-[1em] mr-1" />
+      {value}
+    </span>
+  );
+}

package/src/links/index.tsx

@@ -0,0 +1,132 @@
+import type { Link } from 'myst-spec';
+import { Link as RemixLink } from '@remix-run/react';
+import { ExternalLinkIcon, LinkIcon } from '@heroicons/react/outline';
+import { useSiteManifest } from '@curvenote/ui-providers';
+import type { ManifestProjectPage, SiteManifest } from '@curvenote/site-common';
+import type { NodeRenderer } from '../types';
+import { HoverPopover } from '../components/HoverPopover';
+import { LinkCard } from '../components/LinkCard';
+import { WikiLink } from './wiki';
+import { RRIDLink } from './rrid';
+
+type TransformedLink = Link & { internal?: boolean; protocol?: string };
+
+function getPageInfo(
+  site: SiteManifest | undefined,
+  path: string,
+): ManifestProjectPage | undefined {
+  if (!site) return undefined;
+  const [projectSlug, pageSlug] = path.replace(/^\//, '').split('/');
+  const project = site.projects.find((p) => p.slug === projectSlug);
+  if (!project) return undefined;
+  return project.pages.find(
+    (p) => (p as ManifestProjectPage).slug === pageSlug,
+  ) as ManifestProjectPage;
+}
+
+function InternalLink({ url, children }: { url: string; children: React.ReactNode }) {
+  const site = useSiteManifest();
+  const page = getPageInfo(site, url);
+  const skipPreview = !page || (!page.description && !page.thumbnail);
+  if (!page || skipPreview) {
+    return (
+      <RemixLink to={url} prefetch="intent">
+        {children}
+      </RemixLink>
+    );
+  }
+  return (
+    <HoverPopover
+      card={
+        <LinkCard
+          internal
+          url={url}
+          title={page.title}
+          description={page.description}
+          thumbnail={page.thumbnailOptimized || page.thumbnail}
+        />
+      }
+    >
+      <RemixLink to={url} prefetch="intent">
+        {children}
+      </RemixLink>
+    </HoverPopover>
+  );
+}
+
+export const link: NodeRenderer<TransformedLink> = (node, children) => {
+  const internal = node.internal ?? false;
+  const protocol = node.protocol;
+
+  switch (protocol) {
+    case 'wiki':
+      return (
+        <WikiLink
+          key={node.key}
+          url={node.url}
+          page={node.data?.page as string}
+          wiki={node.data?.wiki as string}
+        >
+          {children}
+        </WikiLink>
+      );
+    case 'rrid':
+      return <RRIDLink key={node.key} rrid={node.data?.rrid as string} />;
+    default:
+      if (internal) {
+        return (
+          <InternalLink key={node.key} url={node.url}>
+            {children}
+          </InternalLink>
+        );
+      }
+      return (
+        <a key={node.key} target="_blank" href={node.url} rel="noreferrer">
+          {children}
+        </a>
+      );
+  }
+};
+
+export const linkBlock: NodeRenderer<TransformedLink> = (node, children) => {
+  const iconClass = 'w-6 h-6 self-center transition-transform flex-none ml-3';
+  const containerClass =
+    'flex-1 p-4 my-4 block border font-normal hover:border-blue-500 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';
+  const internal = node.internal ?? false;
+  const nested = (
+    <div className="flex align-middle h-full">
+      <div className="flex-grow">
+        {node.title}
+        <div className="text-xs text-gray-500 dark:text-gray-400">{children}</div>
+      </div>
+      {internal && <LinkIcon className={iconClass} />}
+      {!internal && <ExternalLinkIcon className={iconClass} />}
+    </div>
+  );
+
+  if (internal) {
+    return (
+      <RemixLink key={node.key} to={node.url} prefetch="intent" className={containerClass}>
+        {nested}
+      </RemixLink>
+    );
+  }
+  return (
+    <a
+      key={node.key}
+      className={containerClass}
+      target="_blank"
+      rel="noopener noreferrer"
+      href={node.url}
+    >
+      {nested}
+    </a>
+  );
+};
+
+const LINK_RENDERERS = {
+  link,
+  linkBlock,
+};
+
+export default LINK_RENDERERS;

package/src/links/rrid.tsx

@@ -0,0 +1,81 @@
+import useSWR from 'swr';
+import { ExternalLinkIcon } from '@heroicons/react/outline';
+import { ClickPopover } from '../components/ClickPopover';
+
+const fetcher = (...args: Parameters<typeof fetch>) =>
+  fetch(...args).then((res) => {
+    if (res.status === 200) return res.json();
+    throw new Error(`Content returned with status ${res.status}.`);
+  });
+
+function RRIDChild({ rrid }: { rrid: string }) {
+  const { data, error } = useSWR(`https://scicrunch.org/resolver/${rrid}.json`, fetcher);
+  if (!data && !error) {
+    return <span className="animate-pulse">Loading...</span>;
+  }
+  const hit = data?.hits?.hits?.[0];
+  if (error || !hit) {
+    return <span>Error loading {rrid}.</span>;
+  }
+  const {
+    name: title,
+    curie,
+    description,
+    supercategory,
+    keywords,
+    types: categories,
+  } = hit?._source?.item ?? {};
+  const category = supercategory?.[0]?.name;
+  const types = (categories?.map(({ name }: { name: string }) => name) as string[]) ?? [];
+  const tags = (keywords?.map(({ keyword }: { keyword: string }) => keyword) as string[]) ?? [];
+  return (
+    <div>
+      <a
+        href={`https://scicrunch.org/resolver/${rrid}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="absolute top-4 right-1 opacity-70 hover:opacity-100"
+      >
+        <ExternalLinkIcon className="w-6 h-6" />
+      </a>
+      <p className="text-sm font-light">RRID: {category}</p>
+      <div className="text-xl font-bold mb-4">
+        {title} <code>{curie}</code>
+      </div>
+      <p className="text-md">{description}</p>
+      {types.length > 0 && (
+        <>
+          <div className="text-xs font-thin my-2">Categories</div>
+          <div className="flex flex-wrap ml-1">
+            {types?.map((tag) => (
+              <span className="ml-1 text-xs inline-flex items-center uppercase px-3 py-1 rounded-full border">
+                {tag}
+              </span>
+            ))}
+          </div>
+        </>
+      )}
+      {tags.length > 0 && (
+        <>
+          <div className="text-xs font-thin my-2">Tags</div>
+          <div className="flex flex-wrap ml-1">
+            {tags?.map((tag) => (
+              <span className="ml-1 text-xs inline-flex items-center uppercase px-3 py-1 rounded-full border">
+                {tag}
+              </span>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export function RRIDLink({ rrid }: { rrid: string }) {
+  return (
+    <ClickPopover card={<RRIDChild rrid={rrid} />}>
+      <span>RRID: </span>
+      <cite className="italic">{rrid}</cite>
+    </ClickPopover>
+  );
+}

package/src/links/wiki.tsx

@@ -0,0 +1,119 @@
+import useSWR from 'swr';
+import { ExternalLinkIcon } from '@heroicons/react/outline';
+import { HoverPopover } from '../components/HoverPopover';
+import { LinkCard } from '../components/LinkCard';
+import React from 'react';
+
+const WikiTextMark = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    id="svg3400"
+    viewBox="0 0 500 85"
+    className="h-4"
+  >
+    <g transform="translate(-357.71336,-784.65111)">
+      <path
+        fill="currentColor"
+        d="m 412.98736,806.72288 c 0,0 -1.468,-2.984 -1.968,-3.976 -3.336,-6.612 -3.264,-6.964 -6.636,-7.408 -0.944,-0.124 -1.432,-0.244 -1.432,-0.712 v -2.092 l 0.284,-0.204 c 6.092,-0.008 19.648,-0.008 19.648,-0.008 l 0.52,0.172 v 2.084 c 0,0.476 -0.34,0.72 -1.032,0.72 l -1.424,0.204 c -3.6,0.28 -3.012,1.752 -0.62,6.516 l 22.708,46.46 0.776,0.212 20.16,-47.844 c 0.7,-1.928 0.592,-3.296 -0.308,-4.1 -0.904,-0.784 -1.54,-1.248 -3.876,-1.344 l -1.892,-0.096 c -0.232,0 -0.452,-0.084 -0.664,-0.24 -0.208,-0.148 -0.316,-0.344 -0.316,-0.58 v -1.992 l 0.288,-0.204 c 5.68,0 22.776,0 22.776,0 l 0.232,0.204 v 1.992 c 0,0.54 -0.308,0.812 -0.916,0.812 -2.984,0.132 -5.196,0.78 -6.628,1.936 -1.436,1.164 -2.556,2.768 -3.36,4.852 0,0 -18.54,42.436 -24.884,56.54 -2.428,4.624 -4.816,4.2 -6.916,-0.132 -4.436,-9.136 -16.928,-36.852 -16.928,-36.852 l -7.592,-14.92 z"
+      />
+      <path
+        fill="currentColor"
+        d="m 449.37136,792.29888 c 0,0 -12.812,-0.04 -18.516,0 l -0.284,0.204 v 1.984 c 0,0.244 0.104,0.436 0.312,0.584 0.212,0.156 0.428,0.236 0.66,0.236 l 0.916,0.1 c 2.332,0.096 3.404,0.708 3.724,1.092 0.556,0.68 0.832,1.416 -0.516,4.356 l -23.92,47.708 -0.628,-0.164 c 0,0 -17.132,-36.124 -22.092,-48.208 -0.516,-1.252 -0.748,-2.18 -0.748,-2.752 0,-1.228 1.108,-1.892 3.324,-1.984 l 2.584,-0.108 c 0.684,0 1.032,-0.264 1.032,-0.812 v -1.984 l -0.232,-0.204 c 0,0 -20.52,-0.024 -24.76,0 l -0.232,0.204 v 2.084 c 0,0.376 0.476,0.608 1.432,0.712 2.604,0.14 4.316,0.556 5.14,1.248 0.82,0.7 1.688,2.468 2.84,5.224 6.228,14.96 19.46,41.656 25.904,56.86 1.856,4.152 4.188,4.796 7.02,-0.128 4.904,-9.096 18.2,-36.872 18.2,-36.872 l 10.472,-19.584 c 1.22,-2.068 2.396,-3.912 2.992,-4.772 1.092,-1.572 1.704,-1.868 4.688,-2.008 0.608,0 0.916,-0.272 0.916,-0.82 v -1.984 l -0.228,-0.212 z"
+      />
+      <path
+        fill="currentColor"
+        d="m 488.32736,854.23088 c 0,2.288 1.04,3.64 4.368,3.952 l 2.184,0.212 c 0.312,0 0.624,0.204 0.624,0.62 v 2.184 l -0.104,0.212 c 0,0 -7.904,-0.212 -11.128,-0.212 -2.912,0 -11.024,0.212 -11.024,0.212 l -0.208,-0.212 v -2.184 c 0,-0.416 0.312,-0.62 0.728,-0.62 l 2.08,-0.212 c 3.432,-0.312 4.472,-1.976 4.472,-3.952 v -34.632 c 0,-2.284 -1.252,-2.916 -4.472,-3.22 l -2.08,-0.216 c -0.416,0 -0.728,-0.096 -0.728,-0.416 v -2.396 l 0.104,-0.208 c 0,0 8.216,0.208 11.44,0.208 2.808,0 10.816,-0.208 10.816,-0.208 l 0.104,0.208 v 2.288 c 0,0.312 -0.208,0.52 -0.624,0.52 l -2.184,0.212 c -3.224,0.308 -4.368,1.144 -4.368,3.228 v 34.632 z"
+      />
+      <path
+        fill="currentColor"
+        d="m 519.01936,854.23088 c 0,2.288 1.352,3.432 4.368,3.952 l 1.144,0.212 c 0.312,0.1 0.624,0.204 0.624,0.62 v 2.184 l -0.104,0.212 c 0,0 -6.552,-0.212 -9.672,-0.212 -2.912,0 -11.44,0.212 -11.44,0.212 l -0.208,-0.212 v -2.184 c 0,-0.416 0.312,-0.62 0.728,-0.62 l 2.08,-0.212 c 3.12,-0.312 4.472,-1.976 4.472,-3.952 v -34.632 c 0,-2.284 -1.144,-2.916 -4.472,-3.22 l -2.08,-0.216 c -0.416,0 -0.728,-0.096 -0.728,-0.416 v -2.396 l 0.104,-0.208 c 0,0 8.528,0.208 11.752,0.208 2.916,0 9.464,-0.208 9.464,-0.208 l 0.104,0.208 v 2.288 c 0,0.312 -0.208,0.416 -0.624,0.52 l -1.144,0.212 c -3.224,0.62 -4.368,1.144 -4.368,3.228 v 15.704 c 3.432,0 5.408,-1.764 9.984,-6.656 4.16,-4.58 7.384,-8.42 7.384,-10.4 0,-0.836 -0.936,-1.768 -3.016,-2.084 -0.416,-0.1 -0.624,-0.208 -0.624,-0.52 v -2.396 l 0.104,-0.1 c 0,0 8.424,0.208 11.44,0.208 2.704,0 7.28,-0.208 7.28,-0.208 l 0.312,0.1 v 2.396 c 0,0.312 -0.312,0.52 -0.832,0.52 -4.056,0.312 -6.864,0.52 -10.608,4.784 l -8.944,10.292 c -1.768,1.876 -2.392,3.016 -2.392,3.852 0,0.624 0.416,1.14 0.936,1.764 l 15.704,18.928 c 1.248,1.452 3.744,2.08 5.824,2.492 l 0.52,0.1 c 0.312,0.104 0.728,0.312 0.728,0.624 v 2.184 l -0.312,0.104 c 0,0 -5.512,-0.104 -8.424,-0.104 -2.6,0 -6.344,0.104 -6.344,0.104 l -0.104,-0.104 v -1.248 c 0,-1.356 -0.104,-2.492 -1.56,-4.156 l -11.544,-14.356 c -1.56,-2.084 -3.224,-2.596 -5.512,-2.596 v 15.404 l 0,0 z"
+      />
+      <path
+        fill="currentColor"
+        d="m 575.08736,854.23088 c 0,2.288 1.04,3.64 4.368,3.952 l 2.184,0.212 c 0.312,0 0.624,0.204 0.624,0.62 v 2.184 l -0.104,0.212 c 0,0 -7.904,-0.212 -11.128,-0.212 -2.912,0 -11.024,0.212 -11.024,0.212 l -0.208,-0.212 v -2.184 c 0,-0.416 0.312,-0.62 0.728,-0.62 l 2.08,-0.212 c 3.432,-0.312 4.472,-1.976 4.472,-3.952 v -34.632 c 0,-2.284 -1.248,-2.916 -4.472,-3.22 l -2.08,-0.216 c -0.416,0 -0.728,-0.096 -0.728,-0.416 v -2.396 l 0.104,-0.208 c 0,0 8.216,0.208 11.44,0.208 2.808,0 10.816,-0.208 10.816,-0.208 l 0.104,0.208 v 2.288 c 0,0.312 -0.208,0.52 -0.624,0.52 l -2.184,0.212 c -3.224,0.308 -4.368,1.144 -4.368,3.228 v 34.632 z"
+      />
+      <path
+        fill="currentColor"
+        d="m 597.55936,819.80288 c 0,-3.224 -1.352,-3.328 -6.24,-3.64 -0.624,0 -0.728,-0.308 -0.728,-0.52 v -2.392 l 0.208,-0.104 c 1.56,0 7.696,0.208 10.712,0.208 2.912,0 7.072,-0.208 10.92,-0.208 14.76,0 17.464,7.276 17.464,12.692 0,6.244 -3.016,16.016 -17.776,16.016 -2.6,0 -4.68,-0.212 -6.556,-1.04 v 13.928 c 0,2.288 1.248,2.812 4.58,3.328 l 2.084,0.312 c 0.416,0.104 0.728,0.212 0.728,0.624 v 2.184 l -0.1,0.208 c 0,0 -8.32,-0.208 -11.544,-0.208 -2.912,0 -10.712,0.208 -10.712,0.208 l -0.104,-0.208 v -2.184 c 0,-0.416 0.208,-0.52 0.624,-0.624 l 2.184,-0.312 c 3.224,-0.416 4.264,-1.352 4.264,-3.328 l -0.008,-34.94 0,0 z m 8.008,18.1 c 2.08,0.836 4.68,0.936 6.76,0.936 6.244,0 9.248,-3.752 9.248,-11.752 0,-8.944 -4.056,-10.92 -9.768,-10.92 -4.996,0 -6.244,0.936 -6.244,3.64 l 0.004,18.096 0,0 z"
+      />
+      <path
+        fill="currentColor"
+        d="m 647.80736,861.19888 c -3.12,0 -10.292,0.212 -10.292,0.212 l -0.108,-0.212 v -2.288 c 0,-0.204 0.108,-0.516 0.624,-0.516 l 2.396,-0.212 c 3.228,-0.312 4.164,-2.392 4.164,-4.468 v -34.32 c 0,-2.4 -1.252,-2.812 -4.164,-3.016 l -2.396,-0.216 c -0.624,-0.096 -0.624,-0.308 -0.624,-0.416 v -2.396 l 0.108,-0.208 c 0,0 8.108,0.208 11.228,0.208 h 15.288 c 3.12,0 10.508,-0.208 10.508,-0.208 l 0.212,0.208 c 0.1,4.472 0.828,8.536 1.56,12.484 l -2.596,0.416 c -1.14,-3.852 -3.116,-9.36 -9.772,-9.36 h -8.32 c -1.976,0 -3.016,0.728 -3.016,2.492 v 15.084 h 7.796 c 2.916,0 3.64,-1.248 4.06,-3.328 l 0.62,-2.184 c 0,-0.312 0.212,-0.524 0.624,-0.524 h 1.764 c 0.212,0 0.212,0.108 0.212,0.312 -0.212,2.288 -0.624,5.204 -0.624,7.7 0,2.596 0.416,4.784 0.624,7.176 l -0.212,0.212 h -1.764 c -0.516,0 -0.732,-0.212 -0.732,-0.524 l -0.52,-2.284 c -0.416,-2.084 -1.352,-3.228 -4.064,-3.228 h -7.792 v 15.916 c 0,1.972 1.136,3.948 3.016,3.948 h 9.88 c 5.304,0 8.22,-3.328 9.464,-8.74 l 2.596,0.312 -2.084,11.956 -0.208,0.208 c 0,0 -6.136,-0.208 -9.256,-0.208 l -18.2,0.012 0,0 z"
+      />
+      <path
+        fill="currentColor"
+        d="m 686.91936,858.39488 2.392,-0.212 c 3.124,-0.312 4.164,-1.248 4.164,-4.468 v -34.32 c 0,-2.712 -0.736,-2.712 -4.164,-3.016 l -2.28,-0.216 c -0.416,0 -0.736,-0.208 -0.736,-0.52 v -2.288 l 0.1,-0.208 c 0,0 9.156,0.208 11.032,0.208 1.968,0 11.024,-0.208 13.728,-0.208 17.368,0 25.9,10.816 25.9,24.648 0,18.204 -12.9,23.604 -24.44,23.604 -8.32,0 -11.956,-0.208 -15.18,-0.208 -3.124,0 -11.028,0.208 -11.028,0.208 l -0.104,-0.208 v -2.184 c -0.008,-0.3 0.204,-0.612 0.616,-0.612 z m 23.196,0 c 11.436,0 17.892,-4.26 17.892,-18.828 0,-10.812 -2.396,-23.404 -19.868,-23.404 -4.056,0 -6.656,0.624 -6.656,3.232 v 34.32 c 0,2.904 0.724,4.68 8.632,4.68 z"
+      />
+      <path
+        fill="currentColor"
+        d="m 761.60736,854.23088 c 0,2.288 1.04,3.64 4.368,3.952 l 2.184,0.212 c 0.312,0 0.624,0.204 0.624,0.62 v 2.184 l -0.104,0.212 c 0,0 -7.904,-0.212 -11.124,-0.212 -2.916,0 -11.024,0.212 -11.024,0.212 l -0.212,-0.212 v -2.184 c 0,-0.416 0.312,-0.62 0.728,-0.62 l 2.084,-0.212 c 3.428,-0.312 4.472,-1.976 4.472,-3.952 v -34.632 c 0,-2.284 -1.252,-2.916 -4.472,-3.22 l -2.084,-0.216 c -0.416,0 -0.728,-0.096 -0.728,-0.416 v -2.396 l 0.104,-0.208 c 0,0 8.216,0.208 11.432,0.208 2.808,0 10.82,-0.208 10.82,-0.208 l 0.1,0.208 v 2.288 c 0,0.312 -0.212,0.52 -0.624,0.52 l -2.184,0.212 c -3.224,0.308 -4.368,1.144 -4.368,3.228 l 0.008,34.632 0,0 z"
+      />
+      <path
+        fill="currentColor"
+        d="m 793.64736,858.18288 3.016,0.212 c 0.416,0 0.832,0.312 0.832,0.828 v 1.976 l -0.208,0.212 c 0,0 -11.336,-0.212 -13.832,-0.212 -2.708,0 -9.364,0.212 -9.364,0.212 l -0.212,-0.212 v -1.976 c 0,-0.516 0.312,-0.828 0.836,-0.828 4.58,-0.312 7.172,-1.148 10.084,-7.804 l 23.084,-54.084 c 1.14,-2.704 1.976,-3.748 3.54,-3.748 1.452,0 1.976,1.044 2.804,3.124 l 21.32,56.368 c 1.46,4.06 3.54,5.616 7.7,6.032 l 1.144,0.1 c 0.52,0 1.04,0.312 1.04,0.836 v 1.972 l -0.312,0.208 c 0,0 -8.008,-0.208 -12.064,-0.208 -3.64,0 -13.836,0.208 -13.836,0.208 l -0.1,-0.208 v -1.972 c 0,-0.524 0.208,-0.836 0.736,-0.836 l 2.912,-0.208 c 3.948,-0.308 5.412,-1.564 4.368,-4.472 l -6.344,-17.58 h -21.632 c -2.496,0 -3.12,0.416 -3.636,1.764 l -6.036,15.084 c -1.04,2.608 0.312,4.9 4.16,5.212 z m 25.48,-26.424 -10.088,-27.764 h -0.208 l -10.4,26.416 c -0.416,1.044 0.308,1.352 2.596,1.352 h 18.1 z"
+      />
+    </g>
+  </svg>
+);
+
+const fetcher = (...args: Parameters<typeof fetch>) =>
+  fetch(...args).then((res) => {
+    if (res.status === 200) return res.json();
+    throw new Error(`Content returned with status ${res.status}.`);
+  });
+
+const ENGLISH_WIKIPEDIA = 'https://en.wikipedia.org/';
+function createWikiUrl(name: string, wiki?: string): string {
+  return `${wiki || ENGLISH_WIKIPEDIA}wiki/${name}`;
+}
+function createWikiApiUrl(name: string, wiki?: string): string {
+  return `${wiki || ENGLISH_WIKIPEDIA}api/rest_v1/page/summary/${name}`;
+}
+
+function WikiChild({ page, wiki, open }: { page: string; wiki: string; open: boolean }) {
+  const { data, error } = useSWR(open ? createWikiApiUrl(page, wiki) : null, fetcher);
+  const { thumbnail, extract, content_urls } = data ?? {};
+  const url = content_urls?.desktop?.page ?? createWikiUrl(page);
+  const image = thumbnail?.source;
+  if (error) {
+    return (
+      <span>
+        <a href={url} className="block" target="_blank" rel="noreferrer">
+          <ExternalLinkIcon className="w-4 h-4 float-right" />
+          <WikiTextMark />
+        </a>
+        <div className="mt-2">Error loading "{page}" from wikipedia.</div>
+      </span>
+    );
+  }
+  return (
+    <LinkCard
+      loading={!data}
+      url={url}
+      title={<WikiTextMark />}
+      thumbnail={image}
+      description={extract}
+    />
+  );
+}
+
+export function WikiLink({
+  children,
+  page,
+  url,
+  wiki,
+}: {
+  children: React.ReactNode;
+  page: string;
+  url: string;
+  wiki: string;
+}) {
+  return (
+    <HoverPopover card={({ open }) => <WikiChild wiki={wiki} page={page} open={open} />}>
+      <a href={url} className="italic" target="_blank" rel="noreferrer">
+        {children}
+      </a>
+    </HoverPopover>
+  );
+}

package/src/math.tsx

@@ -0,0 +1,81 @@
+import classNames from 'classnames';
+import { ExclamationIcon } from '@heroicons/react/outline';
+import type { InlineMath, Math } from 'myst-spec';
+import { InlineError } from './inlineError';
+import { HashLink } from './heading';
+import type { NodeRenderer } from './types';
+
+// function Math({ value, html }: { value: string; html: string }) {
+//   const [loaded, setLoaded] = useState(false);
+//   const ref = useRef<HTMLDivElement | null>(null);
+//   useEffect(() => {
+//     import('katex').then(() => {
+//       setLoaded(true);
+//     });
+//   }, []);
+//   useEffect(() => {
+//     if (!loaded) return;
+//     import('katex').then(({ default: katex }) => {
+//       if (!ref.current) return;
+//       katex.render(value, ref.current, { displayMode: true });
+//     });
+//   }, [loaded, ref]);
+//   return (
+//     <>
+//       {(typeof document === 'undefined' || !loaded) && (
+//         <div dangerouslySetInnerHTML={{ __html: html }} />
+//       )}
+//       {loaded && <div ref={ref} />}
+//     </>
+//   );
+// }
+
+type MathLike = (InlineMath | Math) & {
+  error?: boolean;
+  message?: string;
+  html?: string;
+};
+
+const mathRenderer: NodeRenderer<MathLike> = (node) => {
+  if (node.type === 'math') {
+    if (node.error || !node.html) {
+      return (
+        <pre key={node.key} title={node.message}>
+          <span className="text-red-500">
+            <ExclamationIcon className="inline h-[1em] mr-1" />
+            {node.message}
+            {'\n\n'}
+          </span>
+          {node.value}
+        </pre>
+      );
+    }
+    const id = node.html_id || node.identifier || node.key;
+    return (
+      <div key={node.key} id={id} className={classNames('flex group')}>
+        <div
+          dangerouslySetInnerHTML={{ __html: node.html }}
+          className="overflow-x-auto flex-grow"
+        />
+        {node.enumerator && (
+          <div className="flex-none text-right m-0 pl-2 self-center relative">
+            <span>({node.enumerator})</span>
+            <HashLink id={id} align="right" kind="Equation" />
+          </div>
+        )}
+      </div>
+    );
+  }
+  if (node.error || !node.html) {
+    return <InlineError key={node.key} value={node.value} message={node.message} />;
+  }
+  return <span key={node.key} dangerouslySetInnerHTML={{ __html: node.html }} />;
+  // return <Math key={node.key} html={node.html} value={node.value as string} />;
+};
+
+const MATH_RENDERERS = {
+  math: mathRenderer,
+  inlineMath: mathRenderer,
+};
+
+export default MATH_RENDERERS;

package/src/mermaid.tsx

@@ -0,0 +1,49 @@
+import type { NodeRenderer } from './types';
+import { useEffect, useState } from 'react';
+
+async function parse(id: string, text: string): Promise<string> {
+  const { default: mermaid } = await import('mermaid');
+  return await new Promise<string>((resolve) => {
+    mermaid.render(id, text, (code) => {
+      resolve(code);
+    });
+  });
+}
+
+export function MermaidRenderer({ id, value }: { value: string; id: string }) {
+  const [graph, setGraph] = useState<string>();
+  const [error, setError] = useState<Error>();
+  useEffect(() => {
+    parse(id, value)
+      .then((svg) => {
+        setGraph(svg);
+        setError(undefined);
+      })
+      .catch((err) => {
+        setGraph(undefined);
+        setError(err as Error);
+      });
+  }, []);
+  return (
+    <figure className="">
+      {graph && <div dangerouslySetInnerHTML={{ __html: graph }}></div>}
+      {error && (
+        <pre>
+          Error parsing mermaid graph.
+          {'\n\n'}
+          {value}
+        </pre>
+      )}
+    </figure>
+  );
+}
+
+const MermaidNodeRenderer: NodeRenderer = (node) => {
+  return <MermaidRenderer key={node.key} id={node.key} value={node.value} />;
+};
+
+const MERMAID_RENDERERS = {
+  mermaid: MermaidNodeRenderer,
+};
+
+export default MERMAID_RENDERERS;