Now with a functional breadcrumb

index.html

@@ -46,6 +46,23 @@
     .nav-wrapper {
       padding: 0 30px;
     }
+    .pagination-wrapper {
+      position: absolute;
+      bottom: 10px;
+      left: 0;
+      width: 100%;
+      text-align: center;
+    }
+    .pagination {
+      display: inline-block;
+    }
+    /* a.breadcrumb {
+      margin-top: 4px;
+    } */
+    .breadcrumb::before {
+      color: #888;
+      margin-top: -4px;
+    }
   </style>
 
 </head>

react-tuto/src/index.js

@@ -3,27 +3,47 @@ import ReactDOM from 'react-dom';
 import ReactMarkdown from 'react-markdown';
 import { Switch, Route, HashRouter, Link } from 'react-router-dom';
 const markdown = require('./markdown.json');
+const intro = `
+Cette appli est un petit guide pour débuter en JavaScript, qui s'adresse à ceux
+qui connaissent déjà un autre langage.
+
+On ne va pas rentrer dans les détails du langage, mais plutôt présenter les
+bases nécessaires pour interagir avec une page web.
+`;
 
 class Page extends React.Component {
   componentDidMount() {
     Prism.highlightAll();
   }
   render() {
-    const { title, md } = this.props;
+    const { title, content } = this.props.page;
+    const { section } = this.props;
     return (
       <div>
+        <div>
+          <Link to='/' className="breadcrumb light-blue-text"><i className="material-icons">home</i></Link>
+          <Link to={section.path} className="breadcrumb light-blue-text">{section.title}</Link>
+          <span className="breadcrumb grey-text">{title}</span>
+        </div>
+
         <h4 className="header orange-text">{title}</h4>
-        <ReactMarkdown source={md} />
+        <ReactMarkdown source={content} />
       </div>
     );
   }
 }
 
-class App extends React.Component {
+class Home extends React.Component {
   render() {
     return (
       <div>
-        <h1>Home</h1>
+        <div>
+          <span className="breadcrumb light-blue-text"><i className="material-icons">home</i></span>
+          <span className="breadcrumb grey-text">Accueil</span>
+        </div>
+        <h4 className="header orange-text">Accueil</h4>
+        <ReactMarkdown source={intro} />
+        {getSectionLinks()}
       </div>
 
     );
@@ -31,22 +51,16 @@ class App extends React.Component {
 }
 
 
-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>
+        <Link to='/' className="breadcrumb light-blue-text"><i className="material-icons">home</i></Link>
+        <span className="breadcrumb grey-text">{section.title}</span>
+      </div>
+      <h4 className="header orange-text">{section.title}</h4>
+      {getSectionPageLinks(section)}
     </div>
   );
 }
@@ -58,21 +72,23 @@ function getSectionPagination(section, activeIndex) {
   const nextHref = activeIndex === lastIndex ? section.path :
     section.path + section.items[activeIndex + 1].path;
   return (
-    <ul className="pagination">
-      <li className={ activeIndex === 0 ? "disabled": "waves-effect"}>
-        <Link to={previousHref}><i className="material-icons">chevron_left</i></Link>
-      </li>
-      {
-        section.items.map((page, pIndex) => (
-          <li key={pIndex} className={ activeIndex === pIndex ? "active orange": "waves-effect"}>
-            <Link to={section.path + page.path}>{pIndex + 1}</Link>
-          </li>
-        ))
-      }
-      <li className={ activeIndex === lastIndex ? "disabled": "waves-effect"}>
-        <Link to={nextHref}><i className="material-icons">chevron_right</i></Link>
-      </li>
-    </ul>
+    <div className="pagination-wrapper">
+      <ul className="pagination">
+        <li className={ activeIndex === 0 ? "disabled": "waves-effect"}>
+          <Link to={previousHref}><i className="material-icons">chevron_left</i></Link>
+        </li>
+        {
+          section.items.map((page, pIndex) => (
+            <li key={pIndex} className={ activeIndex === pIndex ? "active orange": "waves-effect"}>
+              <Link to={section.path + page.path}>{pIndex + 1}</Link>
+            </li>
+          ))
+        }
+        <li className={ activeIndex === lastIndex ? "disabled": "waves-effect"}>
+          <Link to={nextHref}><i className="material-icons">chevron_right</i></Link>
+        </li>
+      </ul>
+    </div>
   );
 }
 
@@ -81,14 +97,14 @@ function getPage(sectionIndex, pageIndex) {
   const page = section.items[pageIndex];
   return () => (
     <div>
-      <Page title={page.title} md={page.content} />
+      <Page page={page} section={section} />
       {getSectionPagination(section, pageIndex)}
     </div>
   );
 }
 
 
-function getSectionLinks(section) {
+function getSectionPageLinks(section) {
   return (
     <ul>
     {section.items.map((page, pIndex) => (
@@ -98,6 +114,16 @@ function getSectionLinks(section) {
   );
 }
 
+function getSectionLinks() {
+  return (
+    <ul>
+    {markdown.map((section, sIndex) => (
+      <li key={sIndex}><Link to={section.path}>{section.title}</Link></li>
+    ))}
+    </ul>
+  );
+}
+
 function getSectionRoutes(section, sIndex) {
   const routes = [{
     key: sIndex, path: section.path, component: getSection(sIndex)
@@ -113,17 +139,17 @@ function getSectionRoutes(section, sIndex) {
 ReactDOM.render(
     <HashRouter>
       <div>
-        <ul>{
+        {/*}<ul>{
           markdown.map((section, sIndex) => (
             <li key={sIndex}><Link to={section.path}>{section.title}</Link>
-            {getSectionLinks(section)}
+            {getSectionPageLinks(section)}
             </li>
           ))
         }
           <li><Link to="/">Home</Link></li>
-        </ul>
+        </ul>*/}
         <Switch>
-          <Route exact path="/" component={App} />
+          <Route exact path="/" component={Home} />
           {
             markdown.map(getSectionRoutes)
           }