From 79c5f0366b904fd71faba0c0f967b6410c35478b Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Fri, 19 Apr 2024 15:19:17 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=20=F0=9F=96=BC=EF=B8=8F=20Add=20to?=
 =?UTF-8?q?pic=20directive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

See executablebooks/mystmd#1132
---
 .changeset/seven-hornets-double.md   |  5 +++
 packages/myst-to-react/src/aside.tsx | 55 ++++++++++++++++++++++++++++
 packages/myst-to-react/src/basic.tsx | 12 ------
 packages/myst-to-react/src/index.tsx |  2 +
 4 files changed, 62 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/seven-hornets-double.md
 create mode 100644 packages/myst-to-react/src/aside.tsx

diff --git a/.changeset/seven-hornets-double.md b/.changeset/seven-hornets-double.md
new file mode 100644
index 000000000..2281b5e34
--- /dev/null
+++ b/.changeset/seven-hornets-double.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Support various types of margin content
diff --git a/packages/myst-to-react/src/aside.tsx b/packages/myst-to-react/src/aside.tsx
new file mode 100644
index 000000000..c9e4f8a03
--- /dev/null
+++ b/packages/myst-to-react/src/aside.tsx
@@ -0,0 +1,55 @@
+import type { NodeRenderer } from '@myst-theme/providers';
+import { MyST } from './MyST.js';
+import type { GenericNode } from 'myst-common';
+
+type Aside = {
+  type: 'aside';
+};
+
+function getAsideClass(kind?: string) {
+  switch (kind) {
+    case 'topic':
+      return {
+        container: 'my-5 shadow dark:bg-stone-800 overflow-hidden dark:border-l-4 border-slate-400',
+        title:
+          'm-0 font-medium py-2 px-4 flex min-w-0 text-md border-y dark:border-y-0 bg-gray-50/80 dark:bg-slate-900',
+        body: 'px-4',
+      };
+    case 'margin':
+    case 'sidebar':
+    default:
+      return {
+        container: 'text-sm lg:h-0 col-margin-right',
+        title: 'text-base font-semibold',
+        body: '',
+      };
+  }
+}
+
+export const AsideRenderer: NodeRenderer<Aside> = ({ node }) => {
+  const [title, ...rest] = node.children as GenericNode[];
+  const className = getAsideClass(node.kind);
+  if (title.type !== 'admonitionTitle') {
+    return (
+      <aside className={className.container}>
+        <MyST ast={node.children} />
+      </aside>
+    );
+  }
+  return (
+    <aside className={className.container}>
+      <div className={className.title}>
+        <MyST ast={title} />
+      </div>
+      <div className={className.body}>
+        <MyST ast={rest} />
+      </div>
+    </aside>
+  );
+};
+
+const ASIDE_RENDERERS = {
+  aside: AsideRenderer,
+};
+
+export default ASIDE_RENDERERS;
diff --git a/packages/myst-to-react/src/basic.tsx b/packages/myst-to-react/src/basic.tsx
index f0a2c9293..724a67608 100644
--- a/packages/myst-to-react/src/basic.tsx
+++ b/packages/myst-to-react/src/basic.tsx
@@ -42,10 +42,6 @@ type CaptionNumber = {
   identifier: string;
 };
 
-type Aside = {
-  type: 'aside';
-};
-
 type Keyboard = {
   type: 'keyboard';
 };
@@ -93,7 +89,6 @@ type BasicNodeRenderers = {
   definitionList: NodeRenderer<DefinitionList>;
   definitionTerm: NodeRenderer<DefinitionTerm>;
   definitionDescription: NodeRenderer<DefinitionDescription>;
-  aside: NodeRenderer<Aside>;
   include: NodeRenderer<Include>;
 };
 
@@ -378,13 +373,6 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
       </dd>
     );
   },
-  aside({ node }) {
-    return (
-      <aside className="text-sm lg:h-0 col-margin-right">
-        <MyST ast={node.children} />
-      </aside>
-    );
-  },
   keyboard({ node }) {
     return (
       <kbd>
diff --git a/packages/myst-to-react/src/index.tsx b/packages/myst-to-react/src/index.tsx
index 4bb28de2b..0ae7642bf 100644
--- a/packages/myst-to-react/src/index.tsx
+++ b/packages/myst-to-react/src/index.tsx
@@ -19,6 +19,7 @@ import EXT_RENDERERS from './extensions/index.js';
 import INLINE_EXPRESSION_RENDERERS from './inlineExpression.js';
 import PROOF_RENDERERS from './proof.js';
 import EXERCISE_RENDERERS from './exercise.js';
+import ASIDE_RENDERERS from './aside.js';
 import UNKNOWN_MYST_RENDERERS from './unknown.js';
 
 export { CopyIcon, HoverPopover, Tooltip, LinkCard } from './components/index.js';
@@ -51,6 +52,7 @@ export const DEFAULT_RENDERERS: Record<string, NodeRenderer> = {
   ...EXT_RENDERERS,
   ...PROOF_RENDERERS,
   ...EXERCISE_RENDERERS,
+  ...ASIDE_RENDERERS,
 };
 
 export { MyST } from './MyST.js';