From dbcedd21aa5aaf4c59f5b336af0af4ed0fc2a1ff Mon Sep 17 00:00:00 2001
From: Kris Kenney <70179215+nr-kkenney@users.noreply.github.com>
Date: Mon, 12 Apr 2021 16:53:40 -0700
Subject: [PATCH] feat: add mechanism to hide content on embedded pages

---
 src/components/EmbedContext.js     |  5 +++++
 src/components/HideWhenEmbedded.js | 14 ++++++++++++++
 src/components/MDXContainer.js     |  2 ++
 src/templates/embedPage.js         |  5 +++--
 4 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 src/components/EmbedContext.js
 create mode 100644 src/components/HideWhenEmbedded.js

diff --git a/src/components/EmbedContext.js b/src/components/EmbedContext.js
new file mode 100644
index 000000000..2ee31c1d9
--- /dev/null
+++ b/src/components/EmbedContext.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const EmbedContext = React.createContext();
+
+export default EmbedContext;
diff --git a/src/components/HideWhenEmbedded.js b/src/components/HideWhenEmbedded.js
new file mode 100644
index 000000000..f213b2e9d
--- /dev/null
+++ b/src/components/HideWhenEmbedded.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import EmbedContext from './EmbedContext';
+
+const HideWhenEmbedded = ({ children }) => {
+  const embedContext = React.useContext(EmbedContext);
+
+  if (embedContext && embedContext.isEmbedded) {
+    return null;
+  }
+
+  return children;
+};
+
+export default HideWhenEmbedded;
diff --git a/src/components/MDXContainer.js b/src/components/MDXContainer.js
index 37f6221b3..fe02b5fa4 100644
--- a/src/components/MDXContainer.js
+++ b/src/components/MDXContainer.js
@@ -9,6 +9,7 @@ import Tutorial from './Tutorial';
 import TutorialStep from './TutorialStep';
 import TutorialSection from './TutorialSection';
 import Project from './Project';
+import HideWhenEmbedded from './HideWhenEmbedded';
 
 const components = {
   // Remove these when all step/steps components have been updated to the new
@@ -28,6 +29,7 @@ const components = {
     />
   ),
   iframe: Iframe,
+  HideWhenEmbedded,
 };
 
 const MDXContainer = ({ className, children }) => {
diff --git a/src/templates/embedPage.js b/src/templates/embedPage.js
index c57e41e37..459f732bb 100644
--- a/src/templates/embedPage.js
+++ b/src/templates/embedPage.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import PageLayout from '../components/PageLayout';
+import EmbedContext from '../components/EmbedContext';
 
 const EmbedPage = ({ data }) => {
   const { mdx } = data;
@@ -9,10 +10,10 @@ const EmbedPage = ({ data }) => {
   const { title } = frontmatter;
 
   return (
-    <>
+    <EmbedContext.Provider value={{ isEmbedded: true }}>
       <h1>{title}</h1>
       <PageLayout.MarkdownContent>{body}</PageLayout.MarkdownContent>
-    </>
+    </EmbedContext.Provider>
   );
 };