feat: added code snippet component

src/components/CodeSnippet.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CodeSnippet = ({ children, copy }) => (
+  <div className="CodeSnippet">
+    <div className="CodeSnippet-code">{children}</div>
+    {copy !== 'false' && <div className="CodeSnippet-copy">COPY ME</div>}
+  </div>
+);
+
+CodeSnippet.propTypes = {
+  children: PropTypes.node.isRequired,
+  copy: PropTypes.string, // TODO: limit options
+};
+
+CodeSnippet.defaultProps = {
+  copy: 'true',
+};
+
+export default CodeSnippet;

src/markdown-pages/example.mdx

@@ -5,14 +5,16 @@ title: 'GraphQL API'
 template: 'GuideTemplate'
 ---
 
-## Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-Vivamus sem dui, posuere et mattis eu,
-`laoreet eu sapien. Donec congue, leo vel cursus scelerisque, odio lacus gravida felis, ac finibus dui purus eget mi. Vivamus efficitur massa non nunc pharetra, ac aliquet purus condimentum. In egestas a velit non finibus. Duis tincidunt velit et fermentum porta. Duis pulvinar nunc at diam maximus mollis ut`
-porta nisi`. Nulla venenatis tortor dolor.
-In tempus placerat neque quis efficitur. Sed augue massa,
-posuere in molestie non, efficitur iaculis nibh. In nulla nibh, congue ut dui at, tincidunt fermentum libero. Quisque nec justo vitae neque porttitor suscipit. Sed euismod odio vitae risus imperdiet, sed hendrerit nunc maximus. Cras pretium hendrerit ante vitae pulvinar.
+## Lorem ipsum
 
 Integer aliquam convallis scelerisque. Donec auctor dictum viverra. Praesent commodo porttitor tortor. Fusce eget sem arcu. Praesent convallis augue est. `Vestibulum` in mi sollicitudin, rhoncus est eu, rutrum augue. Ut in elit ac odio ultrices pharetra eget id magna. Donec tellus dui, volutpat ut malesuada eget, pharetra eget metus. Proin tortor lacus, vestibulum dignissim urna ac, rutrum vulputate orci. Sed justo tellus, convallis eu tincidunt at, euismod eu enim. Sed interdum viverra volutpat. Suspendisse eget accumsan nunc. Aliquam tempor in magna ut lobortis.
 
-Nunc a venenatis metus, sit amet interdum risus. Etiam fermentum, justo ut rutrum venenatis, magna ipsum laoreet tortor, fringilla tempor ante massa id dui. Mauris tempus, ipsum in laoreet volutpat, felis velit aliquam ipsum, ut vestibulum enim orci ut elit. Etiam malesuada ex eu turpis lobortis suscipit. Lorem ipsum dolor sit amet, consectetur `adipiscing` elit. Vivamus malesuada dapibus ligula. Nunc scelerisque orci enim, in auctor nulla luctus sit amet. Quisque feugiat ultrices ligula, sed pellentesque nulla gravida ac. Mauris quis congue elit, ac malesuada mauris. Praesent id lacus dolor. Mauris sit amet ligula velit. Maecenas non sem at massa laoreet lobortis. In volutpat, elit non lacinia luctus, sapien lorem elementum libero, eget tincidunt libero augue ac sapien.
+```jsx copy=false
+import React from 'react';
+
+const FooBar = () => (
+  <div>Hello, World!</div>
+);
+
+export default FooBar;
+```

src/templates/GuideTemplate.js

@@ -2,13 +2,19 @@ import React from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
+import { MDXProvider } from '@mdx-js/react';
 import Layout from '../components/Layout';
 import BreadcrumbBar from '../components/BreadcrumbBar';
 import Container from '../components/Container';
+import CodeSnippet from '../components/CodeSnippet';
 
 import createBreadcrumbs from '../utils/create-breadcrumbs';
 import pages from '../data/sidenav.json';
 
+const components = {
+  code: (props) => <CodeSnippet {...props} />,
+};
+
 const GuideTemplate = ({ data }) => {
   const { mdx } = data;
   const { frontmatter, body } = mdx;
@@ -23,7 +29,9 @@ const GuideTemplate = ({ data }) => {
           <div>
             <h1>{frontmatter.title}</h1>
             <div className="guideTemplate-content">
-              <MDXRenderer>{body}</MDXRenderer>
+              <MDXProvider components={components}>
+                <MDXRenderer>{body}</MDXRenderer>
+              </MDXProvider>
             </div>
           </div>
         </div>