portosaurus 2.0.2 → 2.1.0

package/src/{components → theme/components}/ProjectsSection/index.js

@@ -1,8 +1,15 @@
-import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { useRef, useState, useEffect, useCallback, useMemo } from "react";
 import Slider from "react-slick";
-import { FaGithub, FaGlobe, FaPlay, FaChevronLeft, FaChevronRight, FaStar } from 'react-icons/fa';
+import {
+  FaGithub,
+  FaGlobe,
+  FaPlay,
+  FaChevronLeft,
+  FaChevronRight,
+  FaStar,
+} from "react-icons/fa";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import styles from './styles.module.css';
+import styles from "./styles.module.css";
 
 // Import slick carousel css
 import "slick-carousel/slick/slick.css";
@@ -23,102 +30,119 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
   const activeDotRef = useRef(null);
   const dotsContainerRef = useRef(null);
 
-  // Default Settings 
+  // Default Settings
   const projectDefaults = {
     title: "Future Project",
-    desc:  "Coming soon...",
+    desc: "Coming soon...",
     image: "img/project-blank.png",
     state: "active",
-    tags:  ["planned"]
+    tags: ["planned"],
   };
 
+  const createPlaceholders = useCallback(
+    (count, existingProjects) => {
+      if (existingProjects.length === 0) return [];
 
-  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]);
+      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],
+  );
 
   // Get current slidesToShow based on screen width
   const getVisibleSlidesPerView = useCallback(() => {
-    if (typeof window === 'undefined') return 3;
-    
+    if (typeof window === "undefined") return 3;
+
     const width = window.innerWidth;
     if (width <= 600) return 1;
     if (width <= 1024) return 2;
     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
+
+  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,
       };
-      
-      // 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
-    };
-  }, [createPlaceholders, projectDefaults]);
+    },
+    [createPlaceholders, projectDefaults],
+  );
 
   // Load and set up projects on initial load and on resize
   useEffect(() => {
     const projectShelf = siteConfig.customFields?.projects;
-    const configuredProjects = projectShelf?.enable ? projectShelf?.projects || [] : [];
-    
+    const configuredProjects = projectShelf?.enable
+      ? projectShelf?.projects || []
+      : [];
+
     const handleLayout = () => {
       const newSlidesToShow = getVisibleSlidesPerView();
-      
+
       if (newSlidesToShow !== slidesToShow || !projects.length) {
         setSlidesToShow(newSlidesToShow);
-        const { projects: newProjects, totalPages: newTotalPages } = 
+        const { projects: newProjects, totalPages: newTotalPages } =
           prepareProjects(configuredProjects, newSlidesToShow);
-        
+
         setProjects(newProjects);
         setTotalPages(newTotalPages);
         setAtEnd(newProjects.length <= newSlidesToShow);
@@ -127,124 +151,135 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
 
     // Initial setup
     handleLayout();
-    
+
     // Resize handler
-    window.addEventListener('resize', handleLayout);
-    return () => window.removeEventListener('resize', handleLayout);
-  }, [siteConfig, getVisibleSlidesPerView, prepareProjects, slidesToShow, projects.length]);
+    window.addEventListener("resize", handleLayout);
+    return () => window.removeEventListener("resize", handleLayout);
+  }, [
+    siteConfig,
+    getVisibleSlidesPerView,
+    prepareProjects,
+    slidesToShow,
+    projects.length,
+  ]);
 
   // Method to go to a specific slide
