From d3d34ab1c37229f1630d077380a349fcadbd36cd Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Wed, 29 Jul 2020 15:41:37 -0700
Subject: [PATCH] chore: more forward-facing improvements for when to show the
 related content area

---
 gatsby-node.js            |  6 +++---
 src/layouts/MainLayout.js | 10 +++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index 7e299b7d6..a9af1f459 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -4,6 +4,8 @@ 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;
 
@@ -49,9 +51,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       component: path.resolve(`src/templates/${frontmatter.template}.js`),
       context: {
         fileRelativePath: getFileRelativePath(node.fileAbsolutePath),
-        pageType:
-          frontmatter.template[0].toLowerCase() +
-          frontmatter.template.replace('Template', '').slice(1),
+        pageType: camelize(frontmatter.template).replace('Template', ''),
         guidesFilter:
           frontmatter.template === 'OverviewTemplate'
             ? `${frontmatter.path}/*`
diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js
index 1e9f90289..315539852 100644
--- a/src/layouts/MainLayout.js
+++ b/src/layouts/MainLayout.js
@@ -17,8 +17,10 @@ import usePageContext from '../hooks/usePageContext';
 const gaTrackingId = 'UA-3047412-33';
 const gdprConsentCookieName = 'newrelic-gdpr-consent';
 
+const RELATED_CONTENT_PAGE_TYPES = ['guide'];
+
 const GRID_LAYOUTS = {
-  guide: css`
+  relatedContent: css`
     grid-template-areas:
       'sidebar content related-content'
       'sidebar footer footer';
@@ -107,7 +109,9 @@ const MainLayout = ({ children }) => {
           max-width: ${layout.maxWidth};
           margin: 0 auto;
 
-          ${GRID_LAYOUTS[pageType] || GRID_LAYOUTS.default};
+          ${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,7 +146,7 @@ const MainLayout = ({ children }) => {
         >
           {children}
         </article>
-        {pageType === 'guide' && (
+        {RELATED_CONTENT_PAGE_TYPES.includes(pageType) && (
           <RelatedContent
             css={css`
               align-self: start;