@xexr/blog-platform 1.1.2 → 1.1.4

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

@@ -342,19 +342,16 @@ export default function ArticlePage({
       {/* Featured Image */}
       {imageUrl && (
         <figure className="article-featured-image mx-auto my-8 w-full max-w-4xl sm:my-12 lg:my-16">
-          <div className="aspect-[16/9] overflow-hidden rounded-3xl border border-[var(--blog-accent-border)] shadow-[0_24px_80px_rgb(168_85_247_/_0.14)]">
-            <Image
-              src={imageUrl}
-              alt={
-                article.featuredImageAlt ??
-                `Featured image for ${article.title}`
-              }
-              className="h-full w-full object-cover"
-              width={800}
-              height={450}
-              priority
-            />
-          </div>
+          <Image
+            src={imageUrl}
+            alt={
+              article.featuredImageAlt ?? `Featured image for ${article.title}`
+            }
+            className="h-auto w-full rounded-3xl border border-[var(--blog-accent-border)] shadow-[0_24px_80px_rgb(168_85_247_/_0.14)]"
+            width={1200}
+            height={800}
+            priority
+          />
 
           {hasFeaturedImageMeta && (
             <figcaption className="text-muted-foreground mt-3 space-y-1 px-2 text-center text-sm leading-relaxed sm:px-0">
@@ -826,7 +823,7 @@ function ArticleCardImage({ src, alt }: { src: string; alt: string }) {
         alt={alt}
         width={480}
         height={270}
-        className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+        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-cover transition-transform duration-500 group-hover:scale-105"
+              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

@@ -229,7 +229,7 @@ function ArticlePreview({
         {imageUrl && (
           <Link
             href={articleUrl}
-            className="focus-visible:ring-ring relative block aspect-[16/10] w-full overflow-hidden rounded-2xl focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            className="focus-visible:ring-ring relative block aspect-[16/10] w-full overflow-hidden rounded-2xl bg-[var(--blog-accent-bg)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
             aria-label={`Read article: ${article.title}`}
           >
             <Image
@@ -298,7 +298,7 @@ function ArticlePreview({
         {imageUrl && (
           <Link
             href={articleUrl}
-            className="focus-visible:ring-ring relative block aspect-[16/10] w-64 shrink-0 overflow-hidden rounded-2xl focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none xl:w-72"
+            className="focus-visible:ring-ring relative block aspect-[16/10] w-64 shrink-0 overflow-hidden rounded-2xl bg-[var(--blog-accent-bg)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none xl:w-72"
             aria-label={`Read article: ${article.title}`}
           >
             <Image

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");
+  });
 });