About Page support

.gitignore

@@ -5,5 +5,5 @@
 /coverage/
 /.eslintcache
 /.env
-/public/soapbox/soapbox.json
+/public/soapbox
 /deploy.sh

app/gabsocial/actions/about.js

@@ -0,0 +1,13 @@
+import api from '../api';
+
+export const FETCH_ABOUT_PAGE_REQUEST = 'FETCH_ABOUT_PAGE_REQUEST';
+export const FETCH_ABOUT_PAGE_FAIL    = 'FETCH_ABOUT_PAGE_FAIL';
+
+export function fetchAboutPage(slug = 'index') {
+  return (dispatch, getState) => {
+    dispatch({ type: FETCH_ABOUT_PAGE_REQUEST, slug });
+    return api(getState).get(`/soapbox/about/${slug}.html`).catch(error => {
+      dispatch({ type: FETCH_ABOUT_PAGE_FAIL, slug });
+    });
+  };
+}

app/gabsocial/containers/gabsocial.js

@@ -21,6 +21,7 @@ import { fetchInstance } from 'gabsocial/actions/instance';
 import { fetchSoapboxConfig } from 'gabsocial/actions/soapbox';
 import { fetchMe } from 'gabsocial/actions/me';
 import LandingPage from 'gabsocial/features/landing_page';
+import AboutPage from 'gabsocial/features/about';
 
 const { localeData, messages } = getLocale();
 addLocaleData(localeData);
@@ -92,6 +93,7 @@ class GabSocialMount extends React.PureComponent {
           <ScrollContext>
             <Switch>
               {!me && <Route exact path='/' component={LandingPage} />}
+              <Route exact path='/about/:slug?' component={AboutPage} />
               <Route path='/' component={UI} />
             </Switch>
           </ScrollContext>

app/gabsocial/features/about/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { fetchAboutPage } from 'gabsocial/actions/about';
+
+class AboutPage extends ImmutablePureComponent {
+
+  state = {
+    pageHtml: '',
+  }
+
+  loadPageHtml = () => {
+    const { dispatch, match } = this.props;
+    const { slug } = match.params;
+    dispatch(fetchAboutPage(slug)).then(response => {
+      this.setState({ pageHtml: response.data });
+    }).catch(error => {
+      // TODO: Better error handling. 404 page?
+      this.setState({ pageHtml: '<h1>Page not found</h1>' });
+    });
+  }
+
+  componentWillMount() {
+    this.loadPageHtml();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { slug } = this.props.match.params;
+    const { slug: prevSlug } = prevProps.match.params;
+    if (slug !== prevSlug) this.loadPageHtml();
+  }
+
+  render() {
+    return (
+      <div dangerouslySetInnerHTML={{ __html: this.state.pageHtml }} />
+    );
+  }
+
+}
+
+export default connect()(AboutPage);

app/styles/gabsocial/containers.scss

@@ -192,6 +192,7 @@
 
 .public-layout {
   .container {
+    width: 100%;
     max-width: 960px;
 
     @media screen and (max-width: $no-gap-breakpoint) {

public/soapbox/about/index.html

@@ -0,0 +1,3 @@
+<h1>Hello world!</h1>
+
+<p>You made it.</p>