fix: correct TODO comment formatting in news detail loader

app/pages/news-detail/index.tsx

@@ -1,4 +1,5 @@
 import htmlParse from 'html-react-parser'
+import { useReadingTime } from 'react-hook-reading-time'
 import { useRouteLoaderData } from 'react-router'
 
 import type { TTagResponse } from '~/apis/common/get-tags'
@@ -19,6 +20,8 @@ export const NewsDetailPage = () => {
   const { title, content, featured_image, slug, author, live_at, tags } =
     newsDetailData || {}
 
+  const { text } = useReadingTime(content || '')
+
   return (
     <div className="sm-max:mx-5 relative">
       <Card>
@@ -45,7 +48,7 @@ export const NewsDetailPage = () => {
                 <p className="flex gap-1 text-sm">
                   <span>{live_at && `${formatDate(live_at)}`}</span>
                   <span>·</span>
-                  <span>5 min read</span>
+                  <span>{text}</span>
                 </p>
               </div>
             </div>

app/routes/_news.detail.$slug.tsx

@@ -1,5 +1,6 @@
 import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
 import { getUser } from '~/apis/news/get-user'
+import { APP } from '~/configs/meta'
 import { handleCookie } from '~/libs/cookies'
 import { NewsDetailPage } from '~/pages/news-detail'
 
@@ -14,7 +15,7 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
     })
     userData = data
   }
-  // TODO need handle if user not access non premium data
+  // TODO: need handle if user not access non premium data
   const { data: newsDetailData } = await getNewsBySlug({
     slug: params.slug,
     accessToken: userToken,
@@ -26,6 +27,18 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
   }
 }
 
+export const meta = ({ data }: Route.MetaArgs) => {
+  const { newsDetailData } = data
+  const metaTitle = APP.title
+  const title = `${newsDetailData.title} - ${metaTitle}`
+
+  return [
+    {
+      title,
+    },
+  ]
+}
+
 const NewsDetailLayout = () => <NewsDetailPage />
 
 export default NewsDetailLayout

package.json

@@ -42,6 +42,7 @@
     "react-colorful": "^5.6.1",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
+    "react-hook-reading-time": "^1.0.0",
     "react-router": "^7.1.3",
     "remix-hook-form": "^6.1.3",
     "tailwind-merge": "^3.0.1",

pnpm-lock.yaml

@@ -92,6 +92,9 @@ importers:
       react-hook-form:
         specifier: ^7.54.2
         version: 7.54.2(react@19.0.0)
+      react-hook-reading-time:
+        specifier: ^1.0.0
+        version: 1.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react-router:
         specifier: ^7.1.3
         version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -3888,6 +3891,13 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
+  react-hook-reading-time@1.0.0:
+    resolution: {integrity: sha512-kIudDiGHCTzBlV95WM6xPN3EBUViQynJvcul/NL+8My6fsl0BeKoCi9Dp19g69PlyF3WLA3QAyjVL99+Ucgs6A==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      react: ^16.13.1
+      react-dom: ^16.13.1
+
   react-hotkeys-hook@4.6.1:
     resolution: {integrity: sha512-XlZpbKUj9tkfgPgT9gA+1p7Ey6vFIZHttUjPqpTdyT5nqQ8mHL7elxvSbaC+dpSiHUSmr21Ya1mDxBZG3aje4Q==}
     peerDependencies:
@@ -8611,6 +8621,11 @@ snapshots:
     dependencies:
       react: 19.0.0
 
+  react-hook-reading-time@1.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   react-hotkeys-hook@4.6.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       react: 19.0.0