Adding cool stuff to import Markdown content from React app

index.html

@@ -61,8 +61,10 @@
 
 
         <div class="container">
-          <div class="section" id="root">
-
+          <div class="section">
+            <div class="row">
+              <div class="col s12" id="root"></div>
+            </div>
           </div>
         </div>
 

react-tuto/gulpfile.js

@@ -11,8 +11,11 @@ const uglify = require('gulp-uglify');
 const gutil = require('gulp-util');
 const zip = require('gulp-zip');
 const fs = require('fs');
+const path = require('path');
 const es = require('event-stream');
+const Promise = require('bluebird');
 
+Promise.promisifyAll(fs);
 // const archiveFiles = [
 //   'style.css',
 //   'screenshot.png',
@@ -21,12 +24,9 @@ const es = require('event-stream');
 // const builtFiles = [
 //   'js/*'
 // ];
-// const watchedFiles = [
-//   'style.css',
-//   'screenshot.png',
-//   '*.php',
-//   'js/*'
-// ];
+const watchedFiles = [
+  'src/markdown/**/*'
+];
 
 // const themeName = 'reago';
 
@@ -52,18 +52,27 @@ function buildClient(watch, done) {
   });
 }
 
-// function extractThemeVersion() {
-//   return new Promise((resolve, reject) => {
-//     fs.readFile(__dirname + '/style.css', (err, buf) => {
-//       if(err) return reject(err);
-//       const stylesheet = buf.toString();
-//       const versionRegex = /Version\: ([0-9\.]+)/g;
-//       const matches = versionRegex.exec(stylesheet);
-//       themeVersion = matches[1];
-//       resolve(themeVersion);
-//     });
-//   });
-// }
+function extractMarkdown() {
+  // return new Promise(function (resolve, reject) {
+    return fs.readdirAsync('src/markdown')
+    .then(subdirs => Promise.reduce(
+      subdirs,
+      (carry, dir) =>
+        fs.readdirAsync('src/markdown/' + dir)
+        .then(files => Promise.reduce(
+          files,
+          (carry, f) => fs.readFileAsync('src/markdown/' + dir + '/' + f)
+            .then(buf => buf.toString())
+            .then(content => Object.assign(carry, { [path.basename(f, '.md')]: content })),
+          {}
+        ))
+        .then(content => Object.assign(carry, { [dir]: content })),
+      {}
+    ))
+    .then(JSON.stringify)
+    .then(markdownJson => fs.writeFileAsync('src/markdown.json', markdownJson))
+  // });
+}
 
 // function makeZip(cb) {
 //   return extractThemeVersion()
