feat: add reading time estimate at 200 wpm with i18n support

Agent-Logs-Url: https://github.com/techdiary-dev/techdiary.dev/sessions/d724b423-d614-417a-a3e6-9bc6624809a2

Co-authored-by: kingRayhan <7611746+kingRayhan@users.noreply.github.com>

Author: Copilot

src/app/[username]/[articleHandle]/_components/UnpublishedArticleNotice.tsx

@@ -10,6 +10,12 @@ type Props = {
   authorId: string;
 };
 
+/** Inline reading time label for the article byline. */
+export function ArticleReadingTime({ minutes }: { minutes: number }) {
+  const { _t } = useTranslation();
+  return <span>{_t("$ min read", [minutes])}</span>;
+}
+
 /** Inline label next to the byline date when the article has no `published_at`. */
 export function ArticleDraftBylineLabel() {
   const { _t } = useTranslation();

src/app/[username]/[articleHandle]/page.tsx

@@ -26,6 +26,7 @@ import ArticleSidebar from "./_components/ArticleSidebar";
 import EditArticleButton from "./_components/EditArticleButton";
 import {
   ArticleDraftBylineLabel,
+  ArticleReadingTime,
   UnpublishedArticleNotice,
 } from "./_components/UnpublishedArticleNotice";
 
@@ -196,7 +197,7 @@ const Page: NextPage<ArticlePageProps> = async ({ params }) => {
                   <ArticleDraftBylineLabel />
                 )}
                 <span className="mx-1.5">·</span>
-                <span>{readingTime(article?.body ?? "")} min read</span>
+                <ArticleReadingTime minutes={readingTime(article?.body ?? "")} />
               </div>
             </div>
           </div>

src/components/ArticleCard.tsx

@@ -40,7 +40,7 @@ const ArticleCard = ({
   readingTime,
   galleryImages,
 }: ArticleCardProps) => {
-  const { lang } = useTranslation();
+  const { lang, _t } = useTranslation();
 
   const articleUrl = useMemo(() => {
     return `/@${author.username}/${handle}`;
@@ -87,7 +87,7 @@ const ArticleCard = ({
               {formattedTime(new Date(publishedAt), lang)}
             </time>
             <span className="mx-1.5">·</span>
-            <span>{readingTime} min read</span>
+            <span>{_t("$ min read", [readingTime])}</span>
           </div>
         </div>
       </div>

src/i18n/bn.json

@@ -150,5 +150,6 @@
   "Comment reply": "মন্তব্যের উত্তর",
   "Gist comment": "গিস্টে মন্তব্য",
   "Reaction": "প্রতিক্রিয়া",
-  "Notification": "নোটিফিকেশন"
+  "Notification": "নোটিফিকেশন",
+  "$ min read": "$ মিনিট পড়া"
 }

src/lib/utils.ts

@@ -76,10 +76,12 @@ export function extractImageUrlsFromMarkdown(markdown: string): string[] {
 }
 
 export function readingTime(text: string) {
-  const wordsPerMinute = 120;
-  const textWithoutPunctuation = text.replace(/[.,!?;:]/g, "");
-  const wordCount = textWithoutPunctuation.split(/\s+/).length;
-  const minutes = Math.round(wordCount / wordsPerMinute);
+  const wordsPerMinute = 200;
+  const trimmed = text.trim();
+  if (!trimmed) return 0;
+  const textWithoutPunctuation = trimmed.replace(/[.,!?;:]/g, "");
+  const wordCount = textWithoutPunctuation.split(/\s+/).filter(Boolean).length;
+  const minutes = Math.max(1, Math.round(wordCount / wordsPerMinute));
   return minutes;
 }