From 07c9d12c186d36a34e096cbd2c11f09e7185d577 Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 27 May 2020 16:48:39 -0700 Subject: [PATCH 01/15] chore: Add step component for mdx --- src/components/Step.js | 12 ++++++++++++ src/components/Step.module.scss | 27 +++++++++++++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 src/components/Step.js create mode 100644 src/components/Step.module.scss diff --git a/src/components/Step.js b/src/components/Step.js new file mode 100644 index 000000000..58df60e7c --- /dev/null +++ b/src/components/Step.js @@ -0,0 +1,12 @@ +import React from 'react'; +import styles from './Step.module.scss'; + +const Step = ({ children, stepNumber, stepTitle }) => ( +
+ {stepNumber &&

{`Step ${stepNumber}`}

} + {stepTitle &&

{stepTitle}

} +
{children}
+
+); + +export default Step; diff --git a/src/components/Step.module.scss b/src/components/Step.module.scss new file mode 100644 index 000000000..b89e2d3a9 --- /dev/null +++ b/src/components/Step.module.scss @@ -0,0 +1,27 @@ +.wrapper { + border-top: solid 1px var(--color-neutrals-100); + box-sizing: border-box; + padding-top: 1.5rem; + margin-top: 2rem; + .stepNumber { + font-size: 0.75rem; + color: var(--color-neutrals-600); + } + .stepTitle { + color: var(--color-neutrals-900); + font-weight: bold; + margin-bottom: 1rem; + } +} +.container { + display: flex; +} +.container > p { + margin-right: 1rem; + width: 50%; + line-height: 1.5rem; +} +.container > pre { + width: 50%; + margin-left: 1rem; +} From 8b186a5c45f0c3778f1e36eafc0bc0d3f477dca5 Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 27 May 2020 16:49:13 -0700 Subject: [PATCH 02/15] chore: Add intro component for mdx --- src/components/Intro.js | 8 ++++++++ src/components/Intro.module.scss | 14 ++++++++++++++ 2 files changed, 22 insertions(+) create mode 100644 src/components/Intro.js create mode 100644 src/components/Intro.module.scss diff --git a/src/components/Intro.js b/src/components/Intro.js new file mode 100644 index 000000000..4191eb65e --- /dev/null +++ b/src/components/Intro.js @@ -0,0 +1,8 @@ +import React from 'react'; +import styles from './Intro.module.scss'; + +const Intro = ({ children }) => ( +
{children}
+); + +export default Intro; diff --git a/src/components/Intro.module.scss b/src/components/Intro.module.scss new file mode 100644 index 000000000..96f9fe977 --- /dev/null +++ b/src/components/Intro.module.scss @@ -0,0 +1,14 @@ +.container { + display: flex; + p { + width: 50%; + color: var(--color-neutrals-600); + font-size: 1.125rem; + line-height: 2rem; + margin-right: 1rem; + } + div { + width: 50%; + margin-left: 1rem; + } +} From 552be194cb319a9f742aae357d21f5da84364927 Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 27 May 2020 16:51:14 -0700 Subject: [PATCH 03/15] chore: Tweak code snippet styling --- src/components/CodeSnippet.module.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss index 94f5df9a1..9236988d6 100644 --- a/src/components/CodeSnippet.module.scss +++ b/src/components/CodeSnippet.module.scss @@ -1,17 +1,21 @@ .container { height: 170px; - width: 50%; font-family: Menlo; line-height: 1rem; font-size: 0.75rem; overflow-y: scroll; + pre { margin: 0; height: 100%; + overflow-y: scroll; + padding: 20px 20px 20px 10px; } } .lineNumber { + display: inline-block; + width: 20px; text-align: right; padding-right: 1em; user-select: none; @@ -23,13 +27,13 @@ display: flex; justify-content: flex-end; align-items: center; - width: 50%; background: var(--color-neutrals-200); height: 35px; background-image: url('../images/copy.svg'); background-size: 1rem; background-repeat: no-repeat; background-position: 83% 50%; + button { padding-right: 1rem; font-size: 0.75rem; From f93ba3bf006ba3ac45443ba8a7b8f52ec16efafc Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 27 May 2020 16:51:57 -0700 Subject: [PATCH 04/15] chore: Add step and intro components to guide --- src/templates/GuideTemplate.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js index b6fc2889f..598ab3716 100644 --- a/src/templates/GuideTemplate.js +++ b/src/templates/GuideTemplate.js @@ -8,6 +8,8 @@ import Layout from '../components/Layout'; import BreadcrumbBar from '../components/BreadcrumbBar'; import Container from '../components/Container'; import Video from '../components/Video'; +import Step from '../components/Step'; +import Intro from '../components/Intro'; import createBreadcrumbs from '../utils/create-breadcrumbs'; import pages from '../data/sidenav.json'; @@ -15,6 +17,8 @@ import CodeSnippet from '../components/CodeSnippet'; const components = { Video, + Step, + Intro, code: (props) => , }; @@ -28,10 +32,10 @@ const GuideTemplate = ({ data }) => { -
+

{frontmatter.title}

-
+
{body} From 2361dc8948eac4e36e26b8bf2e0408843f2bf20c Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 27 May 2020 16:52:44 -0700 Subject: [PATCH 05/15] chore: Experiment with example mdx page --- src/markdown-pages/example.mdx | 79 ++++++++++++++++++++++++++++------ 1 file changed, 67 insertions(+), 12 deletions(-) diff --git a/src/markdown-pages/example.mdx b/src/markdown-pages/example.mdx index 3969c9489..465c42b7c 100644 --- a/src/markdown-pages/example.mdx +++ b/src/markdown-pages/example.mdx @@ -1,24 +1,79 @@ --- -path: '/guides/graphql-api' +path: '/guides/example' duration: '30 min' -title: 'GraphQL API' +title: 'Example Guide' template: 'GuideTemplate' --- -## Lorem ipsum + -Integer aliquam convallis scelerisque. Donec auctor dictum viverra. Praesent commodo porttitor tortor. Fusce eget sem arcu. Praesent convallis augue est. `Vestibulum` in mi sollicitudin, rhoncus est eu, rutrum augue. Ut in elit ac odio ultrices pharetra eget id magna. Donec tellus dui, volutpat ut malesuada eget, pharetra eget metus. Proin tortor lacus, vestibulum dignissim urna ac, rutrum vulputate orci. Sed justo tellus, convallis eu tincidunt at, euismod eu enim. Sed interdum viverra volutpat. Suspendisse eget accumsan nunc. Aliquam tempor in magna ut lobortis. +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. -```jsx -import React from 'react'; + -const FooBar = () => ( -
Hello, World!
-); +This guide requires that you have the following: -export default FooBar; +- A github account +- New Relic developer account +- API Key +- New Relic One CLI downloaded + +### Set up the sample application + +You can use this application for trying things out. Or, skip this section and start with "Add time picker" below, if you just want to add the time picker to an existing applicaiton. + + + +This repo contains an example application and code that supports a handful of how to guides for cool and useful features you migth want in your applications. If you've tried other how to guides, you might have already cloned this repo, in which case, you should probably go ahead and update from master. + +``` +git clone https://github.com/newrelic/nr1-how-to.git ``` -Integer aliquam convallis scelerisque. Donec auctor dictum viverra. Praesent commodo porttitor tortor. Fusce eget sem arcu. Praesent convallis augue est. `Vestibulum` in mi sollicitudin, rhoncus est eu, rutrum augue. Ut in elit ac odio ultrices pharetra eget id magna. Donec tellus dui, volutpat ut malesuada eget, pharetra eget metus. Proin tortor lacus, vestibulum dignissim urna ac, rutrum vulputate orci. Sed justo tellus, convallis eu tincidunt at, euismod eu enim. Sed interdum viverra volutpat. Suspendisse eget accumsan nunc. Aliquam tempor in magna ut lobortis. + + + + +Use the New Relic One CLI to update the application UUID and run the application locally. In the terminal, change to the time picker directory. + +``` +cd /nr1-howto/add-time-picker +``` + + + + +In your preferred text editor, open the `/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.js` and then edit the following line to use your account ID (find your account ID in the Profile section of the Developer Center, where you downloaded the New Relic One CLI): + +``` +this.accountId = ; +``` + + + + + +Update the UUID and serve the application by running the following: + +``` +nr1 nerdpack:uuid -gf +nr1 nerdpack:serve +``` + + + +# Next Steps + +You'll get a URL to access New Relic One and see your application running locally: https://one.newrelic.com/?nerdpacks=local + +One the New Relic home page, there's a new launcher to the Add time picker application. + +Click the launcher, and the dashboard opens with your New Relic account transactions. + + +### Related info -