From c2db8fbf76c26eaa4ee3d6da7005e67fe4edfde9 Mon Sep 17 00:00:00 2001
From: Jenny Wong <jnywong.pro@gmail.com>
Date: Mon, 27 Jan 2025 17:38:59 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=98=20Add=20support=20for=20buttons=20?=
 =?UTF-8?q?(#521)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Ref: https://github.com/2i2c-org/infrastructure/issues/5346

Add LinkOrButton renderer

Co-authored-by: Angus Hollands <angus@oieltd.com>

* Updated links and add initial styling

* fix: style names

* lint: prettier

* Remove unused class from import

* Revert "Remove unused class from import"

This reverts commit da3d945c9f12b2b0621ee348c91cfa97fa857774.

* Revert "lint: prettier"

This reverts commit efb41a5a0e0c30d32a25bd1efd3af0e2914b4043.

* refactor: use class only

* wip: add support for xrefs

* chore: run linter

* chore: add changeset

* fix: use tighter check for buttons

* fix: revert previous rel

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

* Add buttonRole to parser

* Add buttonRole

* Add myst-ext-button package

---------

Co-authored-by: Angus Hollands <angus@oieltd.com>
Co-authored-by: Angus Hollands <goosey15@gmail.com>
Co-authored-by: Rowan Cockett <rowanc1@gmail.com>
---
 .changeset/serious-grapes-punch.md            |  6 +++
 packages/myst-demo/package.json               |  1 +
 packages/myst-demo/src/index.tsx              | 15 ++++----
 packages/myst-to-react/src/basic.tsx          |  2 +-
 packages/myst-to-react/src/crossReference.tsx | 27 ++++++++++---
 packages/myst-to-react/src/links/github.tsx   | 14 +++++--
 packages/myst-to-react/src/links/index.tsx    | 38 +++++++++++++------
 packages/myst-to-react/src/links/ror.tsx      | 17 ++++++++-
 packages/myst-to-react/src/links/rrid.tsx     |  9 ++++-
 packages/myst-to-react/src/links/wiki.tsx     |  5 ++-
 styles/app.css                                |  1 +
 styles/button.css                             |  9 +++++
 12 files changed, 111 insertions(+), 33 deletions(-)
 create mode 100644 .changeset/serious-grapes-punch.md
 create mode 100644 styles/button.css

diff --git a/.changeset/serious-grapes-punch.md b/.changeset/serious-grapes-punch.md
new file mode 100644
index 000000000..8bd6d0843
--- /dev/null
+++ b/.changeset/serious-grapes-punch.md
@@ -0,0 +1,6 @@
+---
+'myst-to-react': patch
+'@myst-theme/styles': patch
+---
+
+Render links with `button` class as buttons
diff --git a/packages/myst-demo/package.json b/packages/myst-demo/package.json
index 07df13e48..6cb098874 100644
--- a/packages/myst-demo/package.json
+++ b/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",
diff --git a/packages/myst-demo/src/index.tsx b/packages/myst-demo/src/index.tsx
index 75bd5646b..7ac0ae22d 100644
--- a/packages/myst-demo/src/index.tsx
+++ b/packages/myst-demo/src/index.tsx
@@ -115,6 +115,7 @@ async function parse(
   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 @@ async function parse(
         proofDirective,
         ...exerciseDirectives,
       ],
-      // roles: [reactiveRole],
+      roles: [buttonRole],
       vfile,
     });
   const mdast = parseMyst(text);
@@ -397,19 +398,19 @@ export function MySTRenderer({
         '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>
@@ -417,7 +418,7 @@ export function MySTRenderer({
             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 @@ export function MySTRenderer({
       </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 @@ export function MySTRenderer({
           {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`}
diff --git a/packages/myst-to-react/src/basic.tsx b/packages/myst-to-react/src/basic.tsx
index cdfaec93a..9292342a2 100644
--- a/packages/myst-to-react/src/basic.tsx
+++ b/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>
     );
diff --git a/packages/myst-to-react/src/crossReference.tsx b/packages/myst-to-react/src/crossReference.tsx
index a7a8c1602..3ce910bb1 100644
--- a/packages/myst-to-react/src/crossReference.tsx
+++ b/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} />
diff --git a/packages/myst-to-react/src/links/github.tsx b/packages/myst-to-react/src/links/github.tsx
index 960e6aa25..9adaf91d9 100644
--- a/packages/myst-to-react/src/links/github.tsx
+++ b/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>
diff --git a/packages/myst-to-react/src/links/index.tsx b/packages/myst-to-react/src/links/index.tsx
index f4d039ce8..5929cdca6 100644
--- a/packages/myst-to-react/src/links/index.tsx
+++ b/packages/myst-to-react/src/links/index.tsx
@@ -23,7 +23,15 @@ 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);
@@ -31,7 +39,7 @@ function InternalLink({ url, children }: { url: string; children: React.ReactNod
   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>
   );
diff --git a/packages/myst-to-react/src/links/ror.tsx b/packages/myst-to-react/src/links/ror.tsx
index 6a8b1bcc0..5a1234a74 100644
--- a/packages/myst-to-react/src/links/ror.tsx
+++ b/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>
diff --git a/packages/myst-to-react/src/links/rrid.tsx b/packages/myst-to-react/src/links/rrid.tsx
index 0c5dad389..5e96e7f05 100644
--- a/packages/myst-to-react/src/links/rrid.tsx
+++ b/packages/myst-to-react/src/links/rrid.tsx
@@ -68,10 +68,15 @@ 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>
diff --git a/packages/myst-to-react/src/links/wiki.tsx b/packages/myst-to-react/src/links/wiki.tsx
index 5c17ec120..27dcc53b7 100644
--- a/packages/myst-to-react/src/links/wiki.tsx
+++ b/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>
diff --git a/styles/app.css b/styles/app.css
index a11682576..1ed09de68 100644
--- a/styles/app.css
+++ b/styles/app.css
@@ -19,3 +19,4 @@
 @import './toc.css';
 @import './backmatter.css';
 @import './search.css';
+@import './button.css';
diff --git a/styles/button.css b/styles/button.css
new file mode 100644
index 000000000..7d91a322d
--- /dev/null
+++ b/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;
+}