polish

src/components/ArticleList.astro

@@ -8,19 +8,28 @@ 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.
+  timeline?: boolean;
+  // Opt-in: eagerly load thumbnails that are reliably above the fold. Lists
+  // below substantial content (related, about, 404) should leave this at zero.
   eagerFirstThumbnail?: boolean;
+  eagerThumbnailCount?: number;
 }
 
-const { posts, showYear = true, tagLimit = 3, eagerFirstThumbnail = false } = Astro.props;
+const {
+  posts,
+  showYear = true,
+  tagLimit = 3,
+  timeline = false,
+  eagerFirstThumbnail = false,
+  eagerThumbnailCount = eagerFirstThumbnail ? 1 : 0,
+} = Astro.props;
 ---
 
-<ol class="article-list">
+<ol class:list={['article-list', timeline && 'article-list--timeline']}>
   {
     posts.map((post, index) => {
       const href = articlePath(post);
+      const eager = index < eagerThumbnailCount;
       return (
         <li>
           <article>
@@ -43,8 +52,8 @@ const { posts, showYear = true, tagLimit = 3, eagerFirstThumbnail = false } = As
             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}
+            loading={eager ? 'eager' : 'lazy'}
+            fetchpriority={eager && index === 0 ? 'high' : undefined}
           />
         </li>
       );