mirror of
https://github.com/sern-handler/website
synced 2026-06-28 02:32:23 +00:00
71 lines
1.3 KiB
Plaintext
71 lines
1.3 KiB
Plaintext
---
|
|
import { getBlogEntryMetadata, type StarlightBlogEntry } from '../libs/content'
|
|
|
|
import Author from './Author.astro'
|
|
|
|
interface Props {
|
|
entry: StarlightBlogEntry
|
|
showBadges?: boolean
|
|
}
|
|
|
|
const { entry, showBadges = true } = Astro.props
|
|
const { authors, date } = getBlogEntryMetadata(entry)
|
|
|
|
const hasAuthors = authors.length > 0
|
|
---
|
|
|
|
<div class="metadata not-content">
|
|
<time datetime={entry.data.date.toISOString()}>
|
|
{date}
|
|
</time>
|
|
{
|
|
hasAuthors ? (
|
|
<div class="authors">
|
|
{authors.map((author) => (
|
|
<Author {author} />
|
|
))}
|
|
</div>
|
|
) : null
|
|
}
|
|
{
|
|
showBadges && entry.data?.draft && (
|
|
<div class="badges">
|
|
<span class="draft">Draft</span>
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
|
|
<style>
|
|
.metadata {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
time {
|
|
font-size: var(--sl-text-sm);
|
|
}
|
|
|
|
.authors {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem 1rem;
|
|
}
|
|
|
|
.badges {
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.draft {
|
|
background-color: var(--sl-color-orange-low);
|
|
border: 1px solid var(--sl-color-orange);
|
|
border-radius: 0.3rem;
|
|
color: var(--sl-color-orange-high);
|
|
font-size: var(--sl-text-body-sm);
|
|
line-height: var(--sl-line-height-headings);
|
|
margin-inline: 0.2rem;
|
|
padding: 0.25rem 0.5rem 0.35rem;
|
|
}
|
|
</style>
|