From b75b59aad5c4f2682b1770b20f807d2df1c9303b Mon Sep 17 00:00:00 2001
From: Ben Visness <ben@bvisness.me>
Date: Mon, 31 Oct 2022 17:39:19 -0500
Subject: [PATCH] Add highlight to currently-selected education course

---
 public/style.css                       |  7 +++++++
 src/rawdata/scss/_education.scss       |  6 ++++++
 src/templates/src/education_index.html | 24 ++++++++++++++++++++++++
 3 files changed, 37 insertions(+)

diff --git a/public/style.css b/public/style.css
index e3d2af4..d8949a9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -8306,6 +8306,13 @@ nav.timecodes {
   text-align: center;
   margin: 10px 0; }
 
+.edu-course.highlight {
+  border-left: 0.25rem solid black;
+  border-color: #666;
+  border-color: var(--link-color);
+  background-color: #ccc;
+  background-color: var(--theme-color-dimmest); }
+
 .edu-course .edu-article.coming-soon {
   font-style: italic; }
 
diff --git a/src/rawdata/scss/_education.scss b/src/rawdata/scss/_education.scss
index c51dc42..35e59fd 100644
--- a/src/rawdata/scss/_education.scss
+++ b/src/rawdata/scss/_education.scss
@@ -1,4 +1,10 @@
 .edu-course {
+    &.highlight {
+        border-left: 0.25rem solid black;
+        @include usevar(border-color, link-color);
+        @include usevar(background-color, theme-color-dimmest);
+    }
+
     .edu-article.coming-soon {
         @extend .c--dimmer;
         font-style: italic;
diff --git a/src/templates/src/education_index.html b/src/templates/src/education_index.html
index 5876855..baeb76f 100644
--- a/src/templates/src/education_index.html
+++ b/src/templates/src/education_index.html
@@ -85,5 +85,29 @@
             <div><a href="{{ .NewArticleUrl }}"><span class="big pr1">+</span> New Article</a></div>
         </div>
     {{ end }}
+
+    <script>
+        function highlightHash(hash) {
+            if (!hash) {
+                return;
+            }
+
+            const courses = document.querySelectorAll('.edu-course');
+            for (const course of courses) {
+                course.classList.remove('highlight');
+            }
+            const selectedCourse = document.querySelector(hash);
+            if (selectedCourse) {
+                selectedCourse.classList.add('highlight');
+            }
+        }
+        highlightHash(window.location.hash);
+
+        for (const a of document.querySelectorAll('a.edu-topic')) {
+            a.addEventListener('click', e => {
+                highlightHash(e.target.closest('a').hash);
+            });
+        }
+    </script>
 </div>
 {{ end }}