The-DevOps-Daily / The-DevOps-Daily/devops-daily
UX: Consistent reading time display across all post cards
Open
Nobody has claimed this yet.
enhancement
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 392
- Avg merge
- 5h 8m
- Merged PRs (30d)
- 121
Description
Problem
Reading time is shown inconsistently across different post card components and pages:
- Some cards show reading time (e.g., blog posts)
- Other cards don't show it (e.g., guides, exercises)
- Different formats used ("5 min read" vs "5m" vs "5 minutes")
- Sometimes shown in description area, sometimes in metadata
Current Inconsistencies
components/post-card.tsx- Shows reading timecomponents/guide-card.tsx- May or may not show- Various list components handle it differently
Proposed Solution
- Standardize format: "X min read" (consistent with Medium, dev.to)
- Always display: On all content cards (posts, guides, exercises, etc.)
- Consistent placement: Below title, next to date/category
- Icon: Add clock icon for visual clarity
Implementation
// components/ui/reading-time.tsx
import { Clock } from 'lucide-react'
export function ReadingTime({ minutes }: { minutes: number }) {
return (
<span className="flex items-center gap-1 text-sm text-muted-foreground">
<Clock size={14} />
{minutes} min read
</span>
)
}
Acceptance Criteria
- Reading time shown on ALL content cards
- Consistent "X min read" format everywhere
- Same visual styling (icon + text)
- Positioned consistently in card metadata area
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing components/post-card.tsx and components/guide-card.tsx, then locate the other content-card and list components mentioned in the issue. Review the proposed components/ui/reading-time.tsx entry point and check each card against the acceptance criteria: all cards should use the same icon, wording, styling, and metadata placement.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100