feat: variables and glossary (#865)

| [![PR App][icn]][demo] | Fix RM-9018 RM-9022 |
| :--------------------: | :-----------------: |

## 🧰 Changes

Supports Variables and GlossaryItems!

Ok, so this PR only has a small 🤏 code change for those components. We just have to format the correct jsx in the editor for this to work, _I think_.

This PR does

- rename tests from `flavored-*` to `*`
- removes `yaml` from the top of the doc
- runs the variable browser test

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].

[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]: https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

__tests__/browser/markdown.test.js

@@ -23,7 +23,7 @@ describe('visual regression tests', () => {
       // 'tablesTests',
       // 'codeBlockTests',
       // 'tableOfContentsTests',
-      // 'varsTest',
+      'varsTest',
     ];
 
     it.each(docs)(
@@ -37,7 +37,7 @@ describe('visual regression tests', () => {
 
         expect(image).toMatchImageSnapshot();
       },
-      10000
+      10000,
     );
 
     it.skip('renders html blocks, style tags, and style attributes with safeMode off', async () => {

__tests__/components/GlossaryTerm.test.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { run, compile } from '../../index';
+
+describe('GlossaryItem', () => {
+  it('renders a glossary item', async () => {
+    const md = `<GlossaryItem term="parliament" />`;
+    const Content = await run(compile(md));
+    render(<Content />);
+
+    expect(screen.getByText('parliament')).toBeVisible();
+  });
+});

__tests__/components/Variable.test.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { run, compile } from '../../index';
+
+describe('Variable', () => {
+  it('render a variable', async () => {
+    const md = `<Variable variable="name" />`;
+    const Content = await run(compile(md));
+    render(<Content />);
+
+    expect(screen.getByText('NAME')).toBeVisible();
+  });
+});

docs/variable-tests.md

@@ -1,16 +1,21 @@
 ---
-title: "Variable Tests"
+title: 'Variable Tests'
 category: 5fdf9fc9c2a7ef443e937315
 hidden: true
 ---
-<<defvar>> and `<<defvar>>` and:
+
+<Variable variable="defvar" /> and `<Variable variable="defvar" />` and:
 
 ```
-<<defvar>>
+<Variable variable="defvar" />
 ```
 
 and
 
 ```js
-const xyz = "<<defvar>>";
+const xyz = "<Variable variable="defvar" />";
 ```
+
+## Glossary Items
+
+<GlossaryItem term="demo" />

example/Doc.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, FunctionComponent, useEffect, useState } from 'react';
+import React, { FunctionComponent, useEffect, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import * as mdx from '../index';
 import docs from './docs';
@@ -28,6 +28,7 @@ const Doc = () => {
 
       setContent(() => content);
     };
+
     render();
   }, [doc, lazyImages, safeMode]);
 

example/Form.tsx

@@ -21,11 +21,10 @@ const Form = () => {
 
   const onSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
     setSearchParams(params => {
-      params.delete('edit');
       return params;
     });
 
-    navigate(event.target.value);
+    navigate(`/${event.target.value}`);
   };
 
   const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -36,7 +35,7 @@ const Form = () => {
         params.set('edit', value);
         return params;
       },
-      { replace: true }
+      { replace: true },
     );
 
     if (!edited) {
@@ -51,7 +50,7 @@ const Form = () => {
           params.delete('edit');
           return params;
         },
-        { replace: true }
+        { replace: true },
       );
     }
   }, [edited, searchParams]);

index.tsx

@@ -1,6 +1,7 @@
 import debug from 'debug';
 import { remark } from 'remark';
 import remarkMdx from 'remark-mdx';
+import remarkFrontmatter from 'remark-frontmatter';
 
 import { createProcessor, compileSync, run as mdxRun, RunOptions } from '@mdx-js/mdx';
 import * as runtime from 'react/jsx-runtime';
@@ -38,21 +39,21 @@ export const utils = {
 };
 
 const makeUseMDXComponents = (more: RunOpts['components']) => {
-  const components = { ...Components, ...more };
+  const components = { ...more, ...Components, Variable };
 
   return () => components;
 };
 
 export const reactProcessor = (opts = {}) => {
-  return createProcessor({ remarkPlugins: [calloutTransformer], ...opts });
+  return createProcessor({ remarkPlugins: [remarkFrontmatter, calloutTransformer], ...opts });
 };
 
 export const compile = (text: string, opts = {}) => {
   return String(
     compileSync(text, {
       outputFormat: 'function-body',
       providerImportSource: '#',
-      remarkPlugins: [calloutTransformer],
+      remarkPlugins: [remarkFrontmatter, calloutTransformer],
       ...opts,
     }),
   ).replace(/await import\(_resolveDynamicMdxSpecifier\('react'\)\)/, 'arguments[0].imports.React');
@@ -87,7 +88,7 @@ export const html = (text: string, opts = {}) => {
 };
 
 export const mdast: any = (text: string, opts = {}) => {
-  const processor = remark().use(remarkMdx);
+  const processor = remark().use(remarkMdx).use(remarkFrontmatter);
 
   try {
     const tree = processor.parse(text);

package.json

@@ -39,6 +39,7 @@
     "prop-types": "^15.8.1",
     "rehype-sanitize": "^4.0.0",
     "remark": "^15.0.1",
+    "remark-frontmatter": "^5.0.0",
     "remark-mdx": "^3.0.0",
     "remark-parse": "^11.0.0",
     "trim": "^1.0.1",
@@ -71,8 +72,8 @@
     "@readme/eslint-config": "^14.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@testing-library/react": "^14",
     "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14",
     "@testing-library/user-event": "^14.5.2",
     "@types/mdast": "^4.0.3",
     "@types/mdx": "^2.0.12",