Skip to content

Commit

Permalink
feat: track progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesx00
jamesx00 committed Dec 19, 2024
1 parent 5deca33 commit 10c4720
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 30 deletions.
15 changes: 11 additions & 4 deletions _includes/layouts/course.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
22 changes: 15 additions & 7 deletions _includes/layouts/lesson.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
33 changes: 16 additions & 17 deletions public/css/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down Expand Up @@ -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));
Expand All @@ -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 {
Expand Down Expand Up @@ -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));
Expand Down
4 changes: 2 additions & 2 deletions src/courses/essential-sql/essential-sql.11tydata.js
View file
Original file line number Diff line number Diff line change
@@ -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",
};

0 comments on commit 10c4720

Please sign in to comment.