feat: embeds!

__tests__/__snapshots__/compilers.test.js.snap → __tests__/__snapshots__/compilers.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ReadMe Flavored Blocks > Embed 1`] = `
-"[Embedded meta links.](https://nyti.me/s/gzoa2xb2v3 "@nyt")
+"[Embedded meta links.](https://nyti.me/s/gzoa2xb2v3 "@embed")
 "
 `;

__tests__/__snapshots__/index.test.js.snap

@@ -345,4 +345,4 @@ exports[`list items 1`] = `
 
 exports[`prefix anchors with "section-" > should add a section- prefix to heading anchors 1`] = `undefined`;
 
-exports[`tables 1`] = `"<div class=\\"rdmd-table\\"><div class=\\"rdmd-table-inner\\"><table><thead><tr><th>Tables</th><th style=\\"text-align: center;\\">Are</th><th style=\\"text-align: right;\\">Cool</th></tr></thead><tbody><tr><td>col 3 is</td><td style=\\"text-align: center;\\">right-aligned</td><td style=\\"text-align: right;\\">$1600</td></tr><tr><td>col 2 is</td><td style=\\"text-align: center;\\">centered</td><td style=\\"text-align: right;\\">$12</td></tr><tr><td>zebra stripes</td><td style=\\"text-align: center;\\">are neat</td><td style=\\"text-align: right;\\">$1</td></tr></tbody></table></div></div>"`;
+exports[`tables 1`] = `"<div class="rdmd-table"><div class="rdmd-table-inner"><table><thead><tr><th>Tables</th><th style="text-align: center;">Are</th><th style="text-align: right;">Cool</th></tr></thead><tbody><tr><td>col 3 is</td><td style="text-align: center;">right-aligned</td><td style="text-align: right;">$1600</td></tr><tr><td>col 2 is</td><td style="text-align: center;">centered</td><td style="text-align: right;">$12</td></tr><tr><td>zebra stripes</td><td style="text-align: center;">are neat</td><td style="text-align: right;">$1</td></tr></tbody></table></div></div>"`;

__tests__/browser/markdown.test.js

