Seamlessly sync examples from Github -> Codepen #162

EricSimons · 2017-10-15T18:56:41Z

Related to #122!

Wouldn't it be great if the Codepen examples automatically stayed in sync with an examples folder in this repo? This PR does exactly that by using Codepen's POST API, drastically reducing the complexity of keeping examples up to date. Best of all, it introduces no major changes to the current docs' UX and doesn't require switching off of Codepen 🙌

To create a new JS example, simply add a JS file in the examples folder. Then, navigate to localhost:8000/examples/new-file-name (without the .js at the end) and it will automatically redirect you to the Codepen editor with the contents of that file 😮 I've already created examples for both the "Hello World" and "Introducing JSX" pages that you can try out!

There's also only one HTML file that all examples share for easy maintainability, which is pulled in from examples/index.html

Would love to hear your thoughts @bvaughn!

facebook-github-bot · 2017-10-15T18:56:48Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

facebook-github-bot · 2017-10-15T18:58:32Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

reactjs-bot · 2017-10-15T18:59:34Z

Deploy preview ready!

Built with commit d255c1a

https://deploy-preview-162--reactjs.netlify.com

bvaughn

This looks cool 👍 Thanks for the PR!

I've added some thoughts after reading through initially. Need to check out Ive's PR #138 next.

bvaughn · 2017-10-19T17:10:01Z

gatsby-node.js

-        slug.includes('docs/') ||
-        slug.includes('warnings/')
+                slug.includes('docs/') ||
+                slug.includes('warnings/')


These whitespace changes in this file are unexpected. Were they something your editor did by chance?

We use Prettier to ensure consistent formatting within the codebase (and avoid potential time spent debating the merits of formatting issues 😁 ). Looks like Prettier wasn't running on the gatsby-* JS files b'c they were in the root directory. I've fixed this in master. Mind rebasing and running yarn prettier to make sure these whitespace-only changes are Prettier approved?

Resolved locally by running yarn prettier

bvaughn · 2017-10-21T19:16:30Z

gatsby-node.js

