Skip to content

Interactive code snippets: first draft of Klipse integration #236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Interactive code snippets: first draft of Klipse integration #236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions content/docs/introducing-jsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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.



17 changes: 17 additions & 0 deletions content/docs/jsx-in-depth.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,23 @@ React.createElement(
)
```

Here is an interactive version of the jsx snippet:
~~~klipse-transpile-jsx
&lt;MyButton color="blue" shadowSize={2}&gt;
Click Me
&lt;/MyButton&gt;
~~~

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
Expand Down
6 changes: 6 additions & 0 deletions gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,12 @@ module.exports = {
trackingId: 'UA-41298772-1',
},
},
{
resolve: 'gatsby-plugin-klipse',
options: {
classPrefix: 'gatsby-code-',
}
},
{
resolve: 'gatsby-plugin-feed',
options: {
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -5374,14 +5378,10 @@ [email protected]:
version "2.1.1"
resolved "https://registry.yarnpkg.com/items/-/items-2.1.1.tgz#8bd16d9c83b19529de5aea321acaada78364a198"

[email protected]:
[email protected], 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"
Expand Down