portosaurus 2.0.2 → 2.1.0

package/src/{pages → theme/pages}/tasks.js

@@ -8,23 +8,22 @@
       This Page is completely Vibe coded. No code except small tweaks is written by me.
 */
 
-
-import { useState } from 'react';
-import Layout from '@theme/Layout';
-import Head from '@docusaurus/Head';
+import { useState } from "react";
+import Layout from "@theme/Layout";
+import Head from "@docusaurus/Head";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import '../css/tasks.css';
-import { 
-  FaClipboardList, 
-  FaSyncAlt, 
-  FaClock, 
+import "../css/tasks.css";
+import {
+  FaClipboardList,
+  FaSyncAlt,
+  FaClock,
   FaCheckCircle,
   FaFire,
   FaThermometerHalf,
   FaSnowflake,
   FaTasks,
-  FaExclamationTriangle
-} from 'react-icons/fa';
+  FaExclamationTriangle,
+} from "react-icons/fa";
 
 function TaskList({ filterStatus, taskList }) {
   if (!taskList || !Array.isArray(taskList)) {
@@ -35,9 +34,9 @@ function TaskList({ filterStatus, taskList }) {
       </div>
     );
   }
-  
-  const filteredTasks = taskList.filter(task => 
-    filterStatus ? task.status === filterStatus : true
+
+  const filteredTasks = taskList.filter((task) =>
+    filterStatus ? task.status === filterStatus : true,
   );
 
   if (filteredTasks.length === 0) {
@@ -53,14 +52,14 @@ function TaskList({ filterStatus, taskList }) {
   const sortedTasks = [...filteredTasks].sort((a, b) => {
     const statusOrder = { active: 1, pending: 2, completed: 3 };
     const statusDiff = statusOrder[a.status] - statusOrder[b.status];
-    
+
     if (statusDiff !== 0) return statusDiff;
-    
+
     // Priority order: high, medium, low
     const priorityOrder = { high: 1, medium: 2, low: 3 };
     return priorityOrder[a.priority] - priorityOrder[b.priority];
   });
-  
+
   return (
     <div className="task-list-container">
       <div className="task-list-table">
@@ -72,15 +71,27 @@ function TaskList({ filterStatus, taskList }) {
 
         <div className="task-rows">
           {sortedTasks.map((task, index) => (
-            <div 
-              key={index} 
-              className={`task-row ${task.status === 'completed' ? 'task-row-completed' : ''} ${index % 2 === 1 ? 'task-row-striped' : ''}`}
+            <div
+              key={index}
+              className={`task-row ${task.status === "completed" ? "task-row-completed" : ""} ${index % 2 === 1 ? "task-row-striped" : ""}`}
             >
               <div className="task-cell task-cell-status">
                 <span className={`badge badge-status-${task.status}`}>
-                  {task.status === 'completed' && <><FaCheckCircle className="badge-icon" /> Done</>}
-                  {task.status === 'active' && <><FaSyncAlt className="badge-icon spin" /> In Progress</>}
-                  {task.status === 'pending' && <><FaClock className="badge-icon" /> Planned</>}
+                  {task.status === "completed" && (
+                    <>
+                      <FaCheckCircle className="badge-icon" /> Done
+                    </>
+                  )}
+                  {task.status === "active" && (
+                    <>
+                      <FaSyncAlt className="badge-icon spin" /> In Progress
+                    </>
+                  )}
+                  {task.status === "pending" && (
+                    <>
+                      <FaClock className="badge-icon" /> Planned
+                    </>
+                  )}
                 </span>
               </div>
 
@@ -93,9 +104,21 @@ function TaskList({ filterStatus, taskList }) {
 
               <div className="task-cell task-cell-priority">
                 <span className={`badge badge-priority-${task.priority}`}>
-                  {task.priority === 'high' && <><FaFire className="badge-icon" /> High</>}
-                  {task.priority === 'medium' && <><FaThermometerHalf className="badge-icon" /> Medium</>}
-                  {task.priority === 'low' && <><FaSnowflake className="badge-icon" /> Low</>}
+                  {task.priority === "high" && (
+                    <>
+                      <FaFire className="badge-icon" /> High
+                    </>
+                  )}
+                  {task.priority === "medium" && (
+                    <>
+                      <FaThermometerHalf className="badge-icon" /> Medium
+                    </>
+                  )}
+                  {task.priority === "low" && (
+                    <>
+                      <FaSnowflake className="badge-icon" /> Low
+                    </>
+                  )}
                 </span>
               </div>
             </div>
@@ -106,16 +129,17 @@ function TaskList({ filterStatus, taskList }) {
   );
 }
 
-
 function TaskStats({ taskList }) {
   if (!taskList || !Array.isArray(taskList)) {
     return null;
   }
-  
+
   const total = taskList.length;
-  const completed = taskList.filter(task => task.status === 'completed').length;
-  const active = taskList.filter(task => task.status === 'active').length;
-  const pending = taskList.filter(task => task.status === 'pending').length;
+  const completed = taskList.filter(
+    (task) => task.status === "completed",
+  ).length;
+  const active = taskList.filter((task) => task.status === "active").length;
+  const pending = taskList.filter((task) => task.status === "pending").length;
   const percentComplete = total > 0 ? Math.round((completed / total) * 100) : 0;
 
   return (
@@ -140,7 +164,10 @@ function TaskStats({ taskList }) {
         <div className="stat-label">Progress</div>
         <div className="stat-value">{percentComplete}%</div>
         <div className="progress-bar-container">
-          <div className="progress-bar" style={{width: `${percentComplete}%`}}></div>
+          <div
+            className="progress-bar"
+            style={{ width: `${percentComplete}%` }}
+          ></div>
         </div>
       </div>
     </div>
@@ -148,55 +175,82 @@ function TaskStats({ taskList }) {
 }
 
 function TaskTabs({ taskList }) {
-  const [activeTab, setActiveTab] = useState('all');
-  
+  const [activeTab, setActiveTab] = useState("all");
+
   if (!taskList || !Array.isArray(taskList)) {
     return null;
   }
-  
+
   const tabData = [
-    { id: 'all', label: 'All Tasks', icon: <FaClipboardList />, count: taskList.length },
-    { id: 'active', label: 'In Progress', icon: <FaSyncAlt className="spin" />, count: taskList.filter(t => t.status === 'active').length },
-    { id: 'pending', label: 'Planned', icon: <FaClock />, count: taskList.filter(t => t.status === 'pending').length },
-    { id: 'completed', label: 'Completed', icon: <FaCheckCircle />, count: taskList.filter(t => t.status === 'completed').length },
+    {
+      id: "all",
+      label: "All Tasks",
+      icon: <FaClipboardList />,
+      count: taskList.length,
+    },
+    {
+      id: "active",
+      label: "In Progress",
+      icon: <FaSyncAlt className="spin" />,
+      count: taskList.filter((t) => t.status === "active").length,
+    },
+    {
+      id: "pending",
+      label: "Planned",
+      icon: <FaClock />,
+      count: taskList.filter((t) => t.status === "pending").length,
+    },
+    {
+      id: "completed",
+      label: "Completed",
+      icon: <FaCheckCircle />,
+      count: taskList.filter((t) => t.status === "completed").length,
+    },
   ];
-  
+
   return (
     <div className="task-tabs-container">
       <div className="task-tabs" role="tablist" aria-label="Task categories">
-        {tabData.map(tab => (
-          <button 
+        {tabData.map((tab) => (
+          <button
             key={tab.id}
-            className={`task-tab ${activeTab === tab.id ? 'task-tab-active' : ''}`}
+            className={`task-tab ${activeTab === tab.id ? "task-tab-active" : ""}`}
             onClick={() => setActiveTab(tab.id)}
             role="tab"
             aria-selected={activeTab === tab.id}
             aria-controls={`tab-content-${tab.id}`}
             id={`tab-${tab.id}`}
           >
-            <span className="task-tab-icon" aria-hidden="true">{tab.icon}</span>
+            <span className="task-tab-icon" aria-hidden="true">
+              {tab.icon}
+            </span>
             <span className="task-tab-label">{tab.label}</span>
             <span className="task-tab-count">{tab.count}</span>
           </button>
         ))}
       </div>
-      
-      <div 
-        className="task-tab-content" 
-        role="tabpanel" 
+
+      <div
+        className="task-tab-content"
+        role="tabpanel"
         id={`tab-content-${activeTab}`}
         aria-labelledby={`tab-${activeTab}`}
       >
-        {activeTab === 'all' && <TaskList taskList={taskList} />}
-        {activeTab === 'active' && <TaskList taskList={taskList} filterStatus="active" />}
-        {activeTab === 'pending' && <TaskList taskList={taskList} filterStatus="pending" />}
-        {activeTab === 'completed' && <TaskList taskList={taskList} filterStatus="completed" />}
+        {activeTab === "all" && <TaskList taskList={taskList} />}
+        {activeTab === "active" && (
+          <TaskList taskList={taskList} filterStatus="active" />
+        )}
+        {activeTab === "pending" && (
+          <TaskList taskList={taskList} filterStatus="pending" />
+        )}
+        {activeTab === "completed" && (
+          <TaskList taskList={taskList} filterStatus="completed" />
+        )}
       </div>
     </div>
   );
 }
 
-
 export default function TasksPage() {
   const { siteConfig } = useDocusaurusContext();
   const { customFields } = siteConfig || {};
@@ -204,12 +258,16 @@ export default function TasksPage() {
   const tasksPage = customFields?.tasksPage;
   const title = tasksPage.title;
   const description = tasksPage.description;
-  const taskList = tasksPage.enable && tasksPage.taskList ? tasksPage.taskList : [];
+  const taskList =
+    tasksPage.enable && tasksPage.taskList ? tasksPage.taskList : [];
 
   // If tasks are disabled, show a notice box instead
   if (!tasksPage || !tasksPage.enable) {
     return (
-      <Layout title="Tasks are Disabled" description="Tasks are currently disabled">
+      <Layout
+        title="Tasks are Disabled"
+        description="Tasks are currently disabled"
+      >
         <div className="tasks-container">
           <div className="tasks-content">
             <div className="tasks-disabled-notice">
@@ -218,7 +276,8 @@ export default function TasksPage() {
               </div>
               <h2 className="disabled-title">Tasks are currently disabled</h2>
               <p className="disabled-help">
-                To enable tasks, set <code>tasks_page.enable</code> to <code>true</code>
+                To enable tasks, set <code>tasks_page.enable</code> to{" "}
+                <code>true</code>
               </p>
             </div>
           </div>

package/src/{core/client-utils → theme/utils}/HashNavigation.js

@@ -1,11 +1,11 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";
 
 // AI Generated (partially)
 
 /**
  * <HashNavigation/> Component to handle hash-based navigation with visual effects
  * Should be added at the bottom of the page
- * 
+ *
  * @param {Object} props Component props
  * @param {string} props.elementPrefix Prefix for element IDs (default: 'card-')
  * @param {string} props.elementSelector Selector for all elements in the group (default: '.content-card')
@@ -21,42 +21,41 @@ import { useEffect, useRef } from 'react';
  * @param {string} props.styles.blurAmount Blur amount for non-highlighted elements (default: '4px')
  * @param {string} props.styles.blurOpacity Opacity for blurred elements (default: '0.3')
  */
-export default function HashNavigation({ 
-  elementPrefix = 'card-',
-  elementSelector = '.content-card',
-  containerSelector = '.container',
+export default function HashNavigation({
+  elementPrefix = "card-",
+  elementSelector = ".content-card",
+  containerSelector = ".container",
   effectDuration = 6000,
   scrollDelay = 300,
-  scrollOptions = { behavior: 'smooth', block: 'center' },
+  scrollOptions = { behavior: "smooth", block: "center" },
   enabled = true,
-  styles = {}
+  styles = {},
 }) {
-  const styleId = 'hash-navigation-styles';
-  const highlightClass = 'hash-nav-highlight';
-  const blurClass = 'hash-nav-blur';
-  const containerActiveClass = 'hash-nav-active';
-  
+  const styleId = "hash-navigation-styles";
+  const highlightClass = "hash-nav-highlight";
+  const blurClass = "hash-nav-blur";
+  const containerActiveClass = "hash-nav-active";
+
   // Default styles
   const {
-    overlayColor = 'rgba(var(--ifm-color-emphasis-200-rgb), 0.5)',
-    highlightShadow = '0 0 30px 10px var(--ifm-color-primary)',
-    highlightScale = '1.05',
-    blurAmount = '4px',
-    blurOpacity = '0.3'
+    overlayColor = "rgba(var(--ifm-color-emphasis-200-rgb), 0.5)",
+    highlightShadow = "0 0 30px 10px var(--ifm-color-primary)",
+    highlightScale = "1.05",
+    blurAmount = "4px",
+    blurOpacity = "0.3",
   } = styles;
-  
+
   // Reference to track if styles have been injected
   const stylesInjected = useRef(false);
-  
+
   // Inject the component styles
   useEffect(() => {
-
     // Don't inject styles if already present
     if (document.getElementById(styleId) || stylesInjected.current) {
       return;
     }
-    
-    const styleElement = document.createElement('style');
+
+    const styleElement = document.createElement("style");
 
     styleElement.id = styleId;
 
@@ -122,10 +121,10 @@ export default function HashNavigation({
         }
       }
     `;
-    
+
     document.head.appendChild(styleElement);
     stylesInjected.current = true;
-    
+
     // Clean up on unmount
     return () => {
       const existingStyle = document.getElementById(styleId);
@@ -134,8 +133,14 @@ export default function HashNavigation({
       }
       stylesInjected.current = false;
     };
-  }, [containerSelector, overlayColor, highlightShadow, highlightScale, blurAmount, blurOpacity]);
-  
+  }, [
+    containerSelector,
+    overlayColor,
+    highlightShadow,
+    highlightScale,
+    blurAmount,
+    blurOpacity,
+  ]);
 
   // Main hash navigation logic
   useEffect(() => {
@@ -143,16 +148,16 @@ export default function HashNavigation({
 
     if (window.location.hash) {
       const hashValue = window.location.hash.substring(1);
-      const targetElement = document.getElementById(`${elementPrefix}${hashValue}`);
+      const targetElement = document.getElementById(
+        `${elementPrefix}${hashValue}`,
+      );
 
       if (targetElement) {
-
         // Wait a moment for the page to fully render
         setTimeout(() => {
-
           // Scroll to the element
           targetElement.scrollIntoView(scrollOptions);
-          
+
           // Get the container to add the overlay effect
           const container = document.querySelector(containerSelector);
           if (container) {
@@ -166,15 +171,15 @@ export default function HashNavigation({
           targetElement.classList.add(highlightClass);
 
           // Add blur to all other elements
-          allElements.forEach(element => {
+          allElements.forEach((element) => {
             if (element !== targetElement) {
               element.classList.add(blurClass);
             }
           });
 
           // Create clickable overlay for dismissing effects
-          const overlay = document.createElement('div');
-          overlay.className = 'hash-nav-overlay';
+          const overlay = document.createElement("div");
+          overlay.className = "hash-nav-overlay";
 
           document.body.appendChild(overlay);
 
@@ -182,50 +187,48 @@ export default function HashNavigation({
 
           // remove effects
           const removeEffects = () => {
-
             if (effectTimeoutId) {
               clearTimeout(effectTimeoutId);
               effectTimeoutId = null;
             }
 
             // Remove effects
-            allElements.forEach(element => {
+            allElements.forEach((element) => {
               element.classList.remove(blurClass);
             });
 
             targetElement.classList.remove(highlightClass);
-            
+
             // Remove the container overlay
             if (container) {
               container.classList.remove(containerActiveClass);
             }
-            
+
             // Remove clickable overlay
             if (overlay && overlay.parentNode) {
               overlay.parentNode.removeChild(overlay);
             }
 
             // Remove event listeners after effects are cleared
-            overlay.removeEventListener('click', removeEffects);
-            overlay.removeEventListener('touchstart', removeEffects);
-            document.removeEventListener('keydown', handleKeyDown);
+            overlay.removeEventListener("click", removeEffects);
+            overlay.removeEventListener("touchstart", removeEffects);
+            document.removeEventListener("keydown", handleKeyDown);
           };
-          
+
           // Add keyboard escape handler
           const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
+            if (e.key === "Escape") {
               removeEffects();
             }
           };
 
           // Add event listeners to dismiss effects
-          overlay.addEventListener('click', removeEffects);
-          overlay.addEventListener('touchstart', removeEffects);
-          document.addEventListener('keydown', handleKeyDown);
+          overlay.addEventListener("click", removeEffects);
+          overlay.addEventListener("touchstart", removeEffects);
+          document.addEventListener("keydown", handleKeyDown);
 
           // Set timeout to automatically remove effects after duration
           effectTimeoutId = setTimeout(removeEffects, effectDuration);
-
         }, scrollDelay);
       }
     }
@@ -233,7 +236,7 @@ export default function HashNavigation({
     // Cleanup
     return () => {
       const container = document.querySelector(containerSelector);
-      const overlay = document.querySelector('.hash-nav-overlay');
+      const overlay = document.querySelector(".hash-nav-overlay");
 
       if (container) {
         container.classList.remove(containerActiveClass);
@@ -244,7 +247,15 @@ export default function HashNavigation({
         overlay.parentNode.removeChild(overlay);
       }
     };
-  }, [enabled, elementPrefix, elementSelector, containerSelector, effectDuration, scrollDelay, scrollOptions]);
+  }, [
+    enabled,
+    elementPrefix,
+    elementSelector,
+    containerSelector,
+    effectDuration,
+    scrollDelay,
+    scrollOptions,
+  ]);
 
   return null;
 }

package/src/{core/client-utils → theme/utils}/updateTitle.js

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
-import { useLocation } from '@docusaurus/router';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useEffect, useState } from "react";
+import { useLocation } from "@docusaurus/router";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
 // AI Generated
 
@@ -13,11 +13,10 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
  * @returns {null} This component doesn't render anything visible
  */
 
-
-export default function UpdateTitle({ 
-  sections = {}, 
+export default function UpdateTitle({
+  sections = {},
   defaultTitle = null,
-  enabled = true 
+  enabled = true,
 }) {
   const location = useLocation();
   const { siteConfig } = useDocusaurusContext();
@@ -27,44 +26,41 @@ export default function UpdateTitle({
   const effectiveDefaultTitle = defaultTitle || siteConfig.title;
 
   useEffect(() => {
-
     // Only run if enabled
     if (!enabled) return;
 
     // Use provided sections or default to empty object
-    const sectionTitles = Object.keys(sections).length > 0 
-      ? sections 
-      : {};
+    const sectionTitles = Object.keys(sections).length > 0 ? sections : {};
 
     const updateTitle = () => {
       // Get all sections we want to track
       const sectionsToTrack = Object.keys(sectionTitles)
-        .map(id => document.getElementById(id))
+        .map((id) => document.getElementById(id))
         .filter(Boolean);
-      
+
       if (sectionsToTrack.length === 0) {
         // No sections found, use default title
         setCurrentTitle(effectiveDefaultTitle);
         return;
       }
-      
+
       // Calculate which section is most visible
       const viewportHeight = window.innerHeight;
       let maxVisibleSection = null;
       let maxVisibleArea = 0;
-      
-      sectionsToTrack.forEach(section => {
+
+      sectionsToTrack.forEach((section) => {
         const rect = section.getBoundingClientRect();
         const visibleTop = Math.max(0, rect.top);
         const visibleBottom = Math.min(viewportHeight, rect.bottom);
         const visibleArea = Math.max(0, visibleBottom - visibleTop);
-        
+
         if (visibleArea > maxVisibleArea) {
           maxVisibleArea = visibleArea;
           maxVisibleSection = section.id;
         }
       });
-      
+
       // Update title state based on visible section
       if (maxVisibleSection && sectionTitles[maxVisibleSection]) {
         setCurrentTitle(sectionTitles[maxVisibleSection]);
@@ -72,7 +68,7 @@ export default function UpdateTitle({
         setCurrentTitle(effectiveDefaultTitle);
       }
     };
-    
+
     // Add scroll event listener with throttling
     let isScrolling = false;
     const handleScroll = () => {
@@ -84,15 +80,15 @@ export default function UpdateTitle({
         isScrolling = true;
       }
     };
-    
-    window.addEventListener('scroll', handleScroll);
-    
+
+    window.addEventListener("scroll", handleScroll);
+
     // Initial call
     updateTitle();
-    
+
     // Clean up
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener("scroll", handleScroll);
     };
   }, [location.pathname, sections, effectiveDefaultTitle, enabled]);
 
@@ -104,4 +100,4 @@ export default function UpdateTitle({
 
   // Component doesn't render anything visible
   return null;
-}
+}

package/src/{core/build-utils → utils/build}/cssUtils.mjs

@@ -15,10 +15,12 @@ export function getCssVar(name) {
     const cssContent = fs.readFileSync(cssPath, "utf8");
 
     if (name === "--ifm-color-primary") {
-      const match = cssContent.match(/--ifm-color-primary:\s*(#[a-fA-F0-9]{3,6})/);
+      const match = cssContent.match(
+        /--ifm-color-primary:\s*(#[a-fA-F0-9]{3,6})/,
+      );
       return match ? match[1] : "#2e8555";
     }
-    
+
     if (name === "--ifm-background-color") {
       return "#ffffff";
     }
@@ -27,4 +29,4 @@ export function getCssVar(name) {
   } catch {
     return "#2e8555"; // Safe default
   }
-}
+}