feat: Unifies article lists to have similar view styles.

Sources/Docs/Templates/ArticleGrid.swift

@@ -0,0 +1,56 @@
+import Foundation
+import HTML
+import Saga
+
+/// Displays lists of articles sectioned by a key.
+///
+///
+struct ArticleGrid: NodeConvertible {
+
+  let articles: [(key: String, value: [Item<ArticleMetadata>])]
+  let canocicalURL: String
+  let title: String
+  let rssLink: String
+  let extraHeader: NodeConvertible
+  let renderArticle: (Item<ArticleMetadata>) -> Node
+  let header: (String) -> Node
+
+  init(
+    articles: [(key: String, value: [Item<ArticleMetadata>])],
+    canocicalURL: String,
+    title: String,
+    rssLink: String,
+    extraHeader: any NodeConvertible = Node.fragment([]),
+    renderArticle: @escaping (Item<ArticleMetadata>) -> Node = { renderArticleForGrid(article: $0, border: false) },
+    header: @escaping (String) -> Node
+  ) {
+    self.articles = articles
+    self.canocicalURL = canocicalURL
+    self.title = title
+    self.rssLink = rssLink
+    self.extraHeader = extraHeader
+    self.renderArticle = renderArticle
+    self.header = header
+  }
+
+  func asNode() -> Node {
+    baseLayout(
+      canocicalURL: canocicalURL,
+      section: .articles,
+      title: title,
+      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)
+            }
+          }
+        }
+      }
+    }
+  }
+}

Sources/Docs/Templates/BaseLayout.swift

@@ -24,7 +24,7 @@ func baseLayout(
       body(class: "text-white text-lg font-avenir \(section.rawValue)") {
         siteHeader(section)
 
-        div(class: "mb-auto\(section == .articles ? " mx-10" : "")") {
+        div(class: "mb-auto mx-10") {
           children()
         }
         if section == .articles {
@@ -57,7 +57,7 @@ private func siteHeader(_ section: Section) -> Node {
           }
         }
       }
-      div(class: "font-avenir w-full pt-4", id: "search") {}
+      div(class: "font-avenir w-full pt-4 px-8", id: "search") {}
     }
   }
 }

Sources/Docs/Templates/RenderArticles.swift

@@ -2,32 +2,24 @@ import Foundation
 import HTML
 import Saga
 
