From 006416733650ea0d9e4900e6a4e89c97e8a80e95 Mon Sep 17 00:00:00 2001 From: Claude Code Date: Fri, 1 May 2026 16:57:47 +0800 Subject: [PATCH] unify cover-image hero + row card listings with hype404 / viralmvp MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Switches PostList to the same shared template the other two blogs use (hero card + image-row cards) and adds matching .post-hero / .post-row CSS to the editorial light theme. Drops the dependency on markdown.js getVisibleTags + renderMarkdown — covers come from raw markdown regex against /images/ paths, no full render needed. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/PostList.astro | 32 +++--- src/layouts/Layout.astro | 201 ++++++++++++++++++++++++++++++++++ 2 files changed, 217 insertions(+), 16 deletions(-) diff --git a/src/components/PostList.astro b/src/components/PostList.astro index e31c84e..70d82a3 100644 --- a/src/components/PostList.astro +++ b/src/components/PostList.astro @@ -1,15 +1,17 @@ --- -import { getVisibleTags, renderMarkdown, extractFirstImage } from '../lib/markdown.js'; const { posts, tag } = Astro.props; -const visible = getVisibleTags(); -// Pre-compute first cover image per post (from rendered body) so the listing -// can show a real photo on the left without re-parsing inside the template. +// Extract first cover image directly from the raw markdown body. +// Cheap regex — avoids rendering the full HTML for each card. +function firstImage(body) { + const m = body && body.match(/!\[[^\]]*\]\((\/images\/[^)]+)\)/); + return m ? m[1] : null; +} + const enriched = posts.map((p) => ({ ...p, - cover: extractFirstImage(renderMarkdown(p.body)), + cover: firstImage(p.body), })); - const hero = enriched[0]; const rest = enriched.slice(1); @@ -18,12 +20,11 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US', --- {tag && (

- 栏目 Tagged: {tag}

)} -{enriched.length > 0 && !tag && ( +{enriched.length > 0 && !tag && hero && (
{hero.cover && ( @@ -32,13 +33,13 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US', )}
-
头条 · TOP STORY
+
Top story

{hero.title}

{hero.rawExcerpt}

{fmt(hero.date)} - {hero.tags.filter((t) => visible.has(t)).slice(0, 4).map((t) => ( - {t} + {hero.tags.slice(0, 4).map((t) => ( + {t} ))}
@@ -47,7 +48,7 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US', )} {(tag ? enriched : rest).map((post, i) => ( -
+
{post.cover && (
@@ -59,8 +60,8 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',

{post.rawExcerpt}

- {post.tags.filter((t) => visible.has(t)).slice(0, 3).map((t) => ( - {t} + {post.tags.slice(0, 3).map((t) => ( + {t} ))}
@@ -69,11 +70,10 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US', ))} {enriched.length === 0 && ( -

尚无文章 · No posts yet.

+

No posts yet.

)}