Initial commit 🚀

src/pages/_Post.astro

@@ -0,0 +1,74 @@
+---
+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>