feat(OverviewTemplate): Add guide listing filtered to overview path

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,
       },
     });
   });

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",

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>

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" />

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>

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>

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
+        }
+      }
+    }
   }
 `;