From 73d9b191168caeae28047833b8f3517c6fa22d26 Mon Sep 17 00:00:00 2001 From: lbaker Date: Mon, 15 Jun 2020 14:49:21 -0700 Subject: [PATCH 1/2] chore: Tweak build an app styles --- src/components/styles.scss | 5 +++++ src/markdown-pages/build-an-app.mdx | 26 ++++++++++---------------- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/components/styles.scss b/src/components/styles.scss index 4b6645597..bebac666d 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -170,6 +170,11 @@ li { margin-bottom: 1rem; } +ul li ul { + margin-top: 1rem; + line-height: 1; +} + code { font-family: var(--code-font); } diff --git a/src/markdown-pages/build-an-app.mdx b/src/markdown-pages/build-an-app.mdx index 3e1cc2959..e55f06647 100644 --- a/src/markdown-pages/build-an-app.mdx +++ b/src/markdown-pages/build-an-app.mdx @@ -7,30 +7,28 @@ description: 'Build a New Relic app showing pageview data on a world map.' --- + ## Build a New Relic app in 15 minutes or less New Relic has powerful and flexible tools for building custom apps and populating them with data. This guide will show you how to build a custom app and populate it with data in 15 minutes or less using New Relic's Query Language (NRQL). (It's pronounced 'nurkle'.) If you have a little more time and want to install a 3rd party React library, I'll show you how to put that data on a map of the world. Please review the **Before you begin** section to make sure you have everything you need and don't get stuck halfway through. - - - ## Before you begin -In order to get the most out of this guide, you'll need to have: -- A New Relic developer account. (This includes an API key and the command-line tool. If you don't have this yet, go here to [get instructions on setting up your NR development environment](URL TBD).) +### In order to get the most out of this guide, you'll need to have: +- A New Relic developer account. (This includes an API key and the command-line tool. If you don't have this yet, go here to [get instructions on setting up your NR development environment](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==).) - New Relic Browser pageview data to populate the app. If you don't have pageview data, this probably isn't worth doing. +
-The following are necessary to complete the second half of the guide to draw your data on a world map. +### The following are necessary to complete the second half of the guide to draw your data on a world map. - npm (If you're new to React and npm, you can go here to [install Node.js and npm](https://nodejs.org/en/download/).) - Leaflet (A 3rd-party JavaScript React library used to build interactive maps. Installed with npm. You can read more about Leaflet [here](https://www.npmjs.com/package/leaflet).) ## New Relic Terminology -There's some New Relic terminology you may not be familiar with. +### There's some New Relic terminology you may not be familiar with. * Application: The finished product where data is rendered in New Relic One. This might look like a series of interactive charts or a map of the world. * Nerdpack: The standard collection of JavaScript, JSON, CSS, and other files that control the functionality and look of your application. @@ -39,8 +37,6 @@ There's some New Relic terminology you may not be familiar with. - The three default files are `index.js`, `nr1.json`, and `styles.scss`, but you can customize and add your own. - Go here for more information on the [Nerdpack file structure](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure). - - @@ -83,7 +79,7 @@ Go to `https://one.newrelic.com/?nerdpacks=local` to see the local Nerdpack that ### Hard code your account ID -For the purposes of this exercise and your convenience, you'll hard code your account ID. (Read about finding your account ID here: https://docs.newrelic.com/docs/accounts/install-new-relic/account-setup/account-id ) +For the purposes of this exercise and your convenience, you'll hard code your account ID. ([Read about finding your account ID here](https://docs.newrelic.com/docs/accounts/install-new-relic/account-setup/account-id)) ```jsx const accountId = [Replace with your account ID]; ``` @@ -134,7 +130,8 @@ export default class MyFirstNerdpackNerdletNerdlet extends React.Component { You can use standard CSS to customize the look of your components. -In the `styles.scss` file, add this CSS: +In the `styles.scss` file, add this CSS. +Feel free to customize this CSS to your taste. ```css .container { @@ -152,8 +149,6 @@ In the `styles.scss` file, add this CSS: } } ``` - -Feel free to customize this CSS to your taste. @@ -196,6 +191,7 @@ import { TextField } from 'nr1'; ### Add a row for your text field You'll probably want your text field filter above the table. Put this above the TableChart div. +The text field will have a default value of "US". ```jsx
{ @@ -203,8 +199,6 @@ You'll probably want your text field filter above the table. Put this above the }} />
``` - -The text field will have a default value of "US". From 3e8f9612fca38513d640b854320d99b406475c2e Mon Sep 17 00:00:00 2001 From: lbaker Date: Mon, 15 Jun 2020 16:20:21 -0700 Subject: [PATCH 2/2] chore: Move mdx ul styles to mdx container --- src/components/styles.scss | 5 ----- src/templates/GuideTemplate.js | 9 ++++++--- src/templates/GuideTemplate.module.scss | 6 ++++++ 3 files changed, 12 insertions(+), 8 deletions(-) create mode 100644 src/templates/GuideTemplate.module.scss diff --git a/src/components/styles.scss b/src/components/styles.scss index 54889075e..554ff7533 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -174,11 +174,6 @@ li { margin-bottom: 1rem; } -ul li ul { - margin-top: 1rem; - line-height: 1; -} - code { font-family: var(--code-font); } diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js index be15c186f..921bdef0e 100644 --- a/src/templates/GuideTemplate.js +++ b/src/templates/GuideTemplate.js @@ -11,6 +11,7 @@ import Step from '../components/Step'; import Steps from '../components/Steps'; import Intro from '../components/Intro'; import SEO from '../components/Seo'; +import styles from './GuideTemplate.module.scss'; import createBreadcrumbs from '../utils/create-breadcrumbs'; import pages from '../data/sidenav.json'; @@ -36,9 +37,11 @@ const GuideTemplate = ({ data }) => {

{title}

- - {body} - +
+ + {body} + +
); }; diff --git a/src/templates/GuideTemplate.module.scss b/src/templates/GuideTemplate.module.scss new file mode 100644 index 000000000..4c11e3781 --- /dev/null +++ b/src/templates/GuideTemplate.module.scss @@ -0,0 +1,6 @@ +.mdxContainer { + ul li ul { + margin-top: 1rem; + line-height: 1; + } +}