docs/Sources/Docs/Templates/RenderArticle.swift

import Foundation
import HTML
import Saga

func tagPrefix(index: Int, totalTags: Int) -> Node {
  if index > 0 {
    if index == totalTags - 1 {
      return " and "
    } else {
      return ", "
    }
  }
  return ""
}

enum RenderArticleInfoContext {
  case article
  case preview
}

func renderArticleInfo(_ article: Item<ArticleMetadata>, context: RenderArticleInfoContext = .article) -> Node {
  div(class: "text-slate-400 text-sm mb-8\(context == .preview ? " -mt-2" : "")") {
    span(class: "border-r border-gray pr-2 mr-2") {
      article.getDate().formatted("MMMM dd, yyyy")
    }

    if let updated = article.getUpdatedDate() {
      span(class: "border-r border-slate-400 pr-2 mr-2") {
        "Updated: \(updated.formatted("MMMM dd, yyyy"))"
      }
    }

    %.text("\(article.body.withoutHtmlTags.numberOfWords) words, posted in ")

    article.metadata.tags.sorted().enumerated().map { index, tag in
      Node.fragment([
        %tagPrefix(index: index, totalTags: article.metadata.tags.count),
        %a(class: "text-orange-400 [&:hover]:border-b border-green-400", href: "/articles/tag/\(tag.slugified)/") {
          tag
        }
      ])
    }
  }
}

func ogURL(_ article: Item<ArticleMetadata>) -> String {
  SiteMetadata.url
    .appendingPathComponent("/articles/images/\(article.url)")
    .absoluteString
}

private func parseOtherArticles(_ context: ItemRenderingContext<ArticleMetadata>) -> OtherArticles {
  let allArticles = context.allItems.compactMap { $0 as? Item<ArticleMetadata> }
  let otherArticles = allArticles
    .filter { $0.url != context.item.url }

  guard let primaryTag = context.item.getPrimaryTag() else {
    return .all(otherArticles)
  }

  return .related(
    tag: primaryTag,
    items: otherArticles.sorted { lhs, rhs in
      switch (lhs.metadata.tags.contains(primaryTag), rhs.metadata.tags.contains(primaryTag)) {
      case (true, false): return true
      default: return false
      }
    }
  )
}

private enum OtherArticles {
  case all([Item<ArticleMetadata>])
  case related(tag: String, items: [Item<ArticleMetadata>])

  var items: [Item<ArticleMetadata>] {
    switch self {
    case let .all(items): return items
    case let .related(_, items): return items
    }
  }

  var title: String {
    switch self {
    case .all: return "Recent Articles"
    case .related: return "Related Articles"
    }
  }

  var tag: String? {
    guard case let .related(tag, _) = self else { return nil }
    return tag
  }
}

func renderArticle(context: ItemRenderingContext<ArticleMetadata>) -> Node {
  let otherArticles = parseOtherArticles(context)

  return baseLayout(
    canocicalURL: context.item.url,
    section: .articles,
    title: context.item.title,
    extraHeader: generateHeader(.article(context.item))
  ) {
    article(class: "pt-8 mx-10") {
      div(class: "bg-slate-800 py-10") {
        div(class: "mx-10") {
          h1 { context.item.title }
          div {
            renderArticleInfo(context.item)
          }
          // Only index the body of the articles for search.
          div(customAttributes: ["data-pagefind-body": ""]) {
            Node.raw(context.item.body)
          }
        }
      }
    }

    div(class: "border-t border-light p-10 mt-16", id: "recents") {
      div(class: "grid lg:grid-cols-2") {
        h4(class: "text-3xl text-amber-500 font-extrabold mb-8") { otherArticles.title }
        if let tag = otherArticles.tag {
          a(href: "/articles/tag/\(tag)") {
            div(class: " [&:hover]:border-b border-green-500 px-5 flex flex-row gap-5") {
              img(class: "-mt-2", src: "/static/img/tag.svg", width: "40")
              div(class: "block") {
                div(class: "block") {
                  span(class: "mt-2 text-4xl font-extrabold text-orange") { tag }
                }
                div(class: "block") {
                  span(class: "text-sm text-orange-400") {
                    "View related articles with this tag."
                  }
                }
              }
            }
          }
        }
      }

      div(class: "grid lg:grid-cols-2 gap-10") {
        otherArticles.items.prefix(2).map { renderArticleForGrid(article: $0) }
      }

      div(class: "mt-10") {
        a(href: "/articles/") {
          div(class: "flex flex-row gap-2") {
            span(class: "mt-4") { "All Articles" }
            img(src: "/static/img/document.svg", width: "40")
          }
        }
      }
    }
  }
}

func renderArticleForGrid(article: Item<ArticleMetadata>, border: Bool = true) -> Node {
  // bg-slate-800
  div(class: "p-4\(border ? " border border-slate-400 rounded-lg" : "")") {
    section {
      h3(class: "text-2xl font-bold") {
        a(class: "[&:hover]:border-b border-green-500", href: article.url) { article.title }
      }
      renderArticleInfo(article, context: .preview)
      p {
        a(href: article.url) {
          div {
            article.summary
          }
        }
      }
    }
  }
}