initial

src/pages/_InsightsIndex.astro

@@ -0,0 +1,80 @@
+---
+import { getCollection } 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 }
+const { lang } = Astro.props;
+const ui = t(lang);
+const posts = (await getCollection('insights')).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+---
+<Base lang={lang} title={ui.meta.insights.title} description={ui.meta.insights.description}>
+  <section class="section section--intro">
+    <div class="container grid">
+      <h1 class="display index__title">{ui.insights.title}</h1>
+      <p class="index__lead">{ui.insights.intro}</p>
+    </div>
+  </section>
+
+  <section class="section--list" aria-label={ui.insights.title}>
+    <div class="container">
+      <ul class="posts" role="list">
+        {posts.map((post) => (
+          <li class="post">
+            <a class="post__link" href={localePath(lang, `/insights/${post.id}`)} lang={post.data.lang !== lang ? post.data.lang : undefined}>
+              <div class="post__media">
+                <Picture
+                  src={post.data.cover}
+                  alt={post.data.coverAlt}
+                  formats={['avif']}
+      fallbackFormat="webp"
+                  widths={[400, 640, 960]}
+                  sizes="(min-width: 48rem) 40vw, 100vw"
+                  loading="lazy"
+                  decoding="async"
+                  class="post__img img-doc"
+                />
+              </div>
+              <div class="post__text">
+                <p class="small muted post__meta">
+                  <span>{post.data.category}</span>
+                  <time datetime={post.data.date.toISOString().slice(0, 10)}>{formatDate(post.data.date, lang)}</time>
+                  <span>{ui.insights.readingTime(post.data.readingTime)}</span>
+                </p>
+                <h2 class="h2">{post.data.title}</h2>
+                {post.data.subtitle && <p class="muted">{post.data.subtitle}</p>}
+                {post.data.lang !== lang && <p class="small muted">{ui.insights.inEnglish}</p>}
+              </div>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </section>
+</Base>
+
+<style>
+  .index__title { grid-column: 1 / -1; }
+  .index__lead { grid-column: 1 / -1; max-width: var(--measure); color: var(--ink-muted); }
+  @media (min-width: 48rem) {
+    .index__title { grid-column: 1 / span 8; }
+    .index__lead { grid-column: 1 / span 5; }
+  }
+  .section--list { padding-bottom: var(--section); }
+  .posts { border-top: var(--hairline) solid var(--line); }
+  .post { border-bottom: var(--hairline) solid var(--line); }
+  .post__link {
+    display: grid;
+    gap: var(--space-5) var(--gap);
+    padding-block: var(--space-7);
+    text-decoration: none;
+  }
+  .post__link:hover h2 { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.12em; }
+  .post__img, :global(.post__img) { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
+  .post__text { display: grid; gap: var(--space-4); align-content: start; }
+  .post__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); }
+  @media (min-width: 48rem) {
+    .post__link { grid-template-columns: 5fr 7fr; }
+  }
+</style>