diff --git a/src/components/PageLayout/PageLayout.js b/src/components/PageLayout/PageLayout.js index 6acff7200..a2a4012f1 100644 --- a/src/components/PageLayout/PageLayout.js +++ b/src/components/PageLayout/PageLayout.js @@ -18,7 +18,7 @@ const LAYOUTS = { grid-template-areas: 'page-header page-header' 'content related-content'; - grid-template-columns: minmax(0, 1fr) auto; + grid-template-columns: minmax(0, 1fr) 300px; grid-gap: 2rem; @media (max-width: 1240px) { diff --git a/src/components/PageLayout/RelatedContent.js b/src/components/PageLayout/RelatedContent.js index fbe9e6d02..5b680f9e5 100644 --- a/src/components/PageLayout/RelatedContent.js +++ b/src/components/PageLayout/RelatedContent.js @@ -4,6 +4,14 @@ import { css } from '@emotion/core'; import { graphql, useStaticQuery } from 'gatsby'; import { Button, ExternalLink, Icon } from '@newrelic/gatsby-theme-newrelic'; import usePageContext from '../../hooks/usePageContext'; +import styled from '@emotion/styled'; +import Tag from '../Tag'; + +const Section = styled.section` + &:not(:last-child) { + margin-bottom: 1rem; + } +`; const RelatedContent = ({ page }) => { const { site } = useStaticQuery(graphql` @@ -18,6 +26,7 @@ const RelatedContent = ({ page }) => { const { fileRelativePath } = usePageContext(); const { + frontmatter: { resources }, fields: { gitAuthorTime }, } = page; @@ -38,44 +47,80 @@ const RelatedContent = ({ page }) => { border-radius: 0.25rem; `} > -

Contribute

- - + variant={Button.VARIANT.PRIMARY} + size={Button.SIZE.SMALL} + > + + File an issue + + + + + {resources?.length > 0 && ( +
+

Resources

+ +
+ )} -
{ `} > {`Page last modified on ${gitAuthorTime}`} -
+ ); }; RelatedContent.propTypes = { page: PropTypes.shape({ + frontmatter: PropTypes.shape({ + resources: PropTypes.arrayOf( + PropTypes.shape({ + title: PropTypes.string, + url: PropTypes.string, + }) + ), + }), fields: PropTypes.shape({ gitAuthorTime: PropTypes.string, }), @@ -99,6 +152,12 @@ RelatedContent.propTypes = { export const query = graphql` fragment RelatedContent_page on Mdx { + frontmatter { + resources { + title + url + } + } fields { gitAuthorTime(formatString: "MMMM DD, YYYY") }