feat(mdx-loader): implement account syntax

fixes: #396

README.md

@@ -162,8 +162,9 @@ The following properties are provided, but you can change the css directly if yo
   --h6-font-size: 2rem;
   --h6-font-weight: 600;
 
+  --account-icon-size: 3rem;
+  --account-icon-color: #545454;
   --code-font-size: 1.8rem;
-
   --qr-code-image-size: 320px;
 }
 ```

packages/client/assets/style/customize.css

@@ -53,12 +53,6 @@
   pointer-events: none;
 }
 
-/* @media (--viewport-not-pc) {
-  .slide-internal-box {
-    align-self: flex-start;
-  }
-} */
-
 .katex-html {
   display: none;
 }
@@ -72,3 +66,10 @@
 .mermaid {
   width: 100%;
 }
+
+.account {
+  color: var(--account-icon-color);
+  font-size: var(--account-icon-size);
+  display: flex;
+  align-items: center;
+}

packages/client/assets/style/variables.css

@@ -25,8 +25,9 @@
   --h6-font-size: 2rem;
   --h6-font-weight: 600;
 
+  --account-icon-size: 3rem;
+  --account-icon-color: #545454;
   --code-font-size: 1.8rem;
-
   --qr-code-image-size: 320px;
 }
 

packages/client/src/components/Assistant.js

@@ -174,9 +174,8 @@ export const Assistant = () => (
                   url: 'https://hiroppy.github.io/fusuma/intro/#slide-13',
                 },
                 {
-                  title: 'Capturing Screen Contents',
-                  content: <code>screen</code>,
-                  url: 'https://hiroppy.github.io/fusuma/intro/#slide-14',
+                  title: 'Generating SNS icon',
+                  content: <code>{`account: serviceName, yourName, text`}</code>,
                 },
                 {
                   title: 'Generating QR Code',

packages/fusuma/src/configs/templates/0-slide.md

@@ -2,6 +2,10 @@
 
 # Hello😃
 
+<!-- block-start: grid -->
+<!-- account: twitter, your-account-name -->
+<!-- block-end -->
+
 ---
 
 <!-- section-title: Bye👋 -->

packages/fusuma/src/configs/templates/style.css

@@ -22,6 +22,7 @@
 /* --h2-font-size: 4rem; */
 /* --h3-font-size: 3.6rem; */
 /* --code-font-size: 1.8rem; */
+/* --account-icon-size: 3rem; */
 /* } */
 
 .title {

packages/mdx-loader/__tests__/__snapshots__/index.js.snap

@@ -6,6 +6,8 @@ exports[`fusuma-loader should add background to props 1`] = `
 
 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 => <>
 
 
