From 10c47201ed8f4c471f3c1183d171a7bfe0395647 Mon Sep 17 00:00:00 2001
From: James Tansiri <tansirijames@gmail.com>
Date: Thu, 19 Dec 2024 07:59:34 +0700
Subject: [PATCH] feat: track progress

---
 _includes/layouts/course.njk                  | 15 ++++++---
 _includes/layouts/lesson.njk                  | 22 +++++++++----
 public/css/tailwind.css                       | 33 +++++++++----------
 .../essential-sql/essential-sql.11tydata.js   |  4 +--
 4 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/_includes/layouts/course.njk b/_includes/layouts/course.njk
index 0ef1346..6da8e19 100644
--- a/_includes/layouts/course.njk
+++ b/_includes/layouts/course.njk
@@ -23,10 +23,17 @@ layout: layouts/base.njk
                         {% if lesson.data.section %}
                             <p class="text-xl font-victor-mono font-bold mt-4 text-primary-700 mb-4">{{ lesson.data.section }}</p>
                         {% endif %}
-                        <a href="{{ lesson.url }}" class="hover:underline mb-2 font-light text-lg flex items-center">
-                            <i class="fal fa-fw mr-1 fa-circle"></i>
-                            {{ lesson.data.lesson_name }}
-                        </a>
+                        <div class="flex items-center mb-2" x-data="{completed: $persist(false).as('{{ lesson.url }}')}">
+                            <i
+                                x-cloak
+                                x-show="completed"
+                                @click="completed=false"
+                                class="mr-2 fal fa-fw fa-check-circle text-lg hover:cursor-pointer text-green-700"></i>
+                            <i x-cloak x-show="!completed" @click="completed=true" class="mr-2 fal fa-fw fa-circle text-lg hover:cursor-pointer"></i>
+                            <a href="{{ lesson.url }}" class="hover:underline font-light text-lg">
+                                {{ lesson.data.lesson_name }}
+                            </a>
+                        </div>
                     </li>
                 {% endfor %}
             </ul>
diff --git a/_includes/layouts/lesson.njk b/_includes/layouts/lesson.njk
index 5ebac6a..96df530 100644
--- a/_includes/layouts/lesson.njk
+++ b/_includes/layouts/lesson.njk
@@ -3,7 +3,7 @@ layout: layouts/base.njk
 ---
 
 {% set nextLesson = collections.lesson|filter("course_id", course_id)|sortByDirectoryPrefix|getNextCollectionItem(page) %}
-<div x-data="{ newFileOpen: false, sidebarOpen: false}">
+<div x-data="{ newFileOpen: false, sidebarOpen: false, completedLesson: $persist(false).as('{{page.url}}')}">
     <button
         class="fixed right-0 top-[100px] border bg-gray-300 hover:bg-gray-400 px-2 py-1 shadow-lg z-50"
         @click="sidebarOpen = true">
@@ -28,7 +28,7 @@ layout: layouts/base.njk
                     id="next-container-below-content"
                     class="complete-and-next-form-container {% if code_editor %}hidden {% endif %}md:block">
                     <div class="{% if code_editor %}hidden{% endif %}">
-                        <a href="{% if nextLesson %}{{ nextLesson.url }}{% else %}/courses/{{ course_slug }}{% endif %}" class="mb-4 mt-6 flex w-full items-center justify-center bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-800 focus:outline-none md:mb-0">
+                        <a @click="completedLesson = true" href="{% if nextLesson %}{{ nextLesson.url }}{% else %}/courses/{{ course_slug }}{% endif %}" class="mb-4 mt-6 flex w-full items-center justify-center bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-800 focus:outline-none md:mb-0">
                             {% if nextLesson %}Next{% else %}Complete the course{% endif %}
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
@@ -117,7 +117,7 @@ layout: layouts/base.njk
                         {% endif %}
                         <div id="next-container-below-editor" class="complete-and-next-form-container block md:hidden">
                             <div class="hidden">
-                                <a href="{% if nextLesson %}{{ nextLesson.url }}{% else %}/courses/{{ course_slug }}{% endif %}" class="mb-4 mt-6 flex w-full items-center justify-center bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-800 focus:outline-none md:mb-0">
+                                <a @click="completedLesson = true" href="{% if nextLesson %}{{ nextLesson.url }}{% else %}/courses/{{ course_slug }}{% endif %}" class="mb-4 mt-6 flex w-full items-center justify-center bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-800 focus:outline-none md:mb-0">
                                     {% if nextLesson %}Next{% else %}Complete the course{% endif %}
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -192,7 +192,7 @@ layout: layouts/base.njk
                                 </div>
                             </div>
                             <div class="mt-5 sm:mt-6">
