From fdd9f670e636dce9311fe8faa6ae26d055935cf4 Mon Sep 17 00:00:00 2001
From: grassblock <i@gb0.dev>
Date: Sun, 10 Aug 2025 19:05:46 +0800
Subject: [PATCH] feat: display cover on article page

---
 src/pages/blog/[...slug].astro | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 33b9d6e..3b1ecf9 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -3,7 +3,7 @@ import Layout from '../../layouts/Layout.astro';
 
 import { getCollection, getEntry } from 'astro:content';
 import Comments from "../../components/Comments.astro";
-import {getImage} from "astro:assets";
+import {getImage, Image} from "astro:assets";
 import {siteConfig} from "../../config";
 import ReplyViaEmail from "../../components/ReplyViaEmail.astro";
 import { ExtractFirstImage } from '../../plugins/extract-images';
@@ -60,8 +60,9 @@ const cover = customFeaturedImage || matchedImage_src?.src || firstImageURL || `
         <span class="date">(Updated on {new Date(lastUpdated).toISOString().split('T')[0]})</span>
         <span>|</span>
         <span class="wordcount">{wordcount.words} words</span>
-            {headings.length !== 0 && <TableOfContents headings={headings} />}
-            {entry.data.summary && <p class="summary">{entry.data.summary}</p> }
+        { (cover && cover !== firstImageURL && cover !== `/blog/${slug}/featured.png`) && <Image class="cover" width=720 height=480 src={cover} alt={`cover of ${entry.data.title}`}  /> }
+        {headings.length !== 0 && <TableOfContents headings={headings} />}
+        {entry.data.summary && <p class="summary">{entry.data.summary}</p> }
         <div class="content">
             <Content />
         </div>
@@ -84,4 +85,9 @@ const cover = customFeaturedImage || matchedImage_src?.src || firstImageURL || `
         color: var(--secondary-text-color);
         margin: 1rem;
     }
+    img.cover {
+        width: 100%;
+        height: auto;
+        margin: 1rem auto;
+    }
 </style>