-func renderArticles(context: ItemsRenderingContext<ArticleMetadata>) -> Node {
+func renderArticles(context: ItemsRenderingContext<ArticleMetadata>) -> NodeConvertible {
   let dateFormatter = DateFormatter()
   dateFormatter.dateFormat = "yyyy"
 
   let articlesPerYear = Dictionary(grouping: context.items, by: { dateFormatter.string(from: $0.date) })
   let sortedByYearDescending = articlesPerYear.sorted { $0.key > $1.key }
 
-  return baseLayout(canocicalURL: "/articles/", section: .articles, title: "Articles", rssLink: "", extraHeader: "") {
-    sortedByYearDescending.map { year, articles in
-      div(class: "mt-8 mb-10 bg-slate-800 border border-slate-200 rounded-lg") {
-        TagGrid(items: context.items)
-        div(class: "border-b border-light pt-6 w-full") {
-          div(class: "px-6 flex flex-row gap-4 ") {
-            img(src: "/static/img/calendar.svg", width: "40")
-            h1(class: "text-4xl font-extrabold pt-3") { year }
-          }
-        }
-        div(class: "grid gap-10 mx-6 mb-16") {
-          articles.map { renderArticleForGrid(article: $0, border: false) }
-        }
-      }
-    }
-  }
+  return ArticleGrid(
+    articles: sortedByYearDescending,
+    canocicalURL: "/articles/",
+    title: "Articles",
+    rssLink: "",
+    extraHeader: "",
+    header: yearHeader(_:)
+  )
 }
 
-func renderTag<T>(context: PartitionedRenderingContext<T, ArticleMetadata>) -> Node {
+func renderTag<T>(context: PartitionedRenderingContext<T, ArticleMetadata>) -> NodeConvertible {
   let extraHeader = link(
     href: "/articles/tag/\(context.key.slugified)/feed.xml",
     rel: "alternate",
@@ -36,54 +28,67 @@ func renderTag<T>(context: PartitionedRenderingContext<T, ArticleMetadata>) -> N
   )
 
   return baseRenderArticles(
-    context.items,
+    (context.key.slugified, context.items),
     canocicalURL: "/articles/tag/\(context.key.slugified)/",
     title: "Articles in \(context.key)",
     rssLink: "tag/\(context.key.slugified)/",
     extraHeader: extraHeader
-  ) {
-    div(class: "border-b border-light grid lg:grid-cols-2 mb-12") {
+  ) { tag in
+    div(class: "border-b border-light mb-12 px-6 pt-6") {
       a(href: "/articles") {
-        div(class: "flex flex-row gap-2") {
+        div(class: "flex flex-row gap-4") {
           img(src: "/static/img/tag.svg", width: "40")
-          h1(class: "text-4xl font-extrabold") { "\(context.key)" }
-          h1(class: "[&:hover]:border-b border-green text-2xl font-extrabold text-orange px-4") { "«" }
+          h1(class: "text-4xl font-extrabold") { tag }
+          h1(class: "text-2xl font-extrabold") { "«" }
         }
       }
     }
   }
 }
 
-func renderYear<T>(context: PartitionedRenderingContext<T, ArticleMetadata>) -> Node {
-  baseRenderArticles(context.items, canocicalURL: "/articles/\(context.key)/", title: "Articles in \(context.key)")
+func renderYear<T>(context: PartitionedRenderingContext<T, ArticleMetadata>) -> NodeConvertible {
+  baseRenderArticles(
+    (context.key.slugified, context.items),
+    canocicalURL: "/articles/\(context.key)/",
+    title: "Articles in \(context.key)",
+    label: { year in
+      div(class: "border-b border-light pt-6 w-full") {
+        a(href: "/articles/") {
+          div(class: "px-6 flex flex-row gap-4 ") {
+            img(src: "/static/img/calendar.svg", width: "40")
+            h1(class: "text-4xl font-extrabold pt-3") { year }
+            h1(class: "text-2xl font-extrabold") { "«" }
+          }
+        }
+      }
+    }
+  )
+}
+
+private func yearHeader(_ year: String) -> Node {
+  div(class: "border-b border-light pt-6 w-full") {
+    div(class: "px-6 flex flex-row gap-4 ") {
+      img(src: "/static/img/calendar.svg", width: "40")
+      h1(class: "text-4xl font-extrabold pt-3") { year }
+    }
+  }
 }
 
 private func baseRenderArticles(
-  _ articles: [Item<ArticleMetadata>],
+  _ articles: (key: String, value: [Item<ArticleMetadata>]),
   canocicalURL: String,
   title pageTitle: String,
   rssLink: String = "",
   extraHeader: NodeConvertible = Node.fragment([]),
-  @NodeBuilder label: () -> Node = { Node.fragment([]) }
-) -> Node {
-  return baseLayout(
+  @NodeBuilder label: @escaping (String) -> Node = { _ in Node.fragment([]) }
+) -> NodeConvertible {
+  ArticleGrid(
+    articles: [articles],
     canocicalURL: canocicalURL,
-    section: .articles,
     title: pageTitle,
     rssLink: rssLink,
     extraHeader: extraHeader
-  ) {
-    label()
-    articles.map { article in
-      section {
-        h1(class: "text-2xl font-bold") {
-          a(class: "[&:hover]:border-b border-orange", href: article.url) { article.title }
-        }
-        renderArticleInfo(article)
-        p {
-          a(href: article.url) { article.summary }
-        }
-      }
-    }
+  ) { key in
+    label(key)
   }
 }