feat: add mechanism to hide content on embedded pages

src/components/EmbedContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const EmbedContext = React.createContext();
+
+export default EmbedContext;

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;

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 }) => {

src/templates/embedPage.js

@@ -2,17 +2,18 @@ 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;
   const { frontmatter, body } = mdx;
   const { title } = frontmatter;
 
   return (
-    <>
+    <EmbedContext.Provider value={{ isEmbedded: true }}>
       <h1>{title}</h1>
       <PageLayout.MarkdownContent>{body}</PageLayout.MarkdownContent>
-    </>
+    </EmbedContext.Provider>
   );
 };