Add styles for hover and visited for table of contents

* Add styles for hover and visited for table of contents

* Add cookie based handling of visited table of content links

assets/stylesheets/global/table-of-contents.css

@@ -42,5 +42,23 @@
         left: calc(var(--toc-gap-left) * 2 * -1);
       }
     }
+
+    &:hover {
+      font-family: var(--font-medium);
+      color: var(--color-text-default);
+    }
+
+    &.visited {
+      position:relative;
+      &:before,
+      &:after {
+        position: absolute;
+        top: 0;
+      }
+      &:after {
+        content: '👁';
+        left: calc(var(--toc-gap-left) * 2 * -1);
+      }
+    }
   }
 }

public/stylesheets/style.css

@@ -1218,6 +1218,26 @@ display: flex;
   left: -22px;
 }
 
+.table-of-contents__link:hover {
+  font-family: 'robotomedium', Helvetica, sans-serif;
+  color: #2a3039;
+}
+
+.table-of-contents__link.visited {
+  position:relative;
+}
+
+.table-of-contents__link.visited:before,
+      .table-of-contents__link.visited:after {
+  position: absolute;
+  top: 0;
+}
+
+.table-of-contents__link.visited:after {
+  content: '👁';
+  left: -22px;
+}
+
 .sidebar-menu {}
 
 .sidebar-menu__list {

routes/courses.js

@@ -31,9 +31,15 @@ router.get('/:slug', catchErrors(async function (req, res, next) {
   const lessons = course.fields.lessons
   const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
   const lesson = lessons[lessonIndex]
-  res.render('course', {title: course.fields.title, course, lesson, lessons, lessonIndex})
+  const cookie = req.cookies.visitedLessons
+  let visitedLessons = cookie ||  []
+  visitedLessons.push(course.sys.id)
+  visitedLessons = [...new Set(visitedLessons)]
+  res.cookie('visitedLessons', visitedLessons, { maxAge: 900000, httpOnly: true })
+  res.render('course', {title: course.fields.title, course, lesson, lessons, lessonIndex, visitedLessons})
 }))
 
+
 /* GET course lesson detail. */
 router.get('/:cslug/lessons/:lslug', catchErrors(async function (req, res, next) {
   let course = await getCourse(req.params.cslug, req.query.locale, req.query.api)
@@ -41,12 +47,18 @@ router.get('/:cslug/lessons/:lslug', catchErrors(async function (req, res, next)
   const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
   const lesson = lessons[lessonIndex]
   const nextLesson = lessons[lessonIndex + 1] || null
+  const cookie = req.cookies.visitedLessons
+  let visitedLessons = cookie ||  []
+  visitedLessons.push(lesson.sys.id)
+  visitedLessons = [...new Set(visitedLessons)]
+  res.cookie('visitedLessons', visitedLessons, { maxAge: 900000, httpOnly: true })
   res.render('course', {
     title: `${course.fields.title} | ${lesson.fields.title}`,
     course,
     lesson,
     lessons,
-    nextLesson
+    nextLesson,
+    visitedLessons
   })
 }))
 

views/course.pug

@@ -11,11 +11,11 @@ block content
         .table-of-contents
           .table-of-contents__list
             .table-of-contents__item
-              a.table-of-contents__link.active(href=`/courses/${course.fields.slug}`) Course overview
+              a.table-of-contents__link(href=`/courses/${course.fields.slug}` class=(currentPath.endsWith(course.fields.slug) ? 'active' : '') class=(visitedLessons.includes(course.sys.id) ? 'visited' : '')) Course overview
             each l in course.fields.lessons
               if l.fields
                 .table-of-contents__item
-                  a.table-of-contents__link(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}`) #{l.fields.title}
+                  a.table-of-contents__link(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}` class=(currentPath.endsWith(l.fields.slug) ? 'active' : '') class=(visitedLessons.includes(l.sys.id) ? 'visited' : '')) #{l.fields.title}
     section.layout-sidebar__content
       if lesson
         +lesson(lesson, course, nextLesson)