@@ -41,6 +43,8 @@ exports[`fusuma-loader should add background(url) to props 1`] = `
 
 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 => <>
 
 
@@ -76,6 +80,8 @@ exports[`fusuma-loader should add data-line to pre tag 1`] = `
 
 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 => <>
 
     <pre data-line=\\"5\\"><code parentName=\\"pre\\" {...{
@@ -130,9 +136,9 @@ exports[`fusuma-loader should add fragments 1`] = `
 /* @jsx mdx */
 
 import React from 'react';
-import { mdx } from '@mdx-js/react'; // don't import as named to avoid using makeShortcode by mdx
-
+import { mdx } from '@mdx-js/react';
 import * as Client from '@fusuma/client';
+import * as Icons from 'react-icons/fa';
 export const slides = [props => <>
 
     <Client.Fragments id={0.05072298324733815}>
@@ -180,6 +186,8 @@ exports[`fusuma-loader should add fusuma options 1`] = `
 
 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>
@@ -233,12 +241,63 @@ export default function MDXContent({
 MDXContent.isMDXComponent = true;"
 `;
 
+exports[`fusuma-loader should add sns accounts 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 => <>
+
+    <a href=\\"https://twitter.com/name\\" className=\\"account account-twitter\\"><Icons.FaTwitter />hello</a>
+    <a href=\\"https://github.com/name\\" className=\\"account account-github\\"><Icons.FaGithub />bye</a>
+    <a href=\\"https://www.facebook.com/name\\" className=\\"account account-facebook\\"><Icons.FaFacebook />hello</a>
+    <a href=\\"https://www.linkedin.com/in/name\\" className=\\"account account-linkedin\\"><Icons.FaLinkedin />bye</a>
+
+            </>];
+export const backgrounds = [0];
+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\\">
+    {
+      /* account: twitter, name, hello */
+    }
+    {
+      /* account: github, name, bye */
+    }
+    {
+      /* account: facebook, name, hello */
+    }
+    {
+      /* account: linkedin, name, bye */
+    }
+
+    </MDXLayout>;
+}
+
+;
+MDXContent.isMDXComponent = true;"
+`;
+
 exports[`fusuma-loader should append div tag by block comment 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 => <>
 
     <div>
@@ -304,6 +363,8 @@ exports[`fusuma-loader should append executable code components 1`] = `
 
 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 => <>
 
     <div className=\\"executable-code-container\\">
@@ -360,6 +421,8 @@ exports[`fusuma-loader should convert MathJax 1`] = `
 
 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>{\`MathJax\`}</h1>
@@ -697,6 +760,8 @@ exports[`fusuma-loader should convert QRCode 1`] = `
 
 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 => <>
 
     <svg className=\\"qr\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"66px\\" height=\\"66px\\" viewBox=\\"0 0 66 66\\" preserveAspectRatio=\\"xMinYMin meet\\"><rect width=\\"100%\\" height=\\"100%\\" fill=\\"white\\" cx=\\"0\\" cy=\\"0\\" /><path d=\\"M8,8l2,0 0,2 -2,0 0,-2z M10,8l2,0 0,2 -2,0 0,-2z M12,8l2,0 0,2 -2,0 0,-2z M14,8l2,0 0,2 -2,0 0,-2z M16,8l2,0 0,2 -2,0 0,-2z M18,8l2,0 0,2 -2,0 0,-2z M20,8l2,0 0,2 -2,0 0,-2z M24,8l2,0 0,2 -2,0 0,-2z M26,8l2,0 0,2 -2,0 0,-2z M28,8l2,0 0,2 -2,0 0,-2z M30,8l2,0 0,2 -2,0 0,-2z M36,8l2,0 0,2 -2,0 0,-2z M44,8l2,0 0,2 -2,0 0,-2z M46,8l2,0 0,2 -2,0 0,-2z M48,8l2,0 0,2 -2,0 0,-2z M50,8l2,0 0,2 -2,0 0,-2z M52,8l2,0 0,2 -2,0 0,-2z M54,8l2,0 0,2 -2,0 0,-2z M56,8l2,0 0,2 -2,0 0,-2z M8,10l2,0 0,2 -2,0 0,-2z M20,10l2,0 0,2 -2,0 0,-2z M30,10l2,0 0,2 -2,0 0,-2z M32,10l2,0 0,2 -2,0 0,-2z M34,10l2,0 0,2 -2,0 0,-2z M40,10l2,0 0,2 -2,0 0,-2z M44,10l2,0 0,2 -2,0 0,-2z M56,10l2,0 0,2 -2,0 0,-2z M8,12l2,0 0,2 -2,0 0,-2z M12,12l2,0 0,2 -2,0 0,-2z M14,12l2,0 0,2 -2,0 0,-2z M16,12l2,0 0,2 -2,0 0,-2z M20,12l2,0 0,2 -2,0 0,-2z M26,12l2,0 0,2 -2,0 0,-2z M30,12l2,0 0,2 -2,0 0,-2z M34,12l2,0 0,2 -2,0 0,-2z M36,12l2,0 0,2 -2,0 0,-2z M44,12l2,0 0,2 -2,0 0,-2z M48,12l2,0 0,2 -2,0 0,-2z M50,12l2,0 0,2 -2,0 0,-2z M52,12l2,0 0,2 -2,0 0,-2z M56,12l2,0 0,2 -2,0 0,-2z M8,14l2,0 0,2 -2,0 0,-2z M12,14l2,0 0,2 -2,0 0,-2z M14,14l2,0 0,2 -2,0 0,-2z M16,14l2,0 0,2 -2,0 0,-2z M20,14l2,0 0,2 -2,0 0,-2z M28,14l2,0 0,2 -2,0 0,-2z M30,14l2,0 0,2 -2,0 0,-2z M36,14l2,0 0,2 -2,0 0,-2z M38,14l2,0 0,2 -2,0 0,-2z M40,14l2,0 0,2 -2,0 0,-2z M44,14l2,0 0,2 -2,0 0,-2z M48,14l2,0 0,2 -2,0 0,-2z M50,14l2,0 0,2 -2,0 0,-2z M52,14l2,0 0,2 -2,0 0,-2z M56,14l2,0 0,2 -2,0 0,-2z M8,16l2,0 0,2 -2,0 0,-2z M12,16l2,0 0,2 -2,0 0,-2z M14,16l2,0 0,2 -2,0 0,-2z M16,16l2,0 0,2 -2,0 0,-2z M20,16l2,0 0,2 -2,0 0,-2z M28,16l2,0 0,2 -2,0 0,-2z M30,16l2,0 0,2 -2,0 0,-2z M32,16l2,0 0,2 -2,0 0,-2z M34,16l2,0 0,2 -2,0 0,-2z M36,16l2,0 0,2 -2,0 0,-2z M40,16l2,0 0,2 -2,0 0,-2z M44,16l2,0 0,2 -2,0 0,-2z M48,16l2,0 0,2 -2,0 0,-2z M50,16l2,0 0,2 -2,0 0,-2z M52,16l2,0 0,2 -2,0 0,-2z M56,16l2,0 0,2 -2,0 0,-2z M8,18l2,0 0,2 -2,0 0,-2z M20,18l2,0 0,2 -2,0 0,-2z M26,18l2,0 0,2 -2,0 0,-2z M30,18l2,0 0,2 -2,0 0,-2z M34,18l2,0 0,2 -2,0 0,-2z M36,18l2,0 0,2 -2,0 0,-2z M44,18l2,0 0,2 -2,0 0,-2z M56,18l2,0 0,2 -2,0 0,-2z M8,20l2,0 0,2 -2,0 0,-2z M10,20l2,0 0,2 -2,0 0,-2z M12,20l2,0 0,2 -2,0 0,-2z M14,20l2,0 0,2 -2,0 0,-2z M16,20l2,0 0,2 -2,0 0,-2z M18,20l2,0 0,2 -2,0 0,-2z M20,20l2,0 0,2 -2,0 0,-2z M24,20l2,0 0,2 -2,0 0,-2z M28,20l2,0 0,2 -2,0 0,-2z M32,20l2,0 0,2 -2,0 0,-2z M36,20l2,0 0,2 -2,0 0,-2z M40,20l2,0 0,2 -2,0 0,-2z M44,20l2,0 0,2 -2,0 0,-2z M46,20l2,0 0,2 -2,0 0,-2z M48,20l2,0 0,2 -2,0 0,-2z M50,20l2,0 0,2 -2,0 0,-2z M52,20l2,0 0,2 -2,0 0,-2z M54,20l2,0 0,2 -2,0 0,-2z M56,20l2,0 0,2 -2,0 0,-2z M24,22l2,0 0,2 -2,0 0,-2z M26,22l2,0 0,2 -2,0 0,-2z M32,22l2,0 0,2 -2,0 0,-2z M36,22l2,0 0,2 -2,0 0,-2z M38,22l2,0 0,2 -2,0 0,-2z M8,24l2,0 0,2 -2,0 0,-2z M10,24l2,0 0,2 -2,0 0,-2z M14,24l2,0 0,2 -2,0 0,-2z M16,24l2,0 0,2 -2,0 0,-2z M20,24l2,0 0,2 -2,0 0,-2z M26,24l2,0 0,2 -2,0 0,-2z M32,24l2,0 0,2 -2,0 0,-2z M34,24l2,0 0,2 -2,0 0,-2z M36,24l2,0 0,2 -2,0 0,-2z M38,24l2,0 0,2 -2,0 0,-2z M40,24l2,0 0,2 -2,0 0,-2z M44,24l2,0 0,2 -2,0 0,-2z M56,24l2,0 0,2 -2,0 0,-2z M10,26l2,0 0,2 -2,0 0,-2z M22,26l2,0 0,2 -2,0 0,-2z M24,26l2,0 0,2 -2,0 0,-2z M28,26l2,0 0,2 -2,0 0,-2z M36,26l2,0 0,2 -2,0 0,-2z M38,26l2,0 0,2 -2,0 0,-2z M46,26l2,0 0,2 -2,0 0,-2z M48,26l2,0 0,2 -2,0 0,-2z M50,26l2,0 0,2 -2,0 0,-2z M52,26l2,0 0,2 -2,0 0,-2z M54,26l2,0 0,2 -2,0 0,-2z M14,28l2,0 0,2 -2,0 0,-2z M20,28l2,0 0,2 -2,0 0,-2z M26,28l2,0 0,2 -2,0 0,-2z M32,28l2,0 0,2 -2,0 0,-2z M36,28l2,0 0,2 -2,0 0,-2z M38,28l2,0 0,2 -2,0 0,-2z M46,28l2,0 0,2 -2,0 0,-2z M50,28l2,0 0,2 -2,0 0,-2z M56,28l2,0 0,2 -2,0 0,-2z M12,30l2,0 0,2 -2,0 0,-2z M14,30l2,0 0,2 -2,0 0,-2z M16,30l2,0 0,2 -2,0 0,-2z M18,30l2,0 0,2 -2,0 0,-2z M22,30l2,0 0,2 -2,0 0,-2z M24,30l2,0 0,2 -2,0 0,-2z M36,30l2,0 0,2 -2,0 0,-2z M38,30l2,0 0,2 -2,0 0,-2z M46,30l2,0 0,2 -2,0 0,-2z M50,30l2,0 0,2 -2,0 0,-2z M52,30l2,0 0,2 -2,0 0,-2z M54,30l2,0 0,2 -2,0 0,-2z M56,30l2,0 0,2 -2,0 0,-2z M8,32l2,0 0,2 -2,0 0,-2z M10,32l2,0 0,2 -2,0 0,-2z M12,32l2,0 0,2 -2,0 0,-2z M18,32l2,0 0,2 -2,0 0,-2z M20,32l2,0 0,2 -2,0 0,-2z M22,32l2,0 0,2 -2,0 0,-2z M24,32l2,0 0,2 -2,0 0,-2z M26,32l2,0 0,2 -2,0 0,-2z M28,32l2,0 0,2 -2,0 0,-2z M34,32l2,0 0,2 -2,0 0,-2z M36,32l2,0 0,2 -2,0 0,-2z M40,32l2,0 0,2 -2,0 0,-2z M44,32l2,0 0,2 -2,0 0,-2z M46,32l2,0 0,2 -2,0 0,-2z M56,32l2,0 0,2 -2,0 0,-2z M8,34l2,0 0,2 -2,0 0,-2z M14,34l2,0 0,2 -2,0 0,-2z M18,34l2,0 0,2 -2,0 0,-2z M22,34l2,0 0,2 -2,0 0,-2z M24,34l2,0 0,2 -2,0 0,-2z M26,34l2,0 0,2 -2,0 0,-2z M28,34l2,0 0,2 -2,0 0,-2z M32,34l2,0 0,2 -2,0 0,-2z M38,34l2,0 0,2 -2,0 0,-2z M48,34l2,0 0,2 -2,0 0,-2z M54,34l2,0 0,2 -2,0 0,-2z M8,36l2,0 0,2 -2,0 0,-2z M10,36l2,0 0,2 -2,0 0,-2z M16,36l2,0 0,2 -2,0 0,-2z M18,36l2,0 0,2 -2,0 0,-2z M20,36l2,0 0,2 -2,0 0,-2z M22,36l2,0 0,2 -2,0 0,-2z M24,36l2,0 0,2 -2,0 0,-2z M26,36l2,0 0,2 -2,0 0,-2z M28,36l2,0 0,2 -2,0 0,-2z M36,36l2,0 0,2 -2,0 0,-2z M38,36l2,0 0,2 -2,0 0,-2z M42,36l2,0 0,2 -2,0 0,-2z M48,36l2,0 0,2 -2,0 0,-2z M50,36l2,0 0,2 -2,0 0,-2z M52,36l2,0 0,2 -2,0 0,-2z M54,36l2,0 0,2 -2,0 0,-2z M56,36l2,0 0,2 -2,0 0,-2z M8,38l2,0 0,2 -2,0 0,-2z M22,38l2,0 0,2 -2,0 0,-2z M28,38l2,0 0,2 -2,0 0,-2z M32,38l2,0 0,2 -2,0 0,-2z M34,38l2,0 0,2 -2,0 0,-2z M36,38l2,0 0,2 -2,0 0,-2z M42,38l2,0 0,2 -2,0 0,-2z M46,38l2,0 0,2 -2,0 0,-2z M50,38l2,0 0,2 -2,0 0,-2z M52,38l2,0 0,2 -2,0 0,-2z M56,38l2,0 0,2 -2,0 0,-2z M8,40l2,0 0,2 -2,0 0,-2z M14,40l2,0 0,2 -2,0 0,-2z M16,40l2,0 0,2 -2,0 0,-2z M18,40l2,0 0,2 -2,0 0,-2z M20,40l2,0 0,2 -2,0 0,-2z M24,40l2,0 0,2 -2,0 0,-2z M28,40l2,0 0,2 -2,0 0,-2z M30,40l2,0 0,2 -2,0 0,-2z M32,40l2,0 0,2 -2,0 0,-2z M38,40l2,0 0,2 -2,0 0,-2z M40,40l2,0 0,2 -2,0 0,-2z M42,40l2,0 0,2 -2,0 0,-2z M44,40l2,0 0,2 -2,0 0,-2z M46,40l2,0 0,2 -2,0 0,-2z M48,40l2,0 0,2 -2,0 0,-2z M52,40l2,0 0,2 -2,0 0,-2z M54,40l2,0 0,2 -2,0 0,-2z M24,42l2,0 0,2 -2,0 0,-2z M26,42l2,0 0,2 -2,0 0,-2z M28,42l2,0 0,2 -2,0 0,-2z M30,42l2,0 0,2 -2,0 0,-2z M40,42l2,0 0,2 -2,0 0,-2z M48,42l2,0 0,2 -2,0 0,-2z M52,42l2,0 0,2 -2,0 0,-2z M54,42l2,0 0,2 -2,0 0,-2z M8,44l2,0 0,2 -2,0 0,-2z M10,44l2,0 0,2 -2,0 0,-2z M12,44l2,0 0,2 -2,0 0,-2z M14,44l2,0 0,2 -2,0 0,-2z M16,44l2,0 0,2 -2,0 0,-2z M18,44l2,0 0,2 -2,0 0,-2z M20,44l2,0 0,2 -2,0 0,-2z M32,44l2,0 0,2 -2,0 0,-2z M34,44l2,0 0,2 -2,0 0,-2z M36,44l2,0 0,2 -2,0 0,-2z M40,44l2,0 0,2 -2,0 0,-2z M44,44l2,0 0,2 -2,0 0,-2z M48,44l2,0 0,2 -2,0 0,-2z M56,44l2,0 0,2 -2,0 0,-2z M8,46l2,0 0,2 -2,0 0,-2z M20,46l2,0 0,2 -2,0 0,-2z M30,46l2,0 0,2 -2,0 0,-2z M34,46l2,0 0,2 -2,0 0,-2z M38,46l2,0 0,2 -2,0 0,-2z M40,46l2,0 0,2 -2,0 0,-2z M48,46l2,0 0,2 -2,0 0,-2z M8,48l2,0 0,2 -2,0 0,-2z M12,48l2,0 0,2 -2,0 0,-2z M14,48l2,0 0,2 -2,0 0,-2z M16,48l2,0 0,2 -2,0 0,-2z M20,48l2,0 0,2 -2,0 0,-2z M24,48l2,0 0,2 -2,0 0,-2z M26,48l2,0 0,2 -2,0 0,-2z M28,48l2,0 0,2 -2,0 0,-2z M30,48l2,0 0,2 -2,0 0,-2z M34,48l2,0 0,2 -2,0 0,-2z M38,48l2,0 0,2 -2,0 0,-2z M40,48l2,0 0,2 -2,0 0,-2z M42,48l2,0 0,2 -2,0 0,-2z M44,48l2,0 0,2 -2,0 0,-2z M46,48l2,0 0,2 -2,0 0,-2z M48,48l2,0 0,2 -2,0 0,-2z M56,48l2,0 0,2 -2,0 0,-2z M8,50l2,0 0,2 -2,0 0,-2z M12,50l2,0 0,2 -2,0 0,-2z M14,50l2,0 0,2 -2,0 0,-2z M16,50l2,0 0,2 -2,0 0,-2z M20,50l2,0 0,2 -2,0 0,-2z M24,50l2,0 0,2 -2,0 0,-2z M32,50l2,0 0,2 -2,0 0,-2z M34,50l2,0 0,2 -2,0 0,-2z M40,50l2,0 0,2 -2,0 0,-2z M42,50l2,0 0,2 -2,0 0,-2z M44,50l2,0 0,2 -2,0 0,-2z M54,50l2,0 0,2 -2,0 0,-2z M56,50l2,0 0,2 -2,0 0,-2z M8,52l2,0 0,2 -2,0 0,-2z M12,52l2,0 0,2 -2,0 0,-2z M14,52l2,0 0,2 -2,0 0,-2z M16,52l2,0 0,2 -2,0 0,-2z M20,52l2,0 0,2 -2,0 0,-2z M28,52l2,0 0,2 -2,0 0,-2z M30,52l2,0 0,2 -2,0 0,-2z M34,52l2,0 0,2 -2,0 0,-2z M40,52l2,0 0,2 -2,0 0,-2z M42,52l2,0 0,2 -2,0 0,-2z M48,52l2,0 0,2 -2,0 0,-2z M50,52l2,0 0,2 -2,0 0,-2z M52,52l2,0 0,2 -2,0 0,-2z M54,52l2,0 0,2 -2,0 0,-2z M56,52l2,0 0,2 -2,0 0,-2z M8,54l2,0 0,2 -2,0 0,-2z M20,54l2,0 0,2 -2,0 0,-2z M24,54l2,0 0,2 -2,0 0,-2z M30,54l2,0 0,2 -2,0 0,-2z M32,54l2,0 0,2 -2,0 0,-2z M34,54l2,0 0,2 -2,0 0,-2z M44,54l2,0 0,2 -2,0 0,-2z M46,54l2,0 0,2 -2,0 0,-2z M48,54l2,0 0,2 -2,0 0,-2z M52,54l2,0 0,2 -2,0 0,-2z M54,54l2,0 0,2 -2,0 0,-2z M56,54l2,0 0,2 -2,0 0,-2z M8,56l2,0 0,2 -2,0 0,-2z M10,56l2,0 0,2 -2,0 0,-2z M12,56l2,0 0,2 -2,0 0,-2z M14,56l2,0 0,2 -2,0 0,-2z M16,56l2,0 0,2 -2,0 0,-2z M18,56l2,0 0,2 -2,0 0,-2z M20,56l2,0 0,2 -2,0 0,-2z M24,56l2,0 0,2 -2,0 0,-2z M26,56l2,0 0,2 -2,0 0,-2z M30,56l2,0 0,2 -2,0 0,-2z M32,56l2,0 0,2 -2,0 0,-2z M34,56l2,0 0,2 -2,0 0,-2z M40,56l2,0 0,2 -2,0 0,-2z M50,56l2,0 0,2 -2,0 0,-2z M56,56l2,0 0,2 -2,0 0,-2z \\" stroke=\\"transparent\\" fill=\\"black\\" /></svg>
@@ -732,6 +797,8 @@ exports[`fusuma-loader should convert all img src 1`] = `
 
 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>{\`img src\`}</h1>
@@ -775,6 +842,8 @@ exports[`fusuma-loader should convert class to className 1`] = `
 
 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>{\`Class\`}</h1>
@@ -818,6 +887,8 @@ exports[`fusuma-loader should convert emoji 1`] = `
 
 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>{\`😄\`}</h1>
@@ -857,6 +928,8 @@ exports[`fusuma-loader should convert markdown-syntax image to JSX 1`] = `
 
 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 => <>
 
     <p><img src={require('/tmp/withAlt.jpg')} {...{
@@ -910,6 +983,8 @@ exports[`fusuma-loader should convert mermaid 1`] = `
 
 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>{\`FlowChart\`}</h1>
@@ -962,6 +1037,8 @@ exports[`fusuma-loader should convert mermaid using mermaid attr 1`] = `
 
 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>{\`FlowChart\`}</h1>
@@ -1014,6 +1091,8 @@ exports[`fusuma-loader should return normal md 1`] = `
 
 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>{\`1\`}</h1>
@@ -1053,6 +1132,8 @@ exports[`fusuma-loader should return normal mdx 1`] = `
 import React from 'react';
 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 => <>
 
 

packages/mdx-loader/__tests__/index.js

@@ -238,4 +238,15 @@ console.log(a + b);
 
     expect(await transformToJS(src)).toMatchSnapshot();
   });
+
+  test('should add sns accounts', async () => {
+    const src = `
+<!-- account: twitter, name, hello -->
+<!-- account: github, name, bye -->
+<!-- account: facebook, name, hello -->
+<!-- account: linkedin, name, bye -->
+ `;
+
+    expect(await transformToJS(src)).toMatchSnapshot();
+  });
 });