feat: Unifies article lists to have similar view styles.
All checks were successful
CI / release (push) Successful in 5m36s

This commit is contained in:
2025-04-15 11:49:33 -04:00
parent def75c1e41
commit 9159ecc834
4 changed files with 108 additions and 47 deletions

View File

@@ -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)
}
}