diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js index c8c2d7859a3..cfe881355df 100644 --- a/src/components/CodeEditor/CodeEditor.js +++ b/src/components/CodeEditor/CodeEditor.js @@ -130,7 +130,6 @@ class CodeEditor extends Component { [media.lessThan('medium')]: { marginBottom: '0 !important', }, - '& pre.prism-code[contenteditable]': { outline: 0, diff --git a/src/html.js b/src/html.js index 1622122e068..4a113917dea 100644 --- a/src/html.js +++ b/src/html.js @@ -19,7 +19,6 @@ if (process.env.NODE_ENV === `production`) { const JS_NPM_URLS = [ '//unpkg.com/docsearch.js@2.4.1/dist/cdn/docsearch.min.js', - '//unpkg.com/babel-standalone@6.26.0/babel.min.js', ]; export default class HTML extends Component { diff --git a/src/site-constants.js b/src/site-constants.js index f359559d63d..7e99e72a878 100644 --- a/src/site-constants.js +++ b/src/site-constants.js @@ -11,5 +11,6 @@ // the SSR part in node.js we won't have a proper location. const urlRoot = 'https://reactjs.org'; const version = '16.0.0'; +const babelURL = '//unpkg.com/babel-standalone@6.26.0/babel.min.js'; -export {urlRoot, version}; +export {urlRoot, version, babelURL}; diff --git a/src/templates/home.js b/src/templates/home.js index a2607617d71..e3a7bf2abd6 100644 --- a/src/templates/home.js +++ b/src/templates/home.js @@ -15,13 +15,23 @@ import React, {Component} from 'react'; import TitleAndMetaTags from 'components/TitleAndMetaTags'; import {colors, media, sharedStyles} from 'theme'; import createOgUrl from 'utils/createOgUrl'; +import loadScript from 'utils/loadScript'; +import {babelURL} from 'site-constants'; +import ReactDOM from 'react-dom'; class Home extends Component { componentDidMount() { - mountCodeExample('helloExample', HELLO_COMPONENT); - mountCodeExample('timerExample', TIMER_COMPONENT); - mountCodeExample('todoExample', TODO_COMPONENT); - mountCodeExample('markdownExample', MARKDOWN_COMPONENT); + renderExamplePlaceholder('helloExample'); + renderExamplePlaceholder('timerExample'); + renderExamplePlaceholder('todoExample'); + renderExamplePlaceholder('markdownExample'); + + loadScript(babelURL).then(() => { + mountCodeExample('helloExample', HELLO_COMPONENT); + mountCodeExample('timerExample', TIMER_COMPONENT); + mountCodeExample('todoExample', TODO_COMPONENT); + mountCodeExample('markdownExample', MARKDOWN_COMPONENT); + }); } render() { @@ -163,6 +173,16 @@ Home.propTypes = { location: PropTypes.object.isRequired, }; +// TODO Improve this temporarily placeholder as part of +// converting the home page from markdown template to a Gatsby +// page (see issue #2) +function renderExamplePlaceholder(containerId) { + ReactDOM.render( +

Loading code example...

, + document.getElementById(containerId), + ); +} + const CtaItem = ({children, primary = false}) => (
+ new Promise((resolve, reject) => + document.head.appendChild( + Object.assign(document.createElement('script'), { + async: true, + src: url, + onload: resolve, + onerror: reject, + }), + ), + );