From 89d7ac886f595385e483aec6295e5a0efd84d871 Mon Sep 17 00:00:00 2001
From: Angus Hollands <goosey15@gmail.com>
Date: Tue, 19 Nov 2024 14:29:51 +0000
Subject: [PATCH 1/3] feat: add more class support

---
 packages/diagrams/src/index.tsx         | 20 +++++++++++++++++---
 packages/myst-demo/src/index.tsx        |  5 ++++-
 packages/myst-to-react/src/basic.tsx    | 17 +++++++++++++++--
 packages/myst-to-react/src/dropdown.tsx |  5 ++++-
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/packages/diagrams/src/index.tsx b/packages/diagrams/src/index.tsx
index af3819440..965774995 100644
--- a/packages/diagrams/src/index.tsx
+++ b/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}
+    />
+  );
 };
diff --git a/packages/myst-demo/src/index.tsx b/packages/myst-demo/src/index.tsx
index 13b5e4800..9bb50b99c 100644
--- a/packages/myst-demo/src/index.tsx
+++ b/packages/myst-demo/src/index.tsx
@@ -231,6 +231,7 @@ async function parse(
 }
 
 export function MySTRenderer({
+	id,
   value,
   column,
   fullscreen,
@@ -239,6 +240,7 @@ export function MySTRenderer({
   captureTab,
   className,
 }: {
+	id?: string;
   value: string;
   column?: boolean;
   fullscreen?: boolean;
@@ -390,6 +392,7 @@ export function MySTRenderer({
 
   return (
     <figure
+      id={id}
       className={classnames(
         'relative',
         {
@@ -503,5 +506,5 @@ export function MySTRenderer({
 }
 
 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} />;
 };
diff --git a/packages/myst-to-react/src/basic.tsx b/packages/myst-to-react/src/basic.tsx
index e6632d632..cdfaec93a 100644
--- a/packages/myst-to-react/src/basic.tsx
+++ b/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;
diff --git a/packages/myst-to-react/src/dropdown.tsx b/packages/myst-to-react/src/dropdown.tsx
index a21afa272..f1546a17b 100644
--- a/packages/myst-to-react/src/dropdown.tsx
+++ b/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>
   );

From 26c06b65ac6e55b4e6369881cf0b4393c7430a90 Mon Sep 17 00:00:00 2001
From: Angus Hollands <goosey15@gmail.com>
Date: Tue, 19 Nov 2024 14:34:34 +0000
Subject: [PATCH 2/3] chore: add changeset

---
 .changeset/tidy-ducks-breathe.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/tidy-ducks-breathe.md

diff --git a/.changeset/tidy-ducks-breathe.md b/.changeset/tidy-ducks-breathe.md
new file mode 100644
index 000000000..f84996ffa
--- /dev/null
+++ b/.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

From 196e7bab81d0d994770a27a385c9377e02eeac84 Mon Sep 17 00:00:00 2001
From: Angus Hollands <goosey15@gmail.com>
Date: Tue, 19 Nov 2024 15:35:48 +0000
Subject: [PATCH 3/3] chore: run prettier

---
 packages/myst-demo/src/index.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/myst-demo/src/index.tsx b/packages/myst-demo/src/index.tsx
index 9bb50b99c..75bd5646b 100644
--- a/packages/myst-demo/src/index.tsx
+++ b/packages/myst-demo/src/index.tsx
@@ -231,7 +231,7 @@ async function parse(
 }
 
 export function MySTRenderer({
-	id,
+  id,
   value,
   column,
   fullscreen,
@@ -240,7 +240,7 @@ export function MySTRenderer({
   captureTab,
   className,
 }: {
-	id?: string;
+  id?: string;
   value: string;
   column?: boolean;
   fullscreen?: boolean;
@@ -506,5 +506,12 @@ export function MySTRenderer({
 }
 
 export const MystDemoRenderer: NodeRenderer = ({ node }) => {
-  return <MySTRenderer id={node.html_id || node.identifier} value={node.value} numbering={node.numbering} className={node.class} />;
+  return (
+    <MySTRenderer
+      id={node.html_id || node.identifier}
+      value={node.value}
+      numbering={node.numbering}
+      className={node.class}
+    />
+  );
 };