@xexr/blog-platform 1.1.3 → 1.1.4

package/dist/app/blog/[slug]/page.tsx

@@ -823,7 +823,7 @@ function ArticleCardImage({ src, alt }: { src: string; alt: string }) {
         alt={alt}
         width={480}
         height={270}
-        className="h-full w-full object-contain"
+        className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
       />
     </div>
   );

package/dist/app/blog/authors/[slug]/page.tsx

@@ -315,7 +315,7 @@ function AuthorArticlePreview({
               }
               width={320}
               height={200}
-              className="h-full w-full object-contain"
+              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
             />
           </div>
         )}

package/dist/app/blog/page.test.ts

@@ -79,6 +79,26 @@ describe("BlogHomePage", () => {
     expect(html).toContain("Recurring work and routines");
   });
 
+  it("renders article preview images as clipped cover thumbnails", async () => {
+    const html = await renderToHtml(
+      React.createElement(BlogHomePage, {
+        articles: [
+          {
+            ...article,
+            featuredImage: "https://cdn.example.com/articles/routines.webp",
+            featuredImageAlt: "A tidy workspace",
+          },
+        ],
+      }),
+    );
+
+    expect(html).toContain("overflow-hidden rounded-2xl");
+    expect(html).toContain(
+      "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+    );
+    expect(html).not.toContain("h-full w-full object-contain");
+  });
+
   it("renders the newsletter form when configured", async () => {
     const html = await renderToHtml(
       React.createElement(BlogHomePage, {

package/dist/app/blog/page.tsx

@@ -240,7 +240,7 @@ function ArticlePreview({
               }
               width={400}
               height={250}
-              className="h-full w-full object-contain"
+              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
             />
           </Link>
         )}
@@ -309,7 +309,7 @@ function ArticlePreview({
               }
               width={288}
               height={180}
-              className="h-full w-full object-contain"
+              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
             />
           </Link>
         )}

package/dist/components/TopicArchivePages.test.ts

@@ -76,4 +76,26 @@ describe("Blog topic archive pages", () => {
     expect(html).toContain("via-[var(--blog-text-accent)]");
     expect(html).toContain("to-fuchsia-200");
   });
+
+  it("renders topic archive article images as clipped cover thumbnails", () => {
+    const html = renderToStaticMarkup(
+      React.createElement(BlogTopicArchivePage, {
+        articles: [
+          {
+            ...article,
+            featuredImage: "https://cdn.example.com/articles/routines.webp",
+            featuredImageAlt: "A tidy workspace",
+          },
+        ],
+        topicSlug: "recurring-work-and-routines",
+        basePath: "/new-blog",
+      }),
+    );
+
+    expect(html).toContain("overflow-hidden rounded-2xl");
+    expect(html).toContain(
+      "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+    );
+    expect(html).not.toContain("h-full w-full object-contain");
+  });
 });

package/dist/components/TopicArchivePages.tsx

@@ -194,7 +194,7 @@ function TopicArticleCard({
             alt={article.featuredImageAlt ?? article.title}
             width={640}
             height={360}
-            className="h-full w-full object-contain"
+            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
           />
         </div>
       )}