x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-08 17:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): tidy blog card tags and date, show a third card on the homepage

Browse Source 
The blog card kept the date and every tag in one non-wrapping flex row, so a
post with five or six tags overflowed the card frame and the date broke across
three lines inside the three-column grid. The date now sits on its own
non-wrapping line, tags wrap below it, and only the first three render as chips
while the rest collapse into a "+N" chip whose tooltip lists them. The featured
card still shows every tag.

The homepage rendered two cards under the featured post and left the third grid
column empty; it now shows three.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
4grayandClaude Fable 5.1 committed 2026-09-05 21:14:45 +02:00
1 parent e9326c9427
commit b55a3cc322
2 files changed
+32 -19
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/website/src/components/BlogPostCard.astro
+29 -17
View File
@@ -10,6 +10,13 @@ interface Props {
const { title, description, pubDate, slug, tags = [], heroImage } = Astro.props;
// Cards sit in a three-column grid, so a post with five or six tags cannot show
// them all inline. The first few render as chips; the rest collapse into a "+N"
// chip whose tooltip lists the hidden tags. The featured card shows every tag.
const MAX_VISIBLE_TAGS = 3;
const visibleTags = tags.slice(0, MAX_VISIBLE_TAGS);
const hiddenTags = tags.slice(MAX_VISIBLE_TAGS);
const formattedDate = pubDate.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
@@ -31,23 +38,28 @@ const formattedDate = pubDate.toLocaleDateString('en-US', {
/>
</div>
)}
<div class="flex items-center gap-2">
<time datetime={pubDate.toISOString()} class="font-mono text-xs text-surface-500">
{formattedDate}
</time>
{
tags.length > 0 && (
<>
<span class="text-surface-700">&middot;</span>
{tags.map((tag) => (
<span class="rounded-md border border-surface-800 bg-surface-900/60 px-2 py-0.5 text-xs text-surface-300">
{tag}
</span>
))}
</>
)
}
</div>
<time datetime={pubDate.toISOString()} class="block whitespace-nowrap font-mono text-xs text-surface-500">
{formattedDate}
</time>
{
tags.length > 0 && (
<div class="mt-2 flex flex-wrap gap-1.5">
{visibleTags.map((tag) => (
<span class="rounded-md border border-surface-800 bg-surface-900/60 px-2 py-0.5 text-xs text-surface-300">
{tag}
</span>
))}
{hiddenTags.length > 0 && (
<span
class="rounded-md border border-surface-800 bg-surface-900/60 px-2 py-0.5 font-mono text-xs text-surface-500"
title={hiddenTags.join(', ')}
>
+{hiddenTags.length}
</span>
)}
</div>
)
}
<h3
class="mt-3 font-display text-lg font-semibold text-surface-100 transition-colors duration-200 group-hover:text-accent-400"
>
apps/website/src/pages/index.astro
+3 -2
View File
@@ -18,8 +18,9 @@ const allPosts = (await getCollection('blog'))
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
const featuredPost = allPosts.find((post) => post.data.featured) ?? allPosts[0];
const otherPosts = featuredPost ? allPosts.filter((post) => post.id !== featuredPost.id).slice(0, 2) : [];
const posts = featuredPost ? [featuredPost, ...otherPosts] : allPosts.slice(0, 3);
// One featured post plus a full three-column row of cards below it.
const otherPosts = featuredPost ? allPosts.filter((post) => post.id !== featuredPost.id).slice(0, 3) : [];
const posts = featuredPost ? [featuredPost, ...otherPosts] : allPosts.slice(0, 4);
const homeSchema = [
{