-  const goToSlide = useCallback((index) => {
-    if (sliderRef.current) {
-
-      sliderRef.current.slickGoTo(index * slidesToShow);
-      setCurrentSlide(index);
-
-    }
-  }, [slidesToShow]);
+  const goToSlide = useCallback(
+    (index) => {
+      if (sliderRef.current) {
+        sliderRef.current.slickGoTo(index * slidesToShow);
+        setCurrentSlide(index);
+      }
+    },
+    [slidesToShow],
+  );
 
   useEffect(() => {
     const scrollTimeout = setTimeout(() => {
-
       if (activeDotRef.current && dotsContainerRef.current) {
         const container = dotsContainerRef.current;
         const activeDot = activeDotRef.current;
-        
-        try {
 
+        try {
           // For first few
           const adaptiveThreshold = Math.max(1, Math.floor(totalPages * 0.1));
           if (currentSlide <= adaptiveThreshold) {
             container.scrollTo({
               left: 0,
-              behavior: 'smooth'
+              behavior: "smooth",
             });
             return;
           }
-          
+
           // For last few
           if (currentSlide >= totalPages - 2) {
             const scrollMax = container.scrollWidth - container.clientWidth;
             container.scrollTo({
               left: scrollMax,
-              behavior: 'smooth'
+              behavior: "smooth",
             });
             return;
           }
-          
+
           // Center the active dot at mobile
           const dotRect = activeDot.getBoundingClientRect();
           const containerRect = container.getBoundingClientRect();
-          
+
           // Check if dot is within visible area with margins
           const isOutsideLeft = dotRect.left < containerRect.left + 20;
           const isOutsideRight = dotRect.right > containerRect.right - 20;
-          
+
           if (isOutsideLeft || isOutsideRight) {
             const dotPosition = activeDot.offsetLeft;
             const dotWidth = activeDot.clientWidth;
             const containerWidth = container.clientWidth;
-            const scrollPosition = dotPosition - (containerWidth / 2) + (dotWidth / 2);
-            
+            const scrollPosition =
+              dotPosition - containerWidth / 2 + dotWidth / 2;
+
             // Disable smooth scroll if not supported
-            if ('scrollBehavior' in document.documentElement.style) {
+            if ("scrollBehavior" in document.documentElement.style) {
               container.scrollTo({
                 left: Math.max(0, scrollPosition),
-                behavior: 'smooth'
+                behavior: "smooth",
               });
             } else {
               container.scrollLeft = Math.max(0, scrollPosition);
             }
           }
         } catch (error) {
-          console.warn('Dot scrolling error:', error);
+          console.warn("Dot scrolling error:", error);
         }
       }
     }, 50);
-    
+
     return () => clearTimeout(scrollTimeout);
   }, [currentSlide, totalPages]);
 
   // Carousel settings
-  const settings = useMemo(() => ({
-    dots: false,
-    infinite: false,
-    speed: 600,
-    slidesToShow: Math.min(projects.length, slidesToShow),
-    slidesToScroll: slidesToShow,
-    autoplay: false,
-    adaptiveHeight: false,
-    centerPadding: '20px',
-    centerMode: false,
-    variableWidth: false,
-    swipeToSlide: false,
-    focusOnSelect: false,
-    responsive: [
-      {
-        breakpoint: 1024,
-        settings: {
-          slidesToShow: Math.min(projects.length, 2),
-          slidesToScroll: 2,
-          dots: false,
-        }
+  const settings = useMemo(
+    () => ({
+      dots: false,
+      infinite: false,
+      speed: 600,
+      slidesToShow: Math.min(projects.length, slidesToShow),
+      slidesToScroll: slidesToShow,
+      autoplay: false,
+      adaptiveHeight: false,
+      centerPadding: "20px",
+      centerMode: false,
+      variableWidth: false,
+      swipeToSlide: false,
+      focusOnSelect: false,
+      responsive: [
+        {
+          breakpoint: 1024,
+          settings: {
+            slidesToShow: Math.min(projects.length, 2),
+            slidesToScroll: 2,
+            dots: false,
+          },
+        },
+        {
+          breakpoint: 600,
+          settings: {
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            dots: false,
+            arrows: false,
+          },
+        },
+      ],
+      className: styles.projectsCarousel,
+      beforeChange: (current, next) => {
+        setAtBeginning(next === 0);
+        setCurrentSlide(Math.floor(next / slidesToShow));
+        setAtEnd(
+          next + Math.min(projects.length, slidesToShow) >= projects.length,
+        );
       },
-      {
-        breakpoint: 600,
-        settings: {
-          slidesToShow: 1,
-          slidesToScroll: 1,
-          dots: false,
-          arrows: false,
-        }
-      }
-    ],
-    className: styles.projectsCarousel,
-    beforeChange: (current, next) => {
-      setAtBeginning(next === 0);
-      setCurrentSlide(Math.floor(next / slidesToShow));
-      setAtEnd(next + Math.min(projects.length, slidesToShow) >= projects.length);
-    },
-  }), [projects, slidesToShow]);
+    }),
+    [projects, slidesToShow],
+  );
 
   // Navigation handlers
   const goToNext = useCallback(() => {
@@ -264,10 +299,10 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
     if (!url) return null;
 
     return (
-      <a 
-        href={url} 
-        target="_blank" 
-        rel="noopener noreferrer" 
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
         className={styles.projectLink}
         aria-label={ariaLabel}
       >
@@ -279,48 +314,48 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
 
   // Get state label and class
   const getProjectStateInfo = useCallback((state) => {
-    switch(state?.toLowerCase()) {
+    switch (state?.toLowerCase()) {
       // For projects currently in active development
-      case 'active':
-        return { 
-          label: 'Active', 
+      case "active":
+        return {
+          label: "Active",
           className: styles.stateActive,
         };
       // For finished projects
-      case 'completed':
-        return { 
-          label: 'Completed', 
+      case "completed":
+        return {
+          label: "Completed",
           className: styles.stateCompleted,
         };
       // For projects receiving updates/maintenance
-      case 'maintenance':
-        return { 
-          label: 'Maintenance', 
+      case "maintenance":
+        return {
+          label: "Maintenance",
           className: styles.stateMaintenance,
         };
       // For temporarily paused development
-      case 'paused':
-        return { 
-          label: 'Paused', 
+      case "paused":
+        return {
+          label: "Paused",
           className: styles.statePaused,
         };
       // For projects no longer maintained
-      case 'archived':
-        return { 
-          label: 'Archived', 
+      case "archived":
+        return {
+          label: "Archived",
           className: styles.stateArchived,
         };
       // For future projects in planning stage
-      case 'planned':
-        return { 
-          label: 'Planned', 
+      case "planned":
+        return {
+          label: "Planned",
           className: styles.statePlanned,
         };
       // Default state when not specified
-      case 'n/a':
+      case "n/a":
       default:
-        return { 
-          label: 'N/A', 
+        return {
+          label: "N/A",
           className: styles.stateNA,
         };
     }
@@ -332,9 +367,9 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
 
     // Determine if we should use scrollable or centered layout
     const fewDots = totalPages <= 5;
-    
+
     return (
-      <div 
+      <div
         className={`${styles.navDotsContainer} ${fewDots ? styles.centerDots : styles.scrollDots}`}
         role="tablist"
         aria-label="Project carousel navigation"
@@ -342,7 +377,7 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
         {Array.from({ length: totalPages }, (_, i) => (
           <button
             key={i}
-            className={`${styles.navDot} ${currentSlide === i ? styles.activeDot : ''}`}
+            className={`${styles.navDot} ${currentSlide === i ? styles.activeDot : ""}`}
             onClick={() => goToSlide(i)}
             aria-label={`Go to slide ${i + 1} of ${totalPages}`}
             aria-selected={currentSlide === i}
@@ -356,17 +391,21 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
   }, [currentSlide, totalPages, goToSlide]);
 
   return (
-    <div id={id} className={`${styles.projectsSection} ${className || ''}`} role="region" aria-label="Projects section">
+    <div
+      id={id}
+      className={`${styles.projectsSection} ${className || ""}`}
+      role="region"
+      aria-label="Projects section"
+    >
       <div className={styles.projectsContainer}>
         <div className={styles.projectsHeader}>
-          <h2 className={styles.projectsTitle}>
-            {title || "My Projects"}
-          </h2>
+          <h2 className={styles.projectsTitle}>{title || "My Projects"}</h2>
           <p className={styles.projectsSubtitle}>
-            {subtitle || "A collection of all my works, with featured projects highlighted"}
+            {subtitle ||
+              "A collection of all my works, with featured projects highlighted"}
           </p>
         </div>
-        
+
         {projects.length === 0 ? (
           <div className={styles.noProjects}>
             <p>No projects to display.</p>
@@ -374,8 +413,8 @@ 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 : ''}`} 
+            <button
+              className={`${styles.carouselControl} ${styles.prevButton} ${styles.desktopOnly} ${atBeginning ? styles.disabledButton : ""}`}
               onClick={goToPrev}
               aria-label="View previous projects"
               aria-disabled={atBeginning}
@@ -384,25 +423,33 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
             >
               <FaChevronLeft aria-hidden="true" />
             </button>
-            
-            <div className={styles.carouselWrapper} aria-roledescription="carousel" aria-label="Projects carousel">
+
+            <div
+              className={styles.carouselWrapper}
+              aria-roledescription="carousel"
+              aria-label="Projects carousel"
+            >
               <Slider ref={sliderRef} {...settings}>
                 {projects.map((project, index) => (
-                  <div 
-                    key={project.id || project.title + index} 
-                    className={styles.carouselSlide} 
+                  <div
+                    key={project.id || project.title + index}
+                    className={styles.carouselSlide}
                     data-project-id={project.id}
-                    aria-roledescription="slide" 
+                    aria-roledescription="slide"
                     aria-label={`Project ${index + 1} of ${projects.length}: ${project.title}`}
                   >
-                    <div className={`${styles.carouselCard} ${project.featured ? styles.featuredCard : ''}`}>
+                    <div
+                      className={`${styles.carouselCard} ${project.featured ? styles.featuredCard : ""}`}
+                    >
                       {/* Project state badge */}
                       {project.state && (
-                        <div 
+                        <div
                           className={styles.projectStateBadge}
                           title={`Project status: ${getProjectStateInfo(project.state).label}`}
                         >
-                          <span className={`${styles.projectStateLabel} ${getProjectStateInfo(project.state).className}`}>
+                          <span
+                            className={`${styles.projectStateLabel} ${getProjectStateInfo(project.state).className}`}
+                          >
                             {getProjectStateInfo(project.state).label}
                           </span>
                         </div>
@@ -410,74 +457,82 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
 
                       <div className={styles.projectImageContainer}>
                         {project.image && (
-                          <img 
-                            src={project.image} 
-                            alt={project.title} 
-                            className={styles.projectImage} 
+                          <img
+                            src={project.image}
+                            alt={project.title}
+                            className={styles.projectImage}
                             loading="lazy"
                           />
                         )}
-                        
+
                         {/* Featured badge */}
                         {project.featured && (
-                          <div className={styles.featuredBadge} title="Featured Project" aria-label="Featured project">
+                          <div
+                            className={styles.featuredBadge}
+                            title="Featured Project"
+                            aria-label="Featured project"
+                          >
                             <FaStar aria-hidden="true" />
                           </div>
                         )}
                       </div>
-                      
+
                       <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>
+                            {project.tags.map((tag) => (
+                              <span key={tag} className={styles.projectTag}>
+                                {tag}
+                              </span>
                             ))}
                           </div>
                         )}
-                        
-                        <p className={styles.projectDescription}>{project.description}</p>
+
+                        <p className={styles.projectDescription}>
+                          {project.description}
+                        </p>
                       </div>
-                      
+
                       <div className={styles.projectLinks}>
                         {renderProjectLink(
-                          project.website, 
-                          FaGlobe, 
-                          "Website", 
-                          `Visit ${project.title} website`
+                          project.website,
+                          FaGlobe,
+                          "Website",
+                          `Visit ${project.title} website`,
                         )}
-                        
+
                         {renderProjectLink(
-                          project.github, 
-                          FaGithub, 
-                          "Source", 
-                          `Repository with source code`
+                          project.github,
+                          FaGithub,
+                          "Source",
+                          `Repository with source code`,
                         )}
-                        
+
                         {renderProjectLink(
-                          project.Demo, 
-                          FaPlay, 
-                          "Demo", 
-                          `Live demo for ${project.title}`
+                          project.Demo,
+                          FaPlay,
+                          "Demo",
+                          `Live demo for ${project.title}`,
                         )}
                       </div>
                     </div>
                   </div>
                 ))}
               </Slider>
-              
+
               {/* Desktop navigation dots */}
               <div className={styles.desktopDotsContainer}>
                 {renderNavigationDots()}
               </div>
-              
+
               {/* Mobile navigation controls (bottom) */}
               <div className={styles.mobileNavigationControls}>
                 {totalPages > 1 && (
                   <>
-                    <button 
-                      className={`${styles.carouselControl} ${styles.prevButton} ${atBeginning ? styles.disabledButton : ''}`} 
+                    <button
+                      className={`${styles.carouselControl} ${styles.prevButton} ${atBeginning ? styles.disabledButton : ""}`}
                       onClick={goToPrev}
                       aria-label="View previous projects"
                       aria-disabled={atBeginning}
@@ -486,17 +541,17 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
                     >
                       <FaChevronLeft aria-hidden="true" />
                     </button>
-                    
+
                     {/* Mobile navigation dots */}
-                    <div 
+                    <div
                       className={styles.dotsScrollContainer}
                       ref={dotsContainerRef}
                     >
                       {renderNavigationDots()}
                     </div>
-                    
-                    <button 
-                      className={`${styles.carouselControl} ${styles.nextButton} ${atEnd ? styles.disabledButton : ''}`} 
+
+                    <button
+                      className={`${styles.carouselControl} ${styles.nextButton} ${atEnd ? styles.disabledButton : ""}`}
                       onClick={goToNext}
                       aria-label="View next projects"
                       aria-disabled={atEnd}
@@ -509,10 +564,10 @@ export default function ProjectsSection({ id, className, title, subtitle }) {
                 )}
               </div>
             </div>
-            
+
             {/* Desktop navigation button (right side) */}
-            <button 
-              className={`${styles.carouselControl} ${styles.nextButton} ${styles.desktopOnly} ${atEnd ? styles.disabledButton : ''}`} 
+            <button
+              className={`${styles.carouselControl} ${styles.nextButton} ${styles.desktopOnly} ${atEnd ? styles.disabledButton : ""}`}
               onClick={goToNext}
               aria-label="View next projects"
               aria-disabled={atEnd}