118 lines
2.4 KiB
Plaintext
118 lines
2.4 KiB
Plaintext
---
|
|
import { toMilitaryDTG } from '@/lib/content/dates'
|
|
import { getSite } from '@/lib/site'
|
|
import type { Article } from '@/lib/site/types'
|
|
|
|
type Props = {
|
|
article: Article
|
|
}
|
|
|
|
const { article } = Astro.props
|
|
const site = await getSite()
|
|
const tags = article.tags.map((id) => site.tags.get(id)).filter((tag) => tag !== undefined)
|
|
const date = article.updated ?? article.published
|
|
const label = article.updated ? 'Updated' : 'Published'
|
|
const machine = date?.toISOString()
|
|
const display = date && toMilitaryDTG(date)
|
|
---
|
|
|
|
<dl class="meta">
|
|
<div class="section">
|
|
<dt class="label">Author</dt>
|
|
<dd class="item">Dave Damage</dd>
|
|
</div>
|
|
{tags.length > 0 && (
|
|
<div class="section">
|
|
<dt class="label">Tags</dt>
|
|
<dd>
|
|
<ul class="tags">
|
|
{tags.map((tag) => (
|
|
<li class="tag">
|
|
<a href={tag.path} rel="tag">
|
|
{tag.title}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
)}
|
|
{display && (
|
|
<div class="section">
|
|
<dt class="label">{label}</dt>
|
|
<dd>
|
|
<time class="item" datetime={machine}>
|
|
{display}
|
|
</time>
|
|
</dd>
|
|
</div>
|
|
)}
|
|
</dl>
|
|
|
|
<style>
|
|
.meta {
|
|
@mixin layout-wrapper;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-8);
|
|
align-items: baseline;
|
|
}
|
|
|
|
.section {
|
|
@mixin py var(--size-4);
|
|
|
|
flex: 1 0 auto;
|
|
min-width: 12ch;
|
|
}
|
|
|
|
.item {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--type-0);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking--3);
|
|
}
|
|
|
|
.label {
|
|
@mixin mb var(--size-2);
|
|
@mixin pb var(--size-2);
|
|
@mixin border-b 2px, solid, var(--color-border-strong);
|
|
|
|
display: block;
|
|
|
|
font-family: var(--font-header);
|
|
font-size: var(--type--2);
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking--2);
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-2);
|
|
}
|
|
|
|
.tag a {
|
|
@mixin py var(--size-1);
|
|
@mixin px var(--size-3);
|
|
|
|
display: block;
|
|
|
|
font-family: var(--font-mono);
|
|
font-size: var(--type--1);
|
|
color: var(--color-text-inverse);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking--3);
|
|
|
|
background-color: var(--color-surface-inverse);
|
|
}
|
|
|
|
.tag a:hover,
|
|
.tag a:focus-visible {
|
|
color: var(--color-surface-inverse);
|
|
background-color: var(--color-primary);
|
|
}
|
|
</style>
|