From bc9c46eae7f182679852732c8c993017e4b4ce92 Mon Sep 17 00:00:00 2001
From: Tim Glaser <tglaser@newrelic.com>
Date: Tue, 2 Jun 2020 12:02:42 -0700
Subject: [PATCH] feat: add template for component docs

---
 src/markdown-pages/components/button.mdx      |  8 +++++
 .../ReferenceTemplate.js}                     | 32 ++++++++++++++++---
 .../ReferenceTemplate.module.scss}            |  0
 3 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 src/markdown-pages/components/button.mdx
 rename src/{pages/reference.js => templates/ReferenceTemplate.js} (50%)
 rename src/{pages/reference.module.scss => templates/ReferenceTemplate.module.scss} (100%)

diff --git a/src/markdown-pages/components/button.mdx b/src/markdown-pages/components/button.mdx
new file mode 100644
index 000000000..339be2e64
--- /dev/null
+++ b/src/markdown-pages/components/button.mdx
@@ -0,0 +1,8 @@
+---
+path: '/components/button'
+title: 'Button'
+description: 'A button component!'
+component: 'Button'
+template: 'ReferenceTemplate'
+---
+
diff --git a/src/pages/reference.js b/src/templates/ReferenceTemplate.js
similarity index 50%
rename from src/pages/reference.js
rename to src/templates/ReferenceTemplate.js
index d52701038..36606f81d 100644
--- a/src/pages/reference.js
+++ b/src/templates/ReferenceTemplate.js
@@ -1,18 +1,24 @@
 import React, { useState } from 'react';
+import { graphql } from 'gatsby';
+import PropTypes from 'prop-types';
 import Container from '../components/Container';
 import Layout from '../components/Layout';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
 
 import pages from '../data/sidenav.json';
-import styles from './reference.module.scss';
 
-const Reference = () => {
+import styles from './ReferenceTemplate.module.scss';
+
+const ReferenceTemplate = ({ data }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const { mdx } = data;
+  const { frontmatter } = mdx;
+  const { title, description } = frontmatter;
 
   return (
     <Layout>
-      <SEO title="Reference" />
+      <SEO title={title} description={description} />
       <Container className={styles.container}>
         <Sidebar
           className={styles.sidebar}
@@ -26,4 +32,22 @@ const Reference = () => {
   );
 };
 
-export default Reference;
+ReferenceTemplate.propTypes = {
+  data: PropTypes.object,
+};
+
+export const pageQuery = graphql`
+  query($path: String!) {
+    mdx(frontmatter: { path: { eq: $path } }) {
+      body
+      frontmatter {
+        path
+        title
+        description
+        component
+      }
+    }
+  }
+`;
+
+export default ReferenceTemplate;
diff --git a/src/pages/reference.module.scss b/src/templates/ReferenceTemplate.module.scss
similarity index 100%
rename from src/pages/reference.module.scss
rename to src/templates/ReferenceTemplate.module.scss