🔘 Add support for buttons

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?.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

@@ -12,6 +12,7 @@ import { RRIDLink } from './rrid.js';
 import { RORLink } from './ror.js';
 import { GithubLink } from './github.js';
 import { MyST } from '../MyST.js';
+import classNames from 'classnames';
 
 type TransformedLink = Link & { internal?: boolean; protocol?: string };
 
@@ -23,15 +24,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 +57,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 +66,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 +89,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 href={node.url} className={node.class}>
       <MyST ast={node.children} />
     </a>
   );

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

@@ -82,10 +82,10 @@ 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>

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

@@ -68,10 +68,10 @@ function RRIDChild({ rrid }: { rrid: string }) {
   );
 }
 
-export function RRIDLink({ rrid }: { rrid: string }) {
+export function RRIDLink({ rrid, className }: { rrid: string; className?: string }) {
   return (
     <HoverPopover card={<RRIDChild rrid={rrid} />}>
-      <a href={`https://scicrunch.org/resolver/${rrid}`} target="_blank" rel="noopener noreferrer">
+      <a href={`https://scicrunch.org/resolver/${rrid}`} target="_blank" rel="noopener noreferrer" className={className}>
         RRID: <cite className="italic">{rrid}</cite>
       </a>
     </HoverPopover>

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

@@ -2,6 +2,7 @@ import { default as useSWR } from 'swr';
 import { ArrowTopRightOnSquareIcon as ExternalLinkIcon } from '@heroicons/react/24/outline';
 import { HoverPopover, LinkCard } from '../components/index.js';
 import React from 'react';
+import classNames from 'classnames';
 
 const WikiTextMark = () => (
   <svg
@@ -107,15 +108,17 @@ export function WikiLink({
   page,
   url,
   wiki,
+  className,
 }: {
   children: React.ReactNode;
   page: string;
   url: string;
   wiki: string;
+  className?: string;
 }) {
   return (
     <HoverPopover card={({ load }) => <WikiChild wiki={wiki} page={page} load={load} />}>
-      <a href={url} className="italic" target="_blank" rel="noreferrer">
+      <a href={url} className={classNames("italic", className)} target="_blank" rel="noreferrer">
         {children}
       </a>
     </HoverPopover>

styles/app.css

@@ -19,3 +19,5 @@
 @import './toc.css';
 @import './backmatter.css';
 @import './search.css';
+@import './button.css';
+

styles/button.css

@@ -0,0 +1,9 @@
+a.button {
+  @apply px-4 py-2 font-bold rounded;
+}
+a.button {
+  @apply text-white bg-blue-500;
+}
+a.button:hover {
+  @apply bg-blue-700;
+}