app/pages/news-detail/index.tsx

@@ -1,5 +1,4 @@
 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'
@@ -20,8 +19,6 @@ 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>
@@ -48,7 +45,7 @@ export const NewsDetailPage = () => {
                 <p className="flex gap-1 text-sm">
                   <span>{live_at && `${formatDate(live_at)}`}</span>
                   <span>·</span>
-                  <span>{text}</span>
+                  <span>5 min read</span>
                 </p>
               </div>
             </div>

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

@@ -1,6 +1,5 @@
 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'
 
@@ -15,7 +14,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,
@@ -27,18 +26,6 @@ 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,7 +42,6 @@
     "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,9 +92,6 @@ 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)
@@ -3891,13 +3888,6 @@ 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:
@@ -8621,11 +8611,6 @@ 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