@@ -14,7 +14,7 @@ describe('visual regression tests', () => {
       // 'callouts',
       'calloutTests',
       'codeBlocks',
-      // 'embeds',
+      'embeds',
       //'features',
       // 'headings',
       'images',

__tests__/compilers.test.js → __tests__/compilers.test.ts

@@ -2,7 +2,7 @@ import { mdast, mdx } from '../index';
 
 describe('ReadMe Flavored Blocks', () => {
   it('Embed', () => {
-    const txt = '[Embedded meta links.](https://nyti.me/s/gzoa2xb2v3 "@nyt")';
+    const txt = '[Embedded meta links.](https://nyti.me/s/gzoa2xb2v3 "@embed")';
     const ast = mdast(txt);
     const out = mdx(ast);
     expect(out).toMatchSnapshot();

__tests__/components/Callout.test.jsx → __tests__/components/Callout.test.tsx

@@ -3,16 +3,15 @@ import React from 'react';
 
 import Callout from '../../components/Callout';
 
-describe.skip('Callout', () => {
+describe('Callout', () => {
   it('render _all_ its children', () => {
     render(
-      <Callout title="Title">
+      <Callout title="Title" icon="icon" theme="theme">
         <p>Title</p>
         <p>First Paragraph</p>
         <p>Second Paragraph</p>
-      </Callout>
+      </Callout>,
     );
-
     expect(screen.getByText('Second Paragraph')).toBeVisible();
   });
 });

__tests__/components/Code.test.jsx → __tests__/components/Code.test.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { vi } from 'vitest';
 
-import CreateCode from '../../components/Code';
+import Code from '../../components/Code';
 
-const { fireEvent, render, screen } = require('@testing-library/react');
-const copy = require('copy-to-clipboard');
+import { fireEvent, render, screen } from '@testing-library/react';
+import copy from 'copy-to-clipboard';
 
-const Code = CreateCode({ attributes: {} }, { copyButtons: true });
+const codeProps = {
+  copyButtons: true,
+};
 
 vi.mock('@readme/syntax-highlighter', () => ({
   default: code => {
@@ -15,13 +17,13 @@ vi.mock('@readme/syntax-highlighter', () => ({
   canonical: lang => lang,
 }));
 
-describe.skip('Code', () => {
-  it('copies the variable interpolated code', () => {
+describe('Code', () => {
+  it.skip('copies the variable interpolated code', () => {
     const props = {
       children: ['console.log("<<name>>");'],
     };
 
-    const { container } = render(<Code {...props} />);
+    const { container } = render(<Code {...codeProps} {...props} />);
 
     expect(container).toHaveTextContent(/VARIABLE_SUBSTITUTED/);
     fireEvent.click(screen.getByRole('button'));
@@ -30,10 +32,10 @@ describe.skip('Code', () => {
   });
 
   it('does not nest the button inside the code block', () => {
-    render(<Code>{'console.log("hi");'}</Code>);
+    render(<Code {...codeProps}>{'console.log("hi");'}</Code>);
     const btn = screen.getByRole('button');
 
-    expect(btn.parentNode.nodeName.toLowerCase()).not.toBe('code');
+    expect(btn.parentNode?.nodeName.toLowerCase()).not.toBe('code');
   });
 
   it('allows undefined children?!', () => {

__tests__/components/CodeTabs.test.tsx

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { compile, run } from '../../index';
+
+describe('CodeTabs', () => {
+  it('render _all_ its children', async () => {
+    const md = `
+\`\`\`
+assert('theme', 'dark');
+\`\`\`
+\`\`\`
+assert('theme', 'light');
+\`\`\`
+    `;
+    const Component = await run(compile(md));
+    const { container } = render(<Component />);
+
+    expect(container).toHaveTextContent(`assert('theme', 'dark')`);
+    expect(container).toHaveTextContent(`assert('theme', 'light')`);
+  });
+});

__tests__/components/__snapshots__/index.test.ts.snap

@@ -2,4 +2,12 @@
 
 exports[`Components > Callout 1`] = `"<blockquote class="callout callout_error" theme="❗️"><h3 class="callout-heading"><span class="callout-icon">❗️</span>Error Callout</h3><p>Lorem ipsum dolor.</p></blockquote>"`;
 
+exports[`Components > Embed 1`] = `"<div class="embed embed_hasImg"><div class="embed-media"><iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%2Fv1%2Fplace%3Fcenter%3D37.829698%252C-122.258166%26key%3DAIzaSyD9HrlRuI1Ani0-MTZ7pvzxwxi4pgW0BCY%26zoom%3D16%26q%3D4126%2BOpal%2BSt%2C%2BOakland%2C%2BCA%2B94609&amp;display_name=Google+Maps&amp;url=https%3A%2F%2Fwww.google.com%2Fmaps%2Fplace%2F4126%2BOpal%2BSt%2C%2BOakland%2C%2BCA%2B94609%2F%4037.829698%2C-122.258166%2C16z%2Fdata%3D%214m5%213m4%211s0x80857dfb145a04ff%3A0x96b17d967421636f%218m2%213d37.8296978%214d-122.2581661%3Fhl%3Den&amp;image=http%3A%2F%2Fmaps-api-ssl.google.com%2Fmaps%2Fapi%2Fstaticmap%3Fcenter%3D37.829698%2C-122.258166%26zoom%3D15%26size%3D250x250%26sensor%3Dfalse&amp;key=02466f963b9b4bb8845a05b53d3235d7&amp;type=text%2Fhtml&amp;schema=google" width="600" height="450" scrolling="no" title="Google Maps embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe></div></div>"`;
+
+exports[`Components > Embed 2`] = `"<iframe height="550" src="https://consent-manager.metomic.io/placeholder-demo.html?example=reddit" style="display: flex; margin: auto;"></iframe>"`;
+
+exports[`Components > Embed 3`] = `"<div class="embed embed_hasImg"><a class="embed-link" href="https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html" rel="noopener noreferrer" target="_blank"><img alt="George W. Bush Calls for End to Pandemic Partisanship" class="embed-img" loading="lazy" src="https://static01.nyt.com/images/2020/05/02/world/02dc-virus-bush-2/merlin_171999921_e857a690-fb9b-462d-a20c-28c8161107c9-facebookJumbo.jpg"><div class="embed-body"><img alt="nytimes.com" height="14" src="https://www.nytimes.com/vi-assets/static-assets/favicon-4bf96cb6a1093748bf5b3c429accb9b4.ico" width="14"><small class="embed-provider">nytimes.com</small><div class="embed-title">George W. Bush Calls for End to Pandemic Partisanship</div></div></a></div>"`;
+
+exports[`Components > Embed 4`] = `"<p><a href="https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html" title="@embed">rdmd</a></p>"`;
+
 exports[`Components > Image 1`] = `"<p><span aria-label="Bro eats pizza and makes an OK gesture." class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg" width="auto" height="auto" title="Pizza Face" class="img img-align- " alt="Bro eats pizza and makes an OK gesture." loading="eager"></span></span></p>"`;

__tests__/components/index.test.ts

@@ -4,8 +4,6 @@ import { vi } from 'vitest';
 
 import { compile, run, utils } from '../../index';
 
-import { silenceConsole } from '../helpers';
-
 describe.skip('Data Replacements', () => {
   it('Variables', () => {
     const { container } = render(
@@ -87,46 +85,38 @@ describe('Components', () => {
     expect(container.querySelectorAll('pre')[1]).toHaveClass('CodeTabs_active');
   });
 
-  it.skip('Embed', () => {
+  it('Embed', () => {
     const fixtures = {
-      html: `[block:embed]
-      {
-        "html": "<iframe class=\\"embedly-embed\\" src=\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%2Fv1%2Fplace%3Fcenter%3D37.829698%252C-122.258166%26key%3DAIzaSyD9HrlRuI1Ani0-MTZ7pvzxwxi4pgW0BCY%26zoom%3D16%26q%3D4126%2BOpal%2BSt%2C%2BOakland%2C%2BCA%2B94609&display_name=Google+Maps&url=https%3A%2F%2Fwww.google.com%2Fmaps%2Fplace%2F4126%2BOpal%2BSt%2C%2BOakland%2C%2BCA%2B94609%2F%4037.829698%2C-122.258166%2C16z%2Fdata%3D%214m5%213m4%211s0x80857dfb145a04ff%3A0x96b17d967421636f%218m2%213d37.8296978%214d-122.2581661%3Fhl%3Den&image=http%3A%2F%2Fmaps-api-ssl.google.com%2Fmaps%2Fapi%2Fstaticmap%3Fcenter%3D37.829698%2C-122.258166%26zoom%3D15%26size%3D250x250%26sensor%3Dfalse&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=google\\" width=\\"600\\" height=\\"450\\" scrolling=\\"no\\" title=\\"Google Maps embed\\" frameborder=\\"0\\" allow=\\"autoplay; fullscreen\\" allowfullscreen=\\"true\\"></iframe>",
-        "url": "https://www.google.com/maps/place/4126+Opal+St,+Oakland,+CA+94609/@37.829698,-122.258166,16z/data=!4m5!3m4!1s0x80857dfb145a04ff:0x96b17d967421636f!8m2!3d37.8296978!4d-122.2581661?hl=en",
-        "title": "4126 Opal St, Oakland, CA 94609",
-        "favicon": "https://www.google.com/images/branding/product/ico/maps15_bnuw3a_32dp.ico",
-        "image": "http://maps-api-ssl.google.com/maps/api/staticmap?center=37.829698,-122.258166&zoom=15&size=250x250&sensor=false"
-      }
-      [/block]`,
-      iframe: `[block:embed]
-      {
-        "html": false,
-        "url": "https://consent-manager.metomic.io/placeholder-demo.html?example=reddit",
-        "title": null,
-        "favicon": null,
-        "iframe": true,
-        "height": "550"
-      }
-      [/block]`,
-      meta: `[block:embed]
-      {
-        "html": false,
-        "url": "https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html",
-        "title": "George W. Bush Calls for End to Pandemic Partisanship",
-        "favicon": "https://www.nytimes.com/vi-assets/static-assets/favicon-4bf96cb6a1093748bf5b3c429accb9b4.ico",
-        "image": "https://static01.nyt.com/images/2020/05/02/world/02dc-virus-bush-2/merlin_171999921_e857a690-fb9b-462d-a20c-28c8161107c9-facebookJumbo.jpg"
-      }
-      [/block]`,
-      rdmd: '[](https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html "@embed")',
+      html: `<Embed
+        html='<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%2Fv1%2Fplace%3Fcenter%3D37.829698%252C-122.258166%26key%3DAIzaSyD9HrlRuI1Ani0-MTZ7pvzxwxi4pgW0BCY%26zoom%3D16%26q%3D4126%2BOpal%2BSt%2C%2BOakland%2C%2BCA%2B94609&display_name=Google+Maps&url=https%3A%2F%2Fwww.google.com%2Fmaps%2Fplace%2F4126%2BOpal%2BSt%2C%2BOakland%2C%2BCA%2B94609%2F%4037.829698%2C-122.258166%2C16z%2Fdata%3D%214m5%213m4%211s0x80857dfb145a04ff%3A0x96b17d967421636f%218m2%213d37.8296978%214d-122.2581661%3Fhl%3Den&image=http%3A%2F%2Fmaps-api-ssl.google.com%2Fmaps%2Fapi%2Fstaticmap%3Fcenter%3D37.829698%2C-122.258166%26zoom%3D15%26size%3D250x250%26sensor%3Dfalse&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=google" width="600" height="450" scrolling="no" title="Google Maps embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe>'
+        url="https://www.google.com/maps/place/4126+Opal+St,+Oakland,+CA+94609/@37.829698,-122.258166,16z/data=!4m5!3m4!1s0x80857dfb145a04ff:0x96b17d967421636f!8m2!3d37.8296978!4d-122.2581661?hl=en"
+        title="4126 Opal St, Oakland, CA 94609"
+        favicon="https://www.google.com/images/branding/product/ico/maps15_bnuw3a_32dp.ico"
+        image="http://maps-api-ssl.google.com/maps/api/staticmap?center=37.829698,-122.258166&zoom=15&size=250x250&sensor=false"
+      />`,
+      iframe: `<Embed
+        html={false}
+        url="https://consent-manager.metomic.io/placeholder-demo.html?example=reddit"
+        title={null}
+        favicon={null}
+        iframe={true}
+        height="550"
+      />`,
+      meta: `<Embed
+        html={false}
+        url="https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html"
+        title="George W. Bush Calls for End to Pandemic Partisanship"
+        favicon="https://www.nytimes.com/vi-assets/static-assets/favicon-4bf96cb6a1093748bf5b3c429accb9b4.ico"
+        image="https://static01.nyt.com/images/2020/05/02/world/02dc-virus-bush-2/merlin_171999921_e857a690-fb9b-462d-a20c-28c8161107c9-facebookJumbo.jpg"
+      />`,
+      rdmd: '[rdmd](https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html "@embed")',
     };
 
-    silenceConsole()(error => {
-      Object.values(fixtures).map(fx => {
-        const { container } = render(compile(fx));
-        return expect(container.innerHTML).toMatchSnapshot();
-      });
-
-      expect(error).toHaveBeenCalledTimes(1);
+    Object.values(fixtures).map(async fx => {
+      const component = await run(compile(fx));
+      const { container } = render(React.createElement(component));
+      console.log(container.innerHTML);
+      return expect(container.innerHTML).toMatchSnapshot();
     });
   });
 

__tests__/helpers.ts

@@ -0,0 +1,17 @@
+import { vi } from 'vitest';
+
+const silenceConsole =
+  (prop: keyof Console = 'error', impl = () => {}) =>
+  fn => {
+    let spy;
+
+    try {
+      spy = vi.spyOn(console, prop).mockImplementation(impl);
+
+      return fn(spy);
+    } finally {
+      spy.mockRestore();
+    }
+  };
+
+export { silenceConsole };

__tests__/index.test.js

@@ -55,8 +55,9 @@ test.skip('check list items', () => {
   expect(container.innerHTML).toMatchSnapshot();
 });
 
-test.skip('gemoji generation', () => {
-  const { container } = render(run(compile(':sparkles:')));
+test('gemoji generation', async () => {
+  const component = await run(compile(':sparkles:'));
+  const { container } = render(React.createElement(component));
   expect(container.querySelector('.lightbox')).not.toBeInTheDocument();
 });
 
@@ -65,17 +66,17 @@ test.skip('should strip out inputs', () => {
   expect(screen.queryByRole('input')).not.toBeInTheDocument();
 });
 
-test.skip('tables', () => {
-  const { container } = render(
-    run(
+test('tables', async () => {
+  const component = await run(
       compile(`| Tables        | Are           | Cool  |
 | ------------- |:-------------:| -----:|
 | col 3 is      | right-aligned | $1600 |
 | col 2 is      | centered      |   $12 |
 | zebra stripes | are neat      |    $1 |
   `)
     )
-  );
+
+  const { container } = render(React.createElement(component));
 
   expect(container.innerHTML.trim()).toMatchSnapshot();
 });

components/Callout/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLQuoteElement>> {
-  attributes: {};
+  attributes?: {};
   icon: string;
   theme?: string;
   heading?: React.ReactElement;

components/Code/index.tsx

@@ -34,15 +34,16 @@
   return <button ref={button} aria-label="Copy Code" className={`${rootClass} ${className}`} onClick={copier} />;
 }
 
-interface Props extends Omit<HTMLElement, 'lang'> {
+interface CodeProps {
+  children?: string[] | string;
   copyButtons?: boolean;
   lang?: string;
   meta?: string;
   theme?: string;
   value?: string;
 }
 
-const Code = (props: Props) => {
+const Code = (props: CodeProps) => {
   const { children, copyButtons, lang, theme, value } = props;
 
   const language = canonicalLanguage(lang);
@@ -56,7 +57,7 @@
   };
 
   const code = value ?? (Array.isArray(children) ? children[0] : children) ?? '';
   const highlightedCode = syntaxHighlighter && code ? syntaxHighlighter(code, language, codeOpts) : code;
 
   return (
     <>