From ed285df22a3eb90b2e9979ecb3e1c2026cb6b00e Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Tue, 19 Dec 2017 03:23:45 +0530
Subject: [PATCH 1/7] for non completed guides direct users to github (fixes
 #136)

---
 components/learn/subject-card.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/components/learn/subject-card.js b/components/learn/subject-card.js
index 25cf10ff8..d722f0c69 100644
--- a/components/learn/subject-card.js
+++ b/components/learn/subject-card.js
@@ -95,11 +95,26 @@ export default ({ subject }) => (
           <span>20 hours</span>
         </Box>
       </Flex>
-      <Link href={`/learn/subject?id=${subject.subjectId}`} as={subject.url}>
-        <Button inverted medium fluid href={subject.url} className="view">
+      {subject.isGuideCompleted ? (
+        <Link
+          href={`/learn/subject?subject=${subject.subjectId}&chapter=${subject.path.split('/').reverse()[0]}`}
+          as={subject.path}>
+          <Button inverted medium fluid href={subject.path} className="view">
+            VIEW GUIDE
+          </Button>
+        </Link>
+      ) : (
+        <Button
+          inverted
+          medium
+          fluid
+          href={subject.githubUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="view">
           VIEW GUIDE
         </Button>
-      </Link>
+      )}
     </div>
   </SubjectCard>
 );

From 28def1f07aa200fdd5de28527ade27853e7d0595 Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Tue, 19 Dec 2017 03:24:26 +0530
Subject: [PATCH 2/7] fix text color issue

---
 pages/login.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/login.js b/pages/login.js
index 0caf64ee2..5ea8d58ef 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -6,7 +6,7 @@ import BannerSection from '../components/common/banner';
 export default () => {
   return (
     <Layout>
-      <BannerSection textInverted title="Login / Register" subTitle="Coming Soon..." />
+      <BannerSection title="Login / Register" subTitle="Coming Soon..." />
     </Layout>
   );
 };

From a8fbdf2cbdf560a345b04d2bf02fef0919c29d03 Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Tue, 19 Dec 2017 03:24:47 +0530
Subject: [PATCH 3/7] implement chapter pages

---
 components/learn/subject-marked.js            |  14 +-
 .../syllabus-tree/syllabus-tree-container.js  | 154 ++++++++-------
 pages/index.js                                |   2 +-
 pages/learn/subject.js                        |  69 +++++--
 server.js                                     |   2 +-
 utils/mock-data.js                            | 187 ++++++++----------
 6 files changed, 227 insertions(+), 201 deletions(-)

diff --git a/components/learn/subject-marked.js b/components/learn/subject-marked.js
index 9b3f46444..517100dad 100644
--- a/components/learn/subject-marked.js
+++ b/components/learn/subject-marked.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import marked from 'marked';
 import styled from 'react-emotion';
+import ContentLoader from 'react-content-loader';
+
 import { breakpoints } from '../../utils/base.styles';
 
 const Marked = styled.div`
@@ -101,7 +103,17 @@ export default class MarkedJS extends React.Component {
     return (
       <div>
         {this.props.loading ? (
-          <div>Loading...</div>
+          <div>
+            <ContentLoader height={200} width={600} speed={2} primaryColor={'#f3f3f3'} secondaryColor={'#ecebeb'}>
+              <rect x="0" y="0" rx="3" ry="3" width="600" height="10" />
+              <rect x="0" y="20" rx="3" ry="3" width="500" height="10" />
+              <rect x="0" y="40" rx="3" ry="3" width="600" height="10" />
+              <rect x="0" y="60" rx="3" ry="3" width="500" height="10" />
+              <rect x="0" y="80" rx="3" ry="3" width="600" height="10" />
+              <rect x="0" y="100" rx="3" ry="3" width="500" height="10" />
+              <rect x="0" y="120" rx="3" ry="3" width="500" height="10" />
+            </ContentLoader>
+          </div>
         ) : (
           <Marked
             dangerouslySetInnerHTML={{
diff --git a/components/learn/syllabus-tree/syllabus-tree-container.js b/components/learn/syllabus-tree/syllabus-tree-container.js
index 30795e003..1f2436b5e 100644
--- a/components/learn/syllabus-tree/syllabus-tree-container.js
+++ b/components/learn/syllabus-tree/syllabus-tree-container.js
@@ -1,91 +1,93 @@
 import React from 'react';
 import styled from 'react-emotion';
-
+import { withRouter } from 'next/router';
 import TreeView from './syllabus-tree-component';
 
-export default class SyllabusTree extends React.Component {
-  state = {
-    nodeStateTracker: this.props.data.map(() => true),
-    activeUnit: this.props.data[0].unit.name,
-    activeChapter: this.props.data[0].chapters[0].url,
-  };
+export default withRouter(
+  class SyllabusTree extends React.Component {
+    state = {
+      nodeStateTracker: [false, ...this.props.data.map(() => true).slice(1)],
+      activeUnit: this.props.data[0].unit,
+      activeChapter: this.props.data[0].chapters[0].cdnUrl,
+    };
 
-  handleClick = i => {
-    this.setState({
-      nodeStateTracker: [
-        ...this.state.nodeStateTracker.slice(0, i),
-        !this.state.nodeStateTracker[i],
-        ...this.state.nodeStateTracker.slice(i + 1),
-      ],
-    });
-  };
+    handleClick = i => {
+      this.setState({
+        nodeStateTracker: [
+          ...this.state.nodeStateTracker.slice(0, i),
+          !this.state.nodeStateTracker[i],
+          ...this.state.nodeStateTracker.slice(i + 1),
+        ],
+      });
+    };
 
-  clickOnChapter(chapter, unitName) {
-    if (chapter.url !== this.state.activeChapter) {
-      this.setState({ activeChapter: chapter.url, activeUnit: unitName });
-      this.props.changeChapter(chapter);
+    clickOnChapter(chapter, unitName) {
+      if (chapter.cdnUrl !== this.state.activeChapter) {
+        this.setState({ activeChapter: chapter.cdnUrl, activeUnit: unitName });
+        this.props.changeChapter(chapter);
+      }
     }
-  }
 
-  render() {
-    const Container = styled.div`
-      & .chapter {
-        padding: 5px;
-        font-size: 0.85rem;
-        user-select: none;
-        border-left: 2px solid #fff;
-        color: #888;
-        :hover {
+    render() {
+      const Container = styled.div`
+        & .chapter {
+          padding: 5px;
+          font-size: 0.85rem;
+          user-select: none;
+          border-left: 2px solid #fff;
+          color: #888;
+          :hover {
+            background-color: #f5f5f5;
+            border-left: 2px solid #374355;
+            cursor: pointer;
+          }
+        }
+
+        & .active {
+          color: #374355;
           background-color: #f5f5f5;
           border-left: 2px solid #374355;
-          cursor: pointer;
+          :hover {
+            cursor: default;
+          }
         }
-      }
 
-      & .active {
-        color: #374355;
-        background-color: #f5f5f5;
-        border-left: 2px solid #374355;
-        :hover {
-          cursor: default;
+        & .unit_name {
+          order: 1;
+          flex: 1 1 auto;
+          align-self: auto;
         }
-      }
+      `;
 
-      & .unit_name {
-        order: 1;
-        flex: 1 1 auto;
-        align-self: auto;
-      }
-    `;
-
-    return (
-      <Container>
-        {this.props.data.map((unitNode, i) => {
-          const UnitNameComponent = (
-            <div className="unit_name" key={unitNode.unit.name} onClick={() => this.handleClick(i)}>
-              {unitNode.unit.name}
-            </div>
-          );
-          return (
-            <TreeView
-              key={i}
-              unitName={unitNode.unit.name}
-              UnitNameComponent={UnitNameComponent}
-              activeUnit={this.state.activeUnit}
-              collapsed={this.state.nodeStateTracker[i]}
-              onClick={() => this.handleClick(i)}>
-              {unitNode.chapters.map(chapter => (
-                <div
-                  className={`chapter ${this.state.activeChapter === chapter.url ? 'active' : ''}`}
-                  key={chapter.url}
-                  onClick={() => this.clickOnChapter(chapter, unitNode.unit.name)}>
-                  {chapter.name}
-                </div>
-              ))}
-            </TreeView>
-          );
-        })}
-      </Container>
-    );
+      return (
+        <Container>
+          {this.props.data.map((unitNode, i) => {
+            const UnitNameComponent = (
+              <div className="unit_name" key={unitNode.unit} onClick={() => this.handleClick(i)}>
+                {unitNode.unit}
+              </div>
+            );
+            return (
+              <TreeView
+                key={i}
+                unitName={unitNode.unit}
+                UnitNameComponent={UnitNameComponent}
+                activeUnit={this.state.activeUnit}
+                collapsed={this.state.nodeStateTracker[i]}
+                onClick={() => this.handleClick(i)}>
+                {unitNode.chapters.map(chapter => (
+                  <div
+                    className={`chapter ${this.state.activeChapter === chapter.cdnUrl ? 'active' : ''}`}
+                    key={chapter.cdnUrl}
+                    onClick={() => this.clickOnChapter(chapter, unitNode.unit)}>
+                    {chapter.name}
+                  </div>
+                ))}
+              </TreeView>
+            );
+          })}
+        </Container>
+      );
+    }
   }
-}
+);
diff --git a/pages/index.js b/pages/index.js
index 95a4d878e..e36e07076 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -222,7 +222,7 @@ export default () => (
           <Box width={1}>
             <Flex justify="space-around" align="center" wrap>
               {take(listOfSubjects, 4).map(subject => {
-                return <SubjectCard key={subject.url} subject={subject} />;
+                return <SubjectCard key={subject.path} subject={subject} />;
               })}
             </Flex>
           </Box>
diff --git a/pages/learn/subject.js b/pages/learn/subject.js
index 67694093a..655523e30 100644
--- a/pages/learn/subject.js
+++ b/pages/learn/subject.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Router from 'next/router';
 import fetch from 'isomorphic-unfetch';
 import styled from 'react-emotion';
 import { space } from 'styled-system';
@@ -6,13 +7,13 @@ import { Flex, Box } from 'grid-emotion';
 import ExpandTOC from 'react-icons/lib/fa/angle-double-right';
 import CollapseTOC from 'react-icons/lib/fa/angle-double-left';
 
-import { baseContainer, Title, breakpoints } from '../../utils/base.styles';
+import { baseContainer, breakpoints } from '../../utils/base.styles';
 import Layout from '../../components/common/layout';
 import BannerSection from '../../components/learn/subject-banner';
 import SyllabusTree from '../../components/learn/syllabus-tree/syllabus-tree-container';
 import SubjectMarkdown from '../../components/learn/subject-marked';
 
-import { laravelSyllabus, reactSyllabus } from '../../utils/mock-data';
+import { laravelSyllabus, reactSyllabus, listOfSubjects } from '../../utils/mock-data';
 
 const CurriculumSection = styled.section`
   ${baseContainer};
@@ -60,12 +61,9 @@ export default class Subject extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      activeSubject: this.selectSubject(this.props.url.query.id),
+      activeSubject: this.selectSubject(this.props.url.query.subject),
       activeChapterContent: '',
-      activeChapterName:
-        this.selectSubject(this.props.url.query.id) === null
-          ? ''
-          : this.selectSubject(this.props.url.query.id)[0].chapters[0].name,
+      activeChapterName: '',
       loading: true,
       isSidebarOpen: true,
     };
@@ -81,24 +79,49 @@ export default class Subject extends React.Component {
         return null;
     }
   }
+  selectChapter(syllabus, chapterName) {
+    return syllabus
+      .map(item => {
+        return item.chapters.find(chapter => chapter.name === chapterName);
+      })
+      .filter(Boolean)[0];
+  }
 
-  componentDidMount() {
-    if (this.state.activeSubject !== null) {
-      const defaultChapter = this.state.activeSubject[0].chapters[0];
-      this.getChapterContent(defaultChapter);
+  getChapter(subject, chapter) {
+    const activeSubject = this.selectSubject(subject);
+    const activeChapterName = chapter.replace('-', ' ');
+    if (activeSubject !== null) {
+      this.setState({
+        activeChapterName,
+        activeSubject,
+      });
+      const activeChapterUrl = this.selectChapter(activeSubject, activeChapterName).cdnUrl;
+      this.getChapterContent(activeChapterUrl);
     }
   }
 
+  componentDidMount() {
+    const { subject, chapter } = this.props.url.query;
+    this.getChapter(subject, chapter);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { subject, chapter } = nextProps.url.query;
+    this.getChapter(subject, chapter);
+  }
+
   changeChapter = selectedChapter => {
+    const subjectName = this.props.url.query.subject;
+    const chapterName = selectedChapter.name.replace(' ', '-');
+    Router.push(`/learn/subject?subject=${subjectName}&chapter=${chapterName}`, `/learn/${subjectName}/${chapterName}`);
+  };
+
+  async getChapterContent(chapterUrl) {
     this.setState({
+      activeChapterContent: '',
       loading: true,
-      activeChapterName: selectedChapter.name,
     });
-    this.getChapterContent(selectedChapter);
-  };
-
-  async getChapterContent(chapter) {
-    const activeChapterContentPromise = await fetch(chapter.url);
+    const activeChapterContentPromise = await fetch(chapterUrl);
     const activeChapterContent = await activeChapterContentPromise.text();
     await this.setState({
       activeChapterContent,
@@ -107,17 +130,23 @@ export default class Subject extends React.Component {
   }
 
   render() {
+    const subjectIcon = listOfSubjects.find(item => item.subjectId === this.props.url.query.subject).icon;
     return this.state.activeSubject === null ? (
       <Layout>
-        <Title inverted>Curriculum for {this.props.url.query.id} and others Coming soon!!</Title>
+        <BannerSection
+          textInverted
+          title={this.props.url.query.subject.toUpperCase()}
+          subTitle={`Curriculum for ${this.props.url.query.subject.toUpperCase()} and others Coming soon!!`}
+          icon={subjectIcon}
+        />
       </Layout>
     ) : (
       <Layout>
         <BannerSection
           textInverted
-          title={this.props.url.query.id.toUpperCase()}
+          title={this.props.url.query.subject.toUpperCase()}
           subTitle="Web Development"
-          icon="devicon-laravel-plain colored"
+          icon={subjectIcon}
         />
         <CurriculumSection my={[0, 4]}>
           <Flex column={false}>
diff --git a/server.js b/server.js
index 8c9f73475..9811953e2 100644
--- a/server.js
+++ b/server.js
@@ -9,7 +9,7 @@ const dev = process.env.NODE_ENV !== 'production';
 const app = next({ dev });
 const handle = app.getRequestHandler();
 const route = pathMatch();
-const match = route('/learn/:id');
+const match = route('/learn/:subject/:chapter');
 
 getPort({ port: 3000 }).then(port => {
   app.prepare().then(() => {
diff --git a/utils/mock-data.js b/utils/mock-data.js
index 5d6a0f4b3..b13b10d25 100644
--- a/utils/mock-data.js
+++ b/utils/mock-data.js
@@ -3,245 +3,242 @@ export const listOfSubjects = [
     id: '2132',
     title: 'Laravel',
     domain: 'Web Development',
-    url: '/learn/laravel',
+    path: '/learn/laravel/Choosing-laravel',
     subjectId: 'laravel',
     icon: 'devicon-laravel-plain colored',
     learningCount: '20',
     isGuideCompleted: true,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md',
   },
   {
     id: '213',
     title: 'ReactJS',
     domain: 'Web Development',
-    url: '/learn/reactjs',
+    path: '/learn/reactjs/Choosing-ReactJS',
     subjectId: 'reactjs',
     icon: 'devicon-react-original colored',
     learningCount: '28',
     isGuideCompleted: true,
+    githubUrl:
+      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
   },
   {
     id: '2131',
     title: 'Go',
     domain: 'Programming Language',
-    url: '/learn/go',
+    path: '/learn/go',
     subjectId: 'go',
     icon: 'devicon-go-plain colored',
     learningCount: '7',
     isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
   },
   {
     id: '21fa3',
     title: 'Android',
     domain: 'Mobile Technology',
-    url: '/learn/android',
+    path: '/learn/android',
     subjectId: 'android',
     icon: 'devicon-android-plain colored',
     learningCount: '9',
     isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
   },
   {
     id: '21afasda3',
     title: 'Rails',
     domain: 'Backend Development',
-    url: '/learn/rails',
+    path: '/learn/rails',
     subjectId: 'rails',
     icon: 'devicon-rails-plain colored',
     learningCount: '14',
     isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Rails.md',
   },
   {
     id: '21wqerwqe3',
     title: 'Python',
     domain: 'Programming Language',
-    url: '/learn/python',
+    path: '/learn/python',
     subjectId: 'python',
     icon: 'devicon-python-plain colored',
     learningCount: '32',
     isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/tree/master/programming-languages/Python',
   },
   {
     id: '2bxcvbx13',
     title: 'iOS',
     domain: 'Mobile Technology',
-    url: '/learn/ios',
+    path: '/learn/ios',
     subjectId: 'ios',
     icon: 'devicon-swift-plain colored',
     learningCount: '45',
     isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/mobile-dev/iOS/Learn-iOS.md',
   },
   {
     id: '2bxczzxcvbx13',
     title: 'Javascript',
     domain: 'Programming Language',
-    url: '/learn/javascript',
+    path: '/learn/javascript',
     subjectId: 'javascript',
     icon: 'devicon-javascript-plain colored',
     learningCount: '31',
     isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/learn-intermediate.md',
   },
   {
     id: '2bxdfasczzxcvbx13',
     title: 'Angular',
     domain: 'Frontend Development',
-    url: '/learn/angular',
+    path: '/learn/angular',
     subjectId: 'angular',
     icon: 'devicon-angularjs-plain colored',
     learningCount: '3',
     isGuideCompleted: false,
+    githubUrl:
+      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-Angular.md',
   },
 ];
 
 export const laravelSyllabus = [
   {
-    unit: {
-      name: 'Preface',
-    },
+    unit: 'Preface',
     chapters: [
       {
         name: 'Choosing laravel',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/choosing-laravel.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/choosing-laravel.md',
       },
       {
         name: 'Prerequisites',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/prerequisites.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/prerequisites.md',
       },
       {
         name: 'Installation',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/installation.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/installation.md',
       },
     ],
   },
   {
-    unit: {
-      name: 'Models, Views, Controllers and Routes',
-    },
+    unit: 'Models, Views, Controllers and Routes',
     chapters: [
       {
         name: 'Introduction to MVC',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/introduction-to-mvc.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/introduction-to-mvc.md',
       },
       {
         name: 'Basic Routing and Views',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/basic-routing-and-views.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/basic-routing-and-views.md',
       },
       {
         name: 'Pass Data to Views',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/pass-data-to-views.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/pass-data-to-views.md',
       },
       {
         name: 'Database Setup',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/database-setup.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/database-setup.md',
       },
       {
         name: 'Working with Query Builder',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/working-with-query-builder.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/working-with-query-builder.md',
       },
       {
         name: 'Eloquent',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/eloquent.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/eloquent.md',
       },
       {
         name: 'Controllers',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/controllers.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/controllers.md',
       },
       {
         name: 'Route Model Binding',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/route-model-binding.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/route-model-binding.md',
       },
     ],
   },
   {
-    unit: {
-      name: 'Front-End',
-    },
+    unit: 'Front-End',
     chapters: [
       {
         name: 'Layouts and Structures',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/layouts-and-structures.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/layouts-and-structures.md',
       },
       {
         name: 'Form Requests and CSRF',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/form-requests-and-CSRF.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/form-requests-and-CSRF.md',
       },
       {
         name: 'Form Validation',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/form-validation.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/form-validation.md',
       },
       {
         name: 'Rendering',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/rendering',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/rendering',
       },
       {
         name: 'Laravel Mix',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/laravel-mix.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/laravel-mix.md',
       },
       {
         name: 'Flash Messaging',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/flash-messaging.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/flash-messaging.md',
       },
     ],
   },
   {
-    unit: {
-      name: 'Relationships',
-    },
+    unit: 'Relationships',
     chapters: [
       {
         name: 'Eloquent Relationships',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/eloquent-relationships.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/eloquent-relationships.md',
       },
       {
         name: 'One-to-Many Relationship',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/one-to-many-relationship.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/one-to-many-relationship.md',
       },
       {
         name: 'Pivot Tables',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/pivot-tables.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/pivot-tables.md',
       },
     ],
   },
   {
-    unit: {
-      name: 'Authentication',
-    },
+    unit: 'Authentication',
     chapters: [
       {
         name: 'Scaffold Authentication',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/scaffold-authentication.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/scaffold-authentication.md',
       },
       {
         name: 'Manual Authentication',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/manual-authentication.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/manual-authentication.md',
       },
     ],
   },
   {
-    unit: {
-      name: 'View Composers and Archives',
-    },
+    unit: 'View Composers and Archives',
     chapters: [
       {
         name: 'Add Archives',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/add-archives.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/add-archives.md',
       },
       {
         name: 'View Composers',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/view-composers.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/view-composers.md',
       },
     ],
   },
   {
-    unit: {
-      name: 'Testing & Seeding',
-    },
+    unit: 'Testing & Seeding',
     chapters: [
       {
         name: 'Testing',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/testing.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/testing.md',
       },
       {
         name: 'Seeding',
-        url: 'https://rawgit.com/coderplex/learn/cdn/laravel/seeding.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/seeding.md',
       },
     ],
   },
@@ -249,151 +246,137 @@ export const laravelSyllabus = [
 
 export const reactSyllabus = [
   {
-    unit: {
-      name: 'Preface',
-    },
+    unit: 'Preface',
     chapters: [
       {
         name: 'Choosing ReactJS',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/choosing-reactjs.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/choosing-reactjs.md',
       },
       {
         name: 'Prerequisites',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/prerequisites.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/prerequisites.md',
       },
       {
         name: 'Philosophy',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/philosophy.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/philosophy.md',
       },
     ],
   },
   {
-    unit: {
-      name: 'Getting Started',
-    },
+    unit: 'Getting Started',
     chapters: [
       {
         name: 'Trying React',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/trying-react.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/trying-react.md',
       },
       {
         name: 'Create React App',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/create-react-app.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/create-react-app.md',
       },
       {
         name: 'JavaScript XML Syntax',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/javascript-xml-syntax.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/javascript-xml-syntax.md',
       },
     ],
   },
   {
-    unit: {
-      name: 'Components',
-    },
+    unit: 'Components',
     chapters: [
       {
         name: 'Custom Components',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/custom-components.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/custom-components.md',
       },
       {
         name: 'Rendering',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/rendering.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/rendering.md',
       },
       {
         name: 'Conditional Rendering',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/conditional-rendering.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/conditional-rendering.md',
       },
       {
         name: 'Data Flow',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/data-flow.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/data-flow.md',
       },
       {
         name: 'Lifecycle',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/lifecycle.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/lifecycle.md',
       },
       {
         name: 'Events',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/events.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/events.md',
       },
     ],
   },
   {
-    unit: {
-      name: 'Forms',
-    },
+    unit: 'Forms',
     chapters: [
       {
         name: 'Controlled Components',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/controlled-components.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/controlled-components.md',
       },
       {
         name: 'Uncontrolled Components',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/uncontrolled-components.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/uncontrolled-components.md',
       },
     ],
   },
   {
-    unit: {
-      name: 'Composition',
-    },
+    unit: 'Composition',
     chapters: [
       {
         name: 'Lifting State Up',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/lifting-state-up.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/lifting-state-up.md',
       },
       {
         name: 'Composition vs Inheritance',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/composition-vs-inheritance.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/composition-vs-inheritance.md',
       },
       {
         name: 'Context',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/context.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/context.md',
       },
     ],
   },
   {
-    unit: {
-      name: 'Tools',
-    },
+    unit: 'Tools',
     chapters: [
       {
         name: 'Developer Tools',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/developer-tools.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/developer-tools.md',
       },
       {
         name: 'Proptypes',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/proptypes.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/proptypes.md',
       },
       {
         name: 'Error Boundaries',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/error-boundaries.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/error-boundaries.md',
       },
     ],
   },
   {
-    unit: {
-      name: 'In depth discussions',
-    },
+    unit: 'In depth discussions',
     chapters: [
       {
         name: 'JSX In Depth',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/jsx-in-depth.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/jsx-in-depth.md',
       },
       {
         name: 'Synthetic Events',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/synthetic-events.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/synthetic-events.md',
       },
       {
         name: 'React Without JSX',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/react-without-jsx.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/react-without-jsx.md',
       },
       {
         name: 'React without ES6',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/react-without-es6.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/react-without-es6.md',
       },
       {
         name: 'Reconcilation - Diff Algorithm',
-        url: 'https://rawgit.com/coderplex/learn/cdn/react/reconcilation---diff-algorithm.md',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/reconcilation---diff-algorithm.md',
       },
     ],
   },

From c5cd28dbd3dde4ae21c72facda9c8aed31b647c6 Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Tue, 19 Dec 2017 03:33:16 +0530
Subject: [PATCH 4/7] name the guides as "Learn X"

---
 components/learn/subject-card.js |  2 +-
 pages/learn/subject.js           | 13 ++++---------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/components/learn/subject-card.js b/components/learn/subject-card.js
index d722f0c69..d6c0a2f63 100644
--- a/components/learn/subject-card.js
+++ b/components/learn/subject-card.js
@@ -81,7 +81,7 @@ export default ({ subject }) => (
       <i className={subject.icon} />
     </div>
     <div className="content">
-      <h3 className="title">{subject.title}</h3>
+      <h3 className="title">Learn {subject.title}</h3>
       <p className="subtitle" fontSize={[12, 14, 16]}>
         {subject.domain}
       </p>
diff --git a/pages/learn/subject.js b/pages/learn/subject.js
index 655523e30..59c0dc383 100644
--- a/pages/learn/subject.js
+++ b/pages/learn/subject.js
@@ -130,24 +130,19 @@ export default class Subject extends React.Component {
   }
 
   render() {
-    const subjectIcon = listOfSubjects.find(item => item.subjectId === this.props.url.query.subject).icon;
+    const subject = listOfSubjects.find(item => item.subjectId === this.props.url.query.subject);
     return this.state.activeSubject === null ? (
       <Layout>
         <BannerSection
           textInverted
-          title={this.props.url.query.subject.toUpperCase()}
+          title={`Learn ${subject.title}`}
           subTitle={`Curriculum for ${this.props.url.query.subject.toUpperCase()} and others Coming soon!!`}
-          icon={subjectIcon}
+          icon={subject.icon}
         />
       </Layout>
     ) : (
       <Layout>
-        <BannerSection
-          textInverted
-          title={this.props.url.query.subject.toUpperCase()}
-          subTitle="Web Development"
-          icon={subjectIcon}
-        />
+        <BannerSection textInverted title={`Learn ${subject.title}`} subTitle={subject.domain} icon={subject.icon} />
         <CurriculumSection my={[0, 4]}>
           <Flex column={false}>
             {this.state.isSidebarOpen ? (

From 77a360396074cbaeb5eeea6c3b27e242baddfc13 Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Tue, 19 Dec 2017 03:39:32 +0530
Subject: [PATCH 5/7] change the title of the page to the title of the guide

---
 components/common/header/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/common/header/index.js b/components/common/header/index.js
index 73d451384..55e60cc38 100644
--- a/components/common/header/index.js
+++ b/components/common/header/index.js
@@ -63,7 +63,11 @@ class NavBar extends React.Component {
   render() {
     const pathName = this.props.router.pathname;
     const metaData = MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
-    const title = metaData.title;
+    const title =
+      pathName.split('/')[1] === 'learn'
+        ? `Learn ${this.props.router.query.subject[0].toUpperCase() +
+            this.props.router.query.subject.slice(1)} | Coderplex`
+        : metaData.title;
     const description = metaData.description;
     const image = metaData.image;
     return (

From feed24719ccc7222f63ad5630b098fd24126c7ed Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Tue, 19 Dec 2017 04:12:53 +0530
Subject: [PATCH 6/7] generate export map for chapter pages

---
 components/common/header/index.js |   2 +-
 next.config.js                    | 360 +++++++++++++++++++++++++++---
 pages/learn/subject.js            |   4 +-
 utils/mock-data.js                |   2 +-
 4 files changed, 339 insertions(+), 29 deletions(-)

diff --git a/components/common/header/index.js b/components/common/header/index.js
index 55e60cc38..a0bc2f8cd 100644
--- a/components/common/header/index.js
+++ b/components/common/header/index.js
@@ -64,7 +64,7 @@ class NavBar extends React.Component {
     const pathName = this.props.router.pathname;
     const metaData = MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
     const title =
-      pathName.split('/')[1] === 'learn'
+      pathName.split('/')[1] === 'learn' && pathName.split('/')[2]
         ? `Learn ${this.props.router.query.subject[0].toUpperCase() +
             this.props.router.query.subject.slice(1)} | Coderplex`
         : metaData.title;
diff --git a/next.config.js b/next.config.js
index de85ea17c..dabf74431 100644
--- a/next.config.js
+++ b/next.config.js
@@ -8,91 +8,382 @@ const listOfSubjects = [
     id: '2132',
     title: 'Laravel',
     domain: 'Web Development',
-    url: '/learn/laravel',
+    path: '/learn/laravel/Choosing-laravel',
     subjectId: 'laravel',
     icon: 'devicon-laravel-plain colored',
     learningCount: '20',
-    learnGuideStatus: true,
+    isGuideCompleted: true,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md',
   },
   {
     id: '213',
     title: 'ReactJS',
     domain: 'Web Development',
-    url: '/learn/reactjs',
+    path: '/learn/reactjs/Choosing-ReactJS',
     subjectId: 'reactjs',
     icon: 'devicon-react-original colored',
     learningCount: '28',
-    learnGuideStatus: false,
+    isGuideCompleted: true,
+    githubUrl:
+      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
   },
   {
     id: '2131',
     title: 'Go',
     domain: 'Programming Language',
-    url: '/learn/go',
+    path: '/learn/go',
     subjectId: 'go',
-    icon: 'devicon-go-plain ',
+    icon: 'devicon-go-plain colored',
     learningCount: '7',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
   },
   {
     id: '21fa3',
     title: 'Android',
     domain: 'Mobile Technology',
-    url: '/learn/android',
+    path: '/learn/android',
     subjectId: 'android',
     icon: 'devicon-android-plain colored',
     learningCount: '9',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
   },
   {
     id: '21afasda3',
     title: 'Rails',
     domain: 'Backend Development',
-    url: '/learn/rails',
+    path: '/learn/rails',
     subjectId: 'rails',
     icon: 'devicon-rails-plain colored',
     learningCount: '14',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Rails.md',
   },
   {
     id: '21wqerwqe3',
     title: 'Python',
     domain: 'Programming Language',
-    url: '/learn/python',
+    path: '/learn/python',
     subjectId: 'python',
     icon: 'devicon-python-plain colored',
     learningCount: '32',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/tree/master/programming-languages/Python',
   },
   {
     id: '2bxcvbx13',
     title: 'iOS',
     domain: 'Mobile Technology',
-    url: '/learn/ios',
+    path: '/learn/ios',
     subjectId: 'ios',
     icon: 'devicon-swift-plain colored',
     learningCount: '45',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/mobile-dev/iOS/Learn-iOS.md',
   },
   {
     id: '2bxczzxcvbx13',
     title: 'Javascript',
     domain: 'Programming Language',
-    url: '/learn/javascript',
+    path: '/learn/javascript',
     subjectId: 'javascript',
     icon: 'devicon-javascript-plain colored',
     learningCount: '31',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/learn-intermediate.md',
   },
   {
     id: '2bxdfasczzxcvbx13',
     title: 'Angular',
     domain: 'Frontend Development',
-    url: '/learn/angular',
+    path: '/learn/angular',
     subjectId: 'angular',
     icon: 'devicon-angularjs-plain colored',
     learningCount: '3',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl:
+      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-Angular.md',
+  },
+];
+
+const laravelSyllabus = [
+  {
+    unit: 'Preface',
+    chapters: [
+      {
+        name: 'Choosing laravel',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/choosing-laravel.md',
+      },
+      {
+        name: 'Prerequisites',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/prerequisites.md',
+      },
+      {
+        name: 'Installation',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/installation.md',
+      },
+    ],
+  },
+  {
+    unit: 'Models, Views, Controllers and Routes',
+    chapters: [
+      {
+        name: 'Introduction to MVC',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/introduction-to-mvc.md',
+      },
+      {
+        name: 'Basic Routing and Views',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/basic-routing-and-views.md',
+      },
+      {
+        name: 'Pass Data to Views',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/pass-data-to-views.md',
+      },
+      {
+        name: 'Database Setup',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/database-setup.md',
+      },
+      {
+        name: 'Working with Query Builder',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/working-with-query-builder.md',
+      },
+      {
+        name: 'Eloquent',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/eloquent.md',
+      },
+      {
+        name: 'Controllers',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/controllers.md',
+      },
+      {
+        name: 'Route Model Binding',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/route-model-binding.md',
+      },
+    ],
+  },
+  {
+    unit: 'Front-End',
+    chapters: [
+      {
+        name: 'Layouts and Structures',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/layouts-and-structures.md',
+      },
+      {
+        name: 'Form Requests and CSRF',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/form-requests-and-CSRF.md',
+      },
+      {
+        name: 'Form Validation',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/form-validation.md',
+      },
+      {
+        name: 'Rendering',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/rendering',
+      },
+      {
+        name: 'Laravel Mix',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/laravel-mix.md',
+      },
+      {
+        name: 'Flash Messaging',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/flash-messaging.md',
+      },
+    ],
+  },
+  {
+    unit: 'Relationships',
+    chapters: [
+      {
+        name: 'Eloquent Relationships',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/eloquent-relationships.md',
+      },
+      {
+        name: 'One-to-Many Relationship',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/one-to-many-relationship.md',
+      },
+      {
+        name: 'Pivot Tables',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/pivot-tables.md',
+      },
+    ],
+  },
+  {
+    unit: 'Authentication',
+    chapters: [
+      {
+        name: 'Scaffold Authentication',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/scaffold-authentication.md',
+      },
+      {
+        name: 'Manual Authentication',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/manual-authentication.md',
+      },
+    ],
+  },
+  {
+    unit: 'View Composers and Archives',
+    chapters: [
+      {
+        name: 'Add Archives',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/add-archives.md',
+      },
+      {
+        name: 'View Composers',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/view-composers.md',
+      },
+    ],
+  },
+  {
+    unit: 'Testing & Seeding',
+    chapters: [
+      {
+        name: 'Testing',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/testing.md',
+      },
+      {
+        name: 'Seeding',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/seeding.md',
+      },
+    ],
+  },
+];
+
+const reactSyllabus = [
+  {
+    unit: 'Preface',
+    chapters: [
+      {
+        name: 'Choosing ReactJS',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/choosing-reactjs.md',
+      },
+      {
+        name: 'Prerequisites',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/prerequisites.md',
+      },
+      {
+        name: 'Philosophy',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/philosophy.md',
+      },
+    ],
+  },
+  {
+    unit: 'Getting Started',
+    chapters: [
+      {
+        name: 'Trying React',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/trying-react.md',
+      },
+      {
+        name: 'Create React App',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/create-react-app.md',
+      },
+      {
+        name: 'JavaScript XML Syntax',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/javascript-xml-syntax.md',
+      },
+    ],
+  },
+  {
+    unit: 'Components',
+    chapters: [
+      {
+        name: 'Custom Components',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/custom-components.md',
+      },
+      {
+        name: 'Rendering',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/rendering.md',
+      },
+      {
+        name: 'Conditional Rendering',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/conditional-rendering.md',
+      },
+      {
+        name: 'Data Flow',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/data-flow.md',
+      },
+      {
+        name: 'Lifecycle',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/lifecycle.md',
+      },
+      {
+        name: 'Events',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/events.md',
+      },
+    ],
+  },
+  {
+    unit: 'Forms',
+    chapters: [
+      {
+        name: 'Controlled Components',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/controlled-components.md',
+      },
+      {
+        name: 'Uncontrolled Components',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/uncontrolled-components.md',
+      },
+    ],
+  },
+  {
+    unit: 'Composition',
+    chapters: [
+      {
+        name: 'Lifting State Up',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/lifting-state-up.md',
+      },
+      {
+        name: 'Composition vs Inheritance',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/composition-vs-inheritance.md',
+      },
+      {
+        name: 'Context',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/context.md',
+      },
+    ],
+  },
+  {
+    unit: 'Tools',
+    chapters: [
+      {
+        name: 'Developer Tools',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/developer-tools.md',
+      },
+      {
+        name: 'Proptypes',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/proptypes.md',
+      },
+      {
+        name: 'Error Boundaries',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/error-boundaries.md',
+      },
+    ],
+  },
+  {
+    unit: 'In depth discussions',
+    chapters: [
+      {
+        name: 'JSX In Depth',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/jsx-in-depth.md',
+      },
+      {
+        name: 'Synthetic Events',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/synthetic-events.md',
+      },
+      {
+        name: 'React Without JSX',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/react-without-jsx.md',
+      },
+      {
+        name: 'React without ES6',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/react-without-es6.md',
+      },
+      {
+        name: 'Reconcilation Diff Algorithm',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/reconcilation---diff-algorithm.md',
+      },
+    ],
   },
 ];
 
@@ -128,14 +419,33 @@ module.exports = {
       '/space': { page: '/space' },
       '/login': { page: '/login' },
     };
+    const getSubject = subjectId => {
+      switch (subjectId) {
+        case 'laravel':
+          return laravelSyllabus;
+        case 'reactjs':
+          return reactSyllabus;
+        default:
+          return [];
+      }
+    };
     for (const subject of listOfSubjects) {
-      routes[subject.url] = {
-        page: '/learn/subject',
-        query: {
-          id: subject.subjectId,
-        },
-      };
+      for (const unit of getSubject(subject.subjectId)) {
+        const chapters = unit.chapters;
+        for (const chapter of chapters) {
+          const chapterSlug = chapter.name.replace(/\s/gi, '-');
+          const route = `learn/${subject.subjectId}/${chapterSlug}`;
+          routes[route] = {
+            page: '/learn/subject',
+            query: {
+              subject: subject.subjectId,
+              chapter: chapterSlug,
+            },
+          };
+        }
+      }
     }
+    console.log(routes);
     return routes;
   },
 };
diff --git a/pages/learn/subject.js b/pages/learn/subject.js
index 59c0dc383..54b9f21d7 100644
--- a/pages/learn/subject.js
+++ b/pages/learn/subject.js
@@ -89,7 +89,7 @@ export default class Subject extends React.Component {
 
   getChapter(subject, chapter) {
     const activeSubject = this.selectSubject(subject);
-    const activeChapterName = chapter.replace('-', ' ');
+    const activeChapterName = chapter.replace(/-/gi, ' ');
     if (activeSubject !== null) {
       this.setState({
         activeChapterName,
@@ -112,7 +112,7 @@ export default class Subject extends React.Component {
 
   changeChapter = selectedChapter => {
     const subjectName = this.props.url.query.subject;
-    const chapterName = selectedChapter.name.replace(' ', '-');
+    const chapterName = selectedChapter.name.replace(/\s/gi, '-');
     Router.push(`/learn/subject?subject=${subjectName}&chapter=${chapterName}`, `/learn/${subjectName}/${chapterName}`);
   };
 
diff --git a/utils/mock-data.js b/utils/mock-data.js
index b13b10d25..43dee5c31 100644
--- a/utils/mock-data.js
+++ b/utils/mock-data.js
@@ -375,7 +375,7 @@ export const reactSyllabus = [
         cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/react-without-es6.md',
       },
       {
-        name: 'Reconcilation - Diff Algorithm',
+        name: 'Reconcilation Diff Algorithm',
         cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/reconcilation---diff-algorithm.md',
       },
     ],

From 3d4e6d0f5772f83c28a43646408e35eb28232912 Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Tue, 19 Dec 2017 04:21:44 +0530
Subject: [PATCH 7/7] add chapter name also to learn pages title

---
 components/common/header/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/common/header/index.js b/components/common/header/index.js
index a0bc2f8cd..d36375ba8 100644
--- a/components/common/header/index.js
+++ b/components/common/header/index.js
@@ -65,7 +65,10 @@ class NavBar extends React.Component {
     const metaData = MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
     const title =
       pathName.split('/')[1] === 'learn' && pathName.split('/')[2]
-        ? `Learn ${this.props.router.query.subject[0].toUpperCase() +
+        ? `${this.props.router.query.chapter.replace(
+            /-/gi,
+            ' '
+          )} | Learn ${this.props.router.query.subject[0].toUpperCase() +
             this.props.router.query.subject.slice(1)} | Coderplex`
         : metaData.title;
     const description = metaData.description;

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coderplex-org/coderplex/pull/140.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coderplex-org/coderplex/pull/140.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coderplex-org/coderplex/pull/140.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coderplex-org/coderplex/pull/140.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>