feat(mdx): add frontmatter

hiroppy · May 15, 2021 · 2d57e07 · 2d57e07
1 parent faed2c5
commit 2d57e07
Show file tree

Hide file tree

Showing 7 changed files with 42,104 additions and 6,442 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/mdx-loader/__tests__/__snapshots__/index.js.snap b/packages/mdx-loader/__tests__/__snapshots__/index.js.snap
@@ -37,6 +37,40 @@ export default function MDXContent({
 MDXContent.isMDXComponent = true;"
 `;
 
+exports[`fusuma-loader should add background to props via frontmatter 1`] = `
+"/* @jsxRuntime classic */
+/* @jsx mdx */
+
+import React from 'react';
+import { mdx } from '@mdx-js/react';
+import * as Client from '@fusuma/client';
+import * as Icons from 'react-icons/fa';
+export const slides = [props => <>
+
+
+
+            </>];
+export const backgrounds = ['red'];
+export const fragmentSteps = [0];
+export const fusumaProps = [{}];
+
+const layoutProps = {
+
+};
+const MDXLayout = \\"wrapper\\"
+export default function MDXContent({
+  components,
+  ...props
+}) {
+  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+
+    </MDXLayout>;
+}
+
+;
+MDXContent.isMDXComponent = true;"
+`;
+
 exports[`fusuma-loader should add background(url) to props 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
@@ -74,6 +108,40 @@ export default function MDXContent({
 MDXContent.isMDXComponent = true;"
 `;
 
+exports[`fusuma-loader should add background(url) to props via frontmatter 1`] = `
+"/* @jsxRuntime classic */
+/* @jsx mdx */
+
+import React from 'react';
+import { mdx } from '@mdx-js/react';
+import * as Client from '@fusuma/client';
+import * as Icons from 'react-icons/fa';
+export const slides = [props => <>
+
+
+
+            </>];
+export const backgrounds = [require(\\"../../img.jpeg\\")];
+export const fragmentSteps = [0];
+export const fusumaProps = [{}];
+
+const layoutProps = {
+
+};
+const MDXLayout = \\"wrapper\\"
+export default function MDXContent({
+  components,
+  ...props
+}) {
+  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+
+    </MDXLayout>;
+}
+
+;
+MDXContent.isMDXComponent = true;"
+`;
+
 exports[`fusuma-loader should add data-line to pre tag 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
@@ -244,6 +312,44 @@ export default function MDXContent({
 MDXContent.isMDXComponent = true;"
 `;
 
+exports[`fusuma-loader should add props via frontmatter 1`] = `
+"/* @jsxRuntime classic */
+/* @jsx mdx */
+
+import React from 'react';
+import { mdx } from '@mdx-js/react';
+import * as Client from '@fusuma/client';
+import * as Icons from 'react-icons/fa';
+export const slides = [props => <>
+
+    <h1>{\`Hello\`}</h1>
+
+            </>];
+export const backgrounds = [0];
+export const fragmentSteps = [0];
+export const fusumaProps = [{
+  sectionTitle: 'title!',
+  classes: 'foo,bar'
+}];
+
+const layoutProps = {
+
+};
+const MDXLayout = \\"wrapper\\"
+export default function MDXContent({
+  components,
+  ...props
+}) {
+  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+    <h1>{\`Hello\`}</h1>
+
+    </MDXLayout>;
+}
+
+;
+MDXContent.isMDXComponent = true;"
+`;
+
 exports[`fusuma-loader should add sns accounts 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */

diff --git a/packages/mdx-loader/__tests__/index.js b/packages/mdx-loader/__tests__/index.js
@@ -66,6 +66,19 @@ This is Note!
     expect(await transformToJS(src)).toMatchSnapshot();
   });
 
+  test('should add props via frontmatter', async () => {
+    const src = `
++++
+classes = ['foo', 'bar']
+sectionTitle = "title!"
++++
+
+# Hello
+`;
+
+    expect(await transformToJS(src)).toMatchSnapshot();
+  });
+
   test('should convert emoji', async () => {
     const src = `
 # :smile:
@@ -215,6 +228,16 @@ console.log(a + b);
     expect(await transformToJS(src)).toMatchSnapshot();
   });
 
+  test('should add background to props via frontmatter', async () => {
+    const src = `
++++
+background = "red"
++++
+`;
+
+    expect(await transformToJS(src)).toMatchSnapshot();
+  });
+
   test('should add background(url) to props', async () => {
     const src = `
 <!-- background: '../../img.jpeg' -->
@@ -223,6 +246,16 @@ console.log(a + b);
     expect(await transformToJS(src)).toMatchSnapshot();
   });
 
+  test('should add background(url) to props via frontmatter', async () => {
+    const src = `
++++
+background = '../../img.jpeg'
++++
+`;
+
+    expect(await transformToJS(src)).toMatchSnapshot();
+  });
+
   test('should add fragments', async () => {
     const src = `
 <!-- fragments-start -->