From d00c0652a0923c1851bf5e9e08c563151fff920f Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 1 Jul 2020 13:08:11 -0700 Subject: [PATCH 1/3] chore: Add image right alignment in steps --- COMPONENT_GUIDE.md | 15 +++++++++++++++ gatsby-config.js | 1 + src/components/SideBySide.js | 20 +++++++++++++++++--- src/components/Step.js | 2 +- src/markdown-pages/example.mdx | 9 +++------ 5 files changed, 37 insertions(+), 10 deletions(-) diff --git a/COMPONENT_GUIDE.md b/COMPONENT_GUIDE.md index 4886bb355..689f731a4 100644 --- a/COMPONENT_GUIDE.md +++ b/COMPONENT_GUIDE.md @@ -163,6 +163,21 @@ return
Hello, {props.name}
; ```` +You can also use images in steps. To get an image to appear on the right side as with code blocks, you must use an HTML `img` tag, traditional markdown will not align the image to the right. + +```md + + +# Image example + +A step description +and here's an image to follow + + +``` + +> Note: keep in mind that a new line is necesary after an `img` tag to ensure proper rendering of subsequent text/markdown. + ## Code Snippet Code Snippets are automatically formatted by three backticks. This is our preferred method to delineate code snippets, but it's worth noting that markdown will also consider any text that is indented 4 spaces (or 1 tab) to be a code block. diff --git a/gatsby-config.js b/gatsby-config.js index 58bda4c1d..b3a4a546a 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -47,6 +47,7 @@ module.exports = { resolve: 'gatsby-remark-images', options: { maxWidth: 1200, + linkImagesToOriginal: false, }, }, ], diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js index 69aa5f9bf..182946595 100644 --- a/src/components/SideBySide.js +++ b/src/components/SideBySide.js @@ -9,13 +9,27 @@ import { isMdxType } from '../utils/mdx'; const SideBySide = ({ className, children, type }) => { const types = Array.isArray(type) ? type : [type]; const childObjects = Children.toArray(children); + + const isGatsbyMdxType = (child, type) => { + if (type === 'img' && isMdxType(child, 'span')) { + if (Array.isArray(child.props.children)) { + return ( + child.props.children.filter((child) => isMdxType(child, 'img')) + .length > 0 + ); + } + } + return isMdxType(child, type); + }; const rendersRightColumn = childObjects.some((child) => - types.some((type) => isMdxType(child, type)) + types.some((type) => isGatsbyMdxType(child, type)) ); const sections = splitUsing(childObjects, (child) => - types.some((type) => isMdxType(child, type)) + types.some((type) => isGatsbyMdxType(child, type)) ).map((section) => - splitWhen(section, (child) => types.some((type) => isMdxType(child, type))) + splitWhen(section, (child) => + types.some((type) => isGatsbyMdxType(child, type)) + ) ); return ( diff --git a/src/components/Step.js b/src/components/Step.js index 6eb3ce2f4..70c5c2f51 100644 --- a/src/components/Step.js +++ b/src/components/Step.js @@ -8,7 +8,7 @@ const Step = ({ children, number, total }) => (

{`Step ${number} of ${total}`}

