chore: add mdx embed lib

Author: pyjun01

package.json

@@ -43,6 +43,7 @@
     "gatsby-transformer-remark": "^5.14.0",
     "gatsby-transformer-sharp": "^4.13.0",
     "github-slugger": "^1.4.0",
+    "mdx-embed": "^1.1.2",
     "prism-react-renderer": "^1.3.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/GlobalStyle.tsx

@@ -226,6 +226,21 @@ const GlobalStyle = createGlobalStyle`
       border-radius: 0.325rem;
       font-size: 80%;
     }
+
+    blockquote {
+      font-size: 1rem;
+      border-left: 0.2rem solid #333;
+      margin: 1.5rem 0;
+      padding: 0.5rem 0 0.5rem 1rem;
+      
+      > p {
+        margin: 0;
+      }
+    }
+
+    [data-change="add"] {
+      background-color: #395d3f;
+    }
   }
 `;
 

src/components/MDX/CodeBlock.tsx

@@ -51,11 +51,23 @@ const CodeBlock = ({ children }) => {
         <Pre className={className} style={style}>
           <code className='code-preview'>
             {tokens.map((line, i) => (
-              <Line {...getLineProps({ line, key: i })}>
+              <Line
+                {...getLineProps({ line, key: i })}
+                data-change={
+                  line
+                    .map(({ content }) => content)
+                    .join('')
+                    .startsWith('++')
+                    ? 'add'
+                    : undefined
+                }
+              >
                 <LineNo>{i + 1}</LineNo>
-                {line.map((token, key) => (
-                  <LineContent {...getTokenProps({ token, key })} />
-                ))}
+                {line
+                  .filter(({ content }, i) => i >= 2 || (content !== '++' && content !== '--'))
+                  .map((token, key) => (
+                    <LineContent {...getTokenProps({ token, key })} />
+                  ))}
               </Line>
             ))}
           </code>

src/pages/v/{mdx.slug}.tsx

@@ -2,13 +2,19 @@ import { graphql } from 'gatsby';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { MDXProvider } from '@mdx-js/react';
 import styled from 'styled-components';
+import { Tweet, CodeSandbox } from 'mdx-embed';
 
 import Layout from '../../components/layout';
 import SEO from '../../components/seo';
 import CodeBlock from '../../components/MDX/CodeBlock';
 import { H1, H2, H3, H4, H5, H6 } from '../../components/MDX/Title';
 import { A } from '../../components/MDX';
 
+const components = {
+  Tweet,
+  CodeSandbox,
+};
+
 const Container = styled.div`
   padding: 32px 0;
 
@@ -75,6 +81,7 @@ function BlogPost({ data }) {
               h4: H4,
               h5: H5,
               h6: H6,
+              ...components,
             }}
           >
             <MDXRenderer headings={data.mdx.headings}>{data.mdx.body}</MDXRenderer>

yarn.lock

@@ -9134,6 +9134,11 @@ mdurl@^1.0.0:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
 
+mdx-embed@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/mdx-embed/-/mdx-embed-1.1.2.tgz#04468e8dcb3be9fe3e65207e88a83d2f76555a24"
+  integrity sha512-AAronHC/sh4py+RhJOuX8+9+lyUbJsmCLquXNPCEHZ0llPWjMuwls77hII/lWI2kwBSPZPahrqti8kGTv1pi1w==
+
 meant@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/meant/-/meant-1.0.3.tgz#67769af9de1d158773e928ae82c456114903554c"