87 lines
2.1 KiB
Plaintext
87 lines
2.1 KiB
Plaintext
---
|
|
import type { CollectionEntry } from 'astro:content';
|
|
import RootLayout from '../layouts/RootLayout.astro';
|
|
import FormattedDate from '../components/FormattedDate.astro';
|
|
import NotchedBox from '../components/NotchedBox.astro';
|
|
import { Image } from 'astro:assets';
|
|
|
|
type Props = CollectionEntry<'blog'>['data'] & { slug: string; };
|
|
|
|
const { slug, title, description, pubDate, updatedDate, heroImage, tags } = Astro.props;
|
|
---
|
|
|
|
<style>
|
|
.byline {
|
|
color: var(--color-gray);
|
|
}
|
|
.title {
|
|
margin-top: 1em;
|
|
|
|
h1 {
|
|
margin: 0;
|
|
}
|
|
}
|
|
.permalink {
|
|
color: var(--color-gray);
|
|
font-size: 80%;
|
|
}
|
|
|
|
.dt-published {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 16px;
|
|
|
|
a {
|
|
color: var(--color-gray);
|
|
}
|
|
}
|
|
</style>
|
|
<RootLayout title={title} description={description}>
|
|
<NotchedBox fillNotches="left">
|
|
<article class="h-entry">
|
|
<div class="hero-image">
|
|
{heroImage && <Image width={1020} height={510} src={heroImage} alt="" />}
|
|
</div>
|
|
<div class="prose">
|
|
<div class="byline">
|
|
<div>
|
|
<time class="dt-published">{ pubDate && <FormattedDate date={pubDate} /> }</time>
|
|
by
|
|
<a class="p-author h-card u-url" href="https://www.blazestar.net">Periodic</a>
|
|
</div>
|
|
<div>
|
|
<a class="permalink u-url" href={`https://blazestar.net/blog/${slug}`}>Permalink</a>
|
|
</div>
|
|
{
|
|
updatedDate && (
|
|
<div class="last-updated-on dt-updated">
|
|
Last updated on <FormattedDate date={updatedDate} />
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
<div class="title">
|
|
<h1 class="p-name">{title}</h1>
|
|
</div>
|
|
{ tags &&
|
|
<div class="tags">
|
|
{
|
|
tags.map(tag =>
|
|
<a href={`/blog/tag/${tag}`} >#{tag}</a>
|
|
)
|
|
}
|
|
</div>
|
|
}
|
|
<hr />
|
|
<div class="e-content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</NotchedBox>
|
|
</RootLayout>
|