From d367086d8bae3a2d49ed1f5e22092d4a3b233514 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Wed, 20 May 2020 17:09:02 -0700
Subject: [PATCH] feat: added code snippet component

---
 src/components/CodeSnippet.js  | 20 ++++++++++++++++++++
 src/markdown-pages/example.mdx | 18 ++++++++++--------
 src/templates/GuideTemplate.js | 10 +++++++++-
 3 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 src/components/CodeSnippet.js

diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js
new file mode 100644
index 000000000..bd7ebb781
--- /dev/null
+++ b/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;
diff --git a/src/markdown-pages/example.mdx b/src/markdown-pages/example.mdx
index cfcf05da3..426c8a7bc 100644
--- a/src/markdown-pages/example.mdx
+++ b/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;
+```
diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index a42f77b2e..a3c1fbd09 100644
--- a/src/templates/GuideTemplate.js
+++ b/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>