chore: Adjust main layout and doc page for banner

newrelic · Feb 9, 2023 · c67e9e6 · c67e9e6
1 parent 8a724ba
commit c67e9e6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js
@@ -198,6 +198,7 @@ const MainLayout = ({ children, pageContext }) => {
         <Layout.Main
           css={css`
             display: ${isMobileNavOpen ? 'none' : 'block'};
+            position: relative;
           `}
         >
           {children}

diff --git a/src/templates/docPage.js b/src/templates/docPage.js
@@ -4,6 +4,7 @@ import { css } from '@emotion/react';
 import { graphql } from 'gatsby';
 import { takeWhile } from 'lodash';
 import PageTitle from '../components/PageTitle';
+import DocPageBanner from '../components/DocPageBanner';
 import MDXContainer from '../components/MDXContainer';
 import {
   ContributingGuidelines,
@@ -34,6 +35,8 @@ const splitTOCTitle = (title = '') => {
   return [titleText.join(' '), slug];
 };
 
+const bannerHeight = '78px';
+
 const BasicDoc = ({ data, location, pageContext }) => {
   const { mdx } = data;
   const {
@@ -68,7 +71,9 @@ const BasicDoc = ({ data, location, pageContext }) => {
     translationType,
     dataSource,
     isTutorial,
+    signupBanner,
   } = frontmatter;
+  console.log(signupBanner);
 
   let { type } = frontmatter;
 
@@ -89,6 +94,14 @@ const BasicDoc = ({ data, location, pageContext }) => {
         dataSource={dataSource}
         disableSwiftype={disableSwiftype}
       />
+      {signupBanner && (
+        <DocPageBanner
+          height={bannerHeight}
+          text={signupBanner.text}
+          cta={signupBanner.cta}
+          url={signupBanner.url}
+        />
+      )}
       <div
         css={css`
           display: grid;
@@ -99,6 +112,14 @@ const BasicDoc = ({ data, location, pageContext }) => {
           grid-template-columns: minmax(0, 1fr) 320px;
           grid-column-gap: 2rem;
 
+          ${signupBanner &&
+          css`
+            margin-top: ${bannerHeight};
+            @media screen and (max-width: 760px) {
+              margin-top: 0;
+            }
+          `}
+
           @media screen and (max-width: 1240px) {
             grid-template-areas:
               'mt-disclaimer'
@@ -168,6 +189,11 @@ export const pageQuery = graphql`
         isTutorial
         translationType
         dataSource
+        signupBanner {
+          cta
+          url
+          text
+        }
       }
       fields {
         fileRelativePath