🔘 Add support for buttons

.changeset/serious-grapes-punch.md

@@ -0,0 +1,6 @@
+---
+'myst-to-react': patch
+'@myst-theme/styles': patch
+---
+
+Render links with `button` class as buttons

packages/myst-demo/package.json

@@ -26,6 +26,7 @@
     "myst-common": "^1.7.3",
     "myst-config": "^1.7.3",
     "myst-directives": "^1.5.7",
+    "myst-ext-button": "^0.0.0",
     "myst-ext-card": "^1.0.9",
     "myst-ext-exercise": "^1.0.8",
     "myst-ext-grid": "^1.0.8",

packages/myst-demo/src/index.tsx

@@ -115,6 +115,7 @@
   const { default: mystToTypst } = await import('myst-to-typst');
   const { default: mystToJats } = await import('myst-to-jats').catch(() => ({ default: null }));
   const { mystToHtml } = await import('myst-to-html');
+  const { buttonRole } = await import('myst-ext-button');
   const { cardDirective } = await import('myst-ext-card');
   const { gridDirective } = await import('myst-ext-grid');
   const { tabDirectives } = await import('myst-ext-tabs');
@@ -131,7 +132,7 @@
         proofDirective,
         ...exerciseDirectives,
       ],
-      // roles: [reactiveRole],
+      roles: [buttonRole],
       vfile,
     });
   const mdast = parseMyst(text);
@@ -388,7 +389,7 @@
   );
 
   const mdastStage = astStage === 'pre' ? mdastPre : mdastPost;
   const { downloads, exports, parts, ...reducedFrontmatter } = frontmatter;
 
   return (
     <figure
@@ -397,27 +398,27 @@
         'relative',
         {
           'grid grid-cols-2 gap-0 grid-rows-[3rem_1fr]': column,
-          'shadow-lg rounded': !fullscreen,
+          'rounded shadow-lg': !fullscreen,
           'm-0': fullscreen,
         },
         className,
       )}
     >
       {column && (
-        <div className="flex flex-row items-stretch h-full col-span-2 px-2 border dark:border-slate-600">
+        <div className="flex flex-row col-span-2 items-stretch px-2 h-full border dark:border-slate-600">
           <div className="flex-grow"></div>
           {demoMenu}
         </div>
       )}
-      <div className={classnames('myst relative', { 'overflow-auto': column })}>
+      <div className={classnames('relative myst', { 'overflow-auto': column })}>
         <CopyIcon text={text} className="absolute right-0 p-1" />
         <label>
           <span className="sr-only">Edit the MyST Markdown text</span>
           <textarea
             ref={area}
             value={text}
             className={classnames(
-              'block p-6 shadow-inner resize-none w-full font-mono bg-slate-50/50 dark:bg-slate-800/50 outline-none',
+              'block p-6 w-full font-mono shadow-inner outline-none resize-none bg-slate-50/50 dark:bg-slate-800/50',
               { 'text-sm': !column },
               { 'h-full': column },
             )}
@@ -427,7 +428,7 @@
       </div>
       {/* The `exclude-from-outline` class is excluded from the document outline */}
       <div
