feat: add dynamic layout value

newrelic · Jul 29, 2020 · 7e3e092 · 7e3e092
1 parent 4329cb5
commit 7e3e092
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -49,6 +49,9 @@ 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),
         guidesFilter:
           frontmatter.template === 'OverviewTemplate'
             ? `${frontmatter.path}/*`

diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js
@@ -17,6 +17,21 @@ import usePageContext from '../hooks/usePageContext';
 const gaTrackingId = 'UA-3047412-33';
 const gdprConsentCookieName = 'newrelic-gdpr-consent';
 
+const GRID_LAYOUTS = {
+  guide: 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 },
@@ -34,7 +49,7 @@ const MainLayout = ({ children }) => {
     }
   `);
 
-  const { fileRelativePath } = usePageContext();
+  const { fileRelativePath, pageType } = usePageContext();
   const [cookieConsent, setCookieConsent] = useState(false);
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
   const isComponentDoc = fileRelativePath.includes(
@@ -87,15 +102,13 @@ const MainLayout = ({ children }) => {
       <div
         css={css`
           display: grid;
-          grid-template-areas:
-            'sidebar content related-content'
-            'sidebar footer footer';
-          grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 340px;
           grid-column-gap: ${layout.contentPadding};
           width: 100%;
           max-width: ${layout.maxWidth};
           margin: 0 auto;
 
+          ${GRID_LAYOUTS[pageType] || GRID_LAYOUTS.default};
+
           @media screen and (max-width: 760px) {
             grid-template-columns: minmax(0, 1fr);
           }
@@ -129,14 +142,16 @@ const MainLayout = ({ children }) => {
         >
           {children}
         </article>
-        <RelatedContent
-          css={css`
-            align-self: start;
-            position: sticky;
-            top: calc(var(--global-header-height) + ${layout.contentPadding});
-            grid-area: related-content;
-          `}
-        />
+        {pageType === 'guide' && (
+          <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;