-
Notifications
You must be signed in to change notification settings - Fork 7.7k
Seamlessly sync examples from Github -> Codepen #162
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.
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
Conversation
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 [email protected]. Thanks! |
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
Deploy preview ready! Built with commit d255c1a |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
slug.includes('docs/') || | ||
slug.includes('warnings/') | ||
slug.includes('docs/') || | ||
slug.includes('warnings/') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Resolved locally by running yarn prettier
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') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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) {
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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>;'
import React, {Component} from 'react'; | ||
import Container from 'components/Container'; | ||
import {colors} from 'theme'; | ||
// import {version} from '../site-constants'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Safe to delete the un-used version
import?
// 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`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's interesting. Probably unnecessary though as I think we'd always aim to keep examples working for the latest release of React.
|
||
class CodepenExample extends Component { | ||
componentDidMount() { | ||
this.codepenForm.submit(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hm. First 2 times I tried this redirect just now it timed out. Third time it worked. Odd.
Now it's working every time. 😄
<input | ||
style={primaryStyle} | ||
type="submit" | ||
value="Not automatically redirecting? Click here." |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IMO this is too much text for a button. 😄 Maybe something more like this?
<p>Not automatically redirecting?</p>
<button>Click here</button>
@@ -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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've since done this (or at least similar) with commit f5aaf4c
@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 + |
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. |
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! |
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 <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md De fato bem mais semântico. Obrigado. Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Bem observado, obrigado. Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Vacilo meu. Vlw Co-Authored-By: CaiqueMOliveira <[email protected]> * Update content/blog/2019-02-06-react-v16.8.0.md Co-Authored-By: CaiqueMOliveira <[email protected]>
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 tolocalhost: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!