Build the Astro site UI

src/components/ArticleList.astro

@@ -0,0 +1,53 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import EntryThumbnail from './EntryThumbnail.astro';
+import TagList from './TagList.astro';
+import { ARTICLE_THUMBNAIL, articlePath, formatDate, formatDateShort } from '../lib/site';
+
+interface Props {
+  posts: CollectionEntry<'posts'>[];
+  showYear?: boolean;
+  tagLimit?: number;
+  // Opt-in: eagerly load the first thumbnail. Only set when the list is
+  // reliably above the fold (home, tag pages). Lists below substantial
+  // content (related, archives by year, 404) should leave this off.
+  eagerFirstThumbnail?: boolean;
+}
+
+const { posts, showYear = true, tagLimit = 3, eagerFirstThumbnail = false } = Astro.props;
+---
+
+<ol class="article-list">
+  {
+    posts.map((post, index) => {
+      const href = articlePath(post);
+      return (
+        <li>
+          <article>
+            <h3>
+              <a class="entry-title" href={href}>
+                {post.data.title}
+              </a>
+            </h3>
+            <p>{post.data.description}</p>
+            <TagList tags={post.data.tags} limit={tagLimit} />
+          </article>
+          <time datetime={post.data.date.toISOString()}>
+            {showYear ? formatDate(post.data.date) : formatDateShort(post.data.date)}
+          </time>
+          <EntryThumbnail
+            src={post.data.thumbnail.src}
+            alt={post.data.thumbnail.alt}
+            href={href}
+            class="article-thumbnail"
+            widths={ARTICLE_THUMBNAIL.widths}
+            sizes={ARTICLE_THUMBNAIL.sizes}
+            ariaLabel={`Open article: ${post.data.title}`}
+            loading={eagerFirstThumbnail && index === 0 ? 'eager' : 'lazy'}
+            fetchpriority={eagerFirstThumbnail && index === 0 ? 'high' : undefined}
+          />
+        </li>
+      );
+    })
+  }
+</ol>