troylusty.com/src/components/Article.astro

89 lines
2.5 KiB
Text
Raw Normal View History

2024-12-23 21:18:55 +00:00
---
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";
2024-12-23 21:18:55 +00:00
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}
>
<div class="mx-auto mb-8">
2024-12-23 21:18:55 +00:00
<h1
class="animate-reveal text-start text-2xl font-semibold break-words opacity-0"
2024-12-23 21:18:55 +00:00
>
<span class="text-secondary">{article.data.title}</span><span
class="text-tertiary ml-2">{article.data.description}</span
>
2024-12-23 21:18:55 +00:00
</h1>
<div
2025-02-09 14:40:16 +00:00
class="animate-reveal text-tertiary mt-4 flex flex-row flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s]"
2024-12-23 21:18:55 +00:00
>
2024-12-28 16:19:26 +00:00
<div class="flex items-center gap-2">
<Icon name="mdi:calendar" />
{
datesMatch ? (
<p title="Date">
<FormattedDate date={article.data.date} />
</p>
) : (
<>
2024-12-23 21:18:55 +00:00
<p title="Date">
<FormattedDate date={article.data.date} />
</p>
2024-12-28 16:19:26 +00:00
<Icon name="mdi:trending-up" />
<p title="Updated">
<FormattedDate date={article.data.updated} />
</p>
</>
)
2024-12-23 21:18:55 +00:00
}
</div>
2024-12-28 16:19:26 +00:00
{
isPost ? (
<div class="flex items-center gap-2">
<Icon name="mdi:timer" />
<p title="Word count">{readingTime(article.body)}</p>
</div>
) : null
}
2024-12-23 21:18:55 +00:00
{
article.data.extraAuthors ? (
2024-12-28 16:19:26 +00:00
<div class="flex items-center gap-2">
<Icon name="mdi:account-plus" />
2025-02-09 14:40:16 +00:00
<p title="Collaborators">
2024-12-23 21:18:55 +00:00
{listFormatter.format(article.data.extraAuthors)}
</p>
</div>
) : null
}
</div>
</div>
<div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
2024-12-23 21:18:55 +00:00
<Prose>
<Content />
</Prose>
</div>
<RelatedArticles entry={article} />
2024-12-23 21:18:55 +00:00
</Layout>