read time and nav hover

src/layouts/BlogSingle.astro

@@ -8,7 +8,7 @@ import similerItems from "@/lib/utils/similarItems";
 import { humanize, markdownify, slugify } from "@/lib/utils/textConverter";
 import { Image } from "@astrojs/image/components";
 import {
-  FaRegClock,
+  FaRegCalendarAlt,
   FaRegFolder,
   FaRegUserCircle,
 } from "react-icons/fa/index.js";
@@ -46,7 +46,7 @@ const { title, description, author, categories, image, date, tags } = post.data;
             {humanize(author)}
           </li>
           <li class="mr-4 inline-block">
-            <FaRegClock className={"mr-2 -mt-1 inline-block"} />
+            <FaRegCalendarAlt className={"mr-2 -mt-1 inline-block"} />
             {dateFormat(date)}
           </li>
           <li class="mr-4 inline-block">

src/layouts/components/BlogCard.astro

@@ -2,7 +2,8 @@
 import config from "@/config/config.json";
 import { humanize, plainify, slugify } from "@/lib/utils/textConverter";
 import { Image } from "@astrojs/image/components";
-import { FaRegFolder, FaRegUserCircle } from "react-icons/fa/index.js";
+import { FaRegFolder, FaRegClock } from "react-icons/fa/index.js";
+import readingTime from "@/lib/utils/readingTime";
 
 const {
   summary_length,
@@ -31,12 +32,12 @@ const { title, image, description, author, categories } = data.data;
     </a>
   </h4>
   <ul class="mb-4">
-    <li class="mr-4 inline-block">
+    <!-- <li class="mr-4 inline-block">
       <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
       {humanize(author)}
-    </li>
+    </li> -->
     <li class="mr-4 inline-block">
-      <FaRegFolder className={"mr-2 -mt-1 inline-block"} />
+      <FaRegFolder className={"mr-1 -mt-1 inline-block"} />
       {
         categories.map((category: string, index: number) => (
           <a href={`/blog/categories/${slugify(category)}`}>
@@ -46,6 +47,10 @@ const { title, image, description, author, categories } = data.data;
         ))
       }
     </li>
+    <li class="mr-4 inline-block ">
+      <FaRegClock className={"mr-1 -mt-1 inline-block"} />
+      {readingTime(data.body)}
+    </li>
   </ul>
   <!-- <p class="mb-6">{plainify(data.body?.slice(0, Number(summary_length)))}</p> -->
   <p class="mb-6">{description}</p>

src/layouts/components/ThemeSwitcher.astro

@@ -10,7 +10,7 @@ const { className }: { className?: string } = Astro.props;
 
 {
   theme_switcher && (
-    <div class={`theme-switcher ${className}`}>
+    <div class={`theme-switcher a ${className}`}>
       <input id="theme-switcher" data-theme-switcher type="checkbox" />
       <label for="theme-switcher">
         <span class="sr-only">theme switcher</span>

src/layouts/partials/Header.astro

@@ -103,7 +103,7 @@ const { pathname } = Astro.url;
       {
         settings.search && (
           <a
-            class="mr-5 inline-block border-r border-border pr-5 text-xl text-dark hover:text-primary dark:border-darkmode-border dark:text-white"
+            class="mr-5 inline-block border-border text-xl text-dark hover:text-primary dark:border-darkmode-border dark:text-white"
             href="/search"
             aria-label="search"
           >

src/lib/utils/readingTime.ts

@@ -1,6 +1,6 @@
 // content reading
 const readingTime = (content: string): string => {
-  const WPS = 275 / 60;
+  const WPS = 200 / 60;
 
   let images = 0;
   const regex = /\w/;
@@ -26,14 +26,10 @@ const readingTime = (content: string): string => {
 
   const minutes = Math.ceil(((words - imageAdjust) / WPS + imageSecs) / 60);
 
-  if (minutes < 10) {
-    if (minutes < 2) {
-      return "0" + minutes + ` Min read`;
-    } else {
-      return "0" + minutes + ` Mins read`;
-    }
+  if (minutes < 2) {
+    return minutes + ` min`;
   } else {
-    return minutes + ` Mins read`;
+    return minutes + ` mins`;
   }
 };
 

src/styles/base.scss

@@ -62,3 +62,7 @@ a:hover {
   @apply scale-105;
   @apply opacity-60;
 }
+
+.a:hover {
+  @apply opacity-60;
+}