From d4f531f0d6539f997a2e2fe176cbfeebc078fb15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kimmo=20S=C3=A4=C3=A4skilahti?= <kimmo@meeshkan.com>
Date: Tue, 23 Jul 2019 14:19:16 +0300
Subject: [PATCH 1/2] Add simple sandbox embed.

---
 website/pages/en/sandbox.js | 28 ++++++++++++++++++++++++++++
 website/siteConfig.js       |  5 ++++-
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 website/pages/en/sandbox.js

diff --git a/website/pages/en/sandbox.js b/website/pages/en/sandbox.js
new file mode 100644
index 0000000..b9b4521
--- /dev/null
+++ b/website/pages/en/sandbox.js
@@ -0,0 +1,28 @@
+const React = require("react");
+
+// Use the CompLibrary from Docusaurus
+// https://docusaurus.io/docs/en/api-pages#page-require-paths
+const CompLibrary = require("../../core/CompLibrary.js");
+
+const iframe = `<iframe src="https://codesandbox.io/embed/node?fontsize=14" title="node" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`;
+
+const Container = CompLibrary.Container;
+const MarkdownBlock = CompLibrary.MarkdownBlock;
+
+class Sandbox extends React.Component {
+  render() {
+    // Can access siteConfig.js from here as follows
+    // const { config: siteConfig } = this.props;
+
+    return (
+      <div className="mainContainer">
+        <Container padding={["bottom", "top"]}>
+          <MarkdownBlock># Play with unmock!</MarkdownBlock>
+          <div dangerouslySetInnerHTML={{ __html: iframe }} />
+        </Container>
+      </div>
+    );
+  }
+}
+
+module.exports = Sandbox;
diff --git a/website/siteConfig.js b/website/siteConfig.js
index 324aa9b..679fd8d 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -22,7 +22,10 @@ const siteConfig = {
   organizationName: "unmock",
 
   // For no header links in the top nav bar -> headerLinks: [],
-  headerLinks: [{ doc: "introduction", label: "Docs" }],
+  headerLinks: [
+    { doc: "introduction", label: "Docs" },
+    { page: "sandbox", label: "Sandbox" },
+  ],
 
   // If you have users set above, you add it here:
   users,

From 98018b453b358362153abb70fabcee626338f6c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kimmo=20S=C3=A4=C3=A4skilahti?= <kimmo@meeshkan.com>
Date: Tue, 23 Jul 2019 15:02:43 +0300
Subject: [PATCH 2/2] Embed an example with Jest tests.

---
 website/pages/en/sandbox.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/website/pages/en/sandbox.js b/website/pages/en/sandbox.js
index b9b4521..059cf73 100644
--- a/website/pages/en/sandbox.js
+++ b/website/pages/en/sandbox.js
@@ -4,10 +4,9 @@ const React = require("react");
 // https://docusaurus.io/docs/en/api-pages#page-require-paths
 const CompLibrary = require("../../core/CompLibrary.js");
 
-const iframe = `<iframe src="https://codesandbox.io/embed/node?fontsize=14" title="node" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`;
+const iframe = `<iframe src="https://codesandbox.io/embed/n9m2w9q8x0?fontsize=14" title="Jest test" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`;
 
 const Container = CompLibrary.Container;
-const MarkdownBlock = CompLibrary.MarkdownBlock;
 
 class Sandbox extends React.Component {
   render() {
@@ -17,7 +16,6 @@ class Sandbox extends React.Component {
     return (
       <div className="mainContainer">
         <Container padding={["bottom", "top"]}>
-          <MarkdownBlock># Play with unmock!</MarkdownBlock>
           <div dangerouslySetInnerHTML={{ __html: iframe }} />
         </Container>
       </div>