portosaurus 2.0.2 → 2.1.0

package/src/{css → theme/css}/tasks.css

@@ -8,7 +8,6 @@
       This Page is completely Vibe coded. No code except small tweaks is written by me.
 */
 
-
 /* Tasks page container */
 .tasks-container {
   display: flex;
@@ -85,11 +84,12 @@
   background-color: var(--ifm-color-emphasis-500);
   padding: 2px 4px;
   border-radius: 3px;
-  color: var(--ifm-color-primary)
+  color: var(--ifm-color-primary);
 }
 
 /* Tasks intro and footer sections */
-.tasks-intro, .tasks-footer {
+.tasks-intro,
+.tasks-footer {
   padding: 1rem;
   margin: 1.5rem 0;
   border-radius: var(--ifm-card-border-radius);
@@ -226,8 +226,14 @@
 }
 
 @keyframes fadeIn {
-  from { opacity: 0.7; transform: translateY(5px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0.7;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Media queries for responsive tabs */
@@ -235,17 +241,17 @@
   .task-tabs {
     grid-template-columns: repeat(2, 1fr);
   }
-  
+
   .task-tab {
     padding: 0.75rem 0.5rem;
     font-size: 0.9rem;
   }
-  
+
   .task-tab-icon {
     font-size: 1rem;
     margin-right: 0.3rem;
   }
-  
+
   .task-tab-count {
     min-width: 1rem;
     min-height: 1rem;
@@ -253,7 +259,7 @@
     height: 1rem;
     font-size: 0.6rem;
   }
-  
+
   .task-tab-content {
     padding: 1rem;
   }
@@ -280,19 +286,19 @@
   .task-tabs {
     grid-template-columns: repeat(1, 1fr);
   }
-  
+
   .task-tab {
     flex-direction: row;
     justify-content: flex-start;
     text-align: left;
     padding: 0.75rem 1rem;
   }
-  
+
   .task-tab-icon {
     margin-right: 0.5rem;
     margin-bottom: 0;
   }
-  
+
   .task-tab-label {
     margin-right: 0.5rem;
     margin-bottom: 0;
@@ -426,15 +432,13 @@
   background-color: var(--ifm-color-emphasis-100);
 }
 
-
 /* Responsive table adjustments */
 @media (max-width: 768px) {
-
   .task-table-container th,
   .task-table-container td {
     padding: 0.5rem;
   }
-  
+
   .task-table-container table {
     font-size: 0.9rem;
   }
@@ -495,7 +499,7 @@
 
 .badge-priority-low {
   background-color: var(--ifm-color-success-darker);
-  color:var(--ifm-color-emphasis-700) ;
+  color: var(--ifm-color-emphasis-700);
 }
 
 /* Icon styling */
@@ -755,7 +759,8 @@
   border-right: 1px solid var(--ifm-color-emphasis-200);
 }
 
-.task-cell-status, .task-cell-priority {
+.task-cell-status,
+.task-cell-priority {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -766,17 +771,17 @@
   .task-tabs {
     grid-template-columns: repeat(2, 1fr);
   }
-  
+
   .task-tab {
     padding: 0.75rem 0.5rem;
     font-size: 0.9rem;
   }
-  
+
   .task-tab-icon {
     font-size: 1rem;
     margin-right: 0.3rem;
   }
-  
+
   .task-tab-count {
     min-width: 1rem;
     min-height: 1rem;
@@ -784,23 +789,23 @@
     height: 1rem;
     font-size: 0.6rem;
   }
-  
+
   .task-tab-content {
     padding: 1rem;
   }
-  
+
   .task-list-header {
     grid-template-columns: 100px 1fr 100px;
   }
-  
+
   .task-row {
     grid-template-columns: 100px 1fr 100px;
   }
-  
+
   .task-empty-state {
     padding: 2rem 1rem;
   }
-  
+
   .tasks-container {
     padding: 0 0.5rem;
   }
@@ -811,29 +816,30 @@
     grid-template-columns: 80px 1fr 80px;
     font-size: 0.7rem;
   }
-  
+
   .task-row {
     grid-template-columns: 80px 1fr 80px;
   }
-  
-  .task-cell-status, .task-cell-priority {
+
+  .task-cell-status,
+  .task-cell-priority {
     padding: 0.5rem 0.25rem;
   }
-  
+
   .badge {
     padding: 0.25rem 0.5rem;
     font-size: 0.7rem;
   }
-  
+
   .badge-icon {
     margin-right: 0.2rem;
     font-size: 0.7rem;
   }
-  
+
   .task-title {
     font-size: 1rem;
   }
-  
+
   .task-description {
     font-size: 0.75rem;
   }
@@ -843,24 +849,24 @@
   .task-tabs {
     grid-template-columns: repeat(2, 1fr);
   }
-  
+
   .task-tab {
     padding: 0.5rem;
     font-size: 0.8rem;
   }
-  
+
   .task-tab-icon {
     margin-right: 0.3rem;
   }
-  
+
   .task-tab-label {
     margin-right: 0.3rem;
   }
-  
+
   .task-tab-count {
     font-size: 0.55rem;
   }
-  
+
   .stats-container {
     grid-template-columns: 1fr 1fr;
     gap: 0.75rem;

package/src/theme/{MDXComponents.js → overrides/MDXComponents.js}

@@ -4,9 +4,9 @@ import Details from "@theme/Details";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
-import { Pv, SrcPv } from "@site/src/components/Preview/index.js";
-import Tooltip from "@site/src/components/Tooltip/index.js";
-import NoteCards, { TopicList } from "@site/src/components/NoteIndex/index.js";
+import { Pv, SrcPv } from "../components/Preview/index.js";
+import Tooltip from "../components/Tooltip/index.js";
+import NoteCards, { TopicList } from "../components/NoteIndex/index.js";
 
 const components = {
   ...MDXComponents,

package/src/theme/{Root.js → overrides/Root.js}

@@ -1,7 +1,7 @@
 import React from "react";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import OriginalRoot from "@theme-original/Root";
-import { PreviewProvider, ViewerWindow } from "@site/src/components/Preview/index.js";
+import { PreviewProvider, ViewerWindow } from "../components/Preview/index.js";
 
 /**
  * Wraps Docusaurus's original Root (which provides ColorModeProvider, etc.)
@@ -12,9 +12,7 @@ export default function Root({ children }) {
     <PreviewProvider>
       <OriginalRoot>
         {children}
-        <BrowserOnly>
-          {() => <ViewerWindow />}
-        </BrowserOnly>
+        <BrowserOnly>{() => <ViewerWindow />}</BrowserOnly>
       </OriginalRoot>
     </PreviewProvider>
   );

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

@@ -1,15 +1,14 @@
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import UpdateTitle from '@site/src/core/client-utils/updateTitle.js';
+import UpdateTitle from "../utils/updateTitle.js";
 
 // Import components
-import HeroSection from "@site/src/components/HeroSection/index.js";
-import AboutSection from "@site/src/components/AboutSection/index.js";
-import ProjectsSection from "@site/src/components/ProjectsSection/index.js";
-import ContactSection from "@site/src/components/ContactSection/index.js";
-import ExperienceSection from "@site/src/components/ExperienceSection/index.js";
-import ScrollToTop from "@site/src/components/ScrollToTop/index.js";
-
+import HeroSection from "../components/HeroSection/index.js";
+import AboutSection from "../components/AboutSection/index.js";
+import ProjectsSection from "../components/ProjectsSection/index.js";
+import ContactSection from "../components/ContactSection/index.js";
+import ExperienceSection from "../components/ExperienceSection/index.js";
+import ScrollToTop from "../components/ScrollToTop/index.js";
 
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
@@ -21,48 +20,35 @@ export default function Home() {
   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}`
+    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"
-    >
+    <Layout title="Me" description="My portfolio website">
       {/* Custom styles */}
       <style>{customStyles}</style>
-      
-      <UpdateTitle
-        sections={sectionTitles}
-        defaultTitle={siteConfig.title}
-      />
 
-      <main>
+      <UpdateTitle sections={sectionTitles} defaultTitle={siteConfig.title} />
 
+      <main>
         {/* Hero Section */}
-        <HeroSection
-          id="me"
-        />
+        <HeroSection id="me" />
 
         {/* About Section */}
-        {(aboutMe.enable !== false) && (
-          <AboutSection 
-            id="about"
-            title="About Me"
-          />
+        {aboutMe.enable !== false && (
+          <AboutSection id="about" title="About Me" />
         )}
 
         {/* Projects Section */}
-        {(projects.enable !== false) && (
+        {projects.enable !== false && (
           <ProjectsSection
             id="projects"
             title="My Projects"
@@ -71,7 +57,7 @@ export default function Home() {
         )}
 
         {/* Experience Section */}
-        {(experience.enable !== false) && (
+        {experience.enable !== false && (
           <ExperienceSection
             id="experience"
             title="Experience"
@@ -80,7 +66,7 @@ export default function Home() {
         )}
 
         {/* Contact Section */}
-        {(socialLinks.enable !== false) && (
+        {socialLinks.enable !== false && (
           <ContactSection
             id="contact"
             title="Get In Touch"
@@ -89,9 +75,7 @@ export default function Home() {
         )}
 
         {/* Scroll to top button */}
-        <ScrollToTop
-          hideDelay={3500}
-        />
+        <ScrollToTop hideDelay={3500} />
       </main>
     </Layout>
   );

package/src/theme/pages/notes.js

@@ -0,0 +1,83 @@
+import Layout from "@theme/Layout";
+import NoteCards from "../components/NoteIndex/index.js";
+import { usePluginData } from "@docusaurus/useGlobalData";
+import ScrollToTop from "../components/ScrollToTop/index.js";
+import HashNavigation from "../utils/HashNavigation.js";
+
+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>
+  );
+}