Add estimated reading time feature and improve styling

angristan · Jan 18, 2025 · 178647f · 178647f
1 parent cddddb6
commit 178647f
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ Larafeed is a simple feed reader.
   - Support is partial, but works with [Reeder classic](https://reederapp.com/classic/) at least
   - Google Reader API is available at `/api/reader` and Fever API at `/api/fever`, both with username+password
 - Telegram notications on user registration and login failures
+- Estimated reading time for each entry
 
 ### Screenshots
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,5 +47,8 @@
         "recharts": "^2.15.0",
         "typescript": "^5.0.2",
         "vite": "^6.0"
+    },
+    "dependencies": {
+        "reading-time-estimator": "^1.11.0"
     }
 }
diff --git a/resources/js/Pages/Reader/CurrentEntryPane.module.css b/resources/js/Pages/Reader/CurrentEntryPane.module.css
@@ -4,6 +4,7 @@
 
 .entry h1 {
     margin: 0 !important;
+    margin-bottom: 1rem !important;
 }
 
 .entryContent {

diff --git a/resources/js/Pages/Reader/CurrentEntryPane.tsx b/resources/js/Pages/Reader/CurrentEntryPane.tsx
@@ -36,6 +36,7 @@ import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import utc from 'dayjs/plugin/utc';
 import { useEffect, useRef, useState } from 'react';
+import { readingTime } from 'reading-time-estimator';
 
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -351,11 +352,16 @@ export default function CurrentEntryPane({
                         </Title>
                         <Flex justify={'space-between'}>
                             <Text size="sm" c="dimmed">
-                                {currententry.author}
-                            </Text>
-                            <Text size="sm" c="dimmed">
-                                {dayjs.utc(currententry.published_at).fromNow()}
+                                {readingTime(currententry.content ?? '').text}
                             </Text>
+                            <Flex>
+                                <Text size="sm" c="dimmed">
+                                    {currententry.author} {' - '}{' '}
+                                    {dayjs
+                                        .utc(currententry.published_at)
+                                        .fromNow()}
+                                </Text>
+                            </Flex>
                         </Flex>
                         {value === 'content' ? (
                             <div