feat(embeds): create embed pages

gatsby-config.js

@@ -156,6 +156,7 @@ module.exports = {
       },
     },
     'gatsby-plugin-meta-redirect',
+    'gatsby-plugin-embed-pages',
     {
       resolve: 'gatsby-plugin-gdpr-tracking',
       options: {

plugins/gatsby-plugin-embed-pages/gatsby-node.js

@@ -0,0 +1,45 @@
+const path = require('path');
+
+exports.createPages = async ({ actions, graphql, reporter }) => {
+  const { createPage } = actions;
+
+  const { data } = await graphql(`
+    query MyQuery {
+      allMdx(filter: { frontmatter: { template: { eq: "GuideTemplate" } } }) {
+        nodes {
+          fields {
+            fileRelativePath
+            slug
+          }
+          frontmatter {
+            title
+            path
+          }
+          body
+        }
+      }
+    }
+  `);
+
+  data.allMdx.nodes.forEach((node) => {
+    const {
+      frontmatter,
+      fields: { fileRelativePath, slug },
+      body,
+    } = node;
+    const nodePath = frontmatter.path || slug;
+    const pagePath = path.join(nodePath, 'embed');
+    const contentSourcePath = nodePath;
+
+    createPage({
+      path: pagePath,
+      component: path.resolve(`src/templates/embedPage.js`),
+      context: {
+        slug,
+        fileRelativePath,
+        contentSourcePath,
+        layout: 'EmbedLayout',
+      },
+    });
+  });
+};

plugins/gatsby-plugin-embed-pages/package.json

@@ -0,0 +1 @@
+{}

src/layouts/EmbedLayout.js

@@ -0,0 +1,13 @@
+import { Layout } from '@newrelic/gatsby-theme-newrelic';
+import PropTypes from 'prop-types';
+
+const EmbedLayout = ({ children, pageContext }) => {
+  return <Layout.Main>{children}</Layout.Main>;
+};
+
+EmbedLayout.propTypes = {
+  children: PropTypes.node,
+  pageContext: PropTypes.object,
+};
+
+export default EmbedLayout;

src/layouts/MainLayout.js

@@ -17,6 +17,7 @@ import { useLocation } from '@reach/router';
 import pages from '../data/nav.yml';
 
 const MainLayout = ({ children, pageContext }) => {
+  const isEmbed = pageContext.layout && pageContext.layout === 'embed';
   const location = useLocation();
   const [searchTerm, setSearchTerm] = useState('');
   const { fileRelativePath } = pageContext;

src/layouts/index.js

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

src/templates/embedPage.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { graphql } from 'gatsby';
+import PropTypes from 'prop-types';
+import PageLayout from '../components/PageLayout';
+
+const EmbedPage = ({ data }) => {
+  const { mdx } = data;
+  const { frontmatter, body } = mdx;
+  const { title } = frontmatter;
+
+  return (
+    <>
+      <h1>{title}</h1>
+      <PageLayout.MarkdownContent>{body}</PageLayout.MarkdownContent>
+    </>
+  );
+};
+
+export const pageQuery = graphql`
+  query($contentSourcePath: String!) {
+    mdx(frontmatter: { path: { eq: $contentSourcePath } }) {
+      body
+      frontmatter {
+        title
+      }
+    }
+  }
+`;
+
+EmbedPage.propTypes = {
+  data: PropTypes.object,
+};
+
+export default EmbedPage;