Merge pull request #76 from newrelic/zstickles/page-specific-metadata

Added ability to set page-specific meta information

src/markdown-pages/add-time-picker-guide.mdx

@@ -3,6 +3,7 @@ path: '/build-apps/add-time-picker-guide'
 duration: '20 min'
 title: 'Add the time picker to a sample application'
 template: 'GuideTemplate'
+description: 'Example guide page'
 ---
 
 

src/markdown-pages/example.mdx

@@ -3,6 +3,7 @@ path: '/guides/graphql-api'
 duration: '30 min'
 title: 'GraphQL API'
 template: 'GuideTemplate'
+description: 'Example guide page'
 ---
 
 ## Lorem ipsum

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

@@ -3,6 +3,7 @@ path: '/foo/baz'
 duration: '0 min'
 title: 'Baz'
 template: 'GuideTemplate'
+description: 'Foo Baz page description goes here'
 ---
 
 ## This is the Baz page within Foo

src/markdown-pages/foo-bar.md

@@ -3,6 +3,7 @@ path: '/foo/bar'
 duration: '0 min'
 title: 'Bar'
 template: 'GuideTemplate'
+description: 'Foo Bar page description goes here'
 ---
 
 ## This is the Bar page within Foo

src/markdown-pages/guide-index.md

@@ -3,6 +3,7 @@ path: '/guides'
 duration: '0 min'
 title: 'Guides'
 template: 'GuideTemplate'
+description: 'Guide page description'
 ---
 
 ## This is the top-level guide page

src/templates/GuideTemplate.js

@@ -8,6 +8,7 @@ import Layout from '../components/Layout';
 import BreadcrumbBar from '../components/BreadcrumbBar';
 import Container from '../components/Container';
 import Video from '../components/Video';
+import SEO from '../components/Seo';
 
 import createBreadcrumbs from '../utils/create-breadcrumbs';
 import pages from '../data/sidenav.json';
@@ -21,16 +22,18 @@ const components = {
 const GuideTemplate = ({ data }) => {
   const { mdx } = data;
   const { frontmatter, body } = mdx;
+  const { title, description } = frontmatter;
 
   const crumbs = createBreadcrumbs(frontmatter.path, pages);
 
   return (
     <Layout>
+      <SEO title={title} description={description} />
       <BreadcrumbBar crumbs={crumbs} duration={frontmatter.duration} />
       <Container>
         <div className="guideTemplate-container">
           <div>
-            <h1>{frontmatter.title}</h1>
+            <h1>{title}</h1>
             <div className="guideTemplate-content">
               <MDXProvider components={components}>
                 <MDXRenderer>{body}</MDXRenderer>
@@ -55,6 +58,7 @@ export const pageQuery = graphql`
         duration
         path
         title
+        description
       }
     }
   }