feat: move the related content area to the guide template

newrelic · Jul 29, 2020 · 1f7b2d5 · 1f7b2d5
1 parent d3d34ab
commit 1f7b2d5
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 42 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -4,8 +4,6 @@ const { execSync } = require('child_process');
 const getFileRelativePath = (absolutePath) =>
   absolutePath.replace(`${process.cwd()}/`, '');
 
-const camelize = (str) => str[0].toLowerCase() + str.slice(1);
-
 exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage, createRedirect } = actions;
 
@@ -51,7 +49,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       component: path.resolve(`src/templates/${frontmatter.template}.js`),
       context: {
         fileRelativePath: getFileRelativePath(node.fileAbsolutePath),
-        pageType: camelize(frontmatter.template).replace('Template', ''),
         guidesFilter:
           frontmatter.template === 'OverviewTemplate'
             ? `${frontmatter.path}/*`

diff --git a/src/components/RelatedContent.js b/src/components/RelatedContent.js
@@ -5,7 +5,10 @@ import { graphql, useStaticQuery } from 'gatsby';
 import { Button, ExternalLink, Icon } from '@newrelic/gatsby-theme-newrelic';
 import { PageContext } from './PageContext';
 
-const RelatedContent = ({ className }) => {
+const RelatedContent = ({ className, page }) => {
+  const {
+    fields: { gitAuthorTime },
+  } = page;
   const { site } = useStaticQuery(graphql`
     query {
       site {
@@ -44,7 +47,7 @@ const RelatedContent = ({ className }) => {
       <Button
         as={ExternalLink}
         href={`${repository}/tree/main/${fileRelativePath}`}
-        variant={Button.VARIANT.PLAIN}
+        variant={Button.VARIANT.NORMAL}
         size={Button.SIZE.SMALL}
       >
         <Icon
@@ -55,6 +58,21 @@ const RelatedContent = ({ className }) => {
         />
         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>
   );
 };
@@ -63,4 +81,12 @@ RelatedContent.propTypes = {
   className: PropTypes.string,
 };
 
+export const query = graphql`
+  fragment RelatedContent_page on Mdx {
+    fields {
+      gitAuthorTime(formatString: "MMMM DD, YYYY")
+    }
+  }
+`;
+
 export default RelatedContent;
diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js
@@ -10,30 +10,12 @@ import Footer from '../components/Footer';
 import MobileHeader from '../components/MobileHeader';
 import Sidebar from '../components/Sidebar';
 import CookieApprovalDialog from '../components/CookieApprovalDialog';
-import RelatedContent from '../components/RelatedContent';
 import '../components/styles.scss';
 import usePageContext from '../hooks/usePageContext';
 
 const gaTrackingId = 'UA-3047412-33';
 const gdprConsentCookieName = 'newrelic-gdpr-consent';
 
-const RELATED_CONTENT_PAGE_TYPES = ['guide'];
-
-const GRID_LAYOUTS = {
-  relatedContent: css`
-    grid-template-areas:
-      'sidebar content related-content'
-      'sidebar footer footer';
-    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 340px;
-  `,
-  default: css`
-    grid-template-areas:
-      'sidebar content'
-      'sidebar footer';
-    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
-  `,
-};
-
 const MainLayout = ({ children }) => {
   const {
     site: { layout, siteMetadata },
@@ -51,7 +33,7 @@ const MainLayout = ({ children }) => {
     }
   `);
 
-  const { fileRelativePath, pageType } = usePageContext();
+  const { fileRelativePath } = usePageContext();
   const [cookieConsent, setCookieConsent] = useState(false);
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
   const isComponentDoc = fileRelativePath.includes(
@@ -104,15 +86,15 @@ const MainLayout = ({ children }) => {
       <div
         css={css`
           display: grid;
+          grid-template-areas:
+            'sidebar content'
+            'sidebar footer';
+          grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
           grid-column-gap: ${layout.contentPadding};
           width: 100%;
           max-width: ${layout.maxWidth};
           margin: 0 auto;
 
-          ${RELATED_CONTENT_PAGE_TYPES.includes(pageType)
-            ? GRID_LAYOUTS.relatedContent
-            : GRID_LAYOUTS.default};
-
           @media screen and (max-width: 760px) {
             grid-template-columns: minmax(0, 1fr);
           }
@@ -142,20 +124,11 @@ const MainLayout = ({ children }) => {
           css={css`
             grid-area: content;
             padding: ${layout.contentPadding} 0;
+            padding-right: ${layout.contentPadding};
           `}
         >
           {children}
         </article>
-        {RELATED_CONTENT_PAGE_TYPES.includes(pageType) && (
-          <RelatedContent
-            css={css`
-              align-self: start;
-              position: sticky;
-              top: calc(var(--global-header-height) + ${layout.contentPadding});
-              grid-area: related-content;
-            `}
-          />
-        )}
         <Footer
           css={css`
             grid-area: footer;

diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import { graphql } from 'gatsby';
+import { css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import MDXContainer from '../components/MDXContainer';
 
 import FeatherIcon from '../components/FeatherIcon';
+import RelatedContent from '../components/RelatedContent';
 import PageTitle from '../components/PageTitle';
 import SEO from '../components/Seo';
 import styles from './GuideTemplate.module.scss';
@@ -16,7 +18,12 @@ const GuideTemplate = ({ data }) => {
   return (
     <>
       <SEO title={title} description={description} />
-      <div className={styles.header}>
+      <div
+        css={css`
+          border-bottom: 1px solid var(--divider-color);
+        `}
+        className={styles.header}
+      >
         <PageTitle>{title}</PageTitle>
         {duration && (
           <div className={styles.duration}>
@@ -25,9 +32,22 @@ const GuideTemplate = ({ data }) => {
           </div>
         )}
       </div>
-      <MDXContainer>{body}</MDXContainer>
-      <div className={styles.lastUpdated}>
-        {`Page last modified on ${fields.gitAuthorTime}`}
+      <div
+        css={css`
+          display: grid;
+          grid-template-columns: minmax(0, 1fr) auto;
+          grid-gap: 2rem;
+        `}
+      >
+        <MDXContainer>{body}</MDXContainer>
+        <RelatedContent
+          page={mdx}
+          css={css`
+            position: sticky;
+            top: calc(var(--global-header-height) + 2rem);
+            align-self: start;
+          `}
+        />
       </div>
     </>
   );
@@ -50,6 +70,8 @@ export const pageQuery = graphql`
       fields {
         gitAuthorTime(formatString: "MMMM DD, YYYY")
       }
+
+      ...RelatedContent_page
     }
   }
 `;