include homeworks in sidebar

Author: fonsp

src/_includes/layout.jlhtml

@@ -98,9 +98,21 @@ $(pluto_head)
                         desc = get(output.frontmatter, "description", nothing)
                         active = page.url == other_page.url
 
-                        @htl("""<li class=$([
-                            active ? "active" : nothing,
-                        ])><a href=$(root_url * "/" * other_page.url) title=$(desc)>$(number) $(name)</a></li>""")
+                        homework_number = get(output.frontmatter, "homework_number", nothing)
+                        
+                        href = root_url * "/" * other_page.url
+                        
+                        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>""")
+                        else
+                            @htl("""<li class=$([
+                                active ? "active" : nothing,
+                                "homework",
+                            ])><a href=$(href) title=$(desc)><span class="entry-number">Homework $(homework_number):</span> $(name)</a></li>""")
+                        end
                     end for other_page in pages
                 ])
                 </ul>
@@ -129,7 +141,7 @@ $(pluto_head)
         </div>
         </nav>
         <div id="pages-content">
-           $(any(contains("module"), f("tags", String[])) ? @htl("""
+           $(any(contains("lecture"), f("tags", String[])) ? @htl("""
            <div class="lecture-header" >
                 <p class="number">Section $(f("chapter", "-")).$(f("section", "-"))</p>
                 <h1>$(

src/assets/styles/layout.css

@@ -175,13 +175,42 @@
     align-items: stretch;
 }
 
+
+#pages-sidebar li li.homework {
+    padding-left: 1ch;
+    /* background: yellow; */
+}
+
+#pages-sidebar li li a {
+    margin: .2em 0;
+}
+
+#pages-sidebar li li.homework a {
+    /* background: #ffb60012; */
+    margin: 0.4em 0px;
+    outline: 3px dashed #92929278;
+    outline-offset: -1px;
+}
+
+/* #pages-sidebar li li.homework a::before {
+    content: "👉 ";
+} */
+
+#pages-sidebar li li span.entry-number {
+    opacity: .6;
+}
+#pages-sidebar li li.homework span.entry-number {
+    display: block;
+}
+
 #pages-sidebar li li.active a {
     background-color: var(--sidebar-li-active-bg);
 }
 #pages-sidebar li li:hover a {
     background-color: var(--sidebar-li-hover-bg);
 }
 
+
 /* SIDEBAR LOGO */
 
 #pages-sidebar .home_link img {

src/homework.md

@@ -1,6 +1,16 @@
 ### A Pluto.jl notebook ###
 # v0.19.14
 
+#> [frontmatter]
+#> chapter = 1
+#> section = 2.5
+#> order = 2.5
+#> homework_number = 1
+#> title = "Images and Arrays"
+#> layout = "layout.jlhtml"
+#> description = "Practice Julia basics by working with arrays of colors. At the end of this homework, you can see all of your filters applied to your webcam image!"
+#> tags = ["homework", "module1"]
+
 using Markdown
 using InteractiveUtils
 

src/week1/hw1.jl

@@ -1,6 +1,16 @@
 ### A Pluto.jl notebook ###
 # v0.19.14
 
+#> [frontmatter]
+#> chapter = 3
+#> section = 1.5
+#> order = 1.5
+#> homework_number = 9
+#> title = "Epidemic modeling III"
+#> layout = "layout.jlhtml"
+#> tags = ["homework", "module3"]
+#> description = "In this problem set, we will look at a simple spatial agent-based epidemic model: agents can interact only with other agents that are nearby."
+
 using Markdown
 using InteractiveUtils
 

src/week10/hw9.jl

@@ -1,6 +1,16 @@
 ### A Pluto.jl notebook ###
 # v0.19.14
 
+#> [frontmatter]
+#> chapter = 3
+#> section = 7.5
+#> order = 7.5
+#> homework_number = 10
+#> title = "Climate modeling I"
+#> layout = "layout.jlhtml"
+#> tags = ["homework", "module3"]
+#> description = "Play around with an energy balance model of the climate system, to explore the effect of doubling CO₂, and to examine the 'snowball earth' phenomenon."
+
 using Markdown
 using InteractiveUtils