From 661e6e862d4f24cd52a6355e51d8f3ce0737ff00 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 28 Oct 2020 12:05:26 -0700 Subject: [PATCH 1/9] fix: upgrade gatsby-theme-newrelic --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index d9a2395a8..1b46bd3b3 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "@emotion/styled": "^10.0.27", "@mdx-js/mdx": "^1.6.17", "@mdx-js/react": "^1.6.18", - "@newrelic/gatsby-theme-newrelic": "^1.10.3", + "@newrelic/gatsby-theme-newrelic": "^1.11.0", "@splitsoftware/splitio-react": "^1.2.0", "@xstate/react": "^1.0.1", "classnames": "^2.2.6", diff --git a/yarn.lock b/yarn.lock index dd45c292b..b777f2ad2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3011,10 +3011,10 @@ eslint-plugin-promise "^4.2.1" eslint-plugin-react "^7.14.3" -"@newrelic/gatsby-theme-newrelic@^1.10.3": - version "1.10.3" - resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-1.10.3.tgz#c1b8b8fcc216f43899b6093c1d7586c04f8e0c97" - integrity sha512-A0asoXYBcwvRWovPU8ORtitcqYQNEhYwGAHxz4hg56Xz/m2uLPJeSB54jSZRu+XX9XrrlM1UFOpisRq+Pvqfrg== +"@newrelic/gatsby-theme-newrelic@^1.11.0": + version "1.11.0" + resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-1.11.0.tgz#440f4fca63d4fe14b65201d555f8c1d64b97a10c" + integrity sha512-YMY2rUT78MA1F5obw0wxYY+deazilIU3BYMZJnYDtmhLTXx6nGvVDsuMzmEd9VS/skGyMatCG5ZkqR6+2TFXnQ== dependencies: "@elastic/react-search-ui" "^1.4.1" "@elastic/react-search-ui-views" "^1.4.1" From c8eccc9d1b8fa38e52e3f5ac34d2b67f8572db5f Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 28 Oct 2020 15:35:07 -0700 Subject: [PATCH 2/9] feat: use the GlobalFooter from the theme --- .../gatsby-theme-newrelic/components/Logo.js | 41 +++++++++++++++++++ src/layouts/MainLayout.js | 9 ++-- 2 files changed, 45 insertions(+), 5 deletions(-) create mode 100644 src/@newrelic/gatsby-theme-newrelic/components/Logo.js diff --git a/src/@newrelic/gatsby-theme-newrelic/components/Logo.js b/src/@newrelic/gatsby-theme-newrelic/components/Logo.js new file mode 100644 index 000000000..0a86cc1a4 --- /dev/null +++ b/src/@newrelic/gatsby-theme-newrelic/components/Logo.js @@ -0,0 +1,41 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { css } from '@emotion/core'; + +const bracket = css` + stroke: var(--logo-icon-color, var(--color-brand-500)); + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + + .dark-mode & { + stroke: var(--logo-icon-color, var(--color-brand-300)); + } +`; + +const Logo = ({ className }) => ( + + + + + +); + +Logo.propTypes = { + className: PropTypes.string, +}; + +export default Logo; diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js index 8bda6e290..b80b950f9 100644 --- a/src/layouts/MainLayout.js +++ b/src/layouts/MainLayout.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { css } from '@emotion/core'; import { Helmet } from 'react-helmet'; -import { GlobalHeader } from '@newrelic/gatsby-theme-newrelic'; +import { GlobalHeader, GlobalFooter } from '@newrelic/gatsby-theme-newrelic'; import { graphql, useStaticQuery } from 'gatsby'; import Cookies from 'js-cookie'; import Footer from '../components/Footer'; @@ -147,12 +147,11 @@ const MainLayout = ({ children }) => { > {children} -
From 0e8652dc455e6e4e2e2f373c8f96a89805fc5993 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 28 Oct 2020 15:37:31 -0700 Subject: [PATCH 3/9] chore: accept width on logo and update stroke colors --- src/@newrelic/gatsby-theme-newrelic/components/Logo.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/@newrelic/gatsby-theme-newrelic/components/Logo.js b/src/@newrelic/gatsby-theme-newrelic/components/Logo.js index 0a86cc1a4..ad6b09e35 100644 --- a/src/@newrelic/gatsby-theme-newrelic/components/Logo.js +++ b/src/@newrelic/gatsby-theme-newrelic/components/Logo.js @@ -3,24 +3,24 @@ import PropTypes from 'prop-types'; import { css } from '@emotion/core'; const bracket = css` - stroke: var(--logo-icon-color, var(--color-brand-500)); + stroke: var(--color-brand-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; .dark-mode & { - stroke: var(--logo-icon-color, var(--color-brand-300)); + stroke: var(--color-brand-300); } `; -const Logo = ({ className }) => ( +const Logo = ({ className, width }) => ( ( Logo.propTypes = { className: PropTypes.string, + width: PropTypes.string, }; export default Logo; From bf9b4eb7c2be684f186ffdce021361b53a0ad35d Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 28 Oct 2020 15:38:11 -0700 Subject: [PATCH 4/9] chore: remove the old footer component --- src/components/Footer.js | 66 ----------------------------- src/components/Footer.module.scss | 69 ------------------------------- src/layouts/MainLayout.js | 1 - 3 files changed, 136 deletions(-) delete mode 100644 src/components/Footer.js delete mode 100644 src/components/Footer.module.scss diff --git a/src/components/Footer.js b/src/components/Footer.js deleted file mode 100644 index 4b7f46431..000000000 --- a/src/components/Footer.js +++ /dev/null @@ -1,66 +0,0 @@ -import React, { useContext } from 'react'; -import { Link } from 'gatsby'; -import cx from 'classnames'; -import ExternalLink from './ExternalLink'; -import { PageContext } from './PageContext'; -import { githubBaseUrl } from '../data/constants'; -import styles from './Footer.module.scss'; -import FeatherIcon from './FeatherIcon'; -import Logo from './Logo'; -import PropTypes from 'prop-types'; - -const Footer = ({ className }) => { - const { fileRelativePath } = useContext(PageContext); - const isComponentDoc = - fileRelativePath && - fileRelativePath.includes('src/markdown-pages/components'); - - return ( -
-
- - - -
- Copyright © 2020 New Relic Inc. -
-
- -
- - - Terms of service - - {fileRelativePath && !isComponentDoc && ( - - - Edit this page - - )} - - - Create an issue - -
-
- ); -}; - -Footer.propTypes = { - className: PropTypes.string, -}; - -export default Footer; diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss deleted file mode 100644 index 54e8ead96..000000000 --- a/src/components/Footer.module.scss +++ /dev/null @@ -1,69 +0,0 @@ -.footer { - display: flex; - justify-content: space-between; - align-items: center; - color: var(--secondary-text-color); - font-size: 0.75rem; - z-index: 1; - - @media (max-width: 1080px) { - flex-direction: column; - } - - a { - color: currentColor; - } -} - -.left { - display: flex; - align-items: center; - - @media (max-width: 760px) { - display: block; - } -} - -.logo { - width: 200px; - - &:hover { - color: var(--secondary-text-hover-color); - } -} - -.copyright { - margin-left: 0.5rem; - padding-left: 0.5rem; - border-left: 1px dotted var(--border-color); - - @media (max-width: 760px) { - border-left: none; - margin-left: 0; - padding: 0.5rem; - } -} - -.right { - display: flex; - - a { - padding-right: 0; - display: flex; - align-items: center; - - &:not(:first-child) { - margin-left: 1rem; - } - } -} - -.linkIcon { - margin-right: 0.5rem; -} - -.link { - &:hover { - color: var(--secondary-text-hover-color); - } -} diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js index b80b950f9..6880e241c 100644 --- a/src/layouts/MainLayout.js +++ b/src/layouts/MainLayout.js @@ -6,7 +6,6 @@ import { Helmet } from 'react-helmet'; import { GlobalHeader, GlobalFooter } from '@newrelic/gatsby-theme-newrelic'; import { graphql, useStaticQuery } from 'gatsby'; import Cookies from 'js-cookie'; -import Footer from '../components/Footer'; import MobileHeader from '../components/MobileHeader'; import Sidebar from '../components/Sidebar'; import CookieApprovalDialog from '../components/CookieApprovalDialog'; From 34dd4bf76bd9de63c548076b58dd862af039242f Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 28 Oct 2020 15:49:08 -0700 Subject: [PATCH 5/9] chore: update 404 page to use global footer --- src/components/styles.scss | 5 ----- src/pages/404.js | 27 ++++----------------------- src/pages/404.module.scss | 18 ------------------ 3 files changed, 4 insertions(+), 46 deletions(-) diff --git a/src/components/styles.scss b/src/components/styles.scss index 0f5bafddc..d318f2c0d 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -25,9 +25,4 @@ input[type='text'] { margin-bottom: 0.5rem !important; } } - - .site-container { - max-width: 1600px; - margin: 0 auto; - } } diff --git a/src/pages/404.js b/src/pages/404.js index a0135fcbc..6ead5a2ab 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -1,35 +1,18 @@ import React from 'react'; -import cx from 'classnames'; -import { Link, useStaticQuery, graphql } from 'gatsby'; +import { Link } from 'gatsby'; import SEO from '../components/Seo'; import SkewedContainer from '../components/SkewedContainer'; -import { GlobalHeader } from '@newrelic/gatsby-theme-newrelic'; -import Footer from '../components/Footer'; +import { GlobalHeader, GlobalFooter } from '@newrelic/gatsby-theme-newrelic'; import { PageContext } from '../components/PageContext'; import { pageContext } from '../types'; import styles from './404.module.scss'; const NotFoundPage = ({ pageContext }) => { - const { - site: { siteMetadata }, - } = useStaticQuery(graphql` - query { - site { - siteMetadata { - repository - } - } - } - `); - return (
- +

404

@@ -39,9 +22,7 @@ const NotFoundPage = ({ pageContext }) => {

-
-
-
+
); diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss index c7f09f562..6aca3e5f8 100644 --- a/src/pages/404.module.scss +++ b/src/pages/404.module.scss @@ -22,21 +22,3 @@ font-size: 1.125rem; padding: 8rem 0; } - -.footerContainer { - background: var(--color-neutrals-800); - padding: 1.5rem; - - :global(.dark-mode) & { - background: var(--tertiary-background-color); - } -} - -.footer { - color: var(--color-teal-300); - padding: 0 2rem; - - :global(.dark-mode) & { - color: var(--secondary-text-color); - } -} From a05e5165db0879267e6f7f2b2be752e107663e47 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 28 Oct 2020 15:50:28 -0700 Subject: [PATCH 6/9] chore: switch the 404 page over to emotion --- src/pages/404.js | 37 ++++++++++++++++++++++++++++++++----- src/pages/404.module.scss | 24 ------------------------ 2 files changed, 32 insertions(+), 29 deletions(-) delete mode 100644 src/pages/404.module.scss diff --git a/src/pages/404.js b/src/pages/404.js index 6ead5a2ab..4aac4936b 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -1,21 +1,48 @@ import React from 'react'; +import { css } from '@emotion/core'; import { Link } from 'gatsby'; import SEO from '../components/Seo'; import SkewedContainer from '../components/SkewedContainer'; import { GlobalHeader, GlobalFooter } from '@newrelic/gatsby-theme-newrelic'; import { PageContext } from '../components/PageContext'; import { pageContext } from '../types'; -import styles from './404.module.scss'; const NotFoundPage = ({ pageContext }) => { return ( -
+
-
- -

404

+
+ +

+ 404 +

The URL you entered may be broken, or the page has been removed.{' '} Go back to the home page. diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss deleted file mode 100644 index 6aca3e5f8..000000000 --- a/src/pages/404.module.scss +++ /dev/null @@ -1,24 +0,0 @@ -.layout { - display: grid; - grid-template-rows: auto 1fr auto; - min-height: 100vh; -} - -.contentContainer { - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; -} - -.header { - font-family: var(--secondary-font-family); - font-size: 9rem; - font-weight: normal; - line-height: 1; -} - -.content { - font-size: 1.125rem; - padding: 8rem 0; -} From 4daa1866f88b13d04dedde94234d95f3f280a570 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 28 Oct 2020 16:34:26 -0700 Subject: [PATCH 7/9] fix: bump gatsby-theme-newrelic version --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 1b46bd3b3..5203b9890 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "@emotion/styled": "^10.0.27", "@mdx-js/mdx": "^1.6.17", "@mdx-js/react": "^1.6.18", - "@newrelic/gatsby-theme-newrelic": "^1.11.0", + "@newrelic/gatsby-theme-newrelic": "^1.11.1", "@splitsoftware/splitio-react": "^1.2.0", "@xstate/react": "^1.0.1", "classnames": "^2.2.6", diff --git a/yarn.lock b/yarn.lock index b777f2ad2..c04b6445e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3011,10 +3011,10 @@ eslint-plugin-promise "^4.2.1" eslint-plugin-react "^7.14.3" -"@newrelic/gatsby-theme-newrelic@^1.11.0": - version "1.11.0" - resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-1.11.0.tgz#440f4fca63d4fe14b65201d555f8c1d64b97a10c" - integrity sha512-YMY2rUT78MA1F5obw0wxYY+deazilIU3BYMZJnYDtmhLTXx6nGvVDsuMzmEd9VS/skGyMatCG5ZkqR6+2TFXnQ== +"@newrelic/gatsby-theme-newrelic@^1.11.1": + version "1.11.1" + resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-1.11.1.tgz#1bc65597c4e5c1c1e62e826dfd20c48f18ddfdf4" + integrity sha512-cIhOBOolzAB2uQH5vAXLbq0T4zNwsHIkwe+yNjvcYunS2JNrkU/iD+AroVd8EcQ8USEQC+3oOC6gA0H0Nn5ljA== dependencies: "@elastic/react-search-ui" "^1.4.1" "@elastic/react-search-ui-views" "^1.4.1" From e64c5c3cab13ff5fd0fe4aea3bfa43f4734fc2c9 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 28 Oct 2020 16:41:58 -0700 Subject: [PATCH 8/9] chore: use the Logo exported from the theme instead of the local one --- src/components/Logo.js | 36 --------------------------------- src/components/Logo.module.scss | 18 ----------------- src/components/MobileHeader.js | 7 +++++-- src/components/Sidebar.js | 3 +-- 4 files changed, 6 insertions(+), 58 deletions(-) delete mode 100644 src/components/Logo.js delete mode 100644 src/components/Logo.module.scss diff --git a/src/components/Logo.js b/src/components/Logo.js deleted file mode 100644 index 135f963f8..000000000 --- a/src/components/Logo.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import cx from 'classnames'; -import styles from './Logo.module.scss'; - -const Logo = ({ className, bracketColor, textColor }) => ( - - - - - -); - -Logo.propTypes = { - className: PropTypes.string, - bracketColor: PropTypes.string, - textColor: PropTypes.string, -}; - -export default Logo; diff --git a/src/components/Logo.module.scss b/src/components/Logo.module.scss deleted file mode 100644 index 9b61abf46..000000000 --- a/src/components/Logo.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -.logo { - fill: none; -} - -.text { - fill: var(--logo-text-color, var(--heading-text-color)); -} - -.brackets { - stroke: var(--logo-bracket-color, var(--color-brand-500)); - stroke-width: 2; - stroke-linecap: round; - stroke-linejoin: round; - - :global(.dark-mode) & { - stroke: var(--logo-bracket-color, var(--color-brand-300)); - } -} diff --git a/src/components/MobileHeader.js b/src/components/MobileHeader.js index 87f6d531c..8c9ffca77 100644 --- a/src/components/MobileHeader.js +++ b/src/components/MobileHeader.js @@ -2,9 +2,12 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/core'; import { Link } from 'gatsby'; -import Logo from './Logo'; import Navigation from './Navigation'; -import { HamburgerMenu, SearchInput } from '@newrelic/gatsby-theme-newrelic'; +import { + Logo, + HamburgerMenu, + SearchInput, +} from '@newrelic/gatsby-theme-newrelic'; const MobileHeader = ({ className, isOpen, toggle }) => { const [searchTerm, setSearchTerm] = useState(''); diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index f9bcf4240..e197280c0 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -2,9 +2,8 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/core'; import { Link } from 'gatsby'; -import Logo from './Logo'; import Navigation from './Navigation'; -import { SearchInput } from '@newrelic/gatsby-theme-newrelic'; +import { Logo, SearchInput } from '@newrelic/gatsby-theme-newrelic'; const Sidebar = ({ className }) => { const [searchTerm, setSearchTerm] = useState(''); From 4e1a7398083ffdbf33f3a1bcc5e102060c7a373a Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 28 Oct 2020 16:42:40 -0700 Subject: [PATCH 9/9] chore: remove unused NewRelicLogo component --- src/components/NewRelicLogo.js | 66 ------------------------- src/components/NewRelicLogo.module.scss | 7 --- 2 files changed, 73 deletions(-) delete mode 100644 src/components/NewRelicLogo.js delete mode 100644 src/components/NewRelicLogo.module.scss diff --git a/src/components/NewRelicLogo.js b/src/components/NewRelicLogo.js deleted file mode 100644 index b6b04e714..000000000 --- a/src/components/NewRelicLogo.js +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import cx from 'classnames'; -import styles from './NewRelicLogo.module.scss'; - -const NewRelicLogo = ({ className, size }) => ( - - - - - - - - - - - - - -); - -NewRelicLogo.propTypes = { - className: PropTypes.string, - size: PropTypes.string, -}; - -export default NewRelicLogo; diff --git a/src/components/NewRelicLogo.module.scss b/src/components/NewRelicLogo.module.scss deleted file mode 100644 index d71da5e2c..000000000 --- a/src/components/NewRelicLogo.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.logo { - width: var(--logo-size, 79px); -} - -.text { - fill: var(--logo-text-color, var(--heading-text-color)); -}