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: ''
+---
+
+
+
+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.
+
+
+
+
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: ''
---
+
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.
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: ''
+---
+
+
+
+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.
+
+
+
+
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: ''
+---
+
+
+
+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.
+
+
+
+
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 }) => {
{body}
+ {guides?.nodes.length && (
+
+
+ Guides to build New Relic apps ({guides?.nodes.length})
+
+
+ {guides?.nodes.map((guide, index) => (
+
+ ))}
+
+
+ )}
@@ -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