Merge pull request #1567 from newrelic/clang/quick-start-layout

Refactor landing and details pages

gatsby-node.js

@@ -123,6 +123,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       component: path.resolve('./src/templates/QuickstartDetails.js'),
       context: {
         id,
+        layout: 'QuickStartLayout',
       },
     });
   });
@@ -156,6 +157,17 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   });
 };
 
+exports.onCreatePage = async ({ page, actions }) => {
+  const { createPage, deletePage } = actions;
+  const oldPage = { ...page };
+
+  if (page.path === '/instant-observability/') {
+    page.context.layout = 'QuickStartLayout';
+  }
+  deletePage(oldPage);
+  createPage(page);
+};
+
 exports.onCreateNode = ({ node, getNode, actions }) => {
   const { createNodeField } = actions;
 

src/layouts/QuickStartLayout.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Layout, GlobalHeader } from '@newrelic/gatsby-theme-newrelic';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import '../components/styles.scss';
+
+const QuickStartLayout = ({ children }) => {
+  return (
+    <>
+      <GlobalHeader />
+      <Layout
+        css={css`
+          --sidebar-width: 0;
+        `}
+      >
+        <Layout.Main
+          css={css`
+            min-height: 100vh;
+          `}
+        >
+          {children}
+        </Layout.Main>
+        <Layout.Footer />
+      </Layout>
+    </>
+  );
+};
+
+QuickStartLayout.propTypes = {
+  children: PropTypes.node,
+};
+
+export default QuickStartLayout;

src/layouts/index.js

@@ -1,16 +1,22 @@
 import React from 'react';
 import MainLayout from './MainLayout';
 import EmbedLayout from './EmbedLayout';
+import QuickStartLayout from './QuickStartLayout';
 import PropTypes from 'prop-types';
 
 const Layout = ({ children, pageContext }) => {
   const isEmbed = pageContext.layout && pageContext.layout === 'EmbedLayout';
+  const isQuickStart =
+    pageContext.layout && pageContext.layout === 'QuickStartLayout';
   if (pageContext.fileRelativePath.match(/404/)) {
     return children;
   }
   if (isEmbed) {
     return <EmbedLayout>{children}</EmbedLayout>;
   }
+  if (isQuickStart) {
+    return <QuickStartLayout>{children}</QuickStartLayout>;
+  }
   return <MainLayout pageContext={pageContext}>{children}</MainLayout>;
 };