- {children} + {children}
); diff --git a/src/markdown-pages/example.mdx b/src/markdown-pages/example.mdx index 68df32bbe..5ffb5bb71 100644 --- a/src/markdown-pages/example.mdx +++ b/src/markdown-pages/example.mdx @@ -67,12 +67,9 @@ export default HelloWorld -## 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 fileName=/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.js -this.accountId = ; -``` +## This step includes a photo +It's side by side with the description +graphql tool menu From fcd3cef505d340e8f440b489e05e867c88c938a9 Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 1 Jul 2020 14:23:13 -0700 Subject: [PATCH 2/3] chore: Delete example guide and shorten isGatsbyMdxType function --- src/components/SideBySide.js | 16 +++--- src/markdown-pages/example.mdx | 101 --------------------------------- 2 files changed, 9 insertions(+), 108 deletions(-) delete mode 100644 src/markdown-pages/example.mdx diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js index 182946595..a115a86eb 100644 --- a/src/components/SideBySide.js +++ b/src/components/SideBySide.js @@ -11,13 +11,15 @@ const SideBySide = ({ className, children, type }) => { const childObjects = Children.toArray(children); const isGatsbyMdxType = (child, type) => { - if (type === 'img' && isMdxType(child, 'span')) { - if (Array.isArray(child.props.children)) { - return ( - child.props.children.filter((child) => isMdxType(child, 'img')) - .length > 0 - ); - } + if ( + type === 'img' && + isMdxType(child, 'span') && + Array.isArray(child.props.children) + ) { + return ( + child.props.children.filter((child) => isMdxType(child, 'img')).length > + 0 + ); } return isMdxType(child, type); }; diff --git a/src/markdown-pages/example.mdx b/src/markdown-pages/example.mdx deleted file mode 100644 index 5ffb5bb71..000000000 --- a/src/markdown-pages/example.mdx +++ /dev/null @@ -1,101 +0,0 @@ ---- -path: '/guides/example' -duration: '30 min' -title: 'Example Guide' -template: 'GuideTemplate' -description: 'Example guide page' ---- - - - -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. - - - -## Before you begin -This guide requires that you have the following: - -- A github account -- New Relic developer account -- API Key -- New Relic One CLI downloaded - -
- - - - - -## This is a step with a title and description -But it doesn't include a code snippet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel orci dignissim, egestas turpis non, ultricies erat. Nullam id magna molestie, volutpat ipsum vitae, bibendum ligula. - - - - -This is a step with no title or code snippet, only description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel orci dignissim, egestas turpis non, ultricies erat. Nullam id magna molestie, volutpat ipsum vitae, bibendum ligula. - -This is a caution. - -This is a note. - -This is a tip. - -> This is an information box. - - - - - -## This step includes a code snippet -And also has line number highlighting - -```jsx lineHighlight=1,3-5 -import React from 'react' - -const HelloWorld = () => { - return ( -
- "Hello there! -
- ) -} - -export default HelloWorld -``` - - - - -## This step includes a photo -It's side by side with the description -graphql tool menu - - - - - -Update the UUID and serve the application by running the following: - -```shell lineNumbers=false -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 - -- [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) From cd8e77945fde5c8e1896e813c4f4348089823c90 Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 1 Jul 2020 16:50:04 -0700 Subject: [PATCH 3/3] chore: Refactor isMdxType --- src/components/SideBySide.js | 32 +++++++++++++++----------------- src/utils/mdx.js | 15 ++++++++++++++- 2 files changed, 29 insertions(+), 18 deletions(-) diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js index a115a86eb..03e67d881 100644 --- a/src/components/SideBySide.js +++ b/src/components/SideBySide.js @@ -9,28 +9,26 @@ import { isMdxType } from '../utils/mdx'; const SideBySide = ({ className, children, type }) => { const types = Array.isArray(type) ? type : [type]; const childObjects = Children.toArray(children); - - const isGatsbyMdxType = (child, type) => { - if ( - type === 'img' && - isMdxType(child, 'span') && - Array.isArray(child.props.children) - ) { - return ( - child.props.children.filter((child) => isMdxType(child, 'img')).length > - 0 - ); - } - return isMdxType(child, type); - }; const rendersRightColumn = childObjects.some((child) => - types.some((type) => isGatsbyMdxType(child, type)) + types.some( + (type) => + isMdxType(child, type) || + isMdxType(child, type, { nestedWithin: 'span' }) + ) ); const sections = splitUsing(childObjects, (child) => - types.some((type) => isGatsbyMdxType(child, type)) + types.some( + (type) => + isMdxType(child, type) || + isMdxType(child, type, { nestedWithin: 'span' }) + ) ).map((section) => splitWhen(section, (child) => - types.some((type) => isGatsbyMdxType(child, type)) + types.some( + (type) => + isMdxType(child, type) || + isMdxType(child, type, { nestedWithin: 'span' }) + ) ) ); diff --git a/src/utils/mdx.js b/src/utils/mdx.js index 40cb182ab..c8f8bb577 100644 --- a/src/utils/mdx.js +++ b/src/utils/mdx.js @@ -1 +1,14 @@ -export const isMdxType = (child, type) => child?.props?.mdxType === type; +export const isMdxType = (child, type, { nestedWithin } = {}) => { + if (nestedWithin) { + if ( + child?.props?.mdxType === nestedWithin && + Array.isArray(child.props.children) + ) { + return child.props.children.some( + (child) => child?.props?.mdxType === type + ); + } + return false; + } + return child?.props?.mdxType === type; +};