feat(mdx-typography): add basic typography support (#705)

issue #699

components/Article/ArticleContent.tsx

@@ -1,3 +1,4 @@
+import MDXComponents from '@components/MDX';
 import { Ease } from '@components/Motion';
 import type { Post } from '@types';
 import { MDXRemote } from 'next-mdx-remote';
@@ -8,7 +9,7 @@ interface Props {
 const ArticleContent = ({ source }: Props): JSX.Element => {
   return (
     <Ease>
-      <MDXRemote {...source} />
+      <MDXRemote {...source} components={MDXComponents} />
     </Ease>
   );
 };

components/Article/__snapshots__/Article.test.tsx.snap

@@ -165,7 +165,9 @@ exports[`Article should render correctly (snapshot) 1`] = `
       <div
         style="opacity: 0;"
       >
-        <h2>
+        <h2
+          class="ant-typography"
+        >
           1 Basic Notes
         </h2>
       </div>
@@ -585,7 +587,9 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
         data-projection-id="2"
         style="opacity: 0;"
       >
-        <h2>
+        <h2
+          class="ant-typography"
+        >
           1 Basic Notes
         </h2>
       </div>

components/MDX/Anchor.tsx

@@ -0,0 +1,7 @@
+import { Typography } from 'antd';
+
+interface Props {}
+
+const Anchor = (props: Props): JSX.Element => <Typography.Link {...props} />;
+
+export default Anchor;

components/MDX/Headings.tsx

@@ -0,0 +1,29 @@
+import { Typography } from 'antd';
+import type { TitleProps } from 'antd/lib/typography/Title';
+
+interface Props {}
+
+const Heading = (props: TitleProps): JSX.Element => (
+  <Typography.Title {...props} />
+);
+
+const H1 = (props: Props): JSX.Element => <Heading {...props} level={1} />;
+
+const H2 = (props: Props): JSX.Element => <Heading {...props} level={2} />;
+
+const H3 = (props: Props): JSX.Element => <Heading {...props} level={3} />;
+
+const H4 = (props: Props): JSX.Element => <Heading {...props} level={4} />;
+
+const H5 = (props: Props): JSX.Element => <Heading {...props} level={5} />;
+
+const Headings = {
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H5,
+};
+
+export default Headings;

components/MDX/MDX.test.tsx

@@ -0,0 +1,43 @@
+import { render } from '@testing-library/react';
+import Anchor from './Anchor';
+import Headings from './Headings';
+import Paragraph from './Paragraph';
+import Texts from './Texts';
+
+describe('Anchor', () => {
+  test('should render correctly (snapshot)', () => {
+    const { container } = render(<Anchor />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
+
+describe('Paragraph', () => {
+  test('should render correctly (snapshot)', () => {
+    const { container } = render(<Paragraph />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
+
+describe('Headings', () => {
+  test.each(Object.values(Headings))(
+    'should render correctly (snapshot)',
+    Heading => {
+      const { container } = render(<Heading />);
+
+      expect(container).toMatchSnapshot();
+    }
+  );
+});
+
+describe('Texts', () => {
+  test.each(Object.values(Texts))(
+    'should render correctly (snapshot)',
+    Text => {
+      const { container } = render(<Text />);
+
+      expect(container).toMatchSnapshot();
+    }
+  );
+});

components/MDX/Paragraph.tsx

@@ -0,0 +1,9 @@
+import { Typography } from 'antd';
+
+interface Props {}
+
+const Paragraph = (props: Props): JSX.Element => (
+  <Typography.Paragraph {...props} />
+);
+
+export default Paragraph;

components/MDX/Texts.tsx

@@ -0,0 +1,20 @@
+import { Typography } from 'antd';
+import type { TextProps } from 'antd/lib/typography/Text';
+
+interface Props {}
+
+const Text = (props: TextProps): JSX.Element => <Typography.Text {...props} />;
+
+const Strong = (props: Props): JSX.Element => <Text {...props} strong />;
+
+const Emphasis = (props: Props): JSX.Element => <Text {...props} italic />;
+
+const Delete = (props: Props): JSX.Element => <Text {...props} delete />;
+
+const Texts = {
+  strong: Strong,
+  em: Emphasis,
+  del: Delete,
+};
+
+export default Texts;

components/MDX/__snapshots__/MDX.test.tsx.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Anchor should render correctly (snapshot) 1`] = `
+<div>
+  <a
+    class="ant-typography"
+  />
+</div>
+`;
+
+exports[`Headings should render correctly (snapshot) 1`] = `
+<div>
+  <h1
+    class="ant-typography"
+  />
+</div>
+`;
+
+exports[`Headings should render correctly (snapshot) 2`] = `
+<div>
+  <h2
+    class="ant-typography"
+  />
+</div>
+`;
+
+exports[`Headings should render correctly (snapshot) 3`] = `
+<div>
+  <h3
+    class="ant-typography"
+  />
+</div>
+`;
+
+exports[`Headings should render correctly (snapshot) 4`] = `
+<div>
+  <h4
+    class="ant-typography"
+  />
+</div>
+`;
+
+exports[`Headings should render correctly (snapshot) 5`] = `
+<div>
+  <h5
+    class="ant-typography"
+  />
+</div>
+`;
+
+exports[`Headings should render correctly (snapshot) 6`] = `
+<div>
+  <h5
+    class="ant-typography"
+  />
+</div>
+`;
+
+exports[`Paragraph should render correctly (snapshot) 1`] = `
+<div>
+  <div
+    class="ant-typography"
+  />
+</div>
+`;
+
+exports[`Texts should render correctly (snapshot) 1`] = `
+<div>
+  <span
+    class="ant-typography"
+  >
+    <strong />
+  </span>
+</div>
+`;
+
+exports[`Texts should render correctly (snapshot) 2`] = `
+<div>
+  <span
+    class="ant-typography"
+  >
+    <i />
+  </span>
+</div>
+`;
+
+exports[`Texts should render correctly (snapshot) 3`] = `
+<div>
+  <span
+    class="ant-typography"
+  >
+    <del />
+  </span>
+</div>
+`;

components/MDX/index.ts

@@ -0,0 +1,13 @@
+import Anchor from './Anchor';
+import Headings from './Headings';
+import Paragraph from './Paragraph';
+import Texts from './Texts';
+
+const MDXComponents = {
+  a: Anchor,
+  p: Paragraph,
+  ...Headings,
+  ...Texts,
+};
+
+export default MDXComponents;

contents/implementFancyMDX.mdx

@@ -69,6 +69,10 @@ _This is italic text_
 >> ...by using additional greater-than signs right next to each other...
 > > > ...or with spaces between arrows.
 
+> Blockquotes can also be continued...
+> ...continued...
+> ...continued continued...
+
 ## Lists
 
 Unordered