🪄 Add more class support to directives

.changeset/tidy-ducks-breathe.md

@@ -0,0 +1,7 @@
+---
+'@myst-theme/diagrams': patch
+'myst-demo': patch
+'myst-to-react': patch
+---
+
+Add more support for class and identifier

packages/diagrams/src/index.tsx

@@ -10,7 +10,15 @@ async function parse(id: string, text: string): Promise<string> {
   });
 }
 
-export function MermaidRenderer({ id, value }: { value: string; id: string }) {
+export function MermaidRenderer({
+  id,
+  value,
+  className,
+}: {
+  value: string;
+  id: string;
+  className?: string;
+}) {
   const key = useId();
   const [graph, setGraph] = useState<string>();
   const [error, setError] = useState<Error>();
@@ -26,7 +34,7 @@ export function MermaidRenderer({ id, value }: { value: string; id: string }) {
       });
   }, []);
   return (
-    <figure id={id}>
+    <figure id={id} className={className}>
       {graph && <div dangerouslySetInnerHTML={{ __html: graph }}></div>}
       {error && (
         <pre>
@@ -42,5 +50,11 @@ export function MermaidRenderer({ id, value }: { value: string; id: string }) {
 }
 
 export const MermaidNodeRenderer: NodeRenderer = ({ node }) => {
-  return <MermaidRenderer id={node.html_id || node.identifier} value={node.value} />;
+  return (
+    <MermaidRenderer
+      id={node.html_id || node.identifier}
+      value={node.value}
+      className={node.class}
+    />
+  );
 };

packages/myst-demo/src/index.tsx

@@ -231,6 +231,7 @@
 }
 
 export function MySTRenderer({
+  id,
   value,
   column,
   fullscreen,
@@ -239,6 +240,7 @@
   captureTab,
   className,
 }: {
+  id?: string;
   value: string;
   column?: boolean;
   fullscreen?: boolean;
@@ -386,10 +388,11 @@
   );
 
   const mdastStage = astStage === 'pre' ? mdastPre : mdastPost;
   const { downloads, exports, parts, ...reducedFrontmatter } = frontmatter;
 
   return (
     <figure
+      id={id}
       className={classnames(
         'relative',
         {
@@ -503,5 +506,12 @@
 }
 
 export const MystDemoRenderer: NodeRenderer = ({ node }) => {
-  return <MySTRenderer value={node.value} numbering={node.numbering} />;
+  return (
+    <MySTRenderer
+      id={node.html_id || node.identifier}
+      value={node.value}
+      numbering={node.numbering}
+      className={node.class}
+    />
+  );
 };

packages/myst-to-react/src/basic.tsx

@@ -50,6 +50,10 @@ type Include = {
   type: 'include';
 };
 
+type Glossary = {
+  type: 'glossary';
+};
+
 type BasicNodeRenderers = {
   text: NodeRenderer<spec.Text>;
   span: NodeRenderer<GenericNode>;
@@ -90,6 +94,7 @@ type BasicNodeRenderers = {
   definitionTerm: NodeRenderer<DefinitionTerm>;
   definitionDescription: NodeRenderer<DefinitionDescription>;
   include: NodeRenderer<Include>;
+  glossary: NodeRenderer<Glossary>;
 };
 
 const BASIC_RENDERERS: BasicNodeRenderers = {
@@ -344,7 +349,7 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
   },
   definitionList({ node }) {
     return (
-      <dl className="my-5" id={node.html_id}>
+      <dl className="my-5" id={node.html_id || node.identifier || node.key}>
         <MyST ast={node.children} />
       </dl>
     );
@@ -355,7 +360,7 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
       node.children?.reduce((allowed, n) => allowed && allowedStrongTypes.has(n.type), true) ??
       false;
     return (
-      <dt id={node.html_id}>
+      <dt id={node.html_id || node.identifier || node.key}>
         {makeStrong ? (
           <strong>
             <MyST ast={node.children} />
@@ -384,6 +389,14 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
     // TODO, provider could give context about the filename
     return <MyST ast={node.children} />;
   },
+  glossary({ node }) {
+    // TODO, provider could give context about the filename
+    return (
+      <div id={node.html_id || node.identifier || node.key} className={node.class}>
+        <MyST ast={node.children} />
+      </div>
+    );
+  },
 };
 
 export default BASIC_RENDERERS;

packages/myst-to-react/src/dropdown.tsx

@@ -22,16 +22,19 @@ export function Details({
   title,
   children,
   open,
+  className,
 }: {
   title: React.ReactNode;
   children: React.ReactNode;
   open?: boolean;
+  className?: string;
 }) {
   return (
     <details
       className={classNames(
         'rounded-md my-5 shadow dark:shadow-2xl dark:shadow-neutral-900 overflow-hidden',
         'bg-gray-50 dark:bg-stone-800',
+        className,
       )}
       open={open}
     >
@@ -61,7 +64,7 @@ export function Details({
 export const DetailsRenderer: NodeRenderer<DropdownSpec> = ({ node }) => {
   const [title, ...rest] = node.children as any[];
   return (
-    <Details title={<MyST ast={[title]} />} open={node.open}>
+    <Details title={<MyST ast={[title]} />} open={node.open} className={node.class}>
       <MyST ast={rest} />
     </Details>
   );