From f56e37abc96c71aa9384291d79e54353ca96da16 Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Tue, 1 Feb 2022 17:46:38 -0800 Subject: [PATCH] feat: replace theme header --- .../components/GlobalFooter.js | 213 ++++++++++++++++++ .../components/Layout/Layout.js | 50 ++++ src/layouts/QuickStartLayout.js | 30 +-- 3 files changed, 272 insertions(+), 21 deletions(-) create mode 100644 src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js create mode 100644 src/@newrelic/gatsby-theme-newrelic/components/Layout/Layout.js diff --git a/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js b/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js new file mode 100644 index 00000000..d25bdb3f --- /dev/null +++ b/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js @@ -0,0 +1,213 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Button from '@newrelic/gatsby-theme-newrelic/src/components/Button'; +import Logo from '@newrelic/gatsby-theme-newrelic/src/components/Logo'; +import ExternalLink from '@newrelic/gatsby-theme-newrelic/src/components/ExternalLink'; +import { graphql, useStaticQuery } from 'gatsby'; +import { css } from '@emotion/react'; +import CreateIssueButton from '@newrelic/gatsby-theme-newrelic/src/components/CreateIssueButton'; +import EditPageButton from '@newrelic/gatsby-theme-newrelic/src/components/EditPageButton'; +import useThemeTranslation from '@newrelic/gatsby-theme-newrelic/src//hooks/useThemeTranslation'; +import Trans from '@newrelic/gatsby-theme-newrelic/src/components/Trans'; +import Link from '@newrelic/gatsby-theme-newrelic/src/components/Link'; +import useLocale from '@newrelic/gatsby-theme-newrelic/src//hooks/useLocale'; + +// We need to use this as a JS value otherwise the HTML entity gets saved in the +// string and escaped by React, therefore rendering the literal © text in +// the footer +const copyrightSymbol = String.fromCharCode(169); +const year = new Date().getFullYear(); + +const GlobalFooter = ({ + fileRelativePath, + className, + pageTitle, + issueLabels, +}) => { + const { t } = useThemeTranslation(); + const { site, sitePage } = useStaticQuery(graphql` + query FooterQueryIO { + site { + siteMetadata { + siteUrl + repository + } + } + sitePage(path: { eq: "/terms" }) { + id + } + } + `); + const { locale } = useLocale(); + + const { siteMetadata } = site; + const { repository } = siteMetadata; + + return ( + + ); +}; + +GlobalFooter.propTypes = { + fileRelativePath: PropTypes.string, + className: PropTypes.string, + pageTitle: PropTypes.string, + issueLabels: CreateIssueButton.propTypes.labels, +}; + +export default GlobalFooter; diff --git a/src/@newrelic/gatsby-theme-newrelic/components/Layout/Layout.js b/src/@newrelic/gatsby-theme-newrelic/components/Layout/Layout.js new file mode 100644 index 00000000..43f4e4f4 --- /dev/null +++ b/src/@newrelic/gatsby-theme-newrelic/components/Layout/Layout.js @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { css } from '@emotion/react'; +import Content from '@newrelic/gatsby-theme-newrelic/src/components/Layout/Content'; +import Footer from '@newrelic/gatsby-theme-newrelic/src/components/Layout/Footer'; +import Main from '@newrelic/gatsby-theme-newrelic/src/components/Layout/Main'; +import PageTools from '@newrelic/gatsby-theme-newrelic/src/components/Layout/PageTools'; +import Sidebar from '@newrelic/gatsby-theme-newrelic/src/components/Layout/Sidebar'; + +const Layout = ({ className, children }) => { + return ( +
+ {children} +
+ ); +}; + +Layout.propTypes = { + className: PropTypes.string, + children: PropTypes.node, +}; + +Layout.Content = Content; +Layout.Main = Main; +Layout.PageTools = PageTools; +Layout.Footer = Footer; +Layout.Sidebar = Sidebar; + +export default Layout; diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js index ebc7e835..2ce25687 100644 --- a/src/layouts/QuickStartLayout.js +++ b/src/layouts/QuickStartLayout.js @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import { Layout, GlobalHeader, + GlobalFooter, NR_SITES, } from '@newrelic/gatsby-theme-newrelic'; import PropTypes from 'prop-types'; @@ -10,14 +11,6 @@ import '../components/styles.scss'; import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants'; const QuickStartLayout = ({ children }) => { - const [sidebarWidth, setSidebarWidth] = useState(0); - - useEffect(() => { - if (window.location.pathname === '/instant-observability/') { - setSidebarWidth(300); - } else setSidebarWidth(0); - }, [children]); - return ( <> @@ -38,20 +31,15 @@ const QuickStartLayout = ({ children }) => { > {children} - + ); };