@@ -85,13 +94,17 @@ function buildClient(watch, done) {
 
 gulp.task('watch', function() {
   gulp.watch(['src'], buildClient);
-  // gulp.watch(watchedFiles, makeZip);
+  gulp.watch(watchedFiles, extractMarkdown);
 });
 
 gulp.task('buildClient', function() {
   return buildClient();
 });
 
+gulp.task('extractMarkdown', function() {
+  return extractMarkdown();
+});
+
 // gulp.task('makeZip', makeZip);
 
-gulp.task('default', gulp.series('buildClient', 'watch'));
+gulp.task('default', gulp.series('buildClient', 'extractMarkdown', 'watch'));

react-tuto/package.json

@@ -10,7 +10,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "bluebird": "^3.5.1",
     "catch-links": "^2.0.1",
     "gulp-util": "^3.0.8",
     "lodash": "^4.17.4",
@@ -29,6 +28,7 @@
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.26.0",
     "babelify": "^8.0.0",
+    "bluebird": "^3.5.1",
     "browserify": "^14.5.0",
     "bufferutil": "^3.0.3",
     "eslint": "^4.14.0",

react-tuto/src/index.js

@@ -1,47 +1,75 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-const ReactMarkdown = require('react-markdown')
+import ReactMarkdown from 'react-markdown';
+import { Switch, Route, HashRouter, Link } from 'react-router-dom';
 
 const input = '# This is a header\n\nAnd this is a paragraph'
 
+class Page extends React.Component {
+  render() {
+    const { title, md } = this.props;
+    return (
+      <div>
+        <h4 className="header orange-text">{title}</h4>
+        <ReactMarkdown source={md} />
+      </div>
+    );
+  }
+}
 
 class App extends React.Component {
   render() {
     return (
+      <div>
+        <Page title="pouet" md={"##### Section 1\n\nPouet pouet pouet"} />
+        <h5 className="header">1. D'abord, un peu de HTML</h5>
+        <p>Ouvre le fichier <code>empty.html</code>.</p>
+        <p>Tu n'y verras pas grand chose. C'est normal, ça va être à toi de jouer !</p>
+        <p>Commence par ajouter du contenu entre les tags <code>&lt;body&gt;</code> et <code>&lt;/body&gt;</code>, sous la section "CONTENU". Un bouton par exemple. Si tu veux un exemple, regarde <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button#Exemples">ici</a>. Après l'ajout, recharge cette page.</p>
+        <p>Tu verras normalement tes ajouts s'afficher sur la moitié droite de l'écran&nbsp;! Passe à l'étape suivante.</p>
 
-            <div className="row">
-
-              <div className="col s12">
-                <h5 className="header">1. D'abord, un peu de HTML</h5>
-                <p>Ouvre le fichier <code>empty.html</code>.</p>
-                <p>Tu n'y verras pas grand chose. C'est normal, ça va être à toi de jouer !</p>
-                <p>Commence par ajouter du contenu entre les tags <code>&lt;body&gt;</code> et <code>&lt;/body&gt;</code>, sous la section "CONTENU". Un bouton par exemple. Si tu veux un exemple, regarde <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button#Exemples">ici</a>. Après l'ajout, recharge cette page.</p>
-                <p>Tu verras normalement tes ajouts s'afficher sur la moitié droite de l'écran&nbsp;! Passe à l'étape suivante.</p>
-
-                <h5 className="header">2. Du JavaScript maintenant !</h5>
+        <h5 className="header">2. Du JavaScript maintenant !</h5>
 
-                <h6>Hello World!</h6>
-                <p>Dans <code>empty.html</code>, ajoute ceci, sous la section "SCRIPTS" :</p>
-                <pre>
+        <h6>Hello World!</h6>
+        <p>Dans <code>empty.html</code>, ajoute ceci, sous la section "SCRIPTS" :</p>
+        <pre>
 &lt;script&gt;
-  alert("Hello World!");
+alert("Hello World!");
 &lt;/script&gt;</pre>
 
-                <p>Puis recharge. Tu as forcément déjà vu ce genre de "popup". &Ccedil;a le mérite d'exister, même si c'est pas vraiment le top en matière d'UX !</p>
+        <p>Puis recharge. Tu as forcément déjà vu ce genre de "popup". &Ccedil;a le mérite d'exister, même si c'est pas vraiment le top en matière d'UX !</p>
 
-                <h6>Les variables en JavaScript</h6>
+        <h6>Les variables en JavaScript</h6>
 
-                <p>Tu connais Java ! Tu sais donc qu'en Java, les variables sont <strong>typées</strong>.</p>
+        <p>Tu connais Java ! Tu sais donc qu'en Java, les variables sont <strong>typées</strong>.</p>
 
-                <ReactMarkdown source={input} />
+      </div>
 
-              </div>
-            </div>
+    );
+  }
+}
+
+
+class MarkdownPage extends React.Component {
+  render() {
+    return (
+      <ReactMarkdown source={input} />
     );
   }
 }
 
 ReactDOM.render(
-  <App />,
+    <HashRouter>
+      <div>
+        <ul>
+          <li><Link to="/">Home</Link></li>
+          <li><Link to="/md">Md</Link></li>
+        </ul>
+        <Switch>
+          <Route path="/" component={App} />
+          <Route path="/md" component={MarkdownPage} />
+        </Switch>
+      </div>
+  </HashRouter>,
   document.getElementById('root')
-);
+);

react-tuto/src/markdown.json

@@ -0,0 +1 @@
+{"part1":{"index":"# Markdown\n"},"part2":{}}

react-tuto/src/markdown/part1/index.md

@@ -0,0 +1 @@
+# Markdown