2023-04-19 19:18:50 +02:00
|
|
|
---
|
|
|
|
import type { CollectionEntry } from 'astro:content';
|
2023-04-26 10:23:17 +02:00
|
|
|
|
2023-05-10 22:44:00 +02:00
|
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
2023-04-19 19:18:50 +02:00
|
|
|
import FormattedDate from '../components/FormattedDate.astro';
|
|
|
|
|
|
|
|
type Props = CollectionEntry<'blog'>['data'];
|
|
|
|
|
2023-05-13 03:43:13 +02:00
|
|
|
const { title, description, pubDate, draft, tags, categories } = Astro.props;
|
|
|
|
const [category] = categories;
|
2023-04-19 19:18:50 +02:00
|
|
|
---
|
|
|
|
|
2023-05-10 22:44:00 +02:00
|
|
|
<BaseLayout title={title} description={description}>
|
|
|
|
<article>
|
|
|
|
<h1 class="title">{title}</h1>
|
2023-05-13 03:43:13 +02:00
|
|
|
<div id="metadata">
|
|
|
|
<p>date published: <FormattedDate date={pubDate} /></p>
|
|
|
|
<p>
|
|
|
|
category:
|
|
|
|
<span>
|
|
|
|
<a href={`/blog/categories/${encodeURIComponent(category)}`}
|
|
|
|
>{category}</a
|
|
|
|
>
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<span
|
|
|
|
set:html={'tags: ' +
|
|
|
|
tags
|
|
|
|
.map((tag) => `<a href="/blog/tags/${tag}">${tag}</a>`)
|
|
|
|
.join(', ')}
|
|
|
|
/>
|
|
|
|
{
|
|
|
|
draft && (
|
|
|
|
<div id="draft-warning">
|
|
|
|
<strong>
|
|
|
|
This is a draft! Its content is subject to change.
|
|
|
|
</strong>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
</p>
|
|
|
|
<slot />
|
|
|
|
</div>
|
2023-05-10 22:44:00 +02:00
|
|
|
</article>
|
|
|
|
|
2023-05-13 03:43:13 +02:00
|
|
|
<style>
|
2023-05-22 13:58:51 +02:00
|
|
|
h1.title {
|
|
|
|
line-height: 1.3;
|
|
|
|
margin-bottom: 1.5rem;
|
|
|
|
}
|
|
|
|
|
2023-05-13 03:43:13 +02:00
|
|
|
#metadata p {
|
|
|
|
margin-top: 0;
|
|
|
|
margin-bottom: 0.2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.title {
|
|
|
|
font-size: 2em;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
#metadata p,
|
|
|
|
#draft-warning,
|
|
|
|
.title {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</BaseLayout>
|