From 4761c9afce5491c241098769cb1fee73cf206754 Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Fri, 10 Jul 2020 16:17:39 -0400 Subject: [PATCH 01/11] feat: MDX image component --- src/components/Image.js | 36 +++++++++++----------------------- src/components/MDXContainer.js | 2 ++ 2 files changed, 13 insertions(+), 25 deletions(-) diff --git a/src/components/Image.js b/src/components/Image.js index 335f03fea..2ffc9e088 100644 --- a/src/components/Image.js +++ b/src/components/Image.js @@ -1,32 +1,18 @@ import React from 'react'; -import { useStaticQuery, graphql } from 'gatsby'; -import Img from 'gatsby-image'; +import PropTypes from 'prop-types'; -/* - * This component is built using `gatsby-image` to automatically serve optimized - * images with lazy loading and reduced file sizes. The image is loaded using a - * `useStaticQuery`, which allows us to load the image from directly within this - * component, rather than having to pass the image data down from pages. - * - * For more information, see the docs: - * - `gatsby-image`: https://gatsby.dev/gatsby-image - * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/ - */ +const Image = ({ src, alt, width }) => { + return {alt}; +}; -const Image = () => { - const data = useStaticQuery(graphql` - query { - placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) { - childImageSharp { - fluid(maxWidth: 300) { - ...GatsbyImageSharpFluid - } - } - } - } - `); +Image.propTypes = { + src: PropTypes.string.isRequired, + alt: PropTypes.string, + width: PropTypes.number, +}; - return ; +Image.defaultProps = { + width: 1200, }; export default Image; diff --git a/src/components/MDXContainer.js b/src/components/MDXContainer.js index e081d4977..87f55ecd6 100644 --- a/src/components/MDXContainer.js +++ b/src/components/MDXContainer.js @@ -12,6 +12,7 @@ import Important from './Important'; import Tip from './Tip'; import Intro from './Intro'; import MDXCodeBlock from './MDXCodeBlock'; +import Image from './Image'; import styles from './MDXContainer.module.scss'; @@ -23,6 +24,7 @@ const components = { Important, Tip, Intro, + Image, code: MDXCodeBlock, pre: (props) => props.children, }; From 6f06093a8a89c3bf69e4029f7c163b35638e9e3a Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Fri, 10 Jul 2020 16:18:03 -0400 Subject: [PATCH 02/11] feat: converted image in one guide to image component --- src/markdown-pages/build-apps/build-hello-world-app.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/markdown-pages/build-apps/build-hello-world-app.mdx b/src/markdown-pages/build-apps/build-hello-world-app.mdx index d04a6bd7f..c347ab9b7 100644 --- a/src/markdown-pages/build-apps/build-hello-world-app.mdx +++ b/src/markdown-pages/build-apps/build-hello-world-app.mdx @@ -121,7 +121,7 @@ If you followed all the steps in the CLI wizard, you now have files under a new When the browser opens, click the new launcher for your application. Here's an example where we inserted a leaf icon: - ![The customized nerdlet launcher](../../images/create-hello-world/hello-world-launcher.png) + The customized nerdlet launcher /> After you click the new launcher, your Date: Fri, 10 Jul 2020 16:28:10 -0400 Subject: [PATCH 03/11] fix: missed a closing tag --- src/markdown-pages/build-apps/build-hello-world-app.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/markdown-pages/build-apps/build-hello-world-app.mdx b/src/markdown-pages/build-apps/build-hello-world-app.mdx index c347ab9b7..d17531da7 100644 --- a/src/markdown-pages/build-apps/build-hello-world-app.mdx +++ b/src/markdown-pages/build-apps/build-hello-world-app.mdx @@ -121,7 +121,7 @@ If you followed all the steps in the CLI wizard, you now have files under a new When the browser opens, click the new launcher for your application. Here's an example where we inserted a leaf icon: - The customized nerdlet launcher /> + <Image src= After you click the new launcher, your "Hello, World!" appears: From 1f176105a038561a9ed11f91394a3f6436cbb1ad Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Fri, 10 Jul 2020 17:15:49 -0400 Subject: [PATCH 04/11] feat: adds alt prop to be required --- src/components/Image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Image.js b/src/components/Image.js index 2ffc9e088..7ed858fd0 100644 --- a/src/components/Image.js +++ b/src/components/Image.js @@ -7,7 +7,7 @@ const Image = ({ src, alt, width }) => { Image.propTypes = { src: PropTypes.string.isRequired, - alt: PropTypes.string, + alt: PropTypes.string.isRequired, width: PropTypes.number, }; From 9798fca5905a5c015c9680688af44075537bafaf Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Mon, 13 Jul 2020 09:44:09 -0400 Subject: [PATCH 05/11] feat: refactor to just props --- src/components/Image.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Image.js b/src/components/Image.js index 7ed858fd0..c333341d9 100644 --- a/src/components/Image.js +++ b/src/components/Image.js @@ -1,8 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Image = ({ src, alt, width }) => { - return {alt}; +const Image = (props) => { + return ; }; Image.propTypes = { From b2d02720a50c3d95dd5502820d96c1023044a8d6 Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Mon, 13 Jul 2020 12:15:43 -0400 Subject: [PATCH 06/11] feat: add props and alt prop to make linter happy --- src/components/Image.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Image.js b/src/components/Image.js index c333341d9..a8f5dd6af 100644 --- a/src/components/Image.js +++ b/src/components/Image.js @@ -1,8 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Image = (props) => { - return ; +const Image = ({ alt, ...props }) => { + return {alt}; }; Image.propTypes = { From 4f03954234ad4b305c67dc7bd946013235edd8a3 Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Tue, 14 Jul 2020 12:02:28 -0400 Subject: [PATCH 07/11] feat: add height auto --- src/components/Image.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Image.js b/src/components/Image.js index a8f5dd6af..bb2ae225e 100644 --- a/src/components/Image.js +++ b/src/components/Image.js @@ -9,10 +9,12 @@ Image.propTypes = { src: PropTypes.string.isRequired, alt: PropTypes.string.isRequired, width: PropTypes.number, + height: PropTypes.number, }; Image.defaultProps = { - width: 1200, + height: 400, + width: 'auto', }; export default Image; From f94be6a684efaa33ab46dab1e3a337e5bfed8274 Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Tue, 14 Jul 2020 16:31:23 -0400 Subject: [PATCH 08/11] feat: plugin solution for image height --- gatsby-config.js | 2 + src/components/Image.js | 38 ++++++++++++------- .../build-apps/build-hello-world-app.mdx | 2 +- 3 files changed, 28 insertions(+), 14 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 44432a41a..02509076f 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -54,6 +54,8 @@ module.exports = { resolve: 'gatsby-remark-images', options: { maxWidth: 1200, + maxHeight: 400, + fit: 'inside', linkImagesToOriginal: false, }, }, diff --git a/src/components/Image.js b/src/components/Image.js index bb2ae225e..335f03fea 100644 --- a/src/components/Image.js +++ b/src/components/Image.js @@ -1,20 +1,32 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { useStaticQuery, graphql } from 'gatsby'; +import Img from 'gatsby-image'; -const Image = ({ alt, ...props }) => { - return {alt}; -}; +/* + * This component is built using `gatsby-image` to automatically serve optimized + * images with lazy loading and reduced file sizes. The image is loaded using a + * `useStaticQuery`, which allows us to load the image from directly within this + * component, rather than having to pass the image data down from pages. + * + * For more information, see the docs: + * - `gatsby-image`: https://gatsby.dev/gatsby-image + * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/ + */ -Image.propTypes = { - src: PropTypes.string.isRequired, - alt: PropTypes.string.isRequired, - width: PropTypes.number, - height: PropTypes.number, -}; +const Image = () => { + const data = useStaticQuery(graphql` + query { + placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) { + childImageSharp { + fluid(maxWidth: 300) { + ...GatsbyImageSharpFluid + } + } + } + } + `); -Image.defaultProps = { - height: 400, - width: 'auto', + return ; }; export default Image; diff --git a/src/markdown-pages/build-apps/build-hello-world-app.mdx b/src/markdown-pages/build-apps/build-hello-world-app.mdx index d17531da7..d04a6bd7f 100644 --- a/src/markdown-pages/build-apps/build-hello-world-app.mdx +++ b/src/markdown-pages/build-apps/build-hello-world-app.mdx @@ -121,7 +121,7 @@ If you followed all the steps in the CLI wizard, you now have files under a new When the browser opens, click the new launcher for your application. Here's an example where we inserted a leaf icon: - The customized nerdlet launcher + ![The customized nerdlet launcher](../../images/create-hello-world/hello-world-launcher.png) After you click the new launcher, your "Hello, World!" appears: From cfa2601877e3a8d42de12eb473fb20187ff936a1 Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Tue, 14 Jul 2020 16:35:06 -0400 Subject: [PATCH 09/11] fix: removed the mdx container import --- src/components/MDXContainer.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/MDXContainer.js b/src/components/MDXContainer.js index 87f55ecd6..d4fdd835f 100644 --- a/src/components/MDXContainer.js +++ b/src/components/MDXContainer.js @@ -11,8 +11,7 @@ import Caution from './Caution'; import Important from './Important'; import Tip from './Tip'; import Intro from './Intro'; -import MDXCodeBlock from './MDXCodeBlock'; -import Image from './Image'; +import CodeSnippet from './CodeSnippet'; import styles from './MDXContainer.module.scss'; @@ -24,9 +23,7 @@ const components = { Important, Tip, Intro, - Image, - code: MDXCodeBlock, - pre: (props) => props.children, + code: (props) => , }; const MDXContainer = ({ className, children }) => { From 6c153c4e9a0b8d2ea0b2b4d2d631ab46470868ed Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Tue, 14 Jul 2020 16:35:55 -0400 Subject: [PATCH 10/11] fix: fixed code snippet --- src/components/MDXContainer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/MDXContainer.js b/src/components/MDXContainer.js index d4fdd835f..e081d4977 100644 --- a/src/components/MDXContainer.js +++ b/src/components/MDXContainer.js @@ -11,7 +11,7 @@ import Caution from './Caution'; import Important from './Important'; import Tip from './Tip'; import Intro from './Intro'; -import CodeSnippet from './CodeSnippet'; +import MDXCodeBlock from './MDXCodeBlock'; import styles from './MDXContainer.module.scss'; @@ -23,7 +23,8 @@ const components = { Important, Tip, Intro, - code: (props) => , + code: MDXCodeBlock, + pre: (props) => props.children, }; const MDXContainer = ({ className, children }) => { From a81ae5ed7ba9ca955442ea3ba49e8567205770da Mon Sep 17 00:00:00 2001 From: Cayla Hamann Date: Tue, 14 Jul 2020 17:00:18 -0400 Subject: [PATCH 11/11] fix: rearranged order --- gatsby-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gatsby-config.js b/gatsby-config.js index 02509076f..56cc1e377 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -53,8 +53,8 @@ module.exports = { { resolve: 'gatsby-remark-images', options: { - maxWidth: 1200, maxHeight: 400, + maxWidth: 1200, fit: 'inside', linkImagesToOriginal: false, },