portosaurus 1.16.4 → 1.16.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "portosaurus",
-  "version": "1.16.4",
+  "version": "1.16.6",
   "author": "soymadip",
   "license": "GPL-3.0-only",
   "description": "Complete portfolio cum personal website solution for your digital personality.",
@@ -21,6 +21,14 @@
     "blog"
   ],
   "type": "module",
+  "imports": {
+    "#config/*": "./src/config/*",
+    "#internal/*": "./src/internal/src/*"
+  },
+  "exports": {
+    "./utils": "./src/utils/.exports.js",
+    "./config": "./src/config/.exports.js"
+  },
   "bin": {
     "portosaurus": "bin/portosaurus.js"
   },

package/src/config/.exports.js

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

package/src/config/metaTags.js

@@ -1,4 +1,4 @@
-import { getCssVar } from "../internal/src/utils/cssUtils.js";
+import { getCssVar } from "../utils/cssUtils.js";
 
 const backgroundColor = getCssVar("--ifm-background-color");
 

package/src/config/sidebars.js

@@ -3,7 +3,7 @@
  * This file is auto-generated and copied to user projects
  */
 
-module.exports = {
+export default {
   notes: [
     {
       type: "category",

package/src/internal/src/components/ContactSection/index.js

@@ -1,5 +1,6 @@
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { FaQuestionCircle } from "react-icons/fa";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { iconMap as defaultIconMap } from "portosaurus/config";
 import styles from "./styles.module.css";
 
 const sortEmail = (links) => {
@@ -24,7 +25,7 @@ const sortEmail = (links) => {
 export default function ContactSection({ id, className, title, subtitle }) {
   const { siteConfig } = useDocusaurusContext();
   const { customFields } = siteConfig;
-  const { iconMap } = customFields.iconMap;
+  const userIconMap = customFields.iconMap || {};
 
   let socialLinks = customFields.socialLinks.links || [];
 
@@ -54,7 +55,15 @@ export default function ContactSection({ id, className, title, subtitle }) {
             aria-label="Social media and contact links"
           >
             {socialLinks.map((social, index) => {
-              const iconData = iconMap[social.icon] || {};
+              const defaultIconData = defaultIconMap[social.icon] || {};
+              const userIconData = userIconMap[social.icon] || {};
+
+              // User can override color, but component must come from default (due to serialization)
+              const iconData = {
+                ...defaultIconData,
+                ...userIconData,
+                icon: defaultIconData.icon, // Enforce default component
+              };
 
               const name = social.name || "?";
               const Icon = iconData.icon || FaQuestionCircle;

package/src/internal/src/components/NoteIndex/index.js

@@ -4,7 +4,7 @@ import { usePluginData } from "@docusaurus/useGlobalData";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import DocCardList from "@theme/DocCardList";
 
-const { iconMap } = useDocusaurusContext().siteConfig.customFields.iconMap;
+import { iconMap } from "portosaurus/config";
 
 import { FaBook } from "react-icons/fa";
 import styles from "./styles.module.css";

package/src/internal/src/components/SocialLinks/index.js

@@ -11,11 +11,11 @@ import Tooltip from "@site/src/components/Tooltip";
 const DEFAULT_ICON = FaQuestionCircle;
 const DEFAULT_COLOR = "var(--ifm-color-primary)";
 
+import { iconMap } from "portosaurus/config";
+
 export default function SocialIcons({ showAll = false }) {
   const { siteConfig } = useDocusaurusContext();
   const { customFields } = siteConfig;
-  const { iconMap } = customFields.iconMap;
-
   const isBrowser = useIsBrowser();
 
   const [animationDelays, setAnimationDelays] = useState({});

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

@@ -1,6 +1,6 @@
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import UpdateTitle from '@site/src/utils/updateTitle';
+import UpdateTitle from "@site/src/utils/updateTitle";
 
 // Import components
 import HeroSection from "@site/src/components/HeroSection";
@@ -10,7 +10,6 @@ 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;
@@ -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/internal/src/pages/notes.js

@@ -1,82 +1,78 @@
-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';
+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'
+    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'
+    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',
+    fontSize: "0.9rem",
+    textAlign: "center",
+    color: "var(--ifm-font-color-tertiary)",
+    marginBottom: "2rem",
+    animation: "slideUp 0.5s ease-out 0.2s forwards",
   },
 
-  '@keyframes slideUp': {
+  "@keyframes slideUp": {
     from: {
       opacity: 0,
-      transform: 'translateY(20px)'
+      transform: "translateY(20px)",
     },
     to: {
       opacity: 1,
-      transform: 'translateY(0)'
-    }
+      transform: "translateY(0)",
+    },
   },
 
-  '@media (prefers-reduced-motion: reduce)': {
+  "@media (prefers-reduced-motion: reduce)": {
     notesContainer: {
-      animation: 'none !important'
+      animation: "none !important",
     },
     pageTitle: {
-      animation: 'none !important'
+      animation: "none !important",
     },
     pageDescription: {
-      animation: 'none !important',
-      opacity: 1
-    }
-  }
+      animation: "none !important",
+      opacity: 1,
+    },
+  },
 };
 
 export default function Notes() {
-  const { path: docsBasePath } = usePluginData('docusaurus-plugin-content-docs');
-  const pathName = docsBasePath.replace('/', '');
+  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}`}
-    >
+    <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>
+            <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 
+          <NoteCards />
+          <ScrollToTop />
+          <HashNavigation
             elementPrefix="note-"
             elementSelector=".note-card"
             effectDuration={6000}

package/src/utils/.exports.js

@@ -0,0 +1,14 @@
+export * from "./appVersion.js";
+export * from "./createDocuConf.js";
+export * from "./logger.js";
+export * from "./packageManager.js";
+export * from "./HashNavigation.js";
+export * from "./cssUtils.js";
+export * from "./filterEnabledItems.js";
+export * from "./generateFavicon.js";
+export * from "./generateRobotsTxt.js";
+export * from "./iconExtractor.js";
+export * from "./imageDownloader.js";
+export * from "./imageProcessor.js";
+export * from "./linkShortner.js";
+export * from "./updateTitle.js";

package/src/utils/createDocuConf.js

@@ -1,28 +1,20 @@
 import fs from "fs";
-import { createRequire } from "module";
+
 import path from "path";
 import { fileURLToPath } from "url";
 
-const require = createRequire(import.meta.url);
-
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const packagePath = path.resolve(__dirname, "../../");
 const internalUtils = path.resolve(packagePath, "src/internal/src/utils");
 const packageConfig = path.resolve(packagePath, "src/config");
 const packageCss = path.resolve(packagePath, "src/internal/src/css");
 
-const { catppuccinMocha, catppuccinLatte } = require(
-  path.resolve(packageConfig, "prism.js"),
-);
-const { appVersion } = require("./appVersion.js");
-const { iconMap } = require(path.resolve(packageConfig, "iconMappings.js"));
-const { metaTags } = require(path.resolve(packageConfig, "metaTags.js"));
-const { useEnabled } = require(
-  path.resolve(internalUtils, "filterEnabledItems.js"),
-);
-const { downloadImage } = require(
-  path.resolve(internalUtils, "imageDownloader.js"),
-);
+import { catppuccinMocha, catppuccinLatte } from "#config/prism.js";
+import { appVersion } from "./appVersion.js";
+
+import { metaTags } from "#config/metaTags.js";
+import { useEnabled } from "./filterEnabledItems.js";
+import { downloadImage } from "./imageDownloader.js";
 
 /**
  * Resolves the site URL based on config value and environment.
@@ -187,7 +179,6 @@ export function createDocuConf(userConfig, projectRoot = process.cwd()) {
         ],
       },
 
-      iconMap: iconMap,
       metaTags: metaTags,
     },
 
@@ -299,10 +290,10 @@ export function createDocuConf(userConfig, projectRoot = process.cwd()) {
       }),
 
     plugins: [
-      // require.resolve(`${internalUtils}/generateFavicon.js`),
-      require.resolve(`${internalUtils}/generateRobotsTxt.js`),
+      // path.resolve(internalUtils, "generateFavicon.js"),
+      path.resolve(__dirname, "./generateRobotsTxt.js"),
       [
-        require.resolve("@easyops-cn/docusaurus-search-local"),
+        "@easyops-cn/docusaurus-search-local",
         {
           hashed: true,
           indexDocs: true,

package/src/{internal/src/utils → utils}/cssUtils.js

@@ -27,8 +27,8 @@ function getCssVar(varName) {
 
   // Try to find variable in CSS files
   const cssFiles = [
-    path.resolve(__dirname, "../css/custom.css"),
-    path.resolve(__dirname, "../css/catppuccin.css"),
+    path.resolve(__dirname, "../internal/src/css/custom.css"),
+    path.resolve(__dirname, "../internal/src/css/catppuccin.css"),
   ];
 
   for (const cssPath of cssFiles) {