From 2e6f4886a852ab6b71e0c8a336a94e2a83b82420 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 29 Jul 2020 18:53:30 -0700 Subject: [PATCH] feat: create a PageLayout component --- src/components/PageLayout/Content.js | 7 ++ src/components/PageLayout/Header.js | 39 +++++++ src/components/PageLayout/MarkdownContent.js | 8 ++ src/components/PageLayout/PageLayout.js | 77 +++++++++++++ src/components/PageLayout/RelatedContent.js | 108 +++++++++++++++++++ src/components/PageLayout/index.js | 1 + 6 files changed, 240 insertions(+) create mode 100644 src/components/PageLayout/Content.js create mode 100644 src/components/PageLayout/Header.js create mode 100644 src/components/PageLayout/MarkdownContent.js create mode 100644 src/components/PageLayout/PageLayout.js create mode 100644 src/components/PageLayout/RelatedContent.js create mode 100644 src/components/PageLayout/index.js diff --git a/src/components/PageLayout/Content.js b/src/components/PageLayout/Content.js new file mode 100644 index 000000000..5a1c2d706 --- /dev/null +++ b/src/components/PageLayout/Content.js @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +const Content = styled.div` + grid-area: content; +`; + +export default Content; diff --git a/src/components/PageLayout/Header.js b/src/components/PageLayout/Header.js new file mode 100644 index 000000000..56beaaf31 --- /dev/null +++ b/src/components/PageLayout/Header.js @@ -0,0 +1,39 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { css } from '@emotion/core'; + +const Header = ({ title, children }) => ( +
+

+ {title} +

+ {children} +
+); + +Header.propTypes = { + children: PropTypes.node, + title: PropTypes.string.isRequired, +}; + +export default Header; diff --git a/src/components/PageLayout/MarkdownContent.js b/src/components/PageLayout/MarkdownContent.js new file mode 100644 index 000000000..a321fb2dd --- /dev/null +++ b/src/components/PageLayout/MarkdownContent.js @@ -0,0 +1,8 @@ +import styled from '@emotion/styled'; +import MDXContainer from '../MDXContainer'; + +const MarkdownContent = styled(MDXContainer)` + grid-area: content; +`; + +export default MarkdownContent; diff --git a/src/components/PageLayout/PageLayout.js b/src/components/PageLayout/PageLayout.js new file mode 100644 index 000000000..8eeecada0 --- /dev/null +++ b/src/components/PageLayout/PageLayout.js @@ -0,0 +1,77 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { css } from '@emotion/core'; +import { graphql, useStaticQuery } from 'gatsby'; +import Content from './Content'; +import Header from './Header'; +import MarkdownContent from './MarkdownContent'; +import RelatedContent from './RelatedContent'; + +const TYPES = { + SINGLE_COLUMN: 'SINGLE_COLUMN', + RELATED_CONTENT: 'RELATED_CONTENT', +}; + +const LAYOUTS = { + [TYPES.RELATED_CONTENT]: css` + grid-template-areas: + 'page-header page-header' + 'content related-content'; + grid-template-columns: minmax(0, 1fr) auto; + grid-gap: 2rem; + + @media (max-width: 1240px) { + grid-template-areas: + 'page-header' + 'content'; + grid-template-columns: minmax(0, 1fr); + } + `, + [TYPES.SINGLE_COLUMN]: css` + grid-template-areas: + 'page-header' + 'content'; + grid-template-columns: minmax(0, 1fr); + `, +}; + +const PageLayout = ({ children, type }) => { + const { + site: { layout }, + } = useStaticQuery(graphql` + query { + site { + layout { + contentPadding + } + } + } + `); + + return ( +
+ {children} +
+ ); +}; + +PageLayout.propTypes = { + children: PropTypes.node, + type: PropTypes.oneOf(Object.values(TYPES)).isRequired, +}; + +PageLayout.TYPE = TYPES; + +PageLayout.Content = Content; +PageLayout.Header = Header; +PageLayout.MarkdownContent = MarkdownContent; +PageLayout.RelatedContent = RelatedContent; + +export default PageLayout; diff --git a/src/components/PageLayout/RelatedContent.js b/src/components/PageLayout/RelatedContent.js new file mode 100644 index 000000000..b9fe9fa14 --- /dev/null +++ b/src/components/PageLayout/RelatedContent.js @@ -0,0 +1,108 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { css } from '@emotion/core'; +import { graphql, useStaticQuery } from 'gatsby'; +import { Button, ExternalLink, Icon } from '@newrelic/gatsby-theme-newrelic'; +import usePageContext from '../../hooks/usePageContext'; + +const RelatedContent = ({ page }) => { + const { site } = useStaticQuery(graphql` + query { + site { + siteMetadata { + repository + } + } + } + `); + const { fileRelativePath } = usePageContext(); + + const { + fields: { gitAuthorTime }, + } = page; + + const { + siteMetadata: { repository }, + } = site; + + return ( + + ); +}; + +RelatedContent.propTypes = { + page: PropTypes.shape({ + fields: PropTypes.shape({ + gitAuthorTime: PropTypes.string, + }), + }), +}; + +export const query = graphql` + fragment RelatedContent_page on Mdx { + fields { + gitAuthorTime(formatString: "MMMM DD, YYYY") + } + } +`; + +export default RelatedContent; diff --git a/src/components/PageLayout/index.js b/src/components/PageLayout/index.js new file mode 100644 index 000000000..5f1db65f6 --- /dev/null +++ b/src/components/PageLayout/index.js @@ -0,0 +1 @@ +export { default } from './PageLayout';