portosaurus 1.18.6 → 1.18.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "portosaurus",
-  "version": "1.18.6",
+  "version": "1.18.7",
   "author": "soymadip",
   "license": "GPL-3.0-only",
   "description": "Complete portfolio cum personal website solution for your digital personality.",
@@ -26,14 +26,16 @@
     "#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/*"
+    "./internal/*": "./src/internal/src/*",
+    "./pages/*": "./src/pages/*.js"
   },
   "bin": {
     "portosaurus": "bin/portosaurus.js"

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/internal/src/components/AboutSection/index.js

@@ -1,67 +0,0 @@
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import styles from './styles.module.css';
-
-export default function AboutSection({ id, className}) {
-  const { siteConfig } = useDocusaurusContext();
-  const { customFields } = siteConfig;
-  const aboutMe = customFields.aboutMe || {};
-
-  return (
-    <div id={id} className={`${styles.aboutSection} ${className || ''}`} role="region" aria-label="About me section">
-      <div className={styles.aboutContainer}>
-        <div className={styles.aboutHeader}>
-          <h2 className={styles.aboutHeading}>{"About Me"}</h2>
-        </div>
-
-        <div className={styles.aboutContent}>
-          <div className={styles.aboutBio}>
-            <div className={styles.bioImageContainer}>
-              {aboutMe.image && (
-                <div className={styles.imageWrapper}>
-                  <img 
-                    src={aboutMe.image} 
-                    alt="About Me" 
-                    className={styles.aboutImage}
-                    loading="lazy"
-                  />
-                </div>
-              )}
-            </div>
-
-            <div className={styles.bioTextContainer}>
-              <div className={styles.bioText}>
-                {Array.isArray(aboutMe.description) ? (
-                  aboutMe.description.map((paragraph, index) => (
-                    <p key={index} className={styles.aboutParagraph}>{paragraph}</p>
-                  ))
-                ) : (
-                  <p className={styles.aboutParagraph}>
-                    {aboutMe.description || "Information about me goes here."}
-                  </p>
-                )}
-              </div>
-              
-              {aboutMe.skills && aboutMe.skills.length > 0 && (
-                <div className={styles.skillsContainer}>
-                  <h3 className={styles.skillsTitle} id="skills-heading">My Skills</h3>
-                  <div className={styles.skillsGrid} role="list">
-                    {aboutMe.skills.map((skill, index) => (
-                      <div 
-                        key={index} 
-                        className={styles.skillBadge} 
-                        role="listitem"
-                        style={{ animationDelay: `${index * 0.05}s` }}
-                      >
-                        {skill}
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}