props
  pages: { title: string; href: string; description?: string; date?: string; updated?: string; banner?: string; bannerStyle?: string; articleClass?: string; draft?: boolean; categories?: { name: string; href: string; description?: string }[] }[]
div.article-list
  each page in pages
    article(class=page.articleClass style=page.bannerStyle)
      if page.banner
        a.open-post(href=page.href aria-label=page.title)
          img.has-alpha.no-hover(src=page.banner decoding="async" loading="lazy")
      div
        a(href=page.href)
          h3= page.title
        if page.description
          div.description
            != page.description
        div.article-details(data-slot="article-details")
          div.items
            if page.date
              div.item
                i.ph.ph-calendar(aria-hidden="true")
                time(datetime=page.date pubdate)= page.date
            if page.updated
              div.item
                i.ph.ph-clock-clockwise(aria-hidden="true")
                time(datetime=page.updated pubdate)= page.updated
            if page.categories
              div.item
                i.ph.ph-book-bookmark(aria-hidden="true")
                each category in page.categories
                  a(href=category.href title=category.description)= category.name