💅 🖼️ Add topic directive (#365)

See jupyter-book/mystmd#1132

.changeset/seven-hornets-double.md

@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Support various types of margin content

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;

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>

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';