-        className={classnames('exclude-from-outline relative min-h-1 dark:bg-slate-900', {
+        className={classnames('relative exclude-from-outline min-h-1 dark:bg-slate-900', {
           'overflow-auto': column,
         })}
       >
@@ -464,7 +465,7 @@
           {previewType === 'DOCX' && (
             <div>
               <button
-                className="p-3 border rounded"
+                className="p-3 rounded border"
                 onClick={() => saveDocxFile('demo.docx', references.article)}
                 title={`Download Micorsoft Word`}
                 aria-label={`Download Micorsoft Word`}

packages/myst-to-react/src/basic.tsx

@@ -167,7 +167,7 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
   },
   link({ node }) {
     return (
-      <a target="_blank" href={node.url} rel="noreferrer">
+      <a target="_blank" href={node.url} className={node.class} rel="noreferrer">
         <MyST ast={node.children} />
       </a>
     );

packages/myst-to-react/src/crossReference.tsx

@@ -16,6 +16,7 @@ import { MyST } from './MyST.js';
 import type { GenericNode, GenericParent } from 'myst-common';
 import { selectMdastNodes } from 'myst-common';
 import { scrollToElement } from './hashLink.js';
+import classNames from 'classnames';
 
 const fetcher = (...args: Parameters<typeof fetch>) =>
   fetch(...args).then((res) => {
@@ -126,6 +127,7 @@ export function CrossReferenceHover({
   remoteBaseUrl: remoteBaseUrlIn,
   children,
   identifier,
+  className,
   htmlId = '',
 }: {
   remote?: boolean;
@@ -134,6 +136,7 @@ export function CrossReferenceHover({
   remoteBaseUrl?: string;
   identifier: string;
   htmlId?: string;
+  className?: string;
   children: React.ReactNode;
 }) {
   const Link = useLinkProvider();
@@ -150,6 +153,7 @@ export function CrossReferenceHover({
     const el = document.getElementById(htmlId);
     scrollToElement(el, { htmlId });
   };
+  const isButtonLike = (className ?? '').split(' ').includes('button');
   return (
     <HoverPopover
       card={({ load }) => (
@@ -159,7 +163,7 @@ export function CrossReferenceHover({
               <div className="w-full px-3 py-1 text-xs border-b bg-gray-50">
                 <strong className="text-gray-700">Source: </strong>
                 <a
-                  className="text-gray-700"
+                  className={classNames('text-gray-700', className)}
                   href={`${createRemoteBaseUrl(url, remoteBaseUrl)}${htmlId ? `#${htmlId}` : ''}`}
                   target="_blank"
                 >
@@ -179,7 +183,7 @@ export function CrossReferenceHover({
           <a
             href={`${createRemoteBaseUrl(url, remoteBaseUrl)}${htmlId ? `#${htmlId}` : ''}`}
             target="_blank"
-            className="hover-link"
+            className={classNames({ 'hover-link': !isButtonLike }, className)}
           >
             {children}
           </a>
@@ -188,13 +192,17 @@ export function CrossReferenceHover({
           <Link
             to={`${withBaseurl(url, baseurl)}${htmlId ? `#${htmlId}` : ''}`}
             prefetch="intent"
-            className="hover-link"
+            className={classNames({ 'hover-link': !isButtonLike }, className)}
           >
             {children}
           </Link>
         )}
         {!remote && (
-          <a href={`#${htmlId}`} onClick={scroll} className="hover-link">
+          <a
+            href={`#${htmlId}`}
+            onClick={scroll}
+            className={classNames({ 'hover-link': !isButtonLike }, className)}
+          >
             {children}
           </a>
         )}
@@ -212,7 +220,15 @@ export const CrossReferenceNode: NodeRenderer<CrossReference> = ({ node }) => {
       />
     );
   }
-  const { remote, url, dataUrl, remoteBaseUrl, identifier, html_id } = node as any;
+  const {
+    remote,
+    url,
+    dataUrl,
+    remoteBaseUrl,
+    identifier,
+    html_id,
+    class: className,
+  } = node as any;
   return (
     <CrossReferenceHover
       identifier={identifier}
@@ -221,6 +237,7 @@ export const CrossReferenceNode: NodeRenderer<CrossReference> = ({ node }) => {
       url={url}
       dataUrl={dataUrl}
       remoteBaseUrl={remoteBaseUrl}
+      className={className}
     >
       {node.prefix && <>{node.prefix} </>}
       <MyST ast={node.children} />

packages/myst-to-react/src/links/github.tsx

@@ -51,6 +51,7 @@ function GithubFilePreview({
   from,
   to,
   open,
+  className,
 }: {
   url: string;
   raw: string;
@@ -60,6 +61,7 @@ function GithubFilePreview({
   from?: number;
   to?: number;
   open: boolean;
+  className?: string;
 }) {
   const { data, error } = useLoadWhenOpen(open, raw, fetcher);
   let code = data;
@@ -68,7 +70,7 @@ function GithubFilePreview({
       <div className="hover-document article w-[500px] sm:max-w-[500px]">
         <a
           href={url}
-          className="block text-inherit hover:text-inherit"
+          className={classNames('block text-inherit hover:text-inherit', className)}
           target="_blank"
           rel="noreferrer"
         >
@@ -138,12 +140,14 @@ function GithubIssuePreview({
   repo,
   issue_number,
   open,
+  className,
 }: {
   url: string;
   org: string;
   repo: string;
   issue_number?: string | number;
   open: boolean;
+  className?: string;
 }) {
   const { data, error } = useLoadWhenOpen(
     open,
@@ -163,7 +167,7 @@ function GithubIssuePreview({
       <div className="hover-document article">
         <a
           href={url}
-          className="block text-inherit hover:text-inherit"
+          className={classNames('block text-inherit hover:text-inherit', className)}
           target="_blank"
           rel="noreferrer"
         >
@@ -238,6 +242,7 @@ export function GithubLink({
   from,
   to,
   issue_number,
+  className,
 }: {
   children: React.ReactNode;
   kind: 'file' | 'issue';
@@ -249,6 +254,7 @@ export function GithubLink({
   from?: number;
   issue_number?: string | number;
   to?: number;
+  className?: string;
 }) {
   return (
     <HoverPopover
@@ -264,6 +270,7 @@ export function GithubLink({
               open={load}
               org={org}
               repo={repo}
+              className={className}
             />
           );
         }
@@ -275,12 +282,13 @@ export function GithubLink({
               org={org}
               issue_number={issue_number}
               repo={repo}
+              className={className}
             />
           );
         }
       }}
     >
-      <a href={url} className="italic" target="_blank" rel="noreferrer">
+      <a href={url} className={classNames('italic', className)} target="_blank" rel="noreferrer">
         {children}
       </a>
     </HoverPopover>

packages/myst-to-react/src/links/index.tsx

@@ -23,15 +23,23 @@ function getPageInfo(site: SiteManifest | undefined, path: string) {
   return project.pages.find((p) => p.slug === (pageSlug || projectSlug));
 }
 
-function InternalLink({ url, children }: { url: string; children: React.ReactNode }) {
+function InternalLink({
+  url,
+  children,
+  className,
+}: {
+  url: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
   const Link = useLinkProvider();
   const site = useSiteManifest();
   const page = getPageInfo(site, url);
   const baseurl = useBaseurl();
   const skipPreview = !page || (!page.description && !page.thumbnail);
   if (!page || skipPreview) {
     return (
-      <Link to={withBaseurl(url, baseurl)} prefetch="intent">
+      <Link to={withBaseurl(url, baseurl)} prefetch="intent" className={className}>
         {children}
       </Link>
     );
@@ -48,7 +56,7 @@ function InternalLink({ url, children }: { url: string; children: React.ReactNod
         />
       }
     >
-      <Link to={withBaseurl(url, baseurl)} prefetch="intent">
+      <Link to={withBaseurl(url, baseurl)} prefetch="intent" className={className}>
         {children}
       </Link>
     </HoverPopover>
@@ -57,7 +65,12 @@ function InternalLink({ url, children }: { url: string; children: React.ReactNod
 
 export const WikiLinkRenderer: NodeRenderer<TransformedLink> = ({ node }) => {
   return (
-    <WikiLink url={node.url} page={node.data?.page as string} wiki={node.data?.wiki as string}>
+    <WikiLink
+      url={node.url}
+      page={node.data?.page as string}
+      wiki={node.data?.wiki as string}
+      className={node.class}
+    >
       <MyST ast={node.children} />
     </WikiLink>
   );
@@ -75,31 +88,32 @@ export const GithubLinkRenderer: NodeRenderer<TransformedLink> = ({ node }) => {
       from={node.data?.from as number | undefined}
       to={node.data?.to as number | undefined}
       issue_number={node.data?.issue_number as number | undefined}
+      className={node.class}
     >
       <MyST ast={node.children} />
     </GithubLink>
   );
 };
 
-export const RRIDLinkRenderer: NodeRenderer<TransformedLink> = ({ node }) => (
-  <RRIDLink rrid={node.data?.rrid as string} />
-);
+export const RRIDLinkRenderer: NodeRenderer<TransformedLink> = ({ node }) => {
+  return <RRIDLink rrid={node.data?.rrid as string} className={node.class} />;
+};
 
-export const RORLinkRenderer: NodeRenderer<TransformedLink> = ({ node }) => (
-  <RORLink node={node} ror={node.data?.ror as string} />
-);
+export const RORLinkRenderer: NodeRenderer<TransformedLink> = ({ node }) => {
+  return <RORLink node={node} ror={node.data?.ror as string} className={node.class} />;
+};
 
 export const SimpleLink: NodeRenderer<TransformedLink> = ({ node }) => {
   const internal = node.internal ?? false;
   if (internal) {
     return (
-      <InternalLink url={node.url}>
+      <InternalLink url={node.url} className={node.class}>
         <MyST ast={node.children} />
       </InternalLink>
     );
   }
   return (
-    <a target="_blank" href={node.url} rel="noreferrer">
+    <a target="_blank" rel="noreferrer" href={node.url} className={node.class}>
       <MyST ast={node.children} />
     </a>
   );

packages/myst-to-react/src/links/ror.tsx

@@ -82,10 +82,23 @@ function RORChild({ ror }: { ror: string }) {
   );
 }
 
-export function RORLink({ node, ror }: { node: GenericNode; ror: string }) {
+export function RORLink({
+  node,
+  ror,
+  className,
+}: {
+  node: GenericNode;
+  ror: string;
+  className?: string;
+}) {
   return (
     <HoverPopover card={<RORChild ror={ror} />}>
-      <a href={`https://ror.org/${ror}`} target="_blank" rel="noopener noreferrer">
+      <a
+        href={`https://ror.org/${ror}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={className}
+      >
         <MyST ast={node.children} />
       </a>
     </HoverPopover>