loading markdown into dashboard!

Author: inlinestyle

package.json

@@ -141,6 +141,8 @@
     "redux-logger": "^3.0.6",
     "redux-saga": "^0.15.3",
     "redux-saga-debounce-effect": "https://github.com/madewithlove/redux-saga-debounce-effect.git#v0.2.2",
+    "remark": "^8.0.0",
+    "remark-react": "^4.0.0",
     "reselect": "^3.0.1",
     "rxjs": "^5.0.2",
     "slowparse": "^1.1.4",

src/components/Dashboard.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import remark from 'remark';
+import remarkReact from 'remark-react';
 import {t} from 'i18next';
 import classnames from 'classnames';
 import config from '../config';
@@ -75,7 +77,8 @@ class Dashboard extends React.Component {
   }
 
   render() {
-    if (!this.props.isOpen) {
+    const {readme, isOpen} = this.props;
+    if (!isOpen) {
       return null;
     }
 
@@ -89,6 +92,9 @@ class Dashboard extends React.Component {
     return (
       <div className={sidebarClassnames}>
         {this._renderMenu()}
+        <div className="dashboard__readme">
+          {remark().use(remarkReact).processSync(readme).contents}
+        </div>
         <div className="dashboard__spacer" />
         {this._renderLinks()}
       </div>
@@ -101,6 +107,7 @@ Dashboard.propTypes = {
   gistExportInProgress: PropTypes.bool.isRequired,
   isExperimental: PropTypes.bool.isRequired,
   isOpen: PropTypes.bool.isRequired,
+  readme: PropTypes.string.isRequired,
   onExportGist: PropTypes.func.isRequired,
   onExportRepo: PropTypes.func.isRequired,
 };

src/containers/Dashboard.js

@@ -13,12 +13,13 @@ import {
 } from '../selectors';
 
 function mapStateToProps(state) {
+  const project = getCurrentProject(state);
   return {
-    currentProject: getCurrentProject(state),
     currentUser: getCurrentUser(state),
     gistExportInProgress: isGistExportInProgress(state),
     isExperimental: isExperimental(state),
     isOpen: isDashboardOpen(state),
+    readme: project ? project.readme : '',
   };
 }
 

src/css/application.css

@@ -370,6 +370,10 @@ body {
   font-weight: bold;
 }
 
+.dashboard__readme {
+  overflow: scroll;
+}
+
 .dashboard__spacer {
   flex: 1 0 auto;
 }