Right rail content

gatsby-config.js

@@ -14,7 +14,7 @@ module.exports = {
       options: {
         layout: {
           contentPadding: '2rem',
-          maxWidth: '1600px',
+          maxWidth: '1700px',
         },
         newrelic: {
           configs: {

src/components/MDXContainer.js

@@ -4,14 +4,13 @@ import cx from 'classnames';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { MDXProvider } from '@mdx-js/react';
 
-import Video from './Video';
 import Step from './Step';
 import Steps from './Steps';
 import Caution from './Caution';
 import Important from './Important';
 import Tip from './Tip';
 import Intro from './Intro';
-import { MDXCodeBlock } from '@newrelic/gatsby-theme-newrelic';
+import { MDXCodeBlock, Video } from '@newrelic/gatsby-theme-newrelic';
 
 import styles from './MDXContainer.module.scss';
 

src/components/MobileHeader.module.scss

@@ -1,6 +1,5 @@
 .container {
   position: relative;
-  border-bottom: 1px solid var(--divider-color);
   padding: 0 2rem;
 
   width: 100vw;

src/components/PageLayout/Content.js

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+const Content = styled.div`
+  grid-area: content;
+`;
+
+export default Content;

src/components/PageLayout/Context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const PageLayoutContext = createContext();
+
+export default PageLayoutContext;

src/components/PageLayout/Header.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
+
+const Header = ({ title, children }) => (
+  <header
+    css={css`
+      grid-area: page-header;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid var(--divider-color);
+      padding-bottom: 1rem;
+
+      @media screen and (max-width: 1080px) {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    `}
+  >
+    <h1
+      css={css`
+        font-family: var(--secondary-font-family);
+        font-size: 2.5rem;
+        font-weight: normal;
+        margin-bottom: 0;
+        line-height: 1;
+
+        ${children &&
+        css`
+          @media screen and (max-width: 1080px) {
+            margin-bottom: 0.5rem;
+          }
+        `}
+      `}
+    >
+      {title}
+    </h1>
+    {children}
+  </header>
+);
+
+Header.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.string.isRequired,
+};
+
+export default Header;

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;

src/components/PageLayout/PageLayout.js

@@ -0,0 +1,80 @@
+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';
+import Context from './Context';
+
+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'
+        'related-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 (
+    <div
+      css={css`
+        display: grid;
+        grid-gap: ${layout.contentPadding};
+
+        ${LAYOUTS[type]};
+      `}
+    >
+      <Context.Provider value={type}>{children}</Context.Provider>
+    </div>
+  );
+};
+
+PageLayout.propTypes = {
+  children: PropTypes.node,
+  type: PropTypes.oneOf(Object.values(TYPES)).isRequired,
+};
+
+PageLayout.TYPE = TYPES;
+
+PageLayout.Content = Content;
+PageLayout.Context = Context;
+PageLayout.Header = Header;
+PageLayout.MarkdownContent = MarkdownContent;
+PageLayout.RelatedContent = RelatedContent;
+
+export default PageLayout;

src/components/PageLayout/RelatedContent.js

@@ -0,0 +1,107 @@
+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 (
+    <aside
+      css={css`
+        grid-area: related-content;
+        position: sticky;
+        top: calc(var(--global-header-height) + 2rem);
+        align-self: start;
+        padding: 1rem;
+        border: 1px solid var(--divider-color);
+        border-radius: 0.25rem;
+      `}
+    >
+      <h4>Contribute</h4>
+      <Button
+        as={ExternalLink}
+        href={`${repository}/issues/new/choose`}
+        css={css`
+          margin-right: 0.5rem;
+        `}
+        variant={Button.VARIANT.PRIMARY}
+        size={Button.SIZE.SMALL}
+      >
+        <Icon
+          name={Icon.TYPE.GITHUB}
+          css={css`
+            margin-right: 0.5rem;
+          `}
+        />
+        File an issue
+      </Button>
+      <Button
+        as={ExternalLink}
+        href={`${repository}/tree/main/${fileRelativePath}`}
+        variant={Button.VARIANT.NORMAL}
+        size={Button.SIZE.SMALL}
+      >
+        <Icon
+          name={Icon.TYPE.EDIT}
+          css={css`
+            margin-right: 0.5rem;
+          `}
+        />
+        Edit this page
+      </Button>
+
+      <div
+        css={css`
+          font-size: 0.875rem;
+          font-style: italic;
+          margin-top: 1rem;
+          color: var(--color-neutrals-500);
+
+          .dark-mode & {
+            color: var(--color-dark-500);
+          }
+        `}
+      >
+        {`Page last modified on ${gitAuthorTime}`}
+      </div>
+    </aside>
+  );
+};
+
+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;

src/components/PageLayout/index.js

@@ -0,0 +1 @@
+export { default } from './PageLayout';

src/components/SideBySide.js

@@ -1,10 +1,15 @@
 import React, { Children, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
-import styles from './SideBySide.module.scss';
+import { css } from '@emotion/core';
 import splitUsing from '../utils/splitUsing';
 import splitWhen from '../utils/splitWhen';
 import { isMdxType } from '../utils/mdx';
+import usePageLayout from '../hooks/usePageLayout';
+
+const BREAKPOINTS = {
+  SINGLE_COLUMN: '1240px',
+  RELATED_CONTENT: '1520px',
+};
 
 const SideBySide = ({ className, children, type }) => {
   const types = Array.isArray(type) ? type : [type];
@@ -32,11 +37,35 @@ const SideBySide = ({ className, children, type }) => {
     )
   );
 
+  const pageLayout = usePageLayout();
+
   return (
-    <div className={cx(className, styles.container)}>
+    <div
+      css={css`
+        display: grid;
+        grid-template-columns: repeat(2, calc(50% - 0.5rem));
+        grid-gap: 1rem;
+
+        p:last-child {
+          margin-bottom: 0;
+        }
+
+        @media (max-width: ${BREAKPOINTS[pageLayout]}) {
+          grid-template-columns: minmax(0, 1fr);
+        }
+      `}
+      className={className}
+    >
       {sections.map(([left, right], idx) => (
         <Fragment key={idx}>
-          <div className={cx({ [styles.spanColumns]: !rendersRightColumn })}>
+          <div
+            css={
+              !rendersRightColumn &&
+              css`
+                grid-column: span 2;
+              `
+            }
+          >
             {left}
           </div>
           {rendersRightColumn && <div>{right}</div>}

src/hooks/usePageContext.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { PageContext } from '../components/PageContext';
+
+const usePageContext = () => useContext(PageContext);
+
+export default usePageContext;