From e84f1e895a3c1d3240845943ceb54fcc61e7245f Mon Sep 17 00:00:00 2001
From: Clinton <clinton.langosch@gmail.com>
Date: Mon, 29 Mar 2021 12:23:34 -0700
Subject: [PATCH] feat(embeds): create embed pages

---
 gatsby-config.js                              |  1 +
 .../gatsby-plugin-embed-pages/gatsby-node.js  | 45 +++++++++++++++++++
 .../gatsby-plugin-embed-pages/package.json    |  1 +
 src/layouts/EmbedLayout.js                    | 13 ++++++
 src/layouts/MainLayout.js                     |  1 +
 src/layouts/index.js                          |  5 +++
 src/templates/embedPage.js                    | 34 ++++++++++++++
 7 files changed, 100 insertions(+)
 create mode 100644 plugins/gatsby-plugin-embed-pages/gatsby-node.js
 create mode 100644 plugins/gatsby-plugin-embed-pages/package.json
 create mode 100644 src/layouts/EmbedLayout.js
 create mode 100644 src/templates/embedPage.js

diff --git a/gatsby-config.js b/gatsby-config.js
index 13322bfc2..88dc3d611 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -156,6 +156,7 @@ module.exports = {
       },
     },
     'gatsby-plugin-meta-redirect',
+    'gatsby-plugin-embed-pages',
     {
       resolve: 'gatsby-plugin-gdpr-tracking',
       options: {
diff --git a/plugins/gatsby-plugin-embed-pages/gatsby-node.js b/plugins/gatsby-plugin-embed-pages/gatsby-node.js
new file mode 100644
index 000000000..3de2fe741
--- /dev/null
+++ b/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',
+      },
+    });
+  });
+};
diff --git a/plugins/gatsby-plugin-embed-pages/package.json b/plugins/gatsby-plugin-embed-pages/package.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/plugins/gatsby-plugin-embed-pages/package.json
@@ -0,0 +1 @@
+{}
diff --git a/src/layouts/EmbedLayout.js b/src/layouts/EmbedLayout.js
new file mode 100644
index 000000000..f57174829
--- /dev/null
+++ b/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;
diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js
index cc5e90613..19c44d7c3 100644
--- a/src/layouts/MainLayout.js
+++ b/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;
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 6f1c7ad57..8e5234a26 100644
--- a/src/layouts/index.js
+++ b/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>;
 };
 
diff --git a/src/templates/embedPage.js b/src/templates/embedPage.js
new file mode 100644
index 000000000..c57e41e37
--- /dev/null
+++ b/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;