Tracks: subsets of the course that you can follow

Author: fonsp

src/_includes/layout.jlhtml

@@ -82,6 +82,20 @@ $(pluto_head)
                     </form>
                 </div>
             </li>
+            <li>
+                <div class="track-chooser">
+                    <label>
+                    <h2>Choose your track:</h2>
+                    <select>
+                        <option value="">Choose...</option>
+                        <option value="julia">💻 Julia programming</option>
+                        <option value="math">🎨 Mathematics</option>
+                        <option value="climate">🌎 Climate science</option>
+                        <option value="data">📊 Data science</option>
+                    </select>
+                    </label>
+                </div>
+            </li>
         $(let
             sidebar_data = Base.include(@__MODULE__, joinpath(@__DIR__, "..", "sidebar data.jl"))
             sections = sidebar_data["main"]
@@ -100,22 +114,23 @@ $(pluto_head)
 
                         name = get(output.frontmatter, "title", basename(input.relative_path))
                         desc = get(output.frontmatter, "description", nothing)
+                        tags = get(output.frontmatter, "tags", String[])
                         active = page.url == other_page.url
 
                         homework_number = get(output.frontmatter, "homework_number", nothing)
 
                         href = root_url * "/" * other_page.url
+
+                        class = [
+                            active ? "active" : nothing,
+                            homework_number === nothing ? "lecture" : "homework",
+                            ("tag_$(replace(x, " "=>"_"))" for x in tags)...,
+                        ]
 
                         if homework_number === nothing
-                            @htl("""<li class=$([
-                                active ? "active" : nothing,
-                                "lecture",
-                            ])><a href=$(href) title=$(desc)><span class="entry-number">$(number)</span> $(name)</a></li>""")
+                            @htl("""<li class=$(class)><a href=$(href) title=$(desc)><span class="entry-number">$(number)</span> $(name)</a></li>""")
                         else
-                            @htl("""<li class=$([
-                                active ? "active" : nothing,
-                                "homework",
-                            ])><a href=$(href) title=$(desc)><span class="entry-number">Homework $(homework_number):</span> $(name)</a></li>""")
+                            @htl("""<li class=$(class)><a href=$(href) title=$(desc)><span class="entry-number">Homework $(homework_number):</span> $(name)</a></li>""")
                         end
                     end for other_page in pages
                 ])

src/_includes/welcome.md

@@ -87,11 +87,16 @@ layout: "layout.jlhtml"
                             
                             name = get(output.frontmatter, "title", basename(input.relative_path))
                             desc = get(output.frontmatter, "description", nothing)
-                            active = page.url == other_page.url
+                            tags = get(output.frontmatter, "tags", String[])
                             
                             image = get(output.frontmatter, "image", nothing)
                             
-                            image === nothing || isempty(image) ? nothing : @htl("""<a title=$(desc) class="no-decoration" href=$(root_url * "/" * other_page.url)>
+                            class = [
+                                "no-decoration",
+                                ("tag_$(replace(x, " "=>"_"))" for x in tags)...,
+                            ]
+                            
+                            image === nothing || isempty(image) ? nothing : @htl("""<a title=$(desc) class=$(class) href=$(root_url * "/" * other_page.url)>
                                 <h3>$(name)</h3>
                                 <img src=$(image)>
                             </a>""")

src/assets/scripts/sidebar.js

@@ -16,3 +16,23 @@ window.addEventListener("click", function (e) {
 
 console.info("zzzz")
 console.info(layout)
+
+document.querySelectorAll(".track-chooser select").forEach((trackSelect) => {
+    console.log(trackSelect)
+    const ontrack = () => {
+        let track = trackSelect.value
+
+        localStorage.setItem("chosen track", track)
+
+        let lectures_homeworks = Array.from(sidebar.querySelectorAll(".lecture,.homework"))
+
+        lectures_homeworks.forEach((el) => {
+            let intrack = track === "" || el.classList.contains(`tag_track_${track}`) || el.classList.contains(`tag_welcome`)
+            el.classList.toggle("not_in_track", !intrack)
+        })
+    }
+
+    trackSelect.value = localStorage.getItem("chosen track")
+    ontrack()
+    trackSelect.addEventListener("change", ontrack)
+})

src/assets/styles/index.css

@@ -25,6 +25,9 @@
     --sidebar-accent-1: #c89393;
     --search-bg: hsl(78deg 10% 85%);
     --search-bg-accent: #f4f4f5;
+
+    --track-bg: hsl(56 50% 94% / 1);
+    --track-bg-accent: #a3987c;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -33,9 +36,12 @@
         --faded-1: #b3b3b3;
         --faded-2: #999999;
 
-        --sidebar-accent-1: #8b736a;
+        --sidebar-accent-1: #d0a493;
         --search-bg: #363b33;
         --search-bg-accent: #4d6542;
+
+        --track-bg: #545346;
+        --track-bg-accent: #dad1b9;
     }
 }
 

src/assets/styles/layout.css

@@ -200,6 +200,40 @@
 #pages-sidebar li li:hover a {
     background-color: var(--sidebar-li-hover-bg);
 }
+#pages-sidebar li li.not_in_track {
+    opacity: 0.4;
+}
+
+/* TRACK CHOOSER */
+
+.track-chooser {
+    margin-top: 3em;
+    padding: 0.5em;
+    border: 3px solid var(--track-bg-accent);
+    background: var(--track-bg);
+    color: var(--fg);
+    border-radius: 0.3em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.track-chooser h2:not(#asdf) {
+    font-weight: 900;
+    font-family: sans-serif;
+    font-style: normal;
+    font-size: 1.2rem;
+    margin-block-end: 0.3em;
+    margin-block-start: 0;
+}
+
+.track-chooser label {
+    display: contents;
+}
+
+.track-chooser select {
+    max-width: 100%;
+}
 
 /* SIDEBAR LOGO */