+  const htmlTemplate = fs.readFileSync('./examples/index.html', 'utf8');
+  fs.readdirSync('./examples').forEach(file => {
+    // Only create pages for the JS files
+    if (file.toLowerCase().split('.').pop() === 'js') {


Looking forward to the day when we can use methods like endsWith without polyfilling 😄

It probably doesn't matter, but it would be a bit more efficient to write this check as:

if (file.indexOf('.js', file.length - 3) !== -1) {

Actually, couldn't we just remove this check entirely and say "only .js files go in the examples folder"? The HTML boilerplate is so minimal it's okay to just embed it directly within the template as a constant, eg:

const HTML = '<div id="root"></div>;'

bvaughn · 2017-10-21T19:19:16Z

src/templates/codepen-example.js

+import React, {Component} from 'react';
+import Container from 'components/Container';
+import {colors} from 'theme';
+// import {version} from '../site-constants';


Safe to delete the un-used version import?

bvaughn · 2017-10-21T19:21:05Z

src/templates/codepen-example.js

+    // Only have the JS editor open (default for all examples)
+    payload.editors = '0010';
+    // We can pass @version in the URL for version locking, if desired.
+    payload.js_external = `https://unpkg.com/react/umd/react.development.js;https://unpkg.com/react-dom/umd/react-dom.development.js`;


That's interesting. Probably unnecessary though as I think we'd always aim to keep examples working for the latest release of React.

bvaughn · 2017-10-21T19:45:28Z

src/templates/codepen-example.js

+
+class CodepenExample extends Component {
+  componentDidMount() {
+    this.codepenForm.submit();


Hm. First 2 times I tried this redirect just now it timed out. Third time it worked. Odd.

Now it's working every time. 😄

bvaughn · 2017-10-21T19:56:49Z

src/templates/codepen-example.js

+          <input
+            style={primaryStyle}
+            type="submit"
+            value="Not automatically redirecting? Click here."


IMO this is too much text for a button. 😄 Maybe something more like this?

<p>Not automatically redirecting?</p> <button>Click here</button>

bvaughn · 2017-10-21T19:58:00Z

content/docs/introducing-jsx.md

@@ -46,7 +46,7 @@ ReactDOM.render(
 );
 ```

-[Try it on CodePen.](http://codepen.io/gaearon/pen/PGEjdG?editors=0010)
+<a href="/examples/introducing-jsx" target="_blank">Try it on CodePen.</a>


I find myself wanting a follow-up item to also pull the code snippet shown within the Markdown from the examples folder as well, so the 2 will automatically stay in sync.

I've since done this (or at least similar) with commit f5aaf4c

EricSimons · 2017-11-01T16:58:08Z

@bvaughn I can totally make all of the requested changes! Sorry about my delay here, I've been traveling the past week and also caught a nasty cold 🤧

Btw, have you decided yet whether you want to continue using Codepen + react-live for the examples or to completely switch to a different 3rd party service entirely? If it's the latter, then perhaps we should scrap this PR and I can start building out a sweet StackBlitz integration PR? Lmk!

bvaughn · 2017-11-01T17:00:47Z

Hey no problem at all. Hope you're feeling better!

I think the direction you've proposed with this PR looks solid to me, at least for the time being.

There's a chance in the future that something a bit more integrated (like the CodeSandbox PR) might be useful in at least some of the cases, but I feel safer with the more iterative approach of this PR for now.

bvaughn · 2017-11-06T13:35:13Z

FYI, I'm going to go ahead and finish out the remaining few changes so we can move forward with this PR. Hope that's okay! 😄 I appreciate all of your work on this!

bvaughn · 2017-11-06T14:23:42Z

The continuation of this PR is #245

* make translation of 'What Are Hooks?' block * make translation of 'No Big Rewrites' block * make translation of 'Can I Use Hooks Today?' block * make translation of 'Tooling Support' block * make translation of 'What’s Next' block * make translation of 'Testing Hooks' block * make translation of 'Thanks' block * make translation of 'Installation' block * make translation of 'ESLint Plugin for React Hooks' block * make translation of 'Changelog (React)' block * change header from 'Obrigado' to 'Agradecimento' * make translation of 'React DOM' block * make translation of 'React Test Renderer' block * make translation of 'ESLint Plugin: React Hooks' block * make translation of 'Hooks Changelog Since Alpha Versions' block * remove some comments on code * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md De fato bem mais semântico. Obrigado. Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Bem observado, obrigado. Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Vacilo meu. Vlw Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <caique.m.oliveira.br@gmail.com>

sync js files to codepen

d255c1a

facebook-github-bot added the CLA Signed label Oct 15, 2017

EricSimons mentioned this pull request Oct 15, 2017

Migrate examples to CodeSandbox #122

Closed

bvaughn self-requested a review October 21, 2017 19:07

bvaughn reviewed Oct 21, 2017

View reviewed changes

bvaughn mentioned this pull request Oct 25, 2017

Refactor home page #150

Merged

bvaughn mentioned this pull request Nov 6, 2017

Seamlessly sync examples from Github -> Codepen #245

Merged

bvaughn closed this Nov 6, 2017

Seamlessly sync examples from Github -> Codepen #162

Seamlessly sync examples from Github -> Codepen #162

Uh oh!

Conversation

EricSimons commented Oct 15, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

facebook-github-bot commented Oct 15, 2017

Uh oh!

facebook-github-bot commented Oct 15, 2017

Uh oh!

reactjs-bot commented Oct 15, 2017

Uh oh!

bvaughn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

EricSimons commented Nov 1, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bvaughn commented Nov 1, 2017

Uh oh!

bvaughn commented Nov 6, 2017

Uh oh!

bvaughn commented Nov 6, 2017

Uh oh!

Uh oh!

EricSimons commented Oct 15, 2017 •

edited

Loading

EricSimons commented Nov 1, 2017 •

edited

Loading