+);
+
+ReactDOM.render(
+ element,
+ document.getElementById('root')
+);
diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 1bd1f7a6..b6e967c7 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -76,7 +76,7 @@ ReactDOM.render(
);
```
-[Try it on CodePen.](http://codepen.io/gaearon/pen/YGYmEG?editors=0010)
+Try it on CodePen.
Let's recap what happens in this example:
@@ -118,7 +118,7 @@ ReactDOM.render(
);
```
-[Try it on CodePen.](http://codepen.io/gaearon/pen/KgQKPr?editors=0010)
+Try it on CodePen.
Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
@@ -152,7 +152,7 @@ function Comment(props) {
}
```
-[Try it on CodePen.](http://codepen.io/gaearon/pen/VKQwEo?editors=0010)
+Try it on CodePen.
It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
@@ -231,7 +231,7 @@ function Comment(props) {
}
```
-[Try it on CodePen.](http://codepen.io/gaearon/pen/rrJNJY?editors=0010)
+Try it on CodePen.
Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be a reusable component.
diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md
index 549718b1..29c0f839 100644
--- a/content/docs/hello-world.md
+++ b/content/docs/hello-world.md
@@ -12,7 +12,7 @@ redirect_from:
- "docs/getting-started-zh-CN.html"
---
-The easiest way to get started with React is to use [this Hello World example code on CodePen](http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010). You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page.
+The easiest way to get started with React is to use this Hello World example code on CodePen. You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page.
The smallest React example looks like this:
diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index b1ce9f18..11dabf04 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -46,7 +46,7 @@ ReactDOM.render(
);
```
-[Try it on CodePen.](http://codepen.io/gaearon/pen/PGEjdG?editors=0010)
+Try it on CodePen.
We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283).
diff --git a/gatsby-node.js b/gatsby-node.js
index 2cbd1ffd..359be801 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -6,6 +6,8 @@
'use strict';
+const recursiveReaddir = require('recursive-readdir');
+const {readFileSync} = require('fs');
const {resolve} = require('path');
const webpack = require('webpack');
@@ -165,6 +167,24 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
redirectInBrowser: true,
toPath: newestBlogNode.fields.slug,
});
+
+ // Create Codepen redirects.
+ // These use the Codepen prefill API to JIT-create Pens.
+ // https://blog.codepen.io/documentation/api/prefill/
+ const files = await recursiveReaddir('./codepen');
+ files.forEach(file => {
+ const slug = file.substring(0, file.length - 3); // Trim extension
+ const code = readFileSync(file, 'utf8');
+
+ createPage({
+ path: slug,
+ component: resolve('./src/templates/codepen-example.js'),
+ context: {
+ code,
+ slug,
+ },
+ });
+ });
};
// Parse date information out of blog post filename.
diff --git a/package.json b/package.json
index 9adc56da..82a862d6 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
"reset": "rimraf ./.cache"
},
"devDependencies": {
- "eslint-config-prettier": "^2.6.0"
+ "eslint-config-prettier": "^2.6.0",
+ "recursive-readdir": "^2.2.1"
}
}
diff --git a/src/templates/codepen-example.js b/src/templates/codepen-example.js
new file mode 100644
index 00000000..615b8f7e
--- /dev/null
+++ b/src/templates/codepen-example.js
@@ -0,0 +1,73 @@
+'use strict';
+
+import React, {Component} from 'react';
+import Container from 'components/Container';
+import {colors} from 'theme';
+
+const EXTERNALS = [
+ 'https://unpkg.com/react/umd/react.development.js',
+ 'https://unpkg.com/react-dom/umd/react-dom.development.js',
+];
+
+// Copied over styles from ButtonLink for the submit btn
+const primaryStyle = {
+ backgroundColor: colors.brand,
+ color: colors.black,
+ padding: '10px 25px',
+ whiteSpace: 'nowrap',
+ transition: 'background-color 0.2s ease-out',
+ outline: 0,
+ border: 'none',
+ cursor: 'pointer',
+
+ ':hover': {
+ backgroundColor: colors.white,
+ },
+
+ display: 'inline-block',
+ fontSize: 16,
+};
+
+class CodepenExample extends Component {
+ componentDidMount() {
+ this.codepenForm.submit();
+ }
+
+ render() {
+ // Codepen configuration.
+ // https://blog.codepen.io/documentation/api/prefill/
+ const payload = JSON.stringify({
+ editors: '0010',
+ html: '',
+ js: this.props.pathContext.code,
+ js_external: EXTERNALS.join(';'),
+ js_pre_processor: 'babel',
+ layout: 'left',
+ title: 'reactjs.org example',
+ });
+
+ return (
+
+
+