-                                <a href="{% if nextLesson %}{{ nextLesson.url }}{% else %}/courses/{{ course_slug }}{% endif %}" type="submit" class="mb-4 mt-6 flex w-full items-center justify-center bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-800 focus:outline-none md:mb-0">
+                                <a @click="completedLesson = true" href="{% if nextLesson %}{{ nextLesson.url }}{% else %}/courses/{{ course_slug }}{% endif %}" type="submit" class="mb-4 mt-6 flex w-full items-center justify-center bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-800 focus:outline-none md:mb-0">
                                     {% if nextLesson %}Next{% else %}Complete the course{% endif %}
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -243,7 +243,7 @@ layout: layouts/base.njk
                             <div class="bg-indigo-700 px-4 py-6 sm:px-6">
                                 <div class="flex items-center justify-between">
                                     <h2 class="text-base font-semibold font-victor-mono leading-6 text-white" id="slide-over-title">
-                                        <a href="/courses/{{ course_slug }}" class="hover:underline">{{ course_name }}</a>
+                                        <a href="/courses/{{ course_slug }}/" class="hover:underline">{{ course_name }}</a>
                                     </h2>
                                     <div class="ml-3 flex h-7 items-center">
                                         <button
@@ -279,8 +279,16 @@ layout: layouts/base.njk
                                             </p>
                                             {% set past_first_section = true %}
                                         {% endif %}
-                                        <div class="text-gray-500 dark:text-slate-200 text-sm mb-1" x-show="open">
-                                            <i class="far fa-fw mr-1 fa-circle"></i>
+                                        <div 
+                                            x-data="{completed: $persist(false).as('{{ lesson.url }}')}"
+                                            class="text-gray-500 dark:text-slate-200 text-sm mb-1" x-show="open"
+                                            >
+                                            <i x-cloak x-show="completed" @click="completed=false" class="mr-1 fal fa-fw fa-check-circle hover:cursor-pointer text-green-700"></i>
+                                            <i
+                                                x-cloak
+                                                x-show="!completed"
+                                                @click="completed=true"
+                                                class="mr-1 fal fa-fw fa-circle hover:cursor-pointer"></i>
                                             <a href="{{ lesson.url }}" class="{% if page.url == lesson.url %}text-primary-700 font-medium currentLesson{% endif %}">
                                                 {{ lesson.data.lesson_name }}
                                             </a>
diff --git a/public/css/tailwind.css b/public/css/tailwind.css
index adeebb5..bb96d5c 100644
--- a/public/css/tailwind.css
+++ b/public/css/tailwind.css
@@ -1940,21 +1940,6 @@ h4 {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-red-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
-}
-
 .bg-yellow-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
@@ -2262,6 +2247,11 @@ h4 {
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
 .text-slate-800 {
   --tw-text-opacity: 1;
   color: rgb(30 41 59 / var(--tw-text-opacity));
@@ -2272,9 +2262,14 @@ h4 {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-slate-600 {
+.text-green-400 {
   --tw-text-opacity: 1;
-  color: rgb(71 85 105 / var(--tw-text-opacity));
+  color: rgb(74 222 128 / var(--tw-text-opacity));
+}
+
+.text-green-700 {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
 }
 
 .underline {
@@ -3553,6 +3548,10 @@ code {
   content: var(--tw-content);
 }
 
+.hover\:cursor-pointer:hover {
+  cursor: pointer;
+}
+
 .hover\:bg-blue-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));
diff --git a/src/courses/essential-sql/essential-sql.11tydata.js b/src/courses/essential-sql/essential-sql.11tydata.js
index f5cb2d6..bfd0605 100644
--- a/src/courses/essential-sql/essential-sql.11tydata.js
+++ b/src/courses/essential-sql/essential-sql.11tydata.js
@@ -1,5 +1,5 @@
 module.exports = {
-	course_id: "basic-sql",
+	course_id: "essential-sql",
 	course_name: "Basic SQL for Beginners",
-	course_slug: "basic-sql",
+	course_slug: "essential-sql",
 };