feat: Adds sidebar to articles view.

Sources/Docs/Templates/ArticleGrid.swift

@@ -2,6 +2,8 @@ import Foundation
 import HTML
 import Saga
 
+// TODO: Try a sidebar with navigation to tags & years.
+
 /// Displays lists of articles sectioned by a key.
 ///
 ///
@@ -33,6 +35,29 @@ struct ArticleGrid: NodeConvertible {
     self.header = header
   }
 
+  private var allItems: [Item<ArticleMetadata>] {
+    articles.reduce(into: [Item<ArticleMetadata>]()) { $0 += $1.value }
+  }
+
+  private var sortedYears: [String] {
+    allItems.years().sorted { $0 > $1 }
+  }
+
+  private var sortedTags: [String] {
+    allItems.uniqueTags().sorted { $0 < $1 }
+  }
+
+  private func sidebarLink(
+    _ label: String,
+    href: String,
+  ) -> Node {
+    a(class: "text-slate-300 font-semibold [&:hover]:text-slate-200", href: href) {
+      div(class: "flex w-full p-2 [&:hover]:border-b border-orange-400") {
+        span(class: "mx-8") { label }
+      }
+    }
+  }
+
   func asNode() -> Node {
     baseLayout(
       canocicalURL: canocicalURL,
@@ -41,12 +66,37 @@ struct ArticleGrid: NodeConvertible {
       rssLink: rssLink,
       extraHeader: extraHeader
     ) {
-      div(class: "mt-8 mb-10 bg-slate-800 border border-slate-200 rounded-lg") {
-        articles.map { key, articles in
-          section {
-            header(key)
-            div(class: "grid gap-10 mx-6 mb-16") {
-              articles.map(renderArticle)
+      div(class: "grid grid-cols-4 mt-10 mb-10") {
+        // Sidebar
+        div(class: "overflow-auto bg-slate-800 rounded-l-lg border border-slate-200") {
+          // Years
+          section(class: "pt-2") {
+            div(class: "flex ps-2") {
+              span(class: "mt-2 ps-2 font-extrabold text-slate-400") { "YEARS" }
+            }
+            sortedYears.map { year in
+              sidebarLink(year, href: "/articles/\(year)")
+            }
+          }
+          // Tags
+          section(class: "pt-2") {
+            div(class: "flex ps-2 pt-2") {
+              span(class: "mt-2 ps-2 font-extrabold text-slate-400") { "TAGS" }
+            }
+            sortedTags.map { tag in
+              sidebarLink(tag, href: "/articles/tag/\(tag)")
+            }
+          }
+        }
+
+        // Articles
+        div(class: "col-span-3 bg-slate-800 border border-slate-200 rounded-r-lg") {
+          articles.map { key, articles in
+            section {
+              header(key)
+              div(class: "grid gap-10 mx-6 mb-16") {
+                articles.map(renderArticle)
+              }
             }
           }
         }