fix: variables + glossary

__tests__/transformers/readme-components.test.ts

@@ -9,7 +9,7 @@ describe('Readme Components Transformer', () => {
     { md: '<Table />', type: 'table' },
   ];
 
-  it.only.each(nodes)('transforms $md into a(n) $type node', ({ md, type }) => {
+  it.each(nodes)('transforms $md into a(n) $type node', ({ md, type }) => {
     const tree = mdast(md);
 
     expect(tree.children[0].type).toBe(type);
@@ -107,7 +107,7 @@ Second
 `;
 
     const tree = mdast(mdx);
-    expect(tree.children[0].children[1].type).toBe('readme-glossary-item');
+    expect(tree.children[0].children[0].type).toBe('readme-glossary-item');
   });
 
   it('converts Variable components to markdown nodes', () => {
@@ -116,6 +116,6 @@ Second
 `;
 
     const tree = mdast(mdx);
-    expect(tree.children[0].children[1].type).toBe('readme-variable');
+    expect(tree.children[0].type).toBe('readme-variable');
   });
 });

example/Doc.tsx

@@ -53,6 +53,8 @@ const Doc = () => {
     render();
   }, [doc, lazyImages, safeMode]);
 
+  console.log(JSON.stringify(mdx.mdast(doc), null, 2));
+
   return (
     <React.Fragment>
       <div className="rdmd-demo--display">

processor/transform/readme-components.ts

@@ -10,11 +10,12 @@ const types = {
   Callout: NodeTypes['callout'],
   Code: 'code',
   CodeTabs: NodeTypes['codeTabs'],
+  Glossary: NodeTypes['glossary'],
   Image: 'image',
   Table: 'table',
-  tr: 'tableRow',
+  Variable: NodeTypes['variable'],
   td: 'tableCell',
-  Glossary: NodeTypes['glossary'],
+  tr: 'tableRow',
 };
 
 const attributes = <T>(jsx: MdxJsxFlowElement | MdxJsxTextElement) =>