fix invalid <a> nesting in PostList
Apply the same PostList structural fix as hype404 / viralmvp: drop the card-wide <a> that broke the layout via HTML5 nested-link auto-recovery. Layout CSS unchanged; this commit only updates PostList.astro. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -26,7 +26,6 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
|
|||||||
|
|
||||||
{enriched.length > 0 && !tag && hero && (
|
{enriched.length > 0 && !tag && hero && (
|
||||||
<article class="post-hero" data-reveal>
|
<article class="post-hero" data-reveal>
|
||||||
<a class="post-hero-link" href={`/${hero.slug}/`}>
|
|
||||||
{hero.cover && (
|
{hero.cover && (
|
||||||
<div class="post-hero-img">
|
<div class="post-hero-img">
|
||||||
<img src={hero.cover} alt="" loading="eager" />
|
<img src={hero.cover} alt="" loading="eager" />
|
||||||
@@ -34,7 +33,9 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
|
|||||||
)}
|
)}
|
||||||
<div class="post-hero-body">
|
<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>
|
<h2 class="post-hero-title">
|
||||||
|
<a class="card-link" href={`/${hero.slug}/`}>{hero.title}</a>
|
||||||
|
</h2>
|
||||||
<p class="post-hero-excerpt">{hero.rawExcerpt}</p>
|
<p class="post-hero-excerpt">{hero.rawExcerpt}</p>
|
||||||
<div class="post-hero-meta">
|
<div class="post-hero-meta">
|
||||||
<span>{fmt(hero.date)}</span>
|
<span>{fmt(hero.date)}</span>
|
||||||
@@ -43,20 +44,20 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
</article>
|
</article>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{(tag ? enriched : rest).map((post, i) => (
|
{(tag ? enriched : rest).map((post, i) => (
|
||||||
<article class="post-row" data-reveal style={`animation-delay:${Math.min(i * 50, 500)}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 && (
|
{post.cover && (
|
||||||
<div class="post-row-img">
|
<div class="post-row-img">
|
||||||
<img src={post.cover} alt="" loading="lazy" />
|
<img src={post.cover} alt="" loading="lazy" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div class="post-row-body">
|
<div class="post-row-body">
|
||||||
<h3 class="post-row-title">{post.title}</h3>
|
<h3 class="post-row-title">
|
||||||
|
<a class="card-link" href={`/${post.slug}/`}>{post.title}</a>
|
||||||
|
</h3>
|
||||||
<p class="post-row-excerpt">{post.rawExcerpt}</p>
|
<p class="post-row-excerpt">{post.rawExcerpt}</p>
|
||||||
<div class="post-row-meta">
|
<div class="post-row-meta">
|
||||||
<time>{fmt(post.date)}</time>
|
<time>{fmt(post.date)}</time>
|
||||||
@@ -65,7 +66,6 @@ const fmt = (d) => new Date(d).toLocaleDateString('en-US',
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
</article>
|
</article>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user