Interactive code snippets: first draft of Klipse integration

content/docs/introducing-jsx.md

@@ -18,6 +18,15 @@ It is called JSX, and it is a syntax extension to JavaScript. We recommend using
 
 JSX produces React "elements". We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.
 
+
+<pre class="hidden"><code class="gatsby-code-klipse-eval-js" data-external-libs="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-with-addons.js, https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js">
+!!React
+</code></pre>
+
+<div>
+Hello World
+</div>
+
 ### Embedding Expressions in JSX
 
 You can embed any [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) in JSX by wrapping it in curly braces.
@@ -65,6 +74,29 @@ function getGreeting(user) {
 }
 ```
 
+Hello
+~~~klipse-eval-js
+2+3
+~~~
+
+
+Simple
+
+~~~klipse-render-jsx
+&lt;p&gt;Hello World &lt;/p&gt;
+~~~
+
+Again:
+
+~~~klipse-jsx
+function getGreeting(user) {
+  if (user) {
+    return &lt;h1&gt;Hello, {formatName(user)}!&lt;/h1&gt;;
+  }
+  return &lt;h1&gt;Hello, Stranger.&lt;/h1&gt;;
+}
+~~~
+
 ### Specifying Attributes with JSX
 
 You may use quotes to specify string literals as attributes:
@@ -160,3 +192,6 @@ We will explore rendering React elements to the DOM in the next section.
 >**Tip:**
 >
 >We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
+
+
+

content/docs/jsx-in-depth.md

@@ -31,6 +31,23 @@ React.createElement(
 )
 ```
 
+Here is an interactive version of the jsx snippet:
+~~~klipse-transpile-jsx
+<MyButton color="blue" shadowSize={2}>
+  Click Me
+</MyButton>
+~~~
+
+Here is an interactive version of the jsx snippet:
+<pre>
+<code class="gatsby-code-klipse-transpile-jsx">
+&lt;MyButton color="blue" shadowSize={2}&gt;
+  Click Me
+&lt;/MyButton&gt;
+</code>
+</pre>
+
+
 You can also use the self-closing form of the tag if there are no children. So:
 
 ```js

gatsby-config.js

@@ -75,6 +75,12 @@ module.exports = {
         trackingId: 'UA-41298772-1',
       },
     },
+    {
+      resolve: 'gatsby-plugin-klipse',
+      options: {
+        classPrefix: 'gatsby-code-',
+      }
+    },
     {
       resolve: 'gatsby-plugin-feed',
       options: {

package.json

@@ -30,6 +30,7 @@
     "gatsby-plugin-feed": "^1.3.9",
     "gatsby-plugin-glamor": "^1.6.4",
     "gatsby-plugin-google-analytics": "^1.0.4",
+    "gatsby-plugin-klipse": "^2.0.0",
     "gatsby-plugin-manifest": "^1.0.4",
     "gatsby-plugin-netlify": "^1.0.4",
     "gatsby-plugin-nprogress": "^1.0.7",

yarn.lock

@@ -3866,6 +3866,10 @@ gatsby-plugin-google-analytics@^1.0.4:
   dependencies:
     babel-runtime "^6.26.0"
 
+gatsby-plugin-klipse@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-klipse/-/gatsby-plugin-klipse-2.0.0.tgz#422e611c24ac758652399838929d4a6102e61a8e"
+
 gatsby-plugin-manifest@^1.0.4:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-1.0.8.tgz#8c155cd2aed54759554c25bf9efb4a2c48de6429"
@@ -5374,14 +5378,10 @@ items@2.x.x:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/items/-/items-2.1.1.tgz#8bd16d9c83b19529de5aea321acaada78364a198"
 
-iterall@1.1.3:
+iterall@1.1.3, iterall@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.3.tgz#1cbbff96204056dde6656e2ed2e2226d0e6d72c9"
 
-iterall@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.1.tgz#f7f0af11e9a04ec6426260f5019d9fcca4d50214"
-
 jest-docblock@^21.0.0:
   version "21.2.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"