Dynamic Link&Route building

react-tuto/gulpfile.js

@@ -15,6 +15,16 @@ const path = require('path');
 const es = require('event-stream');
 const Promise = require('bluebird');
 
+function slugify(text)
+{
+  return text.toString().toLowerCase()
+    .replace(/\s+/g, '-')           // Replace spaces with -
+    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
+    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
+    .replace(/^-+/, '')             // Trim - from start of text
+    .replace(/-+$/, '');            // Trim - from end of text
+}
+
 Promise.promisifyAll(fs);
 // const archiveFiles = [
 //   'style.css',
@@ -63,13 +73,18 @@ function extractMarkdown() {
           files,
           (carry, f) => fs.readFileAsync('src/markdown/' + dir + '/' + f)
             .then(buf => buf.toString())
-            .then(content => carry.concat({
-              title: path.basename(f, '.md'), content
-            })),
+            .then(content => {
+              const title = path.basename(f, '.md');
+              return carry.concat({
+                title,
+                path: '/' + slugify(title),
+                content
+              });
+            }),
           []
         ))
-        .then(content => Object.assign(carry, { [dir]: content })),
-      {}
+        .then(items => carry.concat({ title: dir, path: '/' + slugify(dir), items })),
+      []
     ))
     .then(JSON.stringify)
     .then(markdownJson => fs.writeFileAsync('src/markdown.json', markdownJson))

react-tuto/src/index.js

@@ -4,9 +4,6 @@ import ReactMarkdown from 'react-markdown';
 import { Switch, Route, HashRouter, Link } from 'react-router-dom';
 const markdown = require('./markdown.json');
 
-console.log(markdown);
-const input = '# This is a header\n\nAnd this is a paragraph'
-
 class Page extends React.Component {
   componentDidMount() {
     Prism.highlightAll();
@@ -26,34 +23,73 @@ class App extends React.Component {
   render() {
     return (
       <div>
-        <Page title={markdown.part1[0].title} md={markdown.part1[0].content} />
+        <Page title={markdown[0].items[0].title} md={markdown[0].items[0].content} />
       </div>
 
     );
   }
 }
 
-
 class MarkdownPage extends React.Component {
   render() {
     return (
       <div>
-      <Page title={markdown.part1[1].title} md={markdown.part1[1].content} />
+        <Page title={markdown[0].items[1].title} md={markdown[0].items[1].content} />
+      </div>
+    );
+  }
+}
+
+class Section extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>{this.props.title}</h1>
       </div>
     );
   }
 }
 
+function getSection(sectionIndex) {
+  const section = markdown[sectionIndex];
+  return () => (
+    <div>
+      <h1>{section.title}</h1>
+      {getSectionLinks(section)}
+    </div>
+  );
+}
+
+function getSectionLinks(section) {
+  return (
+    <ul>
+    {section.items.map((page, pIndex) => (
+      <li key={pIndex}><Link to={section.path + page.path}>{page.title}</Link></li>
+    ))}
+    </ul>
+  );
+}
+
 ReactDOM.render(
     <HashRouter>
       <div>
-        <ul>
+        <ul>{
+          markdown.map((section, sIndex) => (
+            <li key={sIndex}><Link to={section.path}>{section.title}</Link>
+            {getSectionLinks(section)}
+            </li>
+          ))
+        }
           <li><Link to="/">Home</Link></li>
-          <li><Link to="/md">Md</Link></li>
         </ul>
         <Switch>
           <Route exact path="/" component={App} />
           <Route path="/md" component={MarkdownPage} />
+          {
+            markdown.map((section, sIndex) => (
+              <Route key={sIndex} exact path={section.path} component={getSection(sIndex)} />
+            ))
+          }
         </Switch>
       </div>
   </HashRouter>,