🪈 propagate class value through to react on container type directiv…

…es (#414) * 🎻 add `node.class` consistently to container & image type directives * 📗 changeset
jupyter-book · Jul 2, 2024 · 3775181 · 3775181
1 parent f685454
commit 3775181
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 9 deletions.
diff --git a/.changeset/itchy-ads-cover.md b/.changeset/itchy-ads-cover.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Allow class option to flow through to containers for `aside`, `code`, `image`, `video`, `iframe`.
diff --git a/packages/myst-to-react/src/aside.tsx b/packages/myst-to-react/src/aside.tsx
@@ -1,6 +1,7 @@
 import type { NodeRenderer } from '@myst-theme/providers';
 import { MyST } from './MyST.js';
 import type { GenericNode } from 'myst-common';
+import classNames from 'classnames';
 
 type Aside = {
   type: 'aside';
@@ -28,20 +29,20 @@ function getAsideClass(kind?: string) {
 
 export const AsideRenderer: NodeRenderer<Aside> = ({ node }) => {
   const [title, ...rest] = node.children as GenericNode[];
-  const className = getAsideClass(node.kind);
+  const classes = getAsideClass(node.kind);
   if (title.type !== 'admonitionTitle') {
     return (
-      <aside className={className.container}>
+      <aside className={classNames(classes.container, node.class)}>
         <MyST ast={node.children} />
       </aside>
     );
   }
   return (
-    <aside className={className.container}>
-      <div className={className.title}>
+    <aside className={classNames(classes.container, node.class)}>
+      <div className={classes.title}>
         <MyST ast={title} />
       </div>
-      <div className={className.body}>
+      <div className={classes.body}>
         <MyST ast={rest} />
       </div>
     </aside>

diff --git a/packages/myst-to-react/src/code.tsx b/packages/myst-to-react/src/code.tsx
@@ -127,7 +127,7 @@ const code: NodeRenderer<Code & { executable: boolean }> = ({ node }) => {
       shadow
       border={node.executable}
       background={!node.executable}
-      className={classNames({ hidden: node.visibility === 'remove' })}
+      className={classNames({ hidden: node.visibility === 'remove' }, node.class)}
     />
   );
 };

diff --git a/packages/myst-to-react/src/iframe.tsx b/packages/myst-to-react/src/iframe.tsx
@@ -1,4 +1,5 @@
 import type { NodeRenderer } from '@myst-theme/providers';
+import classNames from 'classnames';
 
 /** This is duplicated in image, but a bit different logic */
 function getStyleValue(width?: number | string): number | undefined {
@@ -27,7 +28,7 @@ export const IFrame: NodeRenderer = ({ node }) => {
     <div
       id={node.label || undefined}
       style={{ textAlign: node.align || 'center' }}
-      className="leading-[0]"
+      className={classNames('leading-[0]', node.class)}
     >
       <div
         className="relative inline-block"

diff --git a/packages/myst-to-react/src/image.tsx b/packages/myst-to-react/src/image.tsx
@@ -38,13 +38,15 @@ function alignToMargin(align: string) {
 }
 
 function Video({
+  className,
   id,
   src,
   urlSource,
   align = 'center',
   width,
   height,
 }: {
+  className?: string;
   id?: string;
   src: string;
   urlSource?: string;
@@ -54,6 +56,7 @@ function Video({
 }) {
   return (
     <video
+      // className={className}
       id={id}
       style={{
         width: getStyleValue(width),
@@ -73,6 +76,7 @@ function Video({
 }
 
 function Picture({
+  className,
   id,
   src,
   srcOptimized,
@@ -82,6 +86,7 @@ function Picture({
   width,
   height,
 }: {
+  className?: string;
   id?: string;
   src: string;
   srcOptimized?: string;
@@ -93,7 +98,15 @@ function Picture({
 }) {
   if (src.endsWith('.mp4') || urlSource?.endsWith('.mp4')) {
     return (
-      <Video id={id} width={width} height={height} align={align} src={src} urlSource={urlSource} />
+      <Video
+        className={className}
+        id={id}
+        width={width}
+        height={height}
+        align={align}
+        src={src}
+        urlSource={urlSource}
+      />
     );
   }
   const image = (
@@ -111,7 +124,7 @@ function Picture({
   );
   if (!srcOptimized) return image;
   return (
-    <picture>
+    <picture className={className}>
       <source srcSet={srcOptimized} type="image/webp" />
       {image}
     </picture>
@@ -121,6 +134,7 @@ function Picture({
 export const Image: NodeRenderer<ImageNode> = ({ node }) => {
   return (
     <Picture
+      className={node.class}
       id={node.html_id || node.identifier || node.key}
       src={node.url}
       srcOptimized={(node as any).urlOptimized}