admin/qipaobuzz-static
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

unify cover-image hero + row card listings with hype404 / viralmvp

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Claude Code
2026-05-01 16:57:47 +08:00
parent f49e0ffa77
commit 0064167336
2 changed files with 217 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/PostList.astro
View File

@@ -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 && (
<h2 class="tag-banner">
<span class="tag-banner-mark">栏目</span>
Tagged: <em>{tag}</em>
</h2>
)}
{enriched.length > 0 && !tag && (
{enriched.length > 0 && !tag && hero && (
<article class="post-hero" data-reveal>
<a class="post-hero-link" href={`/${hero.slug}/`}>
{hero.cover && (
@@ -32,13 +33,13 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
</div>
)}
<div class="post-hero-body">
<div class="post-hero-flag">头条 · TOP STORY</div>
<div class="post-hero-flag">Top story</div>
<h2 class="post-hero-title">{hero.title}</h2>
<p class="post-hero-excerpt">{hero.rawExcerpt}</p>
<div class="post-hero-meta">
<span>{fmt(hero.date)}</span>
{hero.tags.filter((t) => visible.has(t)).slice(0, 4).map((t) => (
<span class="post-hero-tag">{t}</span>
{hero.tags.slice(0, 4).map((t) => (
<span class="post-hero-tag"><a href={`/tag/${t}/`}>{t}</a></span>
))}
</div>
</div>
@@ -47,7 +48,7 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
)}
{(tag ? enriched : rest).map((post, i) => (
<article class="post-row" data-reveal style={`animation-delay:${Math.min(i * 60, 600)}ms`}>
<article class="post-row" data-reveal style={`animation-delay:${Math.min(i * 50, 500)}ms`}>
<a class="post-row-link" href={`/${post.slug}/`}>
{post.cover && (
<div class="post-row-img">
@@ -59,8 +60,8 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
<p class="post-row-excerpt">{post.rawExcerpt}</p>
<div class="post-row-meta">
<time>{fmt(post.date)}</time>
{post.tags.filter((t) => visible.has(t)).slice(0, 3).map((t) => (
<span class="post-row-tag">{t}</span>
{post.tags.slice(0, 3).map((t) => (
<span class="post-row-tag"><a href={`/tag/${t}/`}>{t}</a></span>
))}
</div>
</div>
@@ -69,11 +70,10 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
))}
{enriched.length === 0 && (
<p class="post-empty">尚无文章 · No posts yet.</p>
<p class="post-empty">No posts yet.</p>
)}
<script is:inline>
// Subtle scroll-reveal: fade + lift each post-row when it enters viewport.
(() => {
const els = document.querySelectorAll('[data-reveal]');
if (!('IntersectionObserver' in window)) {