auto-claude: subtask-1-3 - Display reading time on blog post detail page

- Import Clock icon from lucide-react
- Export calculateReadingTime function from blog.ts
- Calculate reading time for post content
- Display reading time in post header with Clock icon
- Format matches listing page: "X min read"

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-25 02:38:16 +01:00
co-authored by Claude Sonnet 4.5
parent e749dce0a6
commit 7fa92a04b4
2 changed files with 10 additions and 2 deletions
+9 -1
View File
@@ -5,8 +5,9 @@ import Link from 'next/link';
import Image from 'next/image';
import type { Metadata } from 'next';
import { BreadcrumbJsonLd, ArticleJsonLd } from '@/components/seo';
import { getBlogPostBySlug, getBlogPostSlugs } from '@/lib/blog';
import { getBlogPostBySlug, getBlogPostSlugs, calculateReadingTime } from '@/lib/blog';
import { renderMarkdown } from '@/lib/markdown';
import { Clock } from 'lucide-react';
type Props = {
params: Promise<{ locale: string; slug: string }>;
@@ -1315,6 +1316,9 @@ export default async function BlogPostPage({ params }: Props) {
{ name: post.title, url: `/${locale}/blog/${slug}` },
];
// Calculate reading time
const readingTime = post.content ? calculateReadingTime(post.content) : 1;
return (
<main className="min-h-screen py-16 sm:py-20 lg:py-24">
<BreadcrumbJsonLd items={breadcrumbItems} locale={locale as Locale} />
@@ -1343,6 +1347,10 @@ export default async function BlogPostPage({ params }: Props) {
<header className="mb-12">
<div className="flex items-center gap-4 mb-6 text-zinc-500">
<time dateTime={post.date}>{getFormattedDate(post.date)}</time>
<div className="flex items-center gap-2">
<Clock className="h-4 w-4" />
<span>{readingTime} min read</span>
</div>
<span className="px-3 py-1 bg-zinc-800 rounded-full text-sm">
{post.category}
</span>
+1 -1
View File
@@ -71,7 +71,7 @@ function detectCategory(filename: string, content: string): string {
return 'Technologie';
}
function calculateReadingTime(content: string): number {
export function calculateReadingTime(content: string): number {
// Remove markdown syntax for more accurate word count
const text = content
.replace(/```[\s\S]*?```/g, '') // Remove code blocks