aimond/sapiens-web3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add profile image enlargement and refine article display

Browse Source 
Implement image enlargement for profile pictures, add relative time display for articles using "X min ago", and ensure articles are sorted by publication date.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/rOJiPGe
This commit is contained in:
kimjaehyeon0101
2025-09-30 04:33:42 +00:00
parent 329c58f70f
commit 8e4d12d99e
9 changed files with 1836 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/components/ArticleCard.tsx
View File

@ -16,15 +16,19 @@ export default function ArticleCard({ article, outlet, viewMode = "grid" }: Arti
setLocation(`/articles/${article.slug}`);
};
const formatDate = (date: string | Date) => {
const d = new Date(date);
const now = new Date();
const diffTime = Math.abs(now.getTime() - d.getTime());
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
if (diffDays === 1) return "1 day ago";
if (diffDays < 7) return `${diffDays} days ago`;
return d.toLocaleDateString();
const formatPublishedTime = () => {
if (article.publishedMinutesAgo) {
return `${article.publishedMinutesAgo} min ago`;
}
// Fallback for articles without publishedMinutesAgo
if (article.publishedAt) {
const d = new Date(article.publishedAt);
const now = new Date();
const diffMinutes = Math.floor((now.getTime() - d.getTime()) / (1000 * 60));
const clampedMinutes = Math.max(1, Math.min(diffMinutes, 59));
return `${clampedMinutes} min ago`;
}
return "1 min ago";
};
if (viewMode === "list") {
@ -61,7 +65,7 @@ export default function ArticleCard({ article, outlet, viewMode = "grid" }: Arti
<p className="text-sm text-muted-foreground mb-3 line-clamp-2">{article.excerpt}</p>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2 text-xs text-muted-foreground">
<span>{formatDate(article.publishedAt!)}</span>
<span>{formatPublishedTime()}</span>
{article.tags?.map((tag) => (
<Badge key={tag} variant="outline" className="text-xs">
{tag}
@ -108,7 +112,7 @@ export default function ArticleCard({ article, outlet, viewMode = "grid" }: Arti
<p className="text-sm text-muted-foreground mb-4 line-clamp-3">{article.excerpt}</p>
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">
{formatDate(article.publishedAt!)}
{formatPublishedTime()}
</span>
<div className="flex items-center space-x-1">
{article.tags?.slice(0, 2).map((tag) => (