From a50e8a01aa769cf54907a9b4a906f64605eb4510 Mon Sep 17 00:00:00 2001
From: Tim Glaser <tglaser@newrelic.com>
Date: Wed, 24 Jun 2020 10:54:58 -0700
Subject: [PATCH] feat(OverviewTemplate): Add guide listing filtered to
 overview path

---
 gatsby-node.js                                |  4 ++
 src/data/sidenav.json                         |  3 ++
 .../automate-workflows/index.mdx              | 14 +++++++
 src/markdown-pages/build-apps/index.mdx       |  5 ++-
 src/markdown-pages/collect-data/index.mdx     | 14 +++++++
 src/markdown-pages/explore-docs/index.mdx     | 14 +++++++
 src/templates/OverviewTemplate.js             | 39 ++++++++++++++++---
 src/templates/OverviewTemplate.module.scss    |  0
 8 files changed, 86 insertions(+), 7 deletions(-)
 create mode 100644 src/markdown-pages/automate-workflows/index.mdx
 create mode 100644 src/markdown-pages/collect-data/index.mdx
 create mode 100644 src/markdown-pages/explore-docs/index.mdx
 delete mode 100644 src/templates/OverviewTemplate.module.scss

diff --git a/gatsby-node.js b/gatsby-node.js
index f759f042b..cf7e593c1 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -48,6 +48,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       component: path.resolve(`src/templates/${frontmatter.template}.js`),
       context: {
         fileRelativePath: getFileRelativePath(node.fileAbsolutePath),
+        guidesFilter:
+          frontmatter.template === 'OverviewTemplate'
+            ? `${frontmatter.path}/*`
+            : undefined,
       },
     });
   });
diff --git a/src/data/sidenav.json b/src/data/sidenav.json
index 2e8e1a558..873504cb0 100644
--- a/src/data/sidenav.json
+++ b/src/data/sidenav.json
@@ -1,6 +1,7 @@
 [
   {
     "displayName": "Collect data",
+    "url": "/collect-data",
     "children": [
       {
         "displayName": "Collect data from any source",
@@ -26,6 +27,7 @@
   },
   {
     "displayName": "Automate workflows",
+    "url": "/automate-workflows",
     "children": [
       {
         "displayName": "Orchestrate observability workflows",
@@ -77,6 +79,7 @@
   },
   {
     "displayName": "Explore docs",
+    "url": "/explore-docs",
     "children": [
       {
         "displayName": "New Relic One CLI",
diff --git a/src/markdown-pages/automate-workflows/index.mdx b/src/markdown-pages/automate-workflows/index.mdx
new file mode 100644
index 000000000..1fc470435
--- /dev/null
+++ b/src/markdown-pages/automate-workflows/index.mdx
@@ -0,0 +1,14 @@
+---
+path: '/automate-workflows'
+title: 'Automate Workflows'
+template: 'OverviewTemplate'
+description: ''
+---
+
+<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>
diff --git a/src/markdown-pages/build-apps/index.mdx b/src/markdown-pages/build-apps/index.mdx
index 2318bbb67..4a5232b8a 100644
--- a/src/markdown-pages/build-apps/index.mdx
+++ b/src/markdown-pages/build-apps/index.mdx
@@ -1,11 +1,12 @@
 ---
 path: '/build-apps'
-title: 'Build Custom New Relic Apps'
+title: 'Build Apps'
 template: 'OverviewTemplate'
-description: 'Learn how to build custom New Relic applications'
+description: ''
 ---
 
 <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" />
diff --git a/src/markdown-pages/collect-data/index.mdx b/src/markdown-pages/collect-data/index.mdx
new file mode 100644
index 000000000..10b0755e7
--- /dev/null
+++ b/src/markdown-pages/collect-data/index.mdx
@@ -0,0 +1,14 @@
+---
+path: '/collect-data'
+title: 'Collect Data'
+template: 'OverviewTemplate'
+description: ''
+---
+
+<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>
diff --git a/src/markdown-pages/explore-docs/index.mdx b/src/markdown-pages/explore-docs/index.mdx
new file mode 100644
index 000000000..d15e7ae89
--- /dev/null
+++ b/src/markdown-pages/explore-docs/index.mdx
@@ -0,0 +1,14 @@
+---
+path: '/explore-docs'
+title: 'Explore Docs'
+template: 'OverviewTemplate'
+description: ''
+---
+
+<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>
diff --git a/src/templates/OverviewTemplate.js b/src/templates/OverviewTemplate.js
index 6f434723b..fed7327d0 100644
--- a/src/templates/OverviewTemplate.js
+++ b/src/templates/OverviewTemplate.js
@@ -7,6 +7,9 @@ import { MDXProvider } from '@mdx-js/react';
 import { pageContext } from '../types';
 import Layout from '../components/Layout';
 import PageTitle from '../components/PageTitle';
+import GuideListing from '../components/GuideListing/GuideListing';
+import GuideTile from '../components/GuideTile';
+
 import Video from '../components/Video';
 import Step from '../components/Step';
 import Steps from '../components/Steps';
@@ -24,8 +27,6 @@ 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
@@ -43,7 +44,7 @@ const components = {
 };
 
 const OverviewTemplate = ({ data, pageContext }) => {
-  const { mdx } = data;
+  const { mdx, guides } = data;
   const { frontmatter, body } = mdx;
   const { title, description } = frontmatter;
   const crumbs = createBreadcrumbs(frontmatter.path, pages);
@@ -61,6 +62,18 @@ const OverviewTemplate = ({ data, pageContext }) => {
               <MDXRenderer>{body}</MDXRenderer>
             </MDXProvider>
           </div>
+          {guides?.nodes.length && (
+            <GuideListing className={styles.guideListing}>
+              <GuideListing.Heading className={styles.guideListingHeading}>
+                Guides to build New Relic apps ({guides?.nodes.length})
+              </GuideListing.Heading>
+              <GuideListing.List>
+                {guides?.nodes.map((guide, index) => (
+                  <GuideTile key={index} {...guide?.frontmatter} />
+                ))}
+              </GuideListing.List>
+            </GuideListing>
+          )}
         </Layout>
       </BreadcrumbContext.Provider>
     </PageContext.Provider>
@@ -73,16 +86,32 @@ OverviewTemplate.propTypes = {
 };
 
 export const pageQuery = graphql`
-  query($path: String!) {
+  query($path: String!, $guidesFilter: String!) {
     mdx(frontmatter: { path: { eq: $path } }) {
       body
       frontmatter {
-        duration
         path
         title
         description
       }
     }
+    guides: allMdx(
+      filter: {
+        frontmatter: {
+          template: { eq: "GuideTemplate" }
+          path: { glob: $guidesFilter }
+        }
+      }
+    ) {
+      nodes {
+        frontmatter {
+          path
+          title
+          description
+          duration
+        }
+      }
+    }
   }
 `;
 
diff --git a/src/templates/OverviewTemplate.module.scss b/src/templates/OverviewTemplate.module.scss
deleted file mode 100644
index e69de29bb..000000000