feat: add template for component docs

src/markdown-pages/components/button.mdx

@@ -0,0 +1,8 @@
+---
+path: '/components/button'
+title: 'Button'
+description: 'A button component!'
+component: 'Button'
+template: 'ReferenceTemplate'
+---
+

src/pages/reference.js → 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;