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:
@@ -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
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user