chore: more forward-facing improvements for when to show the related …

…content area
newrelic · Jul 29, 2020 · d3d34ab · d3d34ab
1 parent 7e3e092
commit d3d34ab
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -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;