Merge branch 'master' into jerel/css-modules

CONTRIBUTING.md

@@ -28,7 +28,7 @@ you can use the Github `Edit This File` button to submit a change.
 
 To be able to [Clone](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) this repository and contribute you will need to be given write access to the repository. This is reserved for New Relic Employees only. Please contact the Developer Experience Team if you need write access.
 
-As a non New Relic Employee you can [Fork](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) the repository and contribute as needed. 
+As a non New Relic employee you can [Fork](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) the repository and contribute as needed. 
 
 ## Submitting a PR from a forked repo
 
@@ -112,4 +112,4 @@ When making educational guide contributions please follow these guidelines.
 
 ## Updating navigation
 
-@TODO Need to add how to update navigation when adding new content.
+@TODO Need to add how to update navigation when adding new content.

gatsby-config.js

@@ -4,6 +4,7 @@ module.exports = {
     description:
       'Do more on our platform and make New Relic your own with APIs, SDKs, code snippets, tutorials, and more developer tools.',
     author: 'New Relic',
+    siteUrl: 'https://developer.newrelic.com',
   },
   plugins: [
     'gatsby-plugin-react-helmet',
@@ -68,5 +69,6 @@ module.exports = {
         policy: [{ userAgent: '*', allow: '/' }],
       },
     },
+    'gatsby-plugin-sitemap',
   ],
 };

package.json

@@ -16,6 +16,7 @@
     "gatsby-plugin-robots-txt": "^1.5.1",
     "gatsby-plugin-sass": "^2.2.3",
     "gatsby-plugin-sharp": "^2.5.6",
+    "gatsby-plugin-sitemap": "^2.4.3",
     "gatsby-remark-images": "^3.3.8",
     "gatsby-source-filesystem": "^2.2.4",
     "gatsby-transformer-remark": "^2.7.3",

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 {
+    box-sizing: border-box;
     margin: 0;
     height: 100%;
+    overflow-y: auto;
+    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;

src/components/Intro.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './Intro.module.scss';
+import Proptypes from 'prop-types';
+
+const Intro = ({ children }) => (
+  <div className={styles.container}>{children}</div>
+);
+
+Intro.propTypes = {
+  children: Proptypes.node.isRequired,
+};
+
+export default Intro;

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

src/components/Step.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from './Step.module.scss';
+import Proptypes from 'prop-types';
+
+const Step = ({ children, number, total }) => {
+  const codeSnippet = children.find((child) => child?.props?.mdxType === 'pre');
+  const childrenWithoutCodeSnippet = children.filter(
+    (child) => child !== codeSnippet
+  );
+  return (
+    <div className={styles.wrapper}>
+      <p className={styles.stepNumber}>{`Step ${number} of ${total}`}</p>
+      <div className={styles.container}>
+        <div className={styles.stepDetails}>{childrenWithoutCodeSnippet}</div>
+        {codeSnippet}
+      </div>
+    </div>
+  );
+};
+
+Step.propTypes = {
+  children: Proptypes.node.isRequired,
+  number: Proptypes.number.isRequired,
+  total: Proptypes.number.isRequired,
+};
+
+export default Step;

src/components/Step.module.scss

@@ -0,0 +1,34 @@
+.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);
+  }
+}
+.container {
+  display: flex;
+}
+.stepDetails {
+  margin-right: 1rem;
+  width: 50%;
+  line-height: 1.5rem;
+  h1:first-child,
+  h2:first-child,
+  h3:first-child,
+  h4:first-child,
+  h5:first-child,
+  h6:first-child {
+    color: var(--color-neutrals-900);
+    font-weight: bold;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+    font-size: 1rem;
+  }
+}
+.container > pre {
+  width: 50%;
+  margin-left: 1rem;
+}

src/components/Steps.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Steps = ({ children }) => {
+  // get the number of steps
+  const totalSteps = children.filter(
+    (child) => child?.props?.mdxType === 'Step'
+  ).length;
+
+  // return the children with additional props
+  return (
+    <>
+      {children.map((child, index) => ({
+        ...child,
+        props: {
+          ...child.props,
+          number: index + 1,
+          total: totalSteps,
+        },
+      }))}
+    </>
+  );
+};
+
+Steps.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Steps;

src/components/styles.scss

@@ -58,6 +58,8 @@ main {
 
 a {
   cursor: pointer;
+  text-decoration: none;
+  color: var(--color-brand-800);
 }
 
 img {
@@ -127,3 +129,15 @@ button,
     color: var(--color-brand-800);
   }
 }
+
+ul {
+  padding-left: 30px;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--color-neutrals-700);
+  font-size: 1rem;
+}
+
+li {
+  margin-bottom: 1rem;
+}

src/markdown-pages/example.mdx

@@ -1,29 +1,88 @@
 ---
-path: '/guides/graphql-api'
+path: '/guides/example'
 duration: '30 min'
-title: 'GraphQL API'
+title: 'Example Guide'
 template: 'GuideTemplate'
 description: 'Example guide page'
 ---
 
-## Lorem ipsum
+<Intro>
 
-![image](../images/NewRelic-logo.png)
+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.
 
-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.
+<Video id="zxunt1u1as" type="wistia"/>
+</Intro>
+
+This guide requires that you have the following:
+
+- A github account
+- New Relic developer account
+- API Key
+- New Relic One CLI downloaded
+
+<br/>
+
+### 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. 
+
+<Steps>
+
+<Step>
+
+## Clone the example application
+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.
+
+```shell lineNumbers=false
+git clone https://github.com/newrelic/nr1-how-to.git
+```
+
+</Step>
+
+<Step>
+
+## Set up and run the application locally
+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.
+
+```shell lineNumbers=false
+cd /nr1-howto/add-time-picker
+```
+</Step>
+
+<Step>
+
+## Make sure you're getting data from the right New Relic account
+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):
 
 ```jsx
-import React from 'react';
+this.accountId = <REPLACE ME WITH YOUR ACCOUNT ID>;
+```
+
+</Step>
+
+<Step>
 
-const FooBar = () => (
-  <div>Hello, World!</div>
-);
+Update the UUID and serve the application by running the following:
 
-export default FooBar;
+```shell lineNumbers=false
+nr1 nerdpack:uuid -gf
+nr1 nerdpack:serve
 ```
 
-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.
+</Step>
 
-<Video id="ZagZfNQYJEU" type="youtube" />
+</Steps>
 
-<Video id="zxunt1u1as" type="wistia"/>
+# 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
+
+- [New Relic documentation](https://docs.newrelic.com)
+- [Community page for how to add a time picker](https://discuss.newrelic.com/t/how-to-add-the-time-picker-to-nrql-queries/94268)