Merge pull request #988 from inlinestyle/by-readme

Project README

Author: outoftime

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/clients/github.js

@@ -108,6 +108,12 @@ function buildGistFromProject(project) {
       language: 'JavaScript',
     };
   }
+  if (trim(project.instructions)) {
+    files['README.md'] = {
+      content: project.instructions,
+      language: 'Markdown',
+    };
+  }
   if (project.enabledLibraries.length || project.hiddenUIComponents.length) {
     files['popcode.json'] = {
       content: createPopcodeJson(project),

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 {instructions, 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__instructions">
+          {remark().use(remarkReact).processSync(instructions).contents}
+        </div>
         <div className="dashboard__spacer" />
         {this._renderLinks()}
       </div>
@@ -99,6 +105,7 @@ class Dashboard extends React.Component {
 Dashboard.propTypes = {
   currentUser: PropTypes.object.isRequired,
   gistExportInProgress: PropTypes.bool.isRequired,
+  instructions: PropTypes.string.isRequired,
   isExperimental: PropTypes.bool.isRequired,
   isOpen: PropTypes.bool.isRequired,
   onExportGist: PropTypes.func.isRequired,

src/containers/Dashboard.js

@@ -5,7 +5,7 @@ import {
   exportRepo,
 } from '../actions';
 import {
-  getCurrentProject,
+  getCurrentProjectInstructions,
   getCurrentUser,
   isDashboardOpen,
   isExperimental,
@@ -14,9 +14,9 @@ import {
 
 function mapStateToProps(state) {
   return {
-    currentProject: getCurrentProject(state),
     currentUser: getCurrentUser(state),
     gistExportInProgress: isGistExportInProgress(state),
+    instructions: getCurrentProjectInstructions(state),
     isExperimental: isExperimental(state),
     isOpen: isDashboardOpen(state),
   };

src/css/application.css

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

src/records/Project.js

@@ -14,20 +14,23 @@ export default class Project extends Record({
   enabledLibraries: new Set(),
   hiddenUIComponents: new Set(),
   updatedAt: null,
+  instructions: '',
 }) {
   static fromJS({
     projectKey = null,
     sources = {},
     enabledLibraries = [],
     hiddenUIComponents = [],
     updatedAt = null,
+    instructions = '',
   }) {
     return new Project({
       projectKey,
       sources: new Sources(sources),
       enabledLibraries: new Set(enabledLibraries),
       hiddenUIComponents: new Set(hiddenUIComponents),
       updatedAt,
+      instructions,
     });
   }
 }

src/reducers/projects.js

@@ -4,6 +4,7 @@ import filter from 'lodash/filter';
 import find from 'lodash/find';
 import get from 'lodash/get';
 import map from 'lodash/map';
+import sortBy from 'lodash/sortBy';
 import values from 'lodash/values';
 
 import {Project} from '../records';
@@ -28,6 +29,14 @@ function unhideComponent(state, projectKey, component, timestamp) {
   ).setIn([projectKey, 'updatedAt'], timestamp);
 }
 
+function contentForLanguage(files, language) {
+  const filesForLanguage = sortBy(
+    filter(files, {language}),
+    file => file.filename,
+  );
+  return map(filesForLanguage, 'content').join('\n\n');
+}
+
 function importGist(state, projectKey, gistData) {
   const files = values(gistData.files);
   const popcodeJsonFile = find(files, {filename: 'popcode.json'});
@@ -39,12 +48,12 @@ function importGist(state, projectKey, gistData) {
       projectKey,
       sources: {
         html: get(find(files, {language: 'HTML'}), 'content', ''),
-        css: map(filter(files, {language: 'CSS'}), 'content').join('\n\n'),
-        javascript: map(filter(files, {language: 'JavaScript'}), 'content').
-          join('\n\n'),
+        css: contentForLanguage(files, 'CSS'),
+        javascript: contentForLanguage(files, 'JavaScript'),
       },
       enabledLibraries: popcodeJson.enabledLibraries || [],
       hiddenUIComponents: popcodeJson.hiddenUIComponents || [],
+      instructions: contentForLanguage(files, 'Markdown'),
     },
   );
 }

src/selectors/getCurrentProject.js

@@ -1,9 +1,6 @@
 import {createSelector} from 'reselect';
 import getCurrentProjectKey from './getCurrentProjectKey';
-
-function getProjects(state) {
-  return state.get('projects');
-}
+import getProjects from './getProjects';
 
 export default createSelector(
   [getCurrentProjectKey, getProjects],

src/selectors/getCurrentProjectInstructions.js

@@ -0,0 +1,9 @@
+import {createSelector} from 'reselect';
+import getCurrentProjectKey from './getCurrentProjectKey';
+import getProjects from './getProjects';
+
+export default createSelector(
+  [getCurrentProjectKey, getProjects],
+  (projectKey, projects) =>
+    projectKey ? projects.getIn([projectKey, 'instructions']) : '',
+);

src/selectors/getProjects.js

@@ -0,0 +1,3 @@
+export default function getProjects(state) {
+  return state.get('projects');
+}