75 lines
2.8 KiB
Plaintext
75 lines
2.8 KiB
Plaintext
---
|
|
import type { CollectionEntry } from 'astro:content';
|
|
import { render } from 'astro:content';
|
|
import { Picture } from 'astro:assets';
|
|
import Base from '../layouts/Base.astro';
|
|
import { formatDate, localePath, t, type Lang } from '../i18n/ui';
|
|
|
|
interface Props { lang: Lang; post: CollectionEntry<'insights'> }
|
|
const { lang, post } = Astro.props;
|
|
const ui = t(lang);
|
|
const { Content } = await render(post);
|
|
const d = post.data;
|
|
---
|
|
<Base lang={lang} title={d.title} description={d.description}>
|
|
<article class="post" lang={d.lang}>
|
|
<header class="section section--intro post__head">
|
|
<div class="container grid">
|
|
<div class="post__meta-col">
|
|
<a class="link" href={localePath(lang, '/insights')} lang={lang}>{ui.insights.back}</a>
|
|
</div>
|
|
<div class="post__title-col">
|
|
<p class="small muted post__meta">
|
|
<span>{d.category}</span>
|
|
<time datetime={d.date.toISOString().slice(0, 10)}>{formatDate(d.date, lang)}</time>
|
|
<span lang={lang}>{ui.insights.readingTime(d.readingTime)}</span>
|
|
</p>
|
|
<h1 class="h2 post__title">{d.title}</h1>
|
|
{d.subtitle && <p class="post__subtitle muted">{d.subtitle}</p>}
|
|
<p class="post__author"><span lang={lang}>{ui.insights.by}</span> <span class="post__author-name">{d.author}</span><span class="muted">, {d.authorRole}</span></p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{d.cover && <div class="container">
|
|
<Picture
|
|
src={d.cover}
|
|
alt={d.coverAlt!}
|
|
formats={['avif']}
|
|
fallbackFormat="webp"
|
|
widths={[640, 960, 1440, 1920]}
|
|
sizes="(min-width: 90rem) 1440px, 100vw"
|
|
loading="eager"
|
|
decoding="async"
|
|
class="post__cover img-doc"
|
|
/>
|
|
</div>}
|
|
|
|
<div class="section container grid">
|
|
<div class="prose post__body">
|
|
<Content />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</Base>
|
|
|
|
<style>
|
|
.post__meta-col { grid-column: 1 / -1; }
|
|
.post__title-col { grid-column: 1 / -1; display: grid; gap: var(--space-5); }
|
|
.post__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); }
|
|
.post__title { text-wrap: balance; }
|
|
.post__subtitle { font-size: var(--step-h3); letter-spacing: var(--track-h3); line-height: var(--leading-h3); max-width: var(--measure); }
|
|
.post__author-name { font-weight: var(--weight-medium); }
|
|
.post__cover, :global(.post__cover) { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 12%; }
|
|
.post__body { grid-column: 1 / -1; }
|
|
@media (min-width: 48rem) {
|
|
.post__meta-col { grid-column: 1 / span 2; }
|
|
.post__title-col { grid-column: 3 / span 9; }
|
|
.post__body { grid-column: 3 / span 8; }
|
|
}
|
|
@media (min-width: 64rem) {
|
|
.post__title-col { grid-column: 3 / span 8; }
|
|
.post__body { grid-column: 3 / span 7; }
|
|
}
|
|
</style>
|