add CTA's

assets/stylesheets/global.css

@@ -148,3 +148,14 @@ body {
     }
   }
 }
+
+.cta {
+  display: inline-block;
+  box-sizing: border-box;
+  min-width: 200px;
+  padding: 0.5em 2em;
+  color: var(--cta-color);
+  background: var(--cta-bg);
+  border-radius: var(--cta-radius);
+  text-align: center;
+}

assets/stylesheets/header.css

@@ -31,6 +31,7 @@
 
     @media (--breakpoint-desktop) {
       flex: 1 0 auto;
+      min-height: 90px;
     }
   }
 

assets/stylesheets/variables.css

@@ -20,4 +20,8 @@
   --color-course-active: #536171;
 
   --card-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
+
+  --cta-color: #fff;
+  --cta-bg: #5b9fef;
+  --cta-radius: 3px;
 }

public/stylesheets/style.css

@@ -672,6 +672,18 @@ body {
   font-weight: bold;
 }
 
+.cta {
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  min-width: 200px;
+  padding: 0.5em 2em;
+  color: #fff;
+  background: #5b9fef;
+  border-radius: 3px;
+  text-align: center;
+}
+
 #header {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -735,6 +747,7 @@ body {
     -webkit-box-flex: 1;
         -ms-flex: 1 0 auto;
             flex: 1 0 auto;
+    min-height: 90px;
   }
 }
 

routes/courses.js

@@ -41,9 +41,10 @@ router.get('/:slug', async function (req, res, next) {
 /* GET course lesson detail. */
 router.get('/:cslug/lessons/:lslug', async function (req, res, next) {
   let course = await getCourse(req.params.cslug)
-  let lesson = course.fields.lessons.find((lesson) => lesson.fields.slug === req.params.lslug)
-  console.log(lesson)
-  res.render('course', {course, lesson})
+  const lessons = course.fields.lessons
+  const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
+  const lesson = lessons[lessonIndex]
+  res.render('course', {course, lesson, lessons, lessonIndex})
 })
 
 module.exports = router

views/course.pug

@@ -17,5 +17,8 @@ block content
       if lesson
         h2= lesson.fields.title
         p !{helpers.markdown(lesson.fields.description)}
+        if lessonIndex + 1< lessons.length
+          a.cta(href=`/courses/${course.fields.slug}/lessons/${lessons[lessonIndex + 1].fields.slug}`) View next lesson
       else
         p !{helpers.markdown(course.fields.description)}
+        a.cta(href=`/courses/${course.fields.slug}/lessons/${course.fields.lessons[0].fields.slug}`) Start course