extract faq from published page

after review from @thisandagain – thanks!
This commit is contained in:
Matthew Taylor 2018-01-09 12:55:36 -05:00
parent 85d6636c28
commit e4611088ff
3 changed files with 28 additions and 38 deletions

View file

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

View file

@ -1,7 +1,8 @@
var cheerio = require('cheerio');
var injectIntl = require('react-intl').injectIntl; var injectIntl = require('react-intl').injectIntl;
var React = require('react'); var React = require('react');
var xhr = require('xhr');
var Box = require('../../components/box/box.jsx');
var InformationPage = require('../../components/informationpage/informationpage.jsx'); var InformationPage = require('../../components/informationpage/informationpage.jsx');
var Page = require('../../components/page/www/page.jsx'); var Page = require('../../components/page/www/page.jsx');
var render = require('../../lib/render.jsx'); var render = require('../../lib/render.jsx');
@ -10,18 +11,28 @@ require('./preview-faq.scss');
var PreviewFaq = injectIntl(React.createClass({ var PreviewFaq = injectIntl(React.createClass({
type: 'PreviewFaq', 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 () { render: function () {
return ( return (
<InformationPage title={this.props.intl.formatMessage({id: 'preview-faq.title'})}> <InformationPage title={this.props.intl.formatMessage({id: 'preview-faq.title'})}>
<div className="inner"> <div className="inner">
<Box <div
title={''} className="preview-faq"
> dangerouslySetInnerHTML={this.state.faqDoc}
<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> </div>
</InformationPage> </InformationPage>
); );

View file

@ -1,36 +1,14 @@
@import "../../frameless";
#view { #view {
padding: 0; padding: 0;
} }
.box > .box-content { .preview-faq {
padding: 0; margin-bottom: 5rem;
} }
.preview-faq-iframe { h1 {
border: none; line-height: 1.7em !important;
width: $cols12; // for the box padding font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
height: 450px; font-size: 2.5rem !important;
} font-weight: 900 !important;
//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;
}
} }