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 Image from 'next/image';
|
||||||
import type { Metadata } from 'next';
|
import type { Metadata } from 'next';
|
||||||
import { BreadcrumbJsonLd, ArticleJsonLd } from '@/components/seo';
|
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 { renderMarkdown } from '@/lib/markdown';
|
||||||
|
import { Clock } from 'lucide-react';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
params: Promise<{ locale: string; slug: string }>;
|
params: Promise<{ locale: string; slug: string }>;
|
||||||
@@ -1315,6 +1316,9 @@ export default async function BlogPostPage({ params }: Props) {
|
|||||||
{ name: post.title, url: `/${locale}/blog/${slug}` },
|
{ name: post.title, url: `/${locale}/blog/${slug}` },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Calculate reading time
|
||||||
|
const readingTime = post.content ? calculateReadingTime(post.content) : 1;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="min-h-screen py-16 sm:py-20 lg:py-24">
|
<main className="min-h-screen py-16 sm:py-20 lg:py-24">
|
||||||
<BreadcrumbJsonLd items={breadcrumbItems} locale={locale as Locale} />
|
<BreadcrumbJsonLd items={breadcrumbItems} locale={locale as Locale} />
|
||||||
@@ -1343,6 +1347,10 @@ export default async function BlogPostPage({ params }: Props) {
|
|||||||
<header className="mb-12">
|
<header className="mb-12">
|
||||||
<div className="flex items-center gap-4 mb-6 text-zinc-500">
|
<div className="flex items-center gap-4 mb-6 text-zinc-500">
|
||||||
<time dateTime={post.date}>{getFormattedDate(post.date)}</time>
|
<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">
|
<span className="px-3 py-1 bg-zinc-800 rounded-full text-sm">
|
||||||
{post.category}
|
{post.category}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
+1
-1
@@ -71,7 +71,7 @@ function detectCategory(filename: string, content: string): string {
|
|||||||
return 'Technologie';
|
return 'Technologie';
|
||||||
}
|
}
|
||||||
|
|
||||||
function calculateReadingTime(content: string): number {
|
export function calculateReadingTime(content: string): number {
|
||||||
// Remove markdown syntax for more accurate word count
|
// Remove markdown syntax for more accurate word count
|
||||||
const text = content
|
const text = content
|
||||||
.replace(/```[\s\S]*?```/g, '') // Remove code blocks
|
.replace(/```[\s\S]*?```/g, '') // Remove code blocks
|
||||||
|
|||||||
Reference in New Issue
Block a user