troylusty.com/src/components/Article.astro

---
import Layout from "@layouts/Layout.astro";
import Prose from "@components/Prose.astro";
import FormattedDate from "@components/FormattedDate.astro";
import { readingTime } from "@lib/utils";
import { Icon } from "astro-icon/components";
import RelatedArticles from "@components/RelatedArticles.astro";

const { article, isPost = false } = Astro.props;
const { Content } = await article.render();

let datesMatch = false;
if (article.data.date.getTime() == article.data.updated?.getTime()) {
  datesMatch = true;
}

const listFormatter = new Intl.ListFormat("en-GB", {
  style: "long",
  type: "conjunction",
});
---

<Layout
  title={article.data.title}
  description={article.data.description}
  image={article.data.image.url.src}
  date={article.data.date}
  updated={article.data.updated}
  tags={article.data.tags}
>
  <h1
    class="animate-reveal text-start text-3xl font-semibold break-words opacity-0"
  >
    <span class="text-secondary">{article.data.title}</span><span
      class="text-tertiary ml-2">{article.data.description}</span
    >
  </h1>
  <div
    class="animate-reveal text-tertiary flex flex-row flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s]"
  >
    <div class="flex items-center gap-2">
      <Icon name="mdi:calendar" />
      {
        datesMatch ? (
          <p title="Date">
            <FormattedDate date={article.data.date} />
          </p>
        ) : (
          <>
            <p title="Date">
              <FormattedDate date={article.data.date} />
            </p>
            <Icon name="mdi:trending-up" />
            <p title="Updated">
              <FormattedDate date={article.data.updated} />
            </p>
          </>
        )
      }
    </div>
    {
      isPost ? (
        <div class="flex items-center gap-2">
          <Icon name="mdi:timer" />
          <p title="Word count">{readingTime(article.body)}</p>
        </div>
      ) : null
    }
    {
      article.data.extraAuthors ? (
        <div class="flex items-center gap-2">
          <Icon name="mdi:account-plus" />
          <p title="Collaborators">
            {listFormatter.format(article.data.extraAuthors)}
          </p>
        </div>
      ) : null
    }
  </div>
  <div
    class="animate-reveal mx-auto max-w-full opacity-0 [animation-delay:0.2s]"
  >
    <Prose>
      <Content />
    </Prose>
  </div>
  <RelatedArticles entry={article} />
</Layout>