feat: Add overview template

src/data/sidenav.json

@@ -47,6 +47,7 @@
   },
   {
     "displayName": "Build apps",
+    "url": "/build-apps",
     "children": [
       {
         "displayName": "Create a 'Hello, World!' app",

src/markdown-pages/build-apps/index.mdx

@@ -0,0 +1,13 @@
+---
+path: '/build-apps'
+title: 'Build Custom New Relic Apps'
+template: 'OverviewTemplate'
+description: 'Learn how to build custom New Relic applications'
+---
+
+<Intro>
+This guide steps you through adding access to the New Relic time picker to a sample transaction overview application. You also add the selected time to the queries used in the application’s chart components. Start by setting up the sample application and running it locally. Then add the time picker, and some time picker features.
+
+<Video id="inyshp3m7r" type="wistia" />
+
+</Intro>

src/templates/OverviewTemplate.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { graphql } from 'gatsby';
+import PropTypes from 'prop-types';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
+import { MDXProvider } from '@mdx-js/react';
+
+import { pageContext } from '../types';
+import Layout from '../components/Layout';
+import PageTitle from '../components/PageTitle';
+import Video from '../components/Video';
+import Step from '../components/Step';
+import Steps from '../components/Steps';
+import Caution from '../components/Caution';
+import Important from '../components/Important';
+import Tip from '../components/Tip';
+import Intro from '../components/Intro';
+import SEO from '../components/Seo';
+import { BreadcrumbContext } from '../components/BreadcrumbContext';
+import { PageContext } from '../components/PageContext';
+import createBreadcrumbs from '../utils/create-breadcrumbs';
+import pages from '../data/sidenav.json';
+import styles from './OverviewTemplate.module.scss';
+import CodeSnippet from '../components/CodeSnippet';
+
+/**
+ * TODO
+ * Confirm the open ended markdown space satisfies the design
+ * Add filtered guide listing
+ * Share markdown components collection
+ * Move contexts to wrapRootElement (and remove pageContext)
+ * Remove extra div from around PageTitle
+ */
+
+const components = {
+  Video,
+  Step,
+  Steps,
+  Caution,
+  Important,
+  Tip,
+  Intro,
+  code: (props) => <CodeSnippet {...props} />,
+};
+
+const OverviewTemplate = ({ data, pageContext }) => {
+  const { mdx } = data;
+  const { frontmatter, body } = mdx;
+  const { title, description } = frontmatter;
+  const crumbs = createBreadcrumbs(frontmatter.path, pages);
+
+  return (
+    <PageContext.Provider value={pageContext}>
+      <BreadcrumbContext.Provider value={crumbs}>
+        <Layout>
+          <SEO title={title} description={description} />
+          <div className={styles.header}>
+            <PageTitle>{title}</PageTitle>
+          </div>
+          <div className={styles.mdxContainer}>
+            <MDXProvider components={components}>
+              <MDXRenderer>{body}</MDXRenderer>
+            </MDXProvider>
+          </div>
+        </Layout>
+      </BreadcrumbContext.Provider>
+    </PageContext.Provider>
+  );
+};
+
+OverviewTemplate.propTypes = {
+  data: PropTypes.object,
+  pageContext,
+};
+
+export const pageQuery = graphql`
+  query($path: String!) {
+    mdx(frontmatter: { path: { eq: $path } }) {
+      body
+      frontmatter {
+        duration
+        path
+        title
+        description
+      }
+    }
+  }
+`;
+
+export default OverviewTemplate;