portosaurus 1.14.0

package/internal/src/pages/index.js

@@ -0,0 +1,98 @@
+import Layout from "@theme/Layout";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import UpdateTitle from '@site/src/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>
+  );
+}

package/internal/src/pages/notes.js

@@ -0,0 +1,88 @@
+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 '../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/internal/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 "../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>
+  );
+}