Merge branch 'main' into main

Author: nancy-verma780

docusaurus.config.ts

@@ -308,4 +308,4 @@ const config: Config = {
   },
 };
 
-export default config;
+export default config;

src/components/blogCarousel/blogCard.tsx

@@ -2,6 +2,7 @@
 import React from "react";
 import Link from "@docusaurus/Link";
 import { getAuthorProfiles } from "../../utils/authors";
+import { usePluginData } from "@docusaurus/useGlobalData";
 
 interface BlogCardProps {
   type: string;
@@ -13,6 +14,7 @@ interface BlogCardProps {
   authors?: string[];
   tags?: string[];
   category?: string;
+  readingTime?: number;
 }
 
 const TAG_COLORS = [
@@ -48,13 +50,16 @@ const BlogCard = ({
   type,
   date,
   title,
+  content,
   imageUrl,
   id,
   authors,
   tags,
   category,
+  readingTime,
 }: BlogCardProps) => {
   const authorProfiles = getAuthorProfiles(authors || []);
+  const computedReadTime = readingTime ?? 1;
 
   if (!id || !type) {
     return <div>data not fetched properly, imageId and entryId not found</div>;
@@ -167,6 +172,24 @@ const BlogCard = ({
                 </div>
               )}
               {date && <span className="card-date">{formatDate(date)}</span>}
+              <span className="card-reading-time">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  width="11"
+                  height="11"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <polyline points="12 6 12 12 16 14" />
+                </svg>
+                {computedReadTime} min read
+              </span>
             </div>
           </div>
 

src/components/blogCarousel/blogCarousel.css

@@ -634,4 +634,13 @@
   opacity: 0;
   transform: translateY(-20px);
   transition: opacity 0.4s ease-in, transform 0.4s ease-in;
+}
+/* ── Reading time ── */
+.card-reading-time {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 0.75rem;
+  color: var(--ifm-color-emphasis-600);
+  margin-top: 2px;
 }

src/components/blogCarousel/blogCarousel.tsx

@@ -90,6 +90,7 @@ export function BlogCarousel() {
                 authors={blog.authors}
                 tags={blog.tags}
                 category={blog.category}
+                readingTime={blog.readingTime}
               />
             </CarouselItem>
           ))}

src/components/scroll/bottom-to-top.tsx

@@ -1,15 +1,17 @@
 import React, { useState, useEffect } from "react";
-import { FaArrowUp } from "react-icons/fa";
+import { FaArrowDown, FaArrowUp } from "react-icons/fa";
 
 export default function ScrollBottomToTop() {
-  const [isVisible, setIsVisible] = useState(false);
-
-  const toggleVisibility = () => {
-    if (window.pageYOffset > 300) {
-      setIsVisible(true);
-    } else {
-      setIsVisible(false);
-    }
+  const [showTopButton, setShowTopButton] = useState(false);
+  const [showBottomButton, setShowBottomButton] = useState(false);
+
+  const updateVisibility = () => {
+    const scrollTop = window.pageYOffset;
+    const documentHeight = document.documentElement.scrollHeight;
+    const viewportHeight = window.innerHeight;
+
+    setShowTopButton(scrollTop > 300);
+    setShowBottomButton(scrollTop + viewportHeight < documentHeight - 300);
   };
 
   const scrollToTop = () => {
@@ -19,26 +21,50 @@ export default function ScrollBottomToTop() {
     });
   };
 
+  const scrollToBottom = () => {
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: "smooth",
+    });
+  };
+
   useEffect(() => {
-    window.addEventListener("scroll", toggleVisibility);
+    updateVisibility();
+    window.addEventListener("scroll", updateVisibility);
+    window.addEventListener("resize", updateVisibility);
 
     return () => {
-      window.removeEventListener("scroll", toggleVisibility);
+      window.removeEventListener("scroll", updateVisibility);
+      window.removeEventListener("resize", updateVisibility);
     };
   }, []);
 
+  if (!showTopButton && !showBottomButton) {
+    return null;
+  }
+
   return (
-    <div className="scroll-to-top">
-      {isVisible && (
+    <div className="scroll-to-top fixed right-5 bottom-5 z-50 flex flex-col gap-3">
+      {showTopButton && (
         <button
-         aria-label="Scroll to top"
+          aria-label="Scroll to top"
           onClick={scrollToTop}
-          className="fixed right-5 bottom-5 z-50 cursor-pointer rounded-full border-none bg-gray-700 p-3 text-white shadow-lg transition-opacity duration-300 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
+          className="cursor-pointer rounded-full border-none bg-gray-700 p-3 text-white shadow-lg transition-opacity duration-300 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
           style={{ backgroundColor: "var(--ifm-color-primary)" }}
         >
           <FaArrowUp />
         </button>
       )}
+      {showBottomButton && (
+        <button
+          aria-label="Scroll to bottom"
+          onClick={scrollToBottom}
+          className="cursor-pointer rounded-full border-none bg-gray-700 p-3 text-white shadow-lg transition-opacity duration-300 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
+          style={{ backgroundColor: "var(--ifm-color-primary)" }}
+        >
+          <FaArrowDown />
+        </button>
+      )}
     </div>
   );
 }