extract faq from published page

after review from @thisandagain – thanks!

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/views/preview-faq/preview-faq.jsx

@@ -1,7 +1,8 @@
+var cheerio = require('cheerio');
 var injectIntl = require('react-intl').injectIntl;
 var React = require('react');
+var xhr = require('xhr');
 
-var Box = require('../../components/box/box.jsx');
 var InformationPage = require('../../components/informationpage/informationpage.jsx');
 var Page = require('../../components/page/www/page.jsx');
 var render = require('../../lib/render.jsx');
@@ -10,18 +11,28 @@ 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">
-                    <Box
-                        title={''}
-                    >
-                        <iframe
-                            className="preview-faq-iframe"
-                            src="https://docs.google.com/document/d/e/2PACX-1vQZFrpOagYqEwcrBBCplIomiyguPAodIJVnCq9Sr11WDI_aa2b-JtDWak-Aiu-cwWobTXftRMF6wBbd/pub?embedded=true"
-                        ></iframe>
-                    </Box>
+                    <div
+                        className="preview-faq"
+                        dangerouslySetInnerHTML={this.state.faqDoc}
+                    />
                 </div>
             </InformationPage>
         );

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

@@ -1,36 +1,14 @@
-@import "../../frameless";
-
 #view {
     padding: 0;
 }
 
-.box > .box-content {
-    padding: 0;
+.preview-faq {
+    margin-bottom: 5rem;
 }
 
-.preview-faq-iframe {
-    border: none;
-    width: $cols12; // for the box padding
-    height: 450px;
-}
-
-//4 columns
-@media only screen and (max-width: $mobile - 1) {
-    .preview-faq-iframe {
-        width: $cols4;
-    }
-}
-
-//6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
-    .preview-faq-iframe {
-        width: $cols6;
-    }
-}
-
-//8 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
-    .preview-faq-iframe {
-        width: $cols8;
-    }
+h1 {
+    line-height: 1.7em !important;
+    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
+    font-size: 2.5rem !important;
+    font-weight: 900 !important;
 }