From 3a31d3005923da5480eb31b63f7ab6e49f95ed5a Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Sun, 21 Jun 2020 21:33:41 -0400
Subject: [PATCH] feat: working search box

---
 .eslintrc.js                                  |  1 +
 package-lock.json                             | 16 +++-
 package.json                                  |  2 +
 src/components/GuideTile.module.scss          |  5 +-
 src/components/IconGallery.js                 |  3 +-
 src/components/Layout.js                      |  1 +
 src/components/Layout.module.scss             |  1 -
 src/components/Navigation.js                  | 25 +++++-
 src/components/Navigation.module.scss         | 14 ++++
 src/components/Step.module.scss               |  2 +-
 src/components/Video.module.scss              |  1 -
 src/components/styles.scss                    | 46 +++-------
 src/data/sidenav.json                         | 27 +++---
 src/hooks/useApiDoc.js                        |  2 +-
 src/hooks/useComponentDoc.js                  |  2 +-
 .../workflow-automation.mdx                   | 84 +++++++++++++++++++
 src/markdown-pages/query-and-store-data.mdx   | 26 ++----
 src/markdown-pages/query-data-nrql.mdx        | 20 ++---
 .../get-started-nerdgraph-api-explorer.mdx    | 14 ++--
 src/markdown-pages/reference/intro-to-sdk.mdx | 78 ++++++++---------
 .../reference/nerdpack-file-structure.mdx     | 76 ++++++++---------
 src/pages/explore-data.js                     | 42 ++++++----
 src/pages/index.js                            | 38 +++++++--
 src/pages/index.module.scss                   |  5 +-
 src/templates/GuideTemplate.module.scss       |  8 ++
 25 files changed, 336 insertions(+), 203 deletions(-)
 create mode 100644 src/markdown-pages/automate-workflows/workflow-automation.mdx

diff --git a/.eslintrc.js b/.eslintrc.js
index 849758db1..d8c2b04e1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,6 +4,7 @@ module.exports = {
     'plugin:@newrelic/eslint-plugin-newrelic/react',
     'plugin:@newrelic/eslint-plugin-newrelic/prettier',
     'plugin:jsx-a11y/recommended',
+    'plugin:react-hooks/recommended',
   ],
   // https://github.com/yannickcr/eslint-plugin-react#configuration
   plugins: ['react', 'jsx-a11y'],
diff --git a/package-lock.json b/package-lock.json
index e88315cb4..2bab40225 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8854,9 +8854,9 @@
       }
     },
     "eslint-plugin-react-hooks": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
-      "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA=="
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.4.tgz",
+      "integrity": "sha512-equAdEIsUETLFNCmmCkiCGq6rkSK5MoJhXFPFYeUebcjKgBmWWcgVOqZyQC8Bv1BwVCnTq9tBxgJFgAJTWoJtA=="
     },
     "eslint-scope": {
       "version": "5.0.0",
@@ -10750,6 +10750,11 @@
             }
           }
         },
+        "eslint-plugin-react-hooks": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
+          "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA=="
+        },
         "gatsby-cli": {
           "version": "2.11.11",
           "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.11.11.tgz",
@@ -19475,6 +19480,11 @@
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "npm-conf": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
diff --git a/package.json b/package.json
index 968c3c9f8..2ce707688 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@mdx-js/react": "^1.6.4",
     "classnames": "^2.2.6",
     "date-fns": "^2.14.0",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "gatsby": "^2.20.25",
     "gatsby-image": "^2.3.4",
     "gatsby-plugin-google-tagmanager": "^2.3.3",
@@ -23,6 +24,7 @@
     "gatsby-transformer-remark": "^2.7.3",
     "gatsby-transformer-sharp": "^2.4.6",
     "node-sass": "^4.13.1",
+    "normalize.css": "^8.0.1",
     "prism-react-renderer": "^1.1.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
diff --git a/src/components/GuideTile.module.scss b/src/components/GuideTile.module.scss
index 5a6b8b2b4..7fb015f33 100644
--- a/src/components/GuideTile.module.scss
+++ b/src/components/GuideTile.module.scss
@@ -5,7 +5,7 @@
     'main main main';
   background-color: white;
   box-shadow: var(--boxshadow);
-  padding: 1.5rem;
+  padding: 0.5rem;
 
   button:hover {
     transform: translateY(-1px);
@@ -40,5 +40,6 @@
   font-size: 0.9rem;
   margin-bottom: 1.5rem;
   max-width: calc(100% - 4rem);
-  color: var(--color-neutrals-500);
+  color: var(--color-neutrals-600);
+  flex: 1;
 }
diff --git a/src/components/IconGallery.js b/src/components/IconGallery.js
index 82615b552..0f4197ea7 100644
--- a/src/components/IconGallery.js
+++ b/src/components/IconGallery.js
@@ -5,12 +5,13 @@ import IconReference from './IconReference';
 const IconGallery = () => {
   if (typeof window === 'undefined') global.window = {};
 
+  const [search, setSearch] = useState('');
+
   // Get the Icon component when available
   const { Icon } = window.__NR1_SDK__?.default ?? {};
   if (!Icon) return null;
 
   // Basic search / filtering
-  const [search, setSearch] = useState('');
   const types = Object.keys(Icon.TYPE);
   const filterByString = (input) => (str) =>
     str.toLowerCase().includes(input.toLowerCase());
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 7cfb1fcbe..baa03e316 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -7,6 +7,7 @@ import GlobalHeader from './GlobalHeader';
 import MobileHeader from './MobileHeader';
 import Sidebar from './Sidebar';
 import styles from './Layout.module.scss';
+import 'normalize.css';
 import './styles.scss';
 
 const Layout = ({ children }) => {
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index c4fe3aabe..cb72efcdc 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -5,7 +5,6 @@
 }
 
 .main {
-  min-height: 100%;
   display: grid;
   grid-template-columns: 300px minmax(0, 1fr);
   width: 100%;
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index cdd2a1395..69f466fcd 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -9,9 +9,13 @@ import matchSearchString from '../utils/matchSearchString';
 
 import styles from './Navigation.module.scss';
 
+// TODO: Add this implementation
+const filterPages = (pages, _searchTerm) => pages;
+
 // recursively create navigation
 const renderNav = (pages, searches, depthLevel = 0) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
+  const isHomePage = crumbs.length === 0 && depthLevel === 0;
 
   const groupedPages = pages.reduce((groups, page) => {
     const { group = '' } = page;
@@ -29,9 +33,7 @@ const renderNav = (pages, searches, depthLevel = 0) => {
       )}
       {pages.map((page) => {
         const [isExpanded, setIsExpanded] = useState(
-          searches !== undefined ||
-            crumbs.includes(page.displayName) ||
-            crumbs.length === depthLevel
+          isHomePage || crumbs.includes(page.displayName)
         );
 
         const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
@@ -54,7 +56,13 @@ const renderNav = (pages, searches, depthLevel = 0) => {
             )}
           >
             {page.url ? (
-              <Link className={styles.navLink} to={page.url}>
+              <Link
+                className={cx(
+                  { [styles.isCurrentPage]: isCurrentPage },
+                  styles.navLink
+                )}
+                to={page.url}
+              >
                 {page.displayName}
                 {isCurrentPage && (
                   <FeatherIcon
@@ -71,6 +79,15 @@ const renderNav = (pages, searches, depthLevel = 0) => {
                 onKeyPress={() => setIsExpanded(!isExpanded)}
                 tabIndex={0}
               >
+                {depthLevel > 0 && (
+                  <FeatherIcon
+                    className={cx(
+                      { [styles.isExpanded]: isExpanded },
+                      styles.nestedChevron
+                    )}
+                    name="chevron-right"
+                  />
+                )}
                 {page.displayName}
               </button>
             )}
diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index f747b3129..6a3b3cbf6 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -27,6 +27,11 @@
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
+  transition: 0.1s;
+
+  &:not(.isCurrentPage):hover {
+    color: var(--color-neutrals-600);
+  }
 
   [data-depth='0'] > & {
     font-weight: bold;
@@ -50,6 +55,15 @@ button.navLink {
   stroke-width: 4;
 }
 
+.nestedChevron {
+  margin-right: 0.5rem;
+  stroke-width: 4;
+  transition: 0.2s;
+  &.isExpanded {
+    transform: rotate(90deg);
+  }
+}
+
 .groupName {
   color: var(--color-neutrals-600);
   font-weight: bold;
diff --git a/src/components/Step.module.scss b/src/components/Step.module.scss
index 1591bc1d6..4c6d999f8 100644
--- a/src/components/Step.module.scss
+++ b/src/components/Step.module.scss
@@ -19,7 +19,7 @@
   h6:first-child {
     color: var(--color-neutrals-900);
     font-weight: bold;
-    margin-top: 0.5rem;
+    margin-top: 0;
     margin-bottom: 1rem;
     font-size: 1rem;
   }
diff --git a/src/components/Video.module.scss b/src/components/Video.module.scss
index c522733b8..e6cd9b9f4 100644
--- a/src/components/Video.module.scss
+++ b/src/components/Video.module.scss
@@ -1,6 +1,5 @@
 .video {
   max-width: 560px;
-  margin: 1rem 0;
 
   iframe {
     width: 100%;
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 1907c099b..7a07ed788 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -57,12 +57,12 @@
   --color-teal-800: #003539;
   --color-teal-900: #002123;
 
-  --boxshadow: 0px 2.76726px 2.21381px rgba(0, 85, 90, 0.0168687),
-    0px 6.6501px 5.32008px rgba(0, 85, 90, 0.0242336),
-    0px 12.5216px 10.0172px rgba(0, 85, 90, 0.03),
-    0px 22.3363px 17.869px rgba(0, 85, 90, 0.0357664),
-    0px 41.7776px 33.4221px rgba(0, 85, 90, 0.0431313),
-    0px 100px 80px rgba(0, 85, 90, 0.06);
+  --boxshadow: 0 0.24905px 0.55345px rgba(0, 0, 0, 0.00562291),
+    0 0.59851px 1.33002px rgba(0, 0, 0, 0.00807786),
+    0 1.12694px 2.50431px rgba(0, 0, 0, 0.01),
+    0 2.01027px 4.46726px rgba(0, 0, 0, 0.0119221),
+    0 3.75998px 8.35552px rgba(0, 0, 0, 0.0143771),
+    0 9px 20px rgba(0, 0, 0, 0.02);
 
   --color-tile-background: rgb(215, 210, 233);
   --primary-font-family: 'open sans', sans-serif;
@@ -74,19 +74,11 @@
   --height-mobile-nav-bar: 60px;
 }
 
-/*-- Reset --*/
-// https://github.com/necolas/normalize.css
-html {
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-}
-
 * {
   box-sizing: border-box;
 }
 
 body {
-  margin: 0;
   font-size: 16px;
   font-family: var(--primary-font-family);
   color: var(--color-neutrals-700);
@@ -94,20 +86,12 @@ body {
   line-height: 1.5;
 }
 
-main {
-  display: block;
-}
-
 a {
   cursor: pointer;
   text-decoration: none;
   color: var(--color-brand-800);
 }
 
-img {
-  border-style: none;
-}
-
 p {
   margin-top: 0;
   margin-bottom: 1em;
@@ -126,17 +110,6 @@ h6 {
   font-family: var(--primary-font-family);
 }
 
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-
 input,
 select {
   border: 1px solid var(--color-neutrals-400);
@@ -149,7 +122,6 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-  -webkit-appearance: button;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -177,6 +149,10 @@ code {
   font-family: var(--code-font);
 }
 
+pre {
+  margin: 0;
+}
+
 :global {
   .intro-text {
     color: var(--color-neutrals-600);
@@ -186,6 +162,6 @@ code {
 
   .site-container {
     max-width: 1460px;
-    margin: auto;
+    margin: 0 auto;
   }
 }
diff --git a/src/data/sidenav.json b/src/data/sidenav.json
index 1e5ff10d3..388831b20 100644
--- a/src/data/sidenav.json
+++ b/src/data/sidenav.json
@@ -8,15 +8,15 @@
         "url": "/"
       },
       {
-        "displayName": "OpenTelemetry Exporter",
+        "displayName": "OpenTelemetry exporter",
         "url": "/"
       },
       {
-        "displayName": "Extend New Relic Agents",
+        "displayName": "Extend New Relic agents",
         "url": "/"
       },
       {
-        "displayName": "Create Flex Integration",
+        "displayName": "Create a Flex integration",
         "url": "/"
       }
     ]
@@ -26,41 +26,40 @@
     "url": "/explore-data",
     "children": [
       {
-        "displayName": "Write NRQL Queries",
+        "displayName": "Write NRQL queries",
         "url": "/"
       },
       {
-        "displayName": "Build a NerdGraph Query",
+        "displayName": "Build a NerdGraph query",
         "url": "/"
       }
     ]
   },
   {
     "displayName": "Build apps",
-    "url": "/build-apps",
     "children": [
       {
-        "displayName": "Map Pageviews by Region",
+        "displayName": "Map pageviews by region",
         "url": "/build-apps/map-pageviews-by-region"
       },
       {
-        "displayName": "Optimize Cloud Usage",
+        "displayName": "Optimize cloud usage",
         "url": "/build-apps/optimize-cloud-usage"
       },
       {
-        "displayName": "Add a Time Picker",
+        "displayName": "Add a time picker",
         "url": "/build-apps/add-time-picker-guide"
       },
       {
-        "displayName": "Use NerdGraph in an App",
+        "displayName": "Use NerdGraph in an app",
         "url": "/build-apps/use-nerdgraph-in-app"
       },
       {
-        "displayName": "Build a Table",
+        "displayName": "Build a table",
         "url": "/build-apps/build-a-table"
       },
       {
-        "displayName": "Persistent Storage for Apps",
+        "displayName": "Persistent storage for apps",
         "url": "/build-apps/persistent-storage-for-apps"
       }
     ]
@@ -70,11 +69,11 @@
     "url": "/automate-workflows",
     "children": [
       {
-        "displayName": "Monitor, Alert, and Analyze",
+        "displayName": "Monitor, alert, and analyze",
         "url": "/automate-workflows/"
       },
       {
-        "displayName": "OpenTelemetry Exporter",
+        "displayName": "OpenTelemetry exporter",
         "url": "/automate-workflows/"
       }
     ]
diff --git a/src/hooks/useApiDoc.js b/src/hooks/useApiDoc.js
index 74f9b8ef1..634e3a24b 100644
--- a/src/hooks/useApiDoc.js
+++ b/src/hooks/useApiDoc.js
@@ -86,7 +86,7 @@ const useApiDoc = (name) => {
           };
         }),
     };
-  }, [name, window.__NR1_SDK__]);
+  }, [name]);
 };
 
 export default useApiDoc;
diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js
index 926d964bf..5f53a6aa9 100644
--- a/src/hooks/useComponentDoc.js
+++ b/src/hooks/useComponentDoc.js
@@ -80,7 +80,7 @@ const useComponentDoc = (componentName) => {
         tagsFromComponentProperties.concat(tagsFromPropTypes)
       ),
     };
-  }, [componentName, window?.__NR1_SDK__]);
+  }, [componentName]);
 };
 
 export default useComponentDoc;
diff --git a/src/markdown-pages/automate-workflows/workflow-automation.mdx b/src/markdown-pages/automate-workflows/workflow-automation.mdx
new file mode 100644
index 000000000..6dfbf619a
--- /dev/null
+++ b/src/markdown-pages/automate-workflows/workflow-automation.mdx
@@ -0,0 +1,84 @@
+---
+path: '/automate-workflows/workflow-automation'
+title: 'Orchestrate observability workflows'
+description: 'Tools to automate your observability ecosystem'
+template: 'GuideTemplate'
+---
+
+## Define and automate observability
+
+As the maintainer of an increasingly complex software stack, you need to
+pinpoint problems without filtering through all the noise. You need to automate
+observability the way you automate infrastructure management, by embedding your
+New Relic configuration in code. The [Terraform
+Provider](https://www.terraform.io/docs/providers/newrelic/index.html) enables
+observability as code -- the ability to monitor, alert, and analyze your
+ecosystem in one place, in real time. Built on the New Relic Client, the
+Terraform Provider provides a full implementation of APIs that enable you to
+create alert policies and conditions, Synthetic monitors and Synthetics alert
+conditions, notification policies and more.
+
+The [Terraform Provider getting started
+guide](https://www.terraform.io/docs/providers/newrelic/guides/getting_started.html)
+steps you through some fundamental configuration. The [New Relic APM Terraform
+module](https://registry.terraform.io/modules/newrelic/apm/newrelic/0.0.4)
+provides a monitoring strategy for application resources reporting into New
+Relic.
+
+<Video type='youtube' id='UwJ-7BLylJo' />
+
+## Build event-based workflows
+
+When you’re constantly releasing features, you need to easily track changes in
+your environment and monitor your systems. The [New Relic
+CLI](https://github.com/newrelic/newrelic-cli) enables the integration of New
+Relic into your existing workflows, from fetching data from your laptop while
+troubleshooting an issue, to adding New Relic into your CI/CD pipeline. The CLI
+is a supported library that consolidates New Relic tools, enabling you to
+perform these tasks (and more):
+
+* Search for entities across all your New Relic accounts
+* Manage tags across all of your entities
+* Record APM application deployments within New Relic
+
+See the [New Relic CLI getting started
+guide](https://github.com/newrelic/newrelic-cli/blob/master/docs/GETTING_STARTED.md)
+for steps to get set up, tag an application, tag all applications, or create a
+deployment marker.
+
+<Video type='youtube' id='g00AeKlECZA'/>
+
+## Harness multiple APIs with a single client
+
+The [New Relic Client](https://github.com/newrelic/newrelic-client-go) provides
+the building blocks for many tools in the toolkit, enabling quick access to a
+handful of New Relic APIs. The Client means you don’t have to toil over things
+like serialization and authentication. Use it to record your application
+deployments without having to learn how the API works. Or to automate changing
+tags within New Relic when service ownership changes. And you can
+programmatically manage your assets via APIs and auto-instrumentation within
+your own custom applications.
+
+The client provides full support for these New Relic API endpoints:
+
+* [NerdGraph API](https://docs.newrelic.com/docs/apis/nerdgraph/get-started/introduction-new-relic-nerdgraph), New Relic’s GraphQL API
+* [REST v2 API](https://docs.newrelic.com/docs/apis/rest-api-v2/getting-started/introduction-new-relic-rest-api-v2)
+* [Infrastructure API](https://docs.newrelic.com/docs/infrastructure/new-relic-infrastructure/infrastructure-alert-conditions/rest-api-calls-new-relic-infrastructure-alerts)
+* [Synthetics API](https://docs.newrelic.com/docs/apis/synthetics-rest-api/monitor-examples/manage-synthetics-monitors-rest-api)
+
+## Provision New Relic resources with AWS CloudFormation
+
+If you’re a developer using AWS CloudFormation, the [New Relic CloudFormation
+integration](https://github.com/newrelic/cloudformation-partner-integration)
+enables you to provision a subset of New Relic resources. You can build on the
+New Relic Client, and configure basic NRQL alerts.
+
+For more information, see our [AWS CloudFormation
+integration](https://docs.newrelic.com/docs/integrations/amazon-integrations/aws-integrations-list/aws-cloudformation-integration)
+documentation.
+
+## For more help
+
+* [Developer Toolkit on GitHub](https://newrelic.github.io/developer-toolkit/)
+* [Discuss on the Explorer’s Hub](https://discuss.newrelic.com/c/build-on-new-relic/developer-toolkit)
+* [Toolkit roadmap](https://newrelic.github.io/developer-toolkit/roadmap/)
diff --git a/src/markdown-pages/query-and-store-data.mdx b/src/markdown-pages/query-and-store-data.mdx
index 1133c6edc..a482138ab 100644
--- a/src/markdown-pages/query-and-store-data.mdx
+++ b/src/markdown-pages/query-and-store-data.mdx
@@ -1,22 +1,22 @@
 ---
-path: '/references/query-and-store-data.mdx'
+path: '/references/query-and-store-data'
 duration: '10 min'
 title: 'New Relic One apps: Data querying and mutations'
 template: 'GuideTemplate'
-description: 'Reference guide for SDK query components via NerdGraph '
+description: 'Reference guide for SDK query components via NerdGraph'
 ---
 
 <Intro>
 
-To help you build a [New Relic One application](), we provide you with the [New Relic One SDK](). On this page, you’ll learn how to use SDK query components, which allow you to make queries and mutations via [NerdGraph](https://docs.newrelic.com/docs/apis/nerdgraph/get-started/introduction-new-relic-nerdgraph) (our GraphQL endpoint). 
+To help you build a [New Relic One application](), we provide you with the [New Relic One SDK](). On this page, you’ll learn how to use SDK query components, which allow you to make queries and mutations via [NerdGraph](https://docs.newrelic.com/docs/apis/nerdgraph/get-started/introduction-new-relic-nerdgraph) (our GraphQL endpoint).
 
 Query-related React components can be identified by the `Query` suffix. Mutation-related components can be identified by the `Mutation` prefix.
 
 </Intro>
 
-## Structure 
+## Structure
 
-Our data components are based on [React Apollo](https://www.apollographql.com/docs/react/). The most basic component is `NerdGraphQuery`, which accepts any GraphQL (or GraphQL AST generated by [the `grapqhl-tag` library](https://github.com/apollographql/graphql-tag) as the query parameter, and a set of query variables passed as `variables`.
+Our data components are based on [React Apollo](https://www.apollographql.com/docs/react/). The most basic component is `NerdGraphQuery`, which accepts any GraphQL (or GraphQL AST generated by the [`graphql-tag` library](https://github.com/apollographql/graphql-tag) as the query parameter, and a set of query variables passed as `variables`.
 
 Over this query, we have created an additional set of queries, which can be divided into four groups:
 
@@ -24,9 +24,7 @@ Over this query, we have created an additional set of queries, which can be divi
 - Entities queries: Because [New Relic One is entity-centric](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts), we use queries to make access to your entities easier. You can count, search, list, query, and favorite them. Components in this category: `EntityCountQuery`, `EntitySearchQuery`, `EntitiesByDomainTypeQuery`, `EntitiesByGuidsQuery`, `EntityByGuidQuery`, `EntityByNameQuery`.
 - Storage queries: New Relic One provides a simple storage mechanism that we call [NerdStorage](). This can be used by Nerdpack creators to store application configuration setting data, user-specific data, and other small pieces of data. Components in this category: `UserStorageQuery`, `AccountStorageQuery`, `EntityStorageQuery`, `UserStorageMutation`, `AccountStorageMutation`, and `EntityStorageMutation`. For details, see [NerdStorage]().
 
-NRQL query: To be able to query your New Relic data via [NRQL](https://docs.newrelic.com/docs/query-data/nrql-new-relic-query-language/getting-started/introduction-nrql) (New Relic query language), we provide a `NrqlQuery` component. This component can return data in different formats, so that you can use it for charting and not only for querying.
-
-<br/>
+NRQL query: To be able to query your New Relic data via [NRQL](https://docs.newrelic.com/docs/query-data/nrql-new-relic-query-language/getting-started/introduction-nrql) (New Relic Query Language), we provide a `NrqlQuery` component. This component can return data in different formats, so that you can use it for charting and not only for querying.
 
 ### Query Components
 
@@ -37,17 +35,13 @@ All query components accept as a children prop a function where the different st
 - `error`: Contains an `Error` instance when the query fails. Set to `undefined` when data is loading or the fetch was successful.
 - `fetchMore`: Callback function that can be called when the query is being loaded in chunks. The function will only be present when it’s feasible to do so, more data is available, and no `fetchMore` has already been triggered. Data is loaded in batches of 200 by default. Other components provided by the platform (like the `Dropdown` or the `List`) are capable of accepting `fetchMore`, meaning you can combine them easily.
 
-<br/>
-
 ### Mutation Components
 
  Mutation components also accept, like the query ones, a children as a function. The mutation can be pre-configured at the component level, and a function will be passed back that you can use in your component.
- 
- This is the standard React Apollo approach for performing mutations, but you might find it easier to use our static `mutation` method added to the component. More on this topic below.
 
- <br/>
+ This is the standard React Apollo approach for performing mutations, but you might find it easier to use our static `mutation` method added to the component. More on this topic below.
 
-### Static Methods 
+### Static Methods
 
 All of the described components also expose a static method so that they can be used imperatively rather than declaratively. All `Query` components have a static `Query` method, and all `Mutation` components have a `mutation` method. These static methods accept the same props as their query component, but passed as an object. For example:
 
@@ -90,8 +84,6 @@ async function getAccountList() {
 
 Similarly, a mutation can happen either way; either declaratively or imperatively.
 
-<br/>
-
 ## NrqlQuery
 
 `NrqlQuery` deserves additional explanation, because there are multiple formats in which you can return data from it. To provide maximum functionality, all three are exposed through a `formatType` property. You can find its different values under `NrqlQuery.formatType`:
@@ -100,4 +92,4 @@ Similarly, a mutation can happen either way; either declaratively or imperativel
 - `RAW`: The format exposed by default in Insights and dashboards when being plotted as JSON. This format is useful if you have a pre-existing script in this format that you're willing to migrate to or incorporate with.
 - `CHART`: The format used by the charting engine that we also expose. You can find a more detailed explanation of how to manipulate this format in the [guide to chart components](), and some examples.
 
-If you are willing to push data, we currently do not expose `NrqlMutation`. To do that, see the [Event API]() for how to add custom events.
\ No newline at end of file
+If you are willing to push data, we currently do not expose `NrqlMutation`. To do that, see the [Event API]() for how to add custom events.
diff --git a/src/markdown-pages/query-data-nrql.mdx b/src/markdown-pages/query-data-nrql.mdx
index 1b8a77d6b..2822e7f71 100644
--- a/src/markdown-pages/query-data-nrql.mdx
+++ b/src/markdown-pages/query-data-nrql.mdx
@@ -1,7 +1,7 @@
 ---
 path: '/query-data/nrql'
 duration: '10 min'
-title: 'Query Data With NRQL'
+title: 'Query data with NRQL'
 template: 'GuideTemplate'
 description: 'Query default event data as well as custom events and attributes with our powerful, SQL-like query language. Start querying now.'
 ---
@@ -21,7 +21,7 @@ NRQL syntax is comparable to ANSI SQL.
 [Learn mroe about NRQL syntax](https://docs.newrelic.com/docs/insights/nrql-new-relic-query-language/using-nrql/introduction-nrql)
 
 ```sql copy=false
-SELECT function(attribute) [AS 'label'][, ...] 
+SELECT function(attribute) [AS 'label'][, ...]
   FROM event
   [WHERE attribute [comparison] [AND|OR ...]][AS 'label'][, ...]
   [FACET attribute | function(attribute)]
@@ -56,12 +56,12 @@ NRQL queries can also do extremely powerful calculations before the data is pres
 
 ```sql
 -- See how many users visit, signup, browse and purchase from your site as a funnel
-SELECT funnel(session, 
+SELECT funnel(session,
   WHERE pageUrl='http://www.demotron.com/' AS 'Visited Homepage',
-  WHERE pageUrl='http://www.demotron.com/signup' AS 'Signed Up', 
-  WHERE pageUrl='http://www.demotron.com/browse' AS 'Browsed Items', 
-  WHERE pageUrl='http://www.demotron.com/checkout' AS 'Made Purchase') 
-  FROM PageView 
+  WHERE pageUrl='http://www.demotron.com/signup' AS 'Signed Up',
+  WHERE pageUrl='http://www.demotron.com/browse' AS 'Browsed Items',
+  WHERE pageUrl='http://www.demotron.com/checkout' AS 'Made Purchase')
+  FROM PageView
   SINCE 12 hours ago
 ```
 
@@ -69,7 +69,7 @@ SELECT funnel(session,
 
 <Step>
 
-Using NRQL, you can customize your New Relic experience by crafting diverse dashboards in New Relic Insights that show your data from multiple angles. These dashboards can be shared with technical and non-technical stakeholders alike.
+Using NRQL, you can customize your New Relic experience by crafting diverse dashboards in New Relic One that show your data from multiple angles. These dashboards can be shared with technical and non-technical stakeholders alike.
 
 ![Dashboard created with NRQL](../images/nr1-dashboard.png)
 
@@ -83,7 +83,7 @@ Using NRQL, you can customize your New Relic experience by crafting diverse dash
 
 ## Learn more and start building
 
-### Documenation
+### Documentation
 
 For an overview of NRQL syntax, see [Introduction to NRQL](https://docs.newrelic.com/docs/insights/nrql-new-relic-query-language/using-nrql/introduction-nrql). For a detailed description of all available functions, see [NRQL syntax, components, and functions](https://docs.newrelic.com/docs/insights/nrql-new-relic-query-language/nrql-resources/nrql-syntax-components-functions).
 
@@ -93,7 +93,7 @@ To learn how to query and narrow a large data store by a specific parameter, wat
 
 ### Community Forum
 
-Connect with other developers in the [New Relic Explorers Hub](http://discuss.newrelic.com/tags/developer). 
+Connect with other developers in the [New Relic Explorers Hub](http://discuss.newrelic.com/tags/developer).
 
 ### GitHub
 
diff --git a/src/markdown-pages/query-data/get-started-nerdgraph-api-explorer.mdx b/src/markdown-pages/query-data/get-started-nerdgraph-api-explorer.mdx
index 8dc1a9c96..216d22443 100644
--- a/src/markdown-pages/query-data/get-started-nerdgraph-api-explorer.mdx
+++ b/src/markdown-pages/query-data/get-started-nerdgraph-api-explorer.mdx
@@ -8,7 +8,7 @@ description: 'Learn to explore NerdGraph, our GraphQL API, and build the queries
 
 ## What is the NerdGraph API Explorer
 
-NerdGraph is New Relic's [GraphQL](https://graphql.org/) API. With NerdGraph, you can get all the information you need in a single request. No matter how much data you pull into New Relic, our GraphQL API can help you navigate that complexity and gain more insight. 
+NerdGraph is New Relic's [GraphQL](https://graphql.org/) API. With NerdGraph, you can get all the information you need in a single request. No matter how much data you pull into New Relic, our GraphQL API can help you navigate that complexity and gain more insight.
 
 NerdGraph is different from REST APIs in that you don't need to chain together several calls to obtain the required data. Instead, you use the Graph query language to retrieve JSON objects from our graph, which is spread across our many microservices.
 
@@ -20,7 +20,7 @@ This guide shows you how to use NerdGraph to compose queries, and how to turn th
 
 Go to [api.newrelic.com/graphiql](https://api.newrelic.com/graphiql) and log in using your New Relic user ID and password: the NerdGraph API Explorer load up. Before you begin, make sure you have a valid New Relic API key. You can create one directly from the NerdGraph API Explorer.
 
-![Create a NerdGraph API key](../images/graphql-guide/create-account.png)
+![Create a NerdGraph API key](../../images/graphql-guide/create-account.png)
 
 The Query Builder is in the left sidebar and lets you search, browse, and select graph fields. The center is the GraphQL query editor, which comes with syntax highlighting and autocompletion. Clicking the play button runs the query; the results appear as JSON on the right sidebar.
 
@@ -60,7 +60,7 @@ With this query, you're telling NerdGraph to retrieve your name. You're asking f
 
 The result has almost the same shape as the request; all the fields in the Query Builder make up what's called the GraphQL schema, which describes all the available data types and their attributes. To learn more about each field, click the **Docs** button, or hover over a field in the editor.
 
-![NerdGraph documentation and tooltips](../images/graphql-guide/graphql-documentation.png)
+![NerdGraph documentation and tooltips](../../images/graphql-guide/graphql-documentation.png)
 
 Now you can try adding more fields to your query. The simplest way is clicking the fields in the Query Builder: The NerdGraph API Explorer knows where the attributes should go in the query. In the example below, you add the account `id` and `email` fields.
 
@@ -88,20 +88,20 @@ Ready for your first mutation?
 2. Scroll down the Query Builder and expand `mutation`.
 3. Select the fields in the following screenshot:
 
-![Mutation example](../images/graphql-guide/mutation-example.png)
+![Mutation example](../../images/graphql-guide/mutation-example.png)
 
 In this case, you're trying to add a custom tag to an entity. Notice that the editor complains if you don't select `errors`: mutations must have a way of telling you how the operation performed in the backend (failed requests result in null responses).
 
-> Unlike REST, GraphQL APIs like NerdGraph can return partial responses. For example, if you try adding tags to multiple entities, some mutations can fail and others succeed; all is logged in the GraphQL response you get. 
+> Unlike REST, GraphQL APIs like NerdGraph can return partial responses. For example, if you try adding tags to multiple entities, some mutations can fail and others succeed; all is logged in the GraphQL response you get.
 
 ## Try your NerdGraph query in the terminal
 
 Let's say that you've built a NerdGraph query you're happy with and you want to test it elsewhere. To capture code-ready queries and mutations:
 
-1. Select the **Tools** menu. 
+1. Select the **Tools** menu.
 2. Copy the query as a cURL call or as a [New Relic CLI](...) command.
 
-![Tools menu](../images/graphql-guide/tools-menu.png)
+![Tools menu](../../images/graphql-guide/tools-menu.png)
 
 Here's what the first query you created in this guide would look like as cURL:
 
diff --git a/src/markdown-pages/reference/intro-to-sdk.mdx b/src/markdown-pages/reference/intro-to-sdk.mdx
index c26fd8847..4fee0aefd 100644
--- a/src/markdown-pages/reference/intro-to-sdk.mdx
+++ b/src/markdown-pages/reference/intro-to-sdk.mdx
@@ -7,10 +7,10 @@ description: 'Intro to New Relic One API components'
 
 <Intro>
 
-To help you build a New Relic One application we provide you with the New Relic One SDK
-This page will give you an introduction to the types of API calls and components in the SDK. 
-The SDK provides everything you need to build your Nerdlets, create visualizations, and fetch 
-data (New Relic or third-party). These components are located in the Node module package named `nr1`, 
+To help you build a New Relic One application we provide you with the New Relic One SDK.
+This page will give you an introduction to the types of API calls and components in the SDK.
+The SDK provides everything you need to build your Nerdlets, create visualizations, and fetch
+data (New Relic or third-party). These components are located in the Node module package named `nr1`,
 which you get when you install [the NR1 CLI](TODOneedURL).
 
 </Intro>
@@ -28,60 +28,60 @@ The `nr1` components can be divided into several categories:
 
 The **UI components** category of the SDK contains React UI components, including:
 
--   Text components: These components provide basic font and heading elements. 
-These include [`HeadingText`](../components/heading-text) 
+-   Text components: These components provide basic font and heading elements.
+These include [`HeadingText`](../components/heading-text)
 and [`BlockText`](../components/block-text).
 
 -   Layout components: These components give you control over the layout, and help you build complex layout designs without having to deal with the CSS. Layout components include:
 
-    -   [`Grid`](../components/grid) 
-    and [`GridItem`:](../components/grid-item) 
+    -   [`Grid`](../components/grid)
+    and [`GridItem`:](../components/grid-item)
     for organizing more complex, larger scale page content in rows and columns.
 
-    -   [`Stack`](../components/stack) 
-    and [`StackItem`](../components/stack-item): 
+    -   [`Stack`](../components/stack)
+    and [`StackItem`](../components/stack-item):
     for organizing simpler, smaller scale page content (in column or row).
 
-    -   [`Tabs`](../components/tabs) 
-    and [`TabsItem`](../components/tabs-item): 
+    -   [`Tabs`](../components/tabs)
+    and [`TabsItem`](../components/tabs-item):
     group various related pieces of content into separate hideable sections.
 
-    -   [`List`](../components/list) 
-    and [`ListItem`](../components/list-item): 
+    -   [`List`](../components/list)
+    and [`ListItem`](../components/list-item):
     for providing a basic skeleton of virtualized lists.
 
-    -   [`Card`](../components/card), 
+    -   [`Card`](../components/card),
     [`CardHeader`](../components/card-header) and [`CardBody`](../components/card-body)
     : used to group similar concepts and tasks together.
 
--   Form components: These components provide the basic building blocks to interact with the UI. 
-These include [`Button`](../components/button), 
-[`TextField`](../components/text-field), 
-[`Dropdown`](../components/dropdown) 
+-   Form components: These components provide the basic building blocks to interact with the UI.
+These include [`Button`](../components/button),
+[`TextField`](../components/text-field),
+[`Dropdown`](../components/dropdown)
 and [`DropdownItem`](../components/dropdown-item),
  [`Checkbox`](../components/checkbox),
-  [`RadioGroup`](../components/radio-group), 
-  [`Radio`](../components/radio), 
+  [`RadioGroup`](../components/radio-group),
+  [`Radio`](../components/radio),
   and [`Checkbox`](../components/checkbox).
 
--   Feedback components: These components are used to provide feedback to users about actions they've taken. 
-These include: [`Spinner`](../components/spinner) 
+-   Feedback components: These components are used to provide feedback to users about actions they've taken.
+These include: [`Spinner`](../components/spinner)
 and [`Toast`](../components/toast).
 
--   Overlaid components: These components are used to display contextual information and 
-options in the form of an additional child view that appears above other content on screen 
-when an action or event is triggered. They can either require user interaction (like modals), 
-or be augmenting (like a tooltip). These include: [`Modal`](../components/modal) 
+-   Overlaid components: These components are used to display contextual information and
+options in the form of an additional child view that appears above other content on screen
+when an action or event is triggered. They can either require user interaction (like modals),
+or be augmenting (like a tooltip). These include: [`Modal`](../components/modal)
 and [`Tooltip`](../components/tooltip).
 
-Note: components suffixed with `Item` can only operate as direct children of that 
-name without the suffix. For example: [`GridItem`](../components/grid-item) 
+Note: components suffixed with `Item` can only operate as direct children of that
+name without the suffix. For example: [`GridItem`](../components/grid-item)
 should only be found as a child of [`Grid`](../components/grid).
 
 ## Chart components
 
 The **Charts** category of New Relic One SDK
-contains components representing different types of charts. The [`ChartGroup`](../components/chart-group) 
+contains components representing different types of charts. The [`ChartGroup`](../components/chart-group)
 component helps a group of related charts share data and be aligned.
 
 Some chart components can perform NRQL queries on their own; some accept a customized set of data.
@@ -90,30 +90,30 @@ Some chart components can perform NRQL queries on their own; some accept a custo
 
 The **Query components** category of the New Relic One SDK contains components for fetching and storing New Relic data.
 
-The main way to fetch New Relic data is with NerdGraph, our GraphQL endpoint. 
-This can be queried using [`NerdGraphQuery`](../components/nerd-graph-query). 
-To simplify use of NerdGraph queries, we provide some components with pre-defined queries. For more on using NerdGraph, see 
+The main way to fetch New Relic data is with NerdGraph, our GraphQL endpoint.
+This can be queried using [`NerdGraphQuery`](../components/nerd-graph-query).
+To simplify use of NerdGraph queries, we provide some components with pre-defined queries. For more on using NerdGraph, see
 [Queries and mutations](TODOneedURL).
 
-We also provide some storage for storing small data sets, such as configuration settings data, or user-specific data. 
+We also provide some storage for storing small data sets, such as configuration settings data, or user-specific data.
 For more on this, see [NerdStorage](TODOneedURL).
 
 ## Platform APIs
 
 The Platform API components of the New Relic One SDK
-enable your application to interact with different parts of the New Relic One platform, 
+enable your application to interact with different parts of the New Relic One platform,
 by reading and writing state from and to the URL, setting the configuration, etc. They can be divided into these categories:
 
--   [`PlatformStateContext`](../components/platform-state-context): provides read access to the platform URL state variables. 
+-   [`PlatformStateContext`](../components/platform-state-context): provides read access to the platform URL state variables.
 Example: `timeRange` in the time picker.
 
--   [`navigation`](../api/navigation): an object that allows programmatic manipulation of the navigation 
+-   [`navigation`](../api/navigation): an object that allows programmatic manipulation of the navigation
 in New Relic One. Example: opening a new Nerdlet.
 
--   [`NerdletStateContext`](..components/nerdlet-state-context): provides read access to the Nerdlet URL state variables. 
+-   [`NerdletStateContext`](..components/nerdlet-state-context): provides read access to the Nerdlet URL state variables.
 Example: an `entityGuid` in the [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts).
 
--   [`nerdlet`](../api/navigation): an object that provides write access to the Nerdlet URL state.)
+-   [`nerdlet`](../api/navigation): an object that provides write access to the Nerdlet URL state.
 
 ## Related info
 
diff --git a/src/markdown-pages/reference/nerdpack-file-structure.mdx b/src/markdown-pages/reference/nerdpack-file-structure.mdx
index ac5da6e89..46e93e453 100644
--- a/src/markdown-pages/reference/nerdpack-file-structure.mdx
+++ b/src/markdown-pages/reference/nerdpack-file-structure.mdx
@@ -7,17 +7,17 @@ description: 'An overview of the Nerdpack File Structure'
 
 <Intro>
 
-A [New Relic One application](https://developer.newrelic.com/use-cases/build-new-relic-one-applications 
-"Link opens in a new window.") is represented by a **Nerdpack** folder, which can include one or more **Nerdlet** files, 
+A [New Relic One application](https://developer.newrelic.com/use-cases/build-new-relic-one-applications
+"Link opens in a new window.") is represented by a **Nerdpack** folder, which can include one or more **Nerdlet** files,
 and (optionally) one or more **launcher** files. This document explains:
 
--   The file structure for a [Nerdpack](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#file-structure), 
-a [Nerdlet](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#nerdlet-files) 
+- The file structure for a [Nerdpack](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#file-structure),
+a [Nerdlet](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#nerdlet-files)
 and a [launcher](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-file)
--   How to [link a launcher file to a Nerdlet](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-json)
--   How to [link your application with a monitored entity](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#nerdlet-json)
+- How to [link a launcher file to a Nerdlet](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-json)
+- How to [link your application with a monitored entity](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#nerdlet-json)
 
-For basic component definitions, see our [developer site](https://developer.newrelic.com/use-cases/build-new-relic-one-applications#Introtocomponentsandtools 
+For basic component definitions, see our [developer site](https://developer.newrelic.com/use-cases/build-new-relic-one-applications#Introtocomponentsandtools
 "Link opens in a new window.").
 
 </Intro>
@@ -26,8 +26,8 @@ For basic component definitions, see our [developer site](https://developer.newr
 
 There are two ways to generate a Nerdpack template:
 
--   Generate Nerdpack. Use the [CLI](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli "Link opens in a new window.") command `nr1 create` and select `Nerdpack` to create a Nerdpack template that includes a Nerdlet and a launcher.
--   Generate Nerdlet or launcher individually. You can use the [CLI](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli "Link opens in a new window.") command `nr1 create` and choose to select either a Nerdlet or launcher. This may be useful when adding Nerdlets to an existing Nerdpack.
+- Generate Nerdpack. Use the [CLI](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli "Link opens in a new window.") command `nr1 create` and select `Nerdpack` to create a Nerdpack template that includes a Nerdlet and a launcher.
+- Generate Nerdlet or launcher individually. You can use the [CLI](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli "Link opens in a new window.") command `nr1 create` and choose to select either a Nerdlet or launcher. This may be useful when adding Nerdlets to an existing Nerdpack.
 
 For a lesson on generating and connecting Nerdpack components, see [the workshop](https://github.com/newrelic/nr1-workshop/blob/master/lab0/INSTRUCTIONS.md "Link opens in a new window.") .
 
@@ -38,73 +38,69 @@ When you generate a Nerdpack template using the CLI `nr1 create` command, it has
 ![New Relic One application - Nerdpack file structure](https://docs.newrelic.com/sites/default/files/thumbnails/image/nerdpack-file-structure.png "nerdpack-file-structure.png")
 
 
-## Nerdlet file structure 
+## Nerdlet file structure
 
 A Nerdpack can contain one or more Nerdlets. A Nerdlet folder starts out with three default files:
 
-[**Show All**  ](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#all-links)
-
-### index.js
+### `index.js`
 
 Here is what the default file looks like when a Nerdlet is generated with the CLI `nr1 create`:
- 
+
  ```jsx
 import React from 'react';
 
 export default class MyAwesomeNerdpack extends React.Component {
-    render() {
-        return 
-	<h1>Hello, my-awesome-nerdpack Nerdlet!</h1>
-     }
+  render() {
+    return <h1>Hello, my-awesome-nerdpack Nerdlet!</h1>
+  }
 }
  ```
 
-### nr1.json
+### `nr1.json`
 
 Here is the default file generated by the CLI `nr1 create` command:
 
 ```json
 {
-    "schemaType": "NERDLET",
-    "id": "my-awesome-nerdpack-nerdlet",
-    "description": "Describe me",
-    "displayName": "MyAwesomeNerdpack"
+  "schemaType": "NERDLET",
+  "id": "my-awesome-nerdpack-nerdlet",
+  "description": "Describe me",
+  "displayName": "MyAwesomeNerdpack"
 }
 ```
 
-Besides using the [launcher](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-file) 
+Besides using the [launcher](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-file)
 as the access point for your application, you can also associate the application with
-a monitored entity to get it to appear in the New Relic One [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts). 
-To do this, add two additional fields to the config file of the first-launched Nerdlet: `entities` and `actionCategory`. 
-In the following example, the Nerdlet has been associated with all New Relic Browser-monitored 
+a monitored entity to get it to appear in the New Relic One [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts).
+To do this, add two additional fields to the config file of the first-launched Nerdlet: `entities` and `actionCategory`.
+In the following example, the Nerdlet has been associated with all New Relic Browser-monitored
 applications and will appear under the **Monitor** UI category :
 
 ```json
 {
-    "schemaType": "NERDLET",
-    "id": "my-nerdlet",
-    "description": "Describe me",
-    "displayName": "Custom Data",
-    "entities": [{"domain": "BROWSER", "type": "APPLICATION"}],
-    "actionCategory": "monitor"
+  "schemaType": "NERDLET",
+  "id": "my-nerdlet",
+  "description": "Describe me",
+  "displayName": "Custom Data",
+  "entities": [{"domain": "BROWSER", "type": "APPLICATION"}],
+  "actionCategory": "monitor"
 }
 ```
-To see this application in the UI, you would go to the New Relic One 
+To see this application in the UI, you would go to the New Relic One
 [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts),
  select Browser applications, and select a monitored application.
 
-### styles.scss
+### `styles.scss`
 
 The file is provided for CSS styles (Sass SCSS syntax).
 
 ```css
-
-  /* this is an empty file you can use customize to style your nerdlet. */
+/* this is an empty file you can use customize to style your nerdlet. */
 ```
 
-### icon.png
-![icon.png](../images/nerdpack-file-structure/icon.png)
-The launcher icon that appears on the [one.newrelic.com](http://one.newrelic.com/) 
+### `icon.png`
+![icon.png](../../images/nerdpack-file-structure/icon.png)
+The launcher icon that appears on the [one.newrelic.com](http://one.newrelic.com/)
 home page when an application is deployed.
 
 ### Related info
diff --git a/src/pages/explore-data.js b/src/pages/explore-data.js
index 7591888de..135276376 100644
--- a/src/pages/explore-data.js
+++ b/src/pages/explore-data.js
@@ -1,9 +1,12 @@
+import { BreadcrumbContext } from '../components/BreadcrumbContext';
+import createBreadcrumbs from '../utils/create-breadcrumbs';
 import GuideListing from '../components/GuideListing/GuideListing';
 import GuideTile from '../components/GuideTile';
 import PageTitle from '../components/PageTitle';
 import Layout from '../components/Layout';
 import React from 'react';
 import SEO from '../components/Seo';
+import pages from '../data/sidenav.json';
 
 const title = 'Get data into New Relic';
 
@@ -30,23 +33,28 @@ const guides = [
   },
 ];
 
-const ExploreDataPage = () => (
-  <Layout>
-    <SEO title={title} />
-    <PageTitle>{title}</PageTitle>
-    <p className="intro-text">
-      Instrument your applications and infrastructure to start collecting
-      monitoring data
-    </p>
+const ExploreDataPage = () => {
+  const crumbs = createBreadcrumbs('/explore-data', pages);
+  return (
+    <BreadcrumbContext.Provider value={crumbs}>
+      <Layout>
+        <SEO title={title} />
+        <PageTitle>{title}</PageTitle>
+        <p className="intro-text">
+          Instrument your applications and infrastructure to start collecting
+          monitoring data
+        </p>
 
-    <GuideListing>
-      <GuideListing.List>
-        {guides.map((guide, index) => (
-          <GuideTile key={index} {...guide} />
-        ))}
-      </GuideListing.List>
-    </GuideListing>
-  </Layout>
-);
+        <GuideListing>
+          <GuideListing.List>
+            {guides.map((guide, index) => (
+              <GuideTile key={index} {...guide} />
+            ))}
+          </GuideListing.List>
+        </GuideListing>
+      </Layout>
+    </BreadcrumbContext.Provider>
+  );
+};
 
 export default ExploreDataPage;
diff --git a/src/pages/index.js b/src/pages/index.js
index d1bbeef2a..a4d64e686 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,8 +2,6 @@ import React from 'react';
 
 import Layout from '../components/Layout';
 import SEO from '../components/Seo';
-import Jumbotron from '../components/Jumbotron';
-import Section from '../components/Section';
 import GuideListing from '../components/GuideListing/GuideListing';
 import GuideTile from '../components/GuideTile';
 import PageTitle from '../components/PageTitle';
@@ -11,6 +9,27 @@ import Video from '../components/Video';
 import ExternalLink from '../components/ExternalLink';
 import styles from './index.module.scss';
 
+const getStartedGuides = [
+  {
+    minutes: 5,
+    title: 'Collect data from any source',
+    description: `Learn how to ingest data from various sources. Whether you want to ingest data “out of the box,” or bring custom data into New Relic that isn't collected by default.`,
+    path: '',
+  },
+  {
+    minutes: 5,
+    title: 'Instrument your data',
+    description: `Use custom instrumentation to automatically produce complete information, without needing to modify your application code. Manage your environment through Observability as Code.`,
+    path: '',
+  },
+  {
+    minutes: 5,
+    title: 'Customize your data',
+    description: `Build and customize on the programmable platform by learning how to customize existing apps, enhance open source projects, or build your own application to solve your specific problem.`,
+    path: '',
+  },
+];
+
 const guides = [
   {
     minutes: 5,
@@ -70,10 +89,17 @@ const IndexPage = () => (
       />
     </section>
 
-    <Section backgroundBanner className={styles.backgroundBanner}>
-      <Jumbotron />
-    </Section>
-    <div className={styles.line} />
+    <GuideListing className={styles.guideListing}>
+      <GuideListing.Heading className={styles.guideListingHeading}>
+        Get started
+      </GuideListing.Heading>
+      <GuideListing.List>
+        {getStartedGuides.map((guide, index) => (
+          <GuideTile className={styles.guideTile} key={index} {...guide} />
+        ))}
+      </GuideListing.List>
+    </GuideListing>
+    <hr className={styles.line} />
 
     <GuideListing className={styles.guideListing}>
       <GuideListing.Heading className={styles.guideListingHeading}>
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 1b15d37ef..9589757c6 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -1,13 +1,13 @@
 .line {
   border-bottom: 4px solid var(--color-brand-800);
   width: 50px;
-  margin: auto;
+  margin: 3rem auto 0;
 }
 
 .intro {
   display: flex;
   justify-content: space-between;
-  margin: 2rem auto 7rem;
+  margin: 2rem auto;
 
   @media (max-width: 760px) {
     flex-direction: column;
@@ -43,7 +43,6 @@
 }
 
 .guideTile {
-  box-shadow: none;
   border: 1px solid var(--color-neutrals-300);
   border-radius: 0.25rem;
 }
diff --git a/src/templates/GuideTemplate.module.scss b/src/templates/GuideTemplate.module.scss
index 7c8d923e6..8f3864a3d 100644
--- a/src/templates/GuideTemplate.module.scss
+++ b/src/templates/GuideTemplate.module.scss
@@ -14,6 +14,8 @@
   }
   h1,
   h2 {
+    font-weight: bold;
+
     &:not(:first-child) {
       margin-top: 2rem;
     }
@@ -22,6 +24,7 @@
   h3,
   h4 {
     margin-top: 1rem;
+    font-weight: bold;
   }
 
   li {
@@ -32,6 +35,11 @@
     margin-top: 1rem;
     line-height: 1;
   }
+
+  hr {
+    border: 0;
+    border-bottom: 1px solid var(--color-neutrals-100);
+  }
 }
 
 .header {