From a47f23717664c51a0d5cdad8145d2c8848811dd0 Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Wed, 22 Nov 2023 13:26:31 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=89=20Minor=20improvements=20for=20han?=
 =?UTF-8?q?dling=20subfigures?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

See executablebooks/mystmd#770
---
 .changeset/strong-masks-cry.md       |  7 +++++++
 packages/jupyter/src/figure.tsx      | 22 ++++++++++++++--------
 packages/myst-to-react/src/basic.tsx |  5 ++++-
 styles/figures.css                   |  7 +++++++
 4 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/strong-masks-cry.md

diff --git a/.changeset/strong-masks-cry.md b/.changeset/strong-masks-cry.md
new file mode 100644
index 000000000..7634177ed
--- /dev/null
+++ b/.changeset/strong-masks-cry.md
@@ -0,0 +1,7 @@
+---
+'myst-to-react': patch
+'@myst-theme/jupyter': patch
+'@myst-theme/styles': patch
+---
+
+Improve handling for subfigures
diff --git a/packages/jupyter/src/figure.tsx b/packages/jupyter/src/figure.tsx
index 8eda0824d..6b5299d1a 100644
--- a/packages/jupyter/src/figure.tsx
+++ b/packages/jupyter/src/figure.tsx
@@ -1,6 +1,7 @@
 import { SourceFileKind } from 'myst-spec-ext';
 import { type GenericNode } from 'myst-common';
 import { DEFAULT_RENDERERS, MyST } from 'myst-to-react';
+import classNames from 'classnames';
 import { OutputDecoration } from './decoration.js';
 
 export function Figure({ node }: { node: GenericNode }) {
@@ -11,15 +12,20 @@ export function Figure({ node }: { node: GenericNode }) {
     const placeholder = node.children?.find((child) => child.type === 'image' && child.placeholder);
     const others = node.children?.filter((child) => !(child.type === 'image' && child.placeholder));
     return (
-      <OutputDecoration
-        key={node.key}
-        outputId={output.id}
-        placeholder={placeholder}
-        title={node.source?.title}
-        url={node.source?.url}
+      <figure
+        id={node.html_id || node.identifier || node.key}
+        className={classNames({ subcontainer: node.subcontainer }, node.class)}
       >
-        <MyST ast={others} />
-      </OutputDecoration>
+        <OutputDecoration
+          key={node.key}
+          outputId={output.id}
+          placeholder={placeholder}
+          title={node.source?.title}
+          url={node.source?.url}
+        >
+          <MyST ast={others} />
+        </OutputDecoration>
+      </figure>
     );
   }
   return <Container node={node} />;
diff --git a/packages/myst-to-react/src/basic.tsx b/packages/myst-to-react/src/basic.tsx
index 8660de5e2..df877db20 100644
--- a/packages/myst-to-react/src/basic.tsx
+++ b/packages/myst-to-react/src/basic.tsx
@@ -214,7 +214,10 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
   },
   container({ node }) {
     return (
-      <figure id={node.html_id || node.identifier || node.key} className={classNames(node.class)}>
+      <figure
+        id={node.html_id || node.identifier || node.key}
+        className={classNames({ subcontainer: node.subcontainer }, node.class)}
+      >
         <MyST ast={node.children} />
       </figure>
     );
diff --git a/styles/figures.css b/styles/figures.css
index 2981d746d..00aa509f7 100644
--- a/styles/figures.css
+++ b/styles/figures.css
@@ -8,6 +8,13 @@ figure.quote figcaption > p:before {
 figure.code > div {
   margin: 0;
 }
+figure.subcontainer {
+  margin-bottom: 0;
+}
+figure.subcontainer figcaption {
+  margin-top: 0.25em;
+  text-align: center;
+}
 figure figcaption > p {
   margin-top: 0 !important;
   margin-bottom: 0 !important;