Merge pull request #1761 from mewtaylor/issue/gh-1711

Implement GH-1711: Add 3.0 preview faq page

package.json

@@ -38,6 +38,7 @@
     "babel-loader": "6.2.4",
     "babel-preset-es2015": "6.9.0",
     "babel-preset-react": "6.11.1",
+    "cheerio": "1.0.0-rc.2",
     "classnames": "2.1.3",
     "cookie": "0.2.2",
     "copy-webpack-plugin": "0.2.0",

src/routes.json

@@ -191,6 +191,13 @@
         "view": "microworldshomepage/microworldshomepage",
         "title": "Microworlds"
     },
+    {
+        "name": "preview-faq",
+        "pattern": "^/preview-faq/?$",
+        "routeAlias": "/preview-faq/?$",
+        "view": "preview-faq/preview-faq",
+        "title": "Scratch 3.0 Preview FAQ"
+    },
     {
         "name": "privacypolicy",
         "pattern": "^/privacy_policy/?$",

src/views/preview-faq/l10n.json

+{
+    "preview-faq.title": "Scratch 3.0 Preview FAQ"
+}

src/views/preview-faq/preview-faq.jsx

+var cheerio = require('cheerio');
+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
+var xhr = require('xhr');
+
+var InformationPage = require('../../components/informationpage/informationpage.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var render = require('../../lib/render.jsx');
+
+require('./preview-faq.scss');
+
+var PreviewFaq = injectIntl(React.createClass({
+    type: 'PreviewFaq',
+    getInitialState: function () {
+        return {
+            faqDoc: {__html: ''}
+        };
+    },
+    componentDidMount: function () {
+        xhr({
+            method: 'GET',
+            uri: 'https://docs.google.com/document/d/e/2PACX-1vQZFrpOagYqEwcrBBCplIomiyguPAodIJVnCq9Sr11WDI_aa2b-JtDWak-Aiu-cwWobTXftRMF6wBbd/pub?embedded=true'
+        }, function (error, response, body) {
+            var $ = cheerio.load(body);
+            this.setState({faqDoc: {__html: $('html').html()}});
+        }.bind(this));
+    },
+    render: function () {
+        return (
+            <InformationPage title={this.props.intl.formatMessage({id: 'preview-faq.title'})}>
+                <div className="inner">
+                    <div
+                        className="preview-faq"
+                        dangerouslySetInnerHTML={this.state.faqDoc}
+                    />
+                </div>
+            </InformationPage>
+        );
+    }
+}));
+
+render(<Page><PreviewFaq /></Page>, document.getElementById('app'));

src/views/preview-faq/preview-faq.scss

+#view {
+    padding: 0;
+}
+
+.preview-faq {
+    margin-bottom: 5rem;
+}
+
+.title-banner-h1 {
+    line-height: 1.7em !important;
+    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
+    font-size: 2.5rem !important;
+    font-weight: 900 !important;
+}
+
+.preview-faq li {
+    margin: 0 2rem !important;
+}