feat: estimate reading time.

fezcode · fezcode · commit 041a8d77bae6 · 2025-11-23T14:07:09.000+03:00
diff --git a/src/components/metadata-cards/PostMetadata.js b/src/components/metadata-cards/PostMetadata.js
@@ -9,6 +9,7 @@ const PostMetadata = ({
   overrideDate,
   updatedDate,
   seriesPosts,
+  estimatedReadingTime,
 }) => {
   if (!metadata) {
     return null;
@@ -87,6 +88,12 @@ const PostMetadata = ({
               <p className="text-gray-300 ml-1 mt-1">{updatedDate}</p>
             </div>
           )}
+          {estimatedReadingTime > 0 && (
+            <div>
+              <Label>Reading Time</Label>
+              <p className="text-gray-300 ml-1 mt-1">{estimatedReadingTime} min read</p>
+            </div>
+          )}
           {metadata.tags && (
             <div>
               <Label>Tags</Label>
diff --git a/src/pages/BlogPostPage.js b/src/pages/BlogPostPage.js
@@ -17,6 +17,7 @@ import Seo from '../components/Seo';
 import ShareButtons from '../components/ShareButtons';
 import remarkGfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
+import { calculateReadingTime } from '../utils/readingTime';
 
 const LinkRenderer = ({ href, children }) => {
   const isExternal = href.startsWith('http') || href.startsWith('https');
@@ -131,6 +132,7 @@ const BlogPostPage = () => {
   const [post, setPost] = useState(null);
   const [loading, setLoading] = useState(true);
   const [readingProgress, setReadingProgress] = useState(0);
+  const [estimatedReadingTime, setEstimatedReadingTime] = useState(0);
   const [isAtTop, setIsAtTop] = useState(true); // New state for tracking if at top
   const contentRef = useRef(null);
   const [isModalOpen, setIsModalToOpen] = useState(false);
@@ -241,6 +243,7 @@ const BlogPostPage = () => {
           seriesPosts,
           currentSeries,
         });
+        setEstimatedReadingTime(calculateReadingTime(postBody));
       } catch (error) {
         console.error('Error fetching post or metadata:', error);
 
@@ -421,6 +424,7 @@ const BlogPostPage = () => {
               overrideDate={post.attributes.date}
               updatedDate={post.attributes.updated}
               seriesPosts={post.seriesPosts}
+              estimatedReadingTime={estimatedReadingTime}
             />
           </div>
         </div>
diff --git a/src/utils/readingTime.js b/src/utils/readingTime.js
@@ -0,0 +1,8 @@
+// src/utils/readingTime.js
+
+export const calculateReadingTime = (text) => {
+  const wordsPerMinute = 200; // Average reading speed
+  const words = text.split(/\s+/).filter(word => word !== '').length;
+  const minutes = Math.ceil(words / wordsPerMinute);
+  return minutes;
+};
