93 lines
1.9 KiB
Plaintext
93 lines
1.9 KiB
Plaintext
---
|
|
import { toMilitaryDTG } from '@/lib/content/dates'
|
|
import { trailOf } from '@/lib/site/navigation'
|
|
import type { Article } from '@/lib/site/types'
|
|
|
|
type Props = {
|
|
article: Article
|
|
}
|
|
|
|
const { article } = Astro.props
|
|
|
|
const trail = trailOf(article)
|
|
---
|
|
|
|
<div class="overline dark">
|
|
<div class="wrapper">
|
|
{trail.length > 1 && (
|
|
<nav aria-label="Breadcrumb" class="breadcrumbs">
|
|
<ol>
|
|
{trail.map((step, index) => (
|
|
<li>
|
|
{index === trail.length - 1 ? (
|
|
<span aria-current="page">{step.title}</span>
|
|
) : (
|
|
<a href={step.path}>{step.title}</a>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</nav>
|
|
)}
|
|
{article.published ? (
|
|
<time class="publicationdate" datetime={article.published.toISOString()}>
|
|
{toMilitaryDTG(article.published)}
|
|
</time>
|
|
) : (
|
|
<span class="publicationdate">No publication date set</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.overline {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--type--1);
|
|
line-height: 1;
|
|
color: var(--color-text-secondary);
|
|
letter-spacing: var(--tracking-0);
|
|
|
|
background-color: var(--color-surface-elevated-2);
|
|
}
|
|
|
|
.wrapper {
|
|
@mixin layout-wrapper;
|
|
@mixin py var(--size-4);
|
|
|
|
display: flex;
|
|
gap: var(--size-4);
|
|
align-items: baseline;
|
|
justify-content: space-between; /* breadcrumbs left, date right */
|
|
}
|
|
|
|
.breadcrumbs {
|
|
& ol {
|
|
display: flex;
|
|
gap: var(--size-2);
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
list-style: none;
|
|
|
|
& li {
|
|
&:not(:last-child) {
|
|
&::after {
|
|
content: '⟫' / '';
|
|
margin-inline-start: var(--size-2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.publicationdate {
|
|
font-weight: 700;
|
|
|
|
&::before {
|
|
content: '⟫' / '';
|
|
margin-inline-end: var(--size-2);
|
|
}
|
|
}
|
|
</style>
|