Merge pull request #83 from newrelic/component-page-skeleton

Component page skeleton

Author: jerelmiller

src/components/Sidebar.js

@@ -21,7 +21,7 @@ const renderNav = (page, index) => (
 );
 
 const Sidebar = ({ className, pages, isOpen, toggle }) => (
-  <aside className={cx(styles.Sidebar, className, { [styles.isOpen]: isOpen })}>
+  <aside className={cx(styles.sidebar, className, { [styles.isOpen]: isOpen })}>
     <div className={styles.top}>
       <h3>Pages</h3>
       <button

src/data/sidenav.json

@@ -1,20 +1,25 @@
 [
   {
     "displayName": "Guides",
-    "url": "/guides"
+    "url": "/guides",
+    "children": [
+      {
+        "displayName": "Example",
+        "url": "/guides/example"
+      }
+    ]
   },
   {
-    "displayName": "Foo",
+    "displayName": "UI Components",
     "children": [
       {
-        "displayName": "Baz",
-        "url": "/foo/baz",
-        "children": []
-      },
-      {
-        "displayName": "Bar",
-        "url": "/foo/bar",
-        "children": []
+        "displayName": "Form Components",
+        "children": [
+          {
+            "displayName": "Button",
+            "url": "/components/button"
+          }
+        ]
       }
     ]
   }

src/markdown-pages/components/button.mdx

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

src/markdown-pages/foo-bar-baz.mdx

@@ -0,0 +1,55 @@
+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 './ReferenceTemplate.module.scss';
+
+const ReferenceTemplate = ({ data }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { mdx } = data;
+  const { frontmatter } = mdx;
+  const { title, description, component } = frontmatter;
+
+  return (
+    <Layout>
+      <SEO title={title} description={description} />
+      <Container className={styles.container}>
+        <Sidebar
+          className={styles.sidebar}
+          pages={pages}
+          isOpen={isOpen}
+          toggle={() => setIsOpen(!isOpen)}
+        />
+        <main className={styles.content}>
+          <h1>{component}</h1>
+        </main>
+      </Container>
+    </Layout>
+  );
+};
+
+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;

src/markdown-pages/foo-bar.mdx

@@ -1,6 +1,7 @@
 .container {
   display: grid;
-  grid-template-columns: 1fr 3fr;
+  grid-template-columns: auto 3fr;
+  grid-column-gap: 2rem;
   grid-template-areas: 'sidebar main';
 
   @media (max-width: 760px) {
@@ -16,4 +17,3 @@
 .sidebar {
   grid-area: sidebar;
 }
-