From 796eb70a8e4a0b93f472a6801b07dd15ce6e6e50 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 29 May 2020 14:48:23 -0700
Subject: [PATCH 1/2] chore: added description frontmatter field

---
 src/markdown-pages/add-time-picker-guide.mdx | 1 +
 src/markdown-pages/example.mdx               | 1 +
 src/markdown-pages/foo-bar.md                | 1 +
 src/markdown-pages/guide-index.md            | 1 +
 4 files changed, 4 insertions(+)

diff --git a/src/markdown-pages/add-time-picker-guide.mdx b/src/markdown-pages/add-time-picker-guide.mdx
index 700d5e7fe..15f66239a 100644
--- a/src/markdown-pages/add-time-picker-guide.mdx
+++ b/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'
 ---
 
 
diff --git a/src/markdown-pages/example.mdx b/src/markdown-pages/example.mdx
index a60d0c9b9..29db1663a 100644
--- a/src/markdown-pages/example.mdx
+++ b/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
diff --git a/src/markdown-pages/foo-bar.md b/src/markdown-pages/foo-bar.md
index 7b89c9fbe..c8ad9d4cf 100644
--- a/src/markdown-pages/foo-bar.md
+++ b/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
diff --git a/src/markdown-pages/guide-index.md b/src/markdown-pages/guide-index.md
index 0af1a87b5..414c94186 100644
--- a/src/markdown-pages/guide-index.md
+++ b/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

From f1ce455bc7d05815231d1a7e8a339c66d7719b29 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 29 May 2020 14:48:43 -0700
Subject: [PATCH 2/2] feat: added ability to set page-specific metadata

---
 src/markdown-pages/foo-bar-baz.md | 1 +
 src/templates/GuideTemplate.js    | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/markdown-pages/foo-bar-baz.md b/src/markdown-pages/foo-bar-baz.md
index fb7f7212f..70f3a3ae2 100644
--- a/src/markdown-pages/foo-bar-baz.md
+++ b/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
diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index b6fc2889f..f5ffcfe94 100644
--- a/src/templates/GuideTemplate.js
+++ b/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
       }
     }
   }