portosaurus 1.18.6 → 1.18.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "portosaurus",
-  "version": "1.18.6",
+  "version": "1.18.8",
   "author": "soymadip",
   "license": "GPL-3.0-only",
   "description": "Complete portfolio cum personal website solution for your digital personality.",
@@ -26,14 +26,15 @@
     "#utils/*": "./src/utils/*.js",
     "#css/*": "./src/css/*.css",
     "#pages/*": "./src/internal/src/pages/*.js",
-    "#components/*": "./src/internal/src/components/*",
+    "#components/*": "./src/components/*",
     "#internal/*": "./src/internal/src/*"
   },
   "exports": {
+    "./components/*": "./src/components/*",
     "./utils/*": "./src/utils/*.js",
     "./config/*": "./src/config/*.js",
     "./css/*": "./src/css/*.css",
-    "./internal/*": "./src/internal/src/*"
+    "./pages/*": "./src/pages/*.js"
   },
   "bin": {
     "portosaurus": "bin/portosaurus.js"
@@ -45,7 +46,9 @@
     "src/utils/",
     "src/config/",
     "src/css/",
-    "src/img"
+    "src/img",
+    "src/pages/",
+    "src/components/"
   ],
   "dependencies": {
     "@docusaurus/core": "^3.9.2",

package/src/img/icon.svg

@@ -2,24 +2,24 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   version="1.1"
-   id="svg1"
-   width="495"
-   height="504"
-   viewBox="0 0 495 504"
-   sodipodi:docname="icon.svg"
-   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
-   xml:space="preserve"
-   inkscape:export-filename="icon.png"
-   inkscape:export-xdpi="99.636742"
-   inkscape:export-ydpi="99.636742"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"><title
+  version="1.1"
+  id="svg1"
+  width="495"
+  height="504"
+  viewBox="0 0 495 504"
+  sodipodi:docname="icon.svg"
+  inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+  xml:space="preserve"
+  inkscape:export-filename="icon.png"
+  inkscape:export-xdpi="99.636742"
+  inkscape:export-ydpi="99.636742"
+  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns:cc="http://creativecommons.org/ns#"
+  xmlns:dc="http://purl.org/dc/elements/1.1/"><title
      id="title9">portosaurus Icon</title><defs
      id="defs1"><inkscape:path-effect
        effect="mirror_symmetry"
@@ -239,4 +239,4 @@
            inkscape:transform-center-x="6.5926696"
            inkscape:transform-center-y="21.975565" /></g></g></g><metadata
      id="metadata9"><rdf:RDF><cc:Work
-         rdf:about=""><dc:title>portosaurus Icon</dc:title><dc:creator><cc:Agent><dc:title>soymadip</dc:title></cc:Agent></dc:creator><dc:publisher><cc:Agent><dc:title>soymadip</dc:title></cc:Agent></dc:publisher><dc:language>en</dc:language></cc:Work></rdf:RDF></metadata></svg>
+         rdf:about=""><dc:title>portosaurus Icon</dc:title><dc:creator><cc:Agent><dc:title>soymadip</dc:title></cc:Agent></dc:creator><dc:publisher><cc:Agent><dc:title>soymadip</dc:title></cc:Agent></dc:publisher><dc:language>en</dc:language></cc:Work></rdf:RDF></metadata></svg>

package/src/internal/src/pages/index.js

@@ -1,82 +1 @@
-import Layout from "@theme/Layout";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { UpdateTitle } from "#utils/updateTitle";
-
-// Import components
-import HeroSection from "@site/src/components/HeroSection";
-import AboutSection from "@site/src/components/AboutSection";
-import ProjectsSection from "@site/src/components/ProjectsSection";
-import ContactSection from "@site/src/components/ContactSection";
-import ExperienceSection from "@site/src/components/ExperienceSection";
-import ScrollToTop from "@site/src/components/ScrollToTop";
-
-export default function Home() {
-  const { siteConfig } = useDocusaurusContext();
-  const { customFields } = siteConfig;
-
-  const aboutMe = customFields.aboutMe || {};
-  const projects = customFields.projects || {};
-  const socialLinks = customFields.socialLinks || {};
-  const experience = customFields.experience || {};
-
-  const sectionTitles = {
-    me: `Home | ${siteConfig.title}`,
-    about: `About Me | ${siteConfig.title}`,
-    projects: `Projects | ${siteConfig.title}`,
-    experience: `Experience | ${siteConfig.title}`,
-    contact: `Contact | ${siteConfig.title}`,
-  };
-
-  const customStyles = `
-  /* For future */
-  `;
-
-  return (
-    <Layout title="Me" description="My portfolio website">
-      {/* Custom styles */}
-      <style>{customStyles}</style>
-
-      <UpdateTitle sections={sectionTitles} defaultTitle={siteConfig.title} />
-
-      <main>
-        {/* Hero Section */}
-        <HeroSection id="me" />
-
-        {/* About Section */}
-        {aboutMe.enable !== false && (
-          <AboutSection id="about" title="About Me" />
-        )}
-
-        {/* Projects Section */}
-        {projects.enable !== false && (
-          <ProjectsSection
-            id="projects"
-            title="My Projects"
-            subtitle="A collection of all my works, with featured projects highlighted"
-          />
-        )}
-
-        {/* Experience Section */}
-        {experience.enable !== false && (
-          <ExperienceSection
-            id="experience"
-            title="Experience"
-            subtitle="My professional journey and work experience"
-          />
-        )}
-
-        {/* Contact Section */}
-        {socialLinks.enable !== false && (
-          <ContactSection
-            id="contact"
-            title="Get In Touch"
-            subtitle="Feel free to reach out for collaborations, questions, or just to say hello!"
-          />
-        )}
-
-        {/* Scroll to top button */}
-        <ScrollToTop hideDelay={3500} />
-      </main>
-    </Layout>
-  );
-}
+export { default } from "portosaurus/pages/Home";

package/src/internal/src/pages/notes.js

@@ -1,84 +1 @@
-import React from "react";
-import Layout from "@theme/Layout";
-import NoteCards from "@site/src/components/NoteIndex";
-import { usePluginData } from "@docusaurus/useGlobalData";
-import ScrollToTop from "../components/ScrollToTop";
-import { HashNavigation } from "portosaurus/utils/HashNavigation";
-
-const style = {
-  notesContainer: {
-    padding: "2rem 0",
-    maxWidth: "1200px",
-    margin: "0 auto",
-  },
-
-  pageTitle: {
-    fontSize: "2.5rem",
-    textAlign: "center",
-    marginBottom: "0.5rem",
-    color: "var(--ifm-color-primary)",
-    animation: "slideUp 0.5s ease-out forwards",
-  },
-
-  pageDescription: {
-    fontSize: "0.9rem",
-    textAlign: "center",
-    color: "var(--ifm-font-color-tertiary)",
-    marginBottom: "2rem",
-    animation: "slideUp 0.5s ease-out 0.2s forwards",
-  },
-
-  "@keyframes slideUp": {
-    from: {
-      opacity: 0,
-      transform: "translateY(20px)",
-    },
-    to: {
-      opacity: 1,
-      transform: "translateY(0)",
-    },
-  },
-
-  "@media (prefers-reduced-motion: reduce)": {
-    notesContainer: {
-      animation: "none !important",
-    },
-    pageTitle: {
-      animation: "none !important",
-    },
-    pageDescription: {
-      animation: "none !important",
-      opacity: 1,
-    },
-  },
-};
-
-export default function Notes() {
-  const { path: docsBasePath } = usePluginData(
-    "docusaurus-plugin-content-docs",
-  );
-  const pathName = docsBasePath.replace("/", "");
-  const pageTitle = pathName.charAt(0).toUpperCase() + pathName.slice(1);
-
-  return (
-    <Layout title={pageTitle} description={`My ${pageTitle}`}>
-      <main style={style.notesContainer}>
-        <div className="container">
-          <header className="text-center mb-4">
-            <h1 style={style.pageTitle}>My Notes</h1>
-            <p style={style.pageDescription}>
-              A collection of my self written notes & reference guides
-            </p>
-          </header>
-          <NoteCards />
-          <ScrollToTop />
-          <HashNavigation
-            elementPrefix="note-"
-            elementSelector=".note-card"
-            effectDuration={6000}
-          />
-        </div>
-      </main>
-    </Layout>
-  );
-}
+export { default } from "portosaurus/pages/Notes";

package/src/internal/src/pages/tasks.js

@@ -1,310 +1 @@
-/*
-                    __     ___ _                ____          _
-                    \ \   / (_) |__   ___      / ___|___   __| | ___
-                     \ \ / /| | '_ \ / _ \    | |   / _ \ / _` |/ _ \
-                      \ V / | | |_) |  __/    | |__| (_) | (_| |  __/
-                       \_/  |_|_.__/ \___|     \____\___/ \__,_|\___|
-
-      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 useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import "../css/tasks.css";
-import {
-  FaClipboardList,
-  FaSyncAlt,
-  FaClock,
-  FaCheckCircle,
-  FaFire,
-  FaThermometerHalf,
-  FaSnowflake,
-  FaTasks,
-  FaExclamationTriangle,
-} from "react-icons/fa";
-
-function TaskList({ filterStatus, taskList }) {
-  if (!taskList || !Array.isArray(taskList)) {
-    return (
-      <div className="task-empty-state">
-        <FaTasks className="task-empty-icon" />
-        <p>No tasks available</p>
-      </div>
-    );
-  }
-
-  const filteredTasks = taskList.filter((task) =>
-    filterStatus ? task.status === filterStatus : true,
-  );
-
-  if (filteredTasks.length === 0) {
-    return (
-      <div className="task-empty-state">
-        <FaTasks className="task-empty-icon" />
-        <p>No tasks in this category</p>
-      </div>
-    );
-  }
-
-  // Sort tasks by status first (with completed tasks at bottom), then by priority
-  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">
-        <div className="task-list-header">
-          <div className="task-cell task-cell-status">Status</div>
-          <div className="task-cell task-cell-title">Task Details</div>
-          <div className="task-cell task-cell-priority">Priority</div>
-        </div>
-
-        <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 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
-                    </>
-                  )}
-                </span>
-              </div>
-
-              <div className="task-cell task-cell-title">
-                <div className="task-title">{task.title}</div>
-                {task.description && (
-                  <div className="task-description">{task.description}</div>
-                )}
-              </div>
-
-              <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
-                    </>
-                  )}
-                </span>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-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 percentComplete = total > 0 ? Math.round((completed / total) * 100) : 0;
-
-  return (
-    <div className="stats-container">
-      <div className="stat-box">
-        <div className="stat-label">Total Tasks</div>
-        <div className="stat-value">{total}</div>
-      </div>
-      <div className="stat-box">
-        <div className="stat-label">Completed</div>
-        <div className="stat-value stat-value-completed">{completed}</div>
-      </div>
-      <div className="stat-box">
-        <div className="stat-label">In Progress</div>
-        <div className="stat-value stat-value-active">{active}</div>
-      </div>
-      <div className="stat-box">
-        <div className="stat-label">Planned</div>
-        <div className="stat-value stat-value-pending">{pending}</div>
-      </div>
-      <div className="stat-box">
-        <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>
-      </div>
-    </div>
-  );
-}
-
-function TaskTabs({ taskList }) {
-  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,
-    },
-  ];
-
-  return (
-    <div className="task-tabs-container">
-      <div className="task-tabs" role="tablist" aria-label="Task categories">
-        {tabData.map((tab) => (
-          <button
-            key={tab.id}
-            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-label">{tab.label}</span>
-            <span className="task-tab-count">{tab.count}</span>
-          </button>
-        ))}
-      </div>
-
-      <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" />
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default function TasksPage() {
-  const { siteConfig } = useDocusaurusContext();
-  const { customFields } = siteConfig || {};
-
-  const tasksPage = customFields?.tasksPage;
-  const title = tasksPage.title;
-  const description = tasksPage.description;
-  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"
-      >
-        <div className="tasks-container">
-          <div className="tasks-content">
-            <div className="tasks-disabled-notice">
-              <div className="disabled-icon">
-                <FaExclamationTriangle aria-hidden="true" />
-              </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>
-              </p>
-            </div>
-          </div>
-        </div>
-      </Layout>
-    );
-  }
-
-  return (
-    <Layout title={title} description={description}>
-      <Head>
-        <meta property="og:title" content={title} />
-        <meta property="og:description" content={description} />
-        <meta name="twitter:title" content={title} />
-        <meta name="twitter:description" content={description} />
-      </Head>
-
-      <div className="tasks-container">
-        <div className="tasks-header">
-          <h1 className="tasks-heading">{title}</h1>
-        </div>
-
-        <div className="tasks-content">
-          <TaskStats taskList={taskList} />
-          <TaskTabs taskList={taskList} />
-        </div>
-      </div>
-    </Layout>
-  );
-}
+export { default } from "portosaurus/pages/Tasks";

package/src/pages/Home.js

@@ -0,0 +1,83 @@
+// Docusaurus Utils
+import Layout from "@theme/Layout";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import UpdateTitle from "portosaurus/utils/updateTitle";
+
+// Import components
+import HeroSection from "#components/HeroSection";
+import AboutSection from "#components/AboutSection";
+import ProjectsSection from "#components/ProjectsSection";
+import ContactSection from "#components/ContactSection";
+import ExperienceSection from "#components/ExperienceSection";
+import ScrollToTop from "#components/ScrollToTop";
+
+export default function Home() {
+  const { siteConfig } = useDocusaurusContext();
+  const { customFields } = siteConfig;
+
+  const aboutMe = customFields.aboutMe || {};
+  const projects = customFields.projects || {};
+  const socialLinks = customFields.socialLinks || {};
+  const experience = customFields.experience || {};
+
+  const sectionTitles = {
+    me: `Home | ${siteConfig.title}`,
+    about: `About Me | ${siteConfig.title}`,
+    projects: `Projects | ${siteConfig.title}`,
+    experience: `Experience | ${siteConfig.title}`,
+    contact: `Contact | ${siteConfig.title}`,
+  };
+
+  const customStyles = `
+  /* For future */
+  `;
+
+  return (
+    <Layout title="Me" description="My portfolio website">
+      {/* Custom styles */}
+      <style>{customStyles}</style>
+
+      <UpdateTitle sections={sectionTitles} defaultTitle={siteConfig.title} />
+
+      <main>
+        {/* Hero Section */}
+        <HeroSection id="me" />
+
+        {/* About Section */}
+        {aboutMe.enable !== false && (
+          <AboutSection id="about" title="About Me" />
+        )}
+
+        {/* Projects Section */}
+        {projects.enable !== false && (
+          <ProjectsSection
+            id="projects"
+            title="My Projects"
+            subtitle="A collection of all my works, with featured projects highlighted"
+          />
+        )}
+
+        {/* Experience Section */}
+        {experience.enable !== false && (
+          <ExperienceSection
+            id="experience"
+            title="Experience"
+            subtitle="My professional journey and work experience"
+          />
+        )}
+
+        {/* Contact Section */}
+        {socialLinks.enable !== false && (
+          <ContactSection
+            id="contact"
+            title="Get In Touch"
+            subtitle="Feel free to reach out for collaborations, questions, or just to say hello!"
+          />
+        )}
+
+        {/* Scroll to top button */}
+        <ScrollToTop hideDelay={3500} />
+      </main>
+    </Layout>
+  );
+}

package/src/pages/Notes.js

@@ -0,0 +1,84 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import NoteCards from "#components/NoteIndex";
+import { usePluginData } from "@docusaurus/useGlobalData";
+import ScrollToTop from "#components/ScrollToTop";
+import HashNavigation from "portosaurus/utils/HashNavigation";
+
+const style = {
+  notesContainer: {
+    padding: "2rem 0",
+    maxWidth: "1200px",
+    margin: "0 auto",
+  },
+
+  pageTitle: {
+    fontSize: "2.5rem",
+    textAlign: "center",
+    marginBottom: "0.5rem",
+    color: "var(--ifm-color-primary)",
+    animation: "slideUp 0.5s ease-out forwards",
+  },
+
+  pageDescription: {
+    fontSize: "0.9rem",
+    textAlign: "center",
+    color: "var(--ifm-font-color-tertiary)",
+    marginBottom: "2rem",
+    animation: "slideUp 0.5s ease-out 0.2s forwards",
+  },
+
+  "@keyframes slideUp": {
+    from: {
+      opacity: 0,
+      transform: "translateY(20px)",
+    },
+    to: {
+      opacity: 1,
+      transform: "translateY(0)",
+    },
+  },
+
+  "@media (prefers-reduced-motion: reduce)": {
+    notesContainer: {
+      animation: "none !important",
+    },
+    pageTitle: {
+      animation: "none !important",
+    },
+    pageDescription: {
+      animation: "none !important",
+      opacity: 1,
+    },
+  },
+};
+
+export default function Notes() {
+  const { path: docsBasePath } = usePluginData(
+    "docusaurus-plugin-content-docs",
+  );
+  const pathName = docsBasePath.replace("/", "");
+  const pageTitle = pathName.charAt(0).toUpperCase() + pathName.slice(1);
+
+  return (
+    <Layout title={pageTitle} description={`My ${pageTitle}`}>
+      <main style={style.notesContainer}>
+        <div className="container">
+          <header className="text-center mb-4">
+            <h1 style={style.pageTitle}>My Notes</h1>
+            <p style={style.pageDescription}>
+              A collection of my self written notes & reference guides
+            </p>
+          </header>
+          <NoteCards />
+          <ScrollToTop />
+          <HashNavigation
+            elementPrefix="note-"
+            elementSelector=".note-card"
+            effectDuration={6000}
+          />
+        </div>
+      </main>
+    </Layout>
+  );
+}

package/src/pages/Tasks.js

@@ -0,0 +1,310 @@
+/*
+                    __     ___ _                ____          _
+                    \ \   / (_) |__   ___      / ___|___   __| | ___
+                     \ \ / /| | '_ \ / _ \    | |   / _ \ / _` |/ _ \
+                      \ V / | | |_) |  __/    | |__| (_) | (_| |  __/
+                       \_/  |_|_.__/ \___|     \____\___/ \__,_|\___|
+
+      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 useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import "portosaurus/css/tasks.css";
+import {
+  FaClipboardList,
+  FaSyncAlt,
+  FaClock,
+  FaCheckCircle,
+  FaFire,
+  FaThermometerHalf,
+  FaSnowflake,
+  FaTasks,
+  FaExclamationTriangle,
+} from "react-icons/fa";
+
+function TaskList({ filterStatus, taskList }) {
+  if (!taskList || !Array.isArray(taskList)) {
+    return (
+      <div className="task-empty-state">
+        <FaTasks className="task-empty-icon" />
+        <p>No tasks available</p>
+      </div>
+    );
+  }
+
+  const filteredTasks = taskList.filter((task) =>
+    filterStatus ? task.status === filterStatus : true,
+  );
+
+  if (filteredTasks.length === 0) {
+    return (
+      <div className="task-empty-state">
+        <FaTasks className="task-empty-icon" />
+        <p>No tasks in this category</p>
+      </div>
+    );
+  }
+
+  // Sort tasks by status first (with completed tasks at bottom), then by priority
+  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">
+        <div className="task-list-header">
+          <div className="task-cell task-cell-status">Status</div>
+          <div className="task-cell task-cell-title">Task Details</div>
+          <div className="task-cell task-cell-priority">Priority</div>
+        </div>
+
+        <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 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
+                    </>
+                  )}
+                </span>
+              </div>
+
+              <div className="task-cell task-cell-title">
+                <div className="task-title">{task.title}</div>
+                {task.description && (
+                  <div className="task-description">{task.description}</div>
+                )}
+              </div>
+
+              <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
+                    </>
+                  )}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+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 percentComplete = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+  return (
+    <div className="stats-container">
+      <div className="stat-box">
+        <div className="stat-label">Total Tasks</div>
+        <div className="stat-value">{total}</div>
+      </div>
+      <div className="stat-box">
+        <div className="stat-label">Completed</div>
+        <div className="stat-value stat-value-completed">{completed}</div>
+      </div>
+      <div className="stat-box">
+        <div className="stat-label">In Progress</div>
+        <div className="stat-value stat-value-active">{active}</div>
+      </div>
+      <div className="stat-box">
+        <div className="stat-label">Planned</div>
+        <div className="stat-value stat-value-pending">{pending}</div>
+      </div>
+      <div className="stat-box">
+        <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>
+      </div>
+    </div>
+  );
+}
+
+function TaskTabs({ taskList }) {
+  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,
+    },
+  ];
+
+  return (
+    <div className="task-tabs-container">
+      <div className="task-tabs" role="tablist" aria-label="Task categories">
+        {tabData.map((tab) => (
+          <button
+            key={tab.id}
+            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-label">{tab.label}</span>
+            <span className="task-tab-count">{tab.count}</span>
+          </button>
+        ))}
+      </div>
+
+      <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" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function TasksPage() {
+  const { siteConfig } = useDocusaurusContext();
+  const { customFields } = siteConfig || {};
+
+  const tasksPage = customFields?.tasksPage;
+  const title = tasksPage.title;
+  const description = tasksPage.description;
+  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"
+      >
+        <div className="tasks-container">
+          <div className="tasks-content">
+            <div className="tasks-disabled-notice">
+              <div className="disabled-icon">
+                <FaExclamationTriangle aria-hidden="true" />
+              </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>
+              </p>
+            </div>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout title={title} description={description}>
+      <Head>
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        <meta name="twitter:title" content={title} />
+        <meta name="twitter:description" content={description} />
+      </Head>
+
+      <div className="tasks-container">
+        <div className="tasks-header">
+          <h1 className="tasks-heading">{title}</h1>
+        </div>
+
+        <div className="tasks-content">
+          <TaskStats taskList={taskList} />
+          <TaskTabs taskList={taskList} />
+        </div>
+      </div>
+    </Layout>
+  );
+}

package/src/utils/packageManager.js

@@ -44,24 +44,26 @@ export function detectPackageManager(projectRoot) {
 export function getRunCommand(packageManager, binaryName, args = []) {
   switch (packageManager) {
     case "bun":
-
       // Bun can run binaries directly with `bun run`
       return {
         command: "bun",
         args: ["run", binaryName, ...args],
       };
+
     case "pnpm":
       // pnpm uses `pnpm exec`
       return {
         command: "pnpm",
         args: ["exec", binaryName, ...args],
       };
+
     case "yarn":
       // Yarn uses `yarn run`
       return {
         command: "yarn",
         args: ["run", binaryName, ...args],
       };
+
     case "npm":
     default:
       // npm uses `npx`

package/src/config/.exports.js

@@ -1,4 +0,0 @@
-export * from "./iconMappings.js";
-export * from "./prism.js";
-export * from "./metaTags.js";
-export { default as sidebars } from "./sidebars.js";