From 7fa92a04b49e449e20daa58afe34ec3f10654ed3 Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Sun, 25 Jan 2026 02:38:16 +0100
Subject: [PATCH] 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>
---
 src/app/[locale]/blog/[slug]/page.tsx | 10 +++++++++-
 src/lib/blog.ts                       |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/[locale]/blog/[slug]/page.tsx b/src/app/[locale]/blog/[slug]/page.tsx
index 3b3dd93..ae1256d 100644
--- a/src/app/[locale]/blog/[slug]/page.tsx
+++ b/src/app/[locale]/blog/[slug]/page.tsx
@@ -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>
diff --git a/src/lib/blog.ts b/src/lib/blog.ts
index 3ddf1dc..733590a 100644
--- a/src/lib/blog.ts
+++ b/src/lib/blog.ts
@@ -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