portosaurus 3.0.2 → 4.0.0

package/src/theme/components/ProjectsSection/index.js

@@ -1,7 +1,7 @@
 import { useRef, useState, useEffect, useCallback, useMemo } from "react";
 import Slider from "react-slick";
 import {
-  FaGithub,
+  FaCode,
   FaGlobe,
   FaPlay,
   FaChevronLeft,
@@ -9,16 +9,24 @@ import {
   FaStar,
 } from "react-icons/fa";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useScrollReveal from "../../hooks/useScrollReveal";
+import Tooltip from "../Tooltip/index.js";
 import styles from "./styles.module.css";
 
 // Import slick carousel css
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
-/// PART OF THIS COMPONENT IS AI GENERATED
-
-export default function ProjectsSection({ id, className, title, subtitle }) {
+export default function ProjectsSection({ id, className }) {
   const { siteConfig } = useDocusaurusContext();
+  const projectShelf = siteConfig.customFields?.projects || {};
+
+  if (projectShelf.enable === false) return null;
+
+  const isAutoplayEnabled = projectShelf.autoplay ?? true;
+
+  const displayHeading = projectShelf.heading;
+  const displaySubheading = projectShelf.subheading;
 
   const [projects, setProjects] = useState([]);
   const sliderRef = useRef(null);
@@ -30,36 +38,7 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
   const activeDotRef = useRef(null);
   const dotsContainerRef = useRef(null);
 
-  // Default Settings
-  const projectDefaults = {
-    title: "Future Project",
-    desc: "Coming soon...",
-    image: "img/project-blank.png",
-    state: "active",
-    tags: ["planned"],
-  };
-
-  const createPlaceholders = useCallback(
-    (count, existingProjects) => {
-      if (existingProjects.length === 0) return [];
-
-      return [
-        ...existingProjects,
-        ...Array.from({ length: count }, (_, i) => ({
-          ...projectDefaults,
-
-          // Dummy card config
-          state: "n/a",
-          title: `Project ${existingProjects.length + i + 1}`,
-          description: projectDefaults.desc,
-          image: projectDefaults.image,
-          id: `placeholder-${i}`,
-          tags: null,
-        })),
-      ];
-    },
-    [projectDefaults],
-  );
+  const [sectionRef, isVisible] = useScrollReveal();
 
   // Get current slidesToShow based on screen width
   const getVisibleSlidesPerView = useCallback(() => {
@@ -71,62 +50,45 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
     return 3;
   }, []);
 
-  const prepareProjects = useCallback(
-    (projectList, slides) => {
-      if (!projectList?.length) return { projects: [], totalPages: 0 };
-
-      // Sort featured first
-      const sortedProjects = [...projectList]
-        .sort((a, b) => (a.featured ? -1 : 0) - (b.featured ? -1 : 0))
-        .map((project) => {
-          // Apply defaults if value not null
-          const processedProject = {
-            ...project,
-            description:
-              project.desc === undefined ? projectDefaults.desc : project.desc,
-            image:
-              project.image === undefined
-                ? projectDefaults.image
-                : project.image,
-            tags:
-              project.tags === undefined
-                ? [...projectDefaults.tags]
-                : project.tags,
-            state:
-              project.state === undefined
-                ? projectDefaults.state
-                : project.state,
-          };
-
-          // Add ID
-          if (!processedProject.id) {
-            processedProject.id = processedProject.title
-              .toLowerCase()
-              .replace(/[^\w\s-]/g, "")
-              .replace(/\s+/g, "-")
-              .replace(/-+/g, "-");
-          }
-
-          return processedProject;
-        });
-
-      // Calculate pagination and placeholder needs
-      const totalPages = Math.ceil(sortedProjects.length / slides);
-      const slotsPerPage = slides;
-      const totalSlots = totalPages * slotsPerPage;
-      const placeholderCount = totalSlots - sortedProjects.length;
-
-      // Return prepared data
-      return {
-        projects:
-          placeholderCount > 0
-            ? createPlaceholders(placeholderCount, sortedProjects)
-            : sortedProjects,
-        totalPages,
+  const prepareProjects = useCallback((projectList, slides) => {
+    if (!projectList?.length) return { projects: [], totalPages: 0 };
+
+    const processedProjects = projectList.map((project, index) => {
+      const processed = {
+        ...project,
+        desc: project.desc || "N/A",
+        icon: project.icon || "img/project-blank.png",
+        bg: project.bg || null,
+        tags: project.tags || [],
+        state: project.state || "completed",
       };
-    },
-    [createPlaceholders, projectDefaults],
-  );
+
+      if (!processed.id) {
+        processed.id =
+          (processed.title || "project")
+            .toLowerCase()
+            .replace(/[^\w\s-]/g, "")
+            .replace(/\s+/g, "-")
+            .replace(/-+/g, "-") + `-${index}`;
+      }
+
+      return processed;
+    });
+
+    const totalPages = Math.ceil(processedProjects.length / slides);
+
+    // Sort: Featured first
+    processedProjects.sort((a, b) => {
+      if (a.featured && !b.featured) return -1;
+      if (!a.featured && b.featured) return 1;
+      return 0;
+    });
+
+    return {
+      projects: processedProjects,
+      totalPages,
+    };
+  }, []);
 
   // Load and set up projects on initial load and on resize
   useEffect(() => {
@@ -241,15 +203,19 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
       dots: false,
       infinite: false,
       speed: 600,
-      slidesToShow: Math.min(projects.length, slidesToShow),
+      slidesToShow: slidesToShow,
       slidesToScroll: slidesToShow,
-      autoplay: false,
+      autoplay: isAutoplayEnabled,
+
+      autoplaySpeed: 5000,
+      pauseOnHover: true,
       adaptiveHeight: false,
-      centerPadding: "20px",
+      centerPadding: "0px",
       centerMode: false,
       variableWidth: false,
       swipeToSlide: false,
       focusOnSelect: false,
+      arrows: false,
       responsive: [
         {
           breakpoint: 1024,
@@ -265,17 +231,15 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
             slidesToShow: 1,
             slidesToScroll: 1,
             dots: false,
-            arrows: false,
           },
         },
       ],
       className: styles.projectsCarousel,
-      beforeChange: (current, next) => {
+      beforeChange: (_, next) => {
         setAtBeginning(next === 0);
-        setCurrentSlide(Math.floor(next / slidesToShow));
-        setAtEnd(
-          next + Math.min(projects.length, slidesToShow) >= projects.length,
-        );
+        const nextSlideIndex = Math.floor(next / slidesToShow);
+        setCurrentSlide(nextSlideIndex);
+        setAtEnd(next + slidesToShow >= projects.length);
       },
     }),
     [projects, slidesToShow],
@@ -296,7 +260,7 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
 
   // Project link renderer
   const renderProjectLink = useCallback((url, Icon, label, ariaLabel) => {
-    if (!url) return null;
+    if (!url || url === "#" || url === "") return null;
 
     return (
       <a
@@ -393,17 +357,15 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
   return (
     <div
       id={id}
-      className={`${styles.projectsSection} ${className || ""}`}
+      ref={sectionRef}
+      className={`${styles.projectsSection} ${isVisible ? "is-visible" : ""} ${className || ""}`}
       role="region"
       aria-label="Projects section"
     >
       <div className={styles.projectsContainer}>
         <div className={styles.projectsHeader}>
-          <h2 className={styles.projectsTitle}>{title || "My Projects"}</h2>
-          <p className={styles.projectsSubtitle}>
-            {subtitle ||
-              "A collection of all my works, with featured projects highlighted"}
-          </p>
+          <h2 className={styles.projectsTitle}>{displayHeading}</h2>
+          <p className={styles.projectsSubtitle}>{displaySubheading}</p>
         </div>
 
         {projects.length === 0 ? (
@@ -413,16 +375,18 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
         ) : (
           <div className={styles.carouselContainer}>
             {/* Desktop navigation buttons (sides) */}
-            <button
-              className={`${styles.carouselControl} ${styles.prevButton} ${styles.desktopOnly} ${atBeginning ? styles.disabledButton : ""}`}
-              onClick={goToPrev}
-              aria-label="View previous projects"
-              aria-disabled={atBeginning}
-              type="button"
-              disabled={atBeginning}
-            >
-              <FaChevronLeft aria-hidden="true" />
-            </button>
+            {projects.length > slidesToShow && (
+              <button
+                className={`${styles.carouselControl} ${styles.prevButton} ${styles.desktopOnly} ${atBeginning ? styles.disabledButton : ""}`}
+                onClick={goToPrev}
+                aria-label="View previous projects"
+                aria-disabled={atBeginning}
+                type="button"
+                disabled={atBeginning}
+              >
+                <FaChevronLeft aria-hidden="true" />
+              </button>
+            )}
 
             <div
               className={styles.carouselWrapper}
@@ -437,6 +401,7 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
                     data-project-id={project.id}
                     aria-roledescription="slide"
                     aria-label={`Project ${index + 1} of ${projects.length}: ${project.title}`}
+                    style={{ "--card-index": index }}
                   >
                     <div
                       className={`${styles.carouselCard} ${project.featured ? styles.featuredCard : ""}`}
@@ -455,15 +420,48 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
                         </div>
                       )}
 
-                      <div className={styles.projectImageContainer}>
-                        {project.image && (
-                          <img
-                            src={project.image}
-                            alt={project.title}
-                            className={styles.projectImage}
-                            loading="lazy"
-                          />
-                        )}
+                      <div
+                        className={styles.projectImageContainer}
+                        style={{
+                          backgroundColor:
+                            project.bg ||
+                            "rgba(var(--ifm-color-primary-rgb), 0.05)",
+                        }}
+                      >
+                        <img
+                          src={project.icon}
+                          alt={project.title}
+                          className={styles.projectImage}
+                          loading="lazy"
+                        />
+
+                        {/* Project tags */}
+                        {project.tags?.length > 0 &&
+                          (() => {
+                            const extraCount = project.tags.length - 3;
+                            return (
+                              <div className={styles.projectTags}>
+                                {project.tags.slice(0, 3).map((tag) => (
+                                  <span key={tag} className={styles.projectTag}>
+                                    {tag}
+                                  </span>
+                                ))}
+                                {extraCount > 0 && (
+                                  <Tooltip
+                                    msg={project.tags.slice(3).join(", ")}
+                                    underline={false}
+                                    gap={13}
+                                  >
+                                    <span
+                                      className={`${styles.projectTag} ${styles.extraTagBtn}`}
+                                    >
+                                      +{extraCount}
+                                    </span>
+                                  </Tooltip>
+                                )}
+                              </div>
+                            );
+                          })()}
 
                         {/* Featured badge */}
                         {project.featured && (
@@ -480,18 +478,8 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
                       <div className={styles.projectContent}>
                         <h3 className={styles.projectTitle}>{project.title}</h3>
 
-                        {project.tags?.length > 0 && (
-                          <div className={styles.projectTags}>
-                            {project.tags.map((tag) => (
-                              <span key={tag} className={styles.projectTag}>
-                                {tag}
-                              </span>
-                            ))}
-                          </div>
-                        )}
-
                         <p className={styles.projectDescription}>
-                          {project.description}
+                          {project.desc}
                         </p>
                       </div>
 
@@ -504,14 +492,14 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
                         )}
 
                         {renderProjectLink(
-                          project.github,
-                          FaGithub,
+                          project.repo,
+                          FaCode,
                           "Source",
                           `Repository with source code`,
                         )}
 
                         {renderProjectLink(
-                          project.Demo,
+                          project.demo,
                           FaPlay,
                           "Demo",
                           `Live demo for ${project.title}`,
@@ -566,16 +554,18 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
             </div>
 
             {/* Desktop navigation button (right side) */}
-            <button
-              className={`${styles.carouselControl} ${styles.nextButton} ${styles.desktopOnly} ${atEnd ? styles.disabledButton : ""}`}
-              onClick={goToNext}
-              aria-label="View next projects"
-              aria-disabled={atEnd}
-              type="button"
-              disabled={atEnd}
-            >
-              <FaChevronRight />
-            </button>
+            {projects.length > slidesToShow && (
+              <button
+                className={`${styles.carouselControl} ${styles.nextButton} ${styles.desktopOnly} ${atEnd ? styles.disabledButton : ""}`}
+                onClick={goToNext}
+                aria-label="View next projects"
+                aria-disabled={atEnd}
+                type="button"
+                disabled={atEnd}
+              >
+                <FaChevronRight />
+              </button>
+            )}
           </div>
         )}
       </div>