portosaurus 1.16.1 → 1.16.3

package/bin/portosaurus.js

@@ -19,7 +19,7 @@ import { spawn, execSync } from "child_process";
 import { createRequire } from "module";
 
 import { logger } from "../src/utils/logger.js";
-import { createConfig } from "../src/utils/createConfig.js";
+import { createDocuConf, writeDocuConf } from "../src/utils/createDocuConf.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -67,29 +67,41 @@ async function prepareDocusaurusRun(projectRoot) {
   fs.ensureDirSync(path.join(projectRoot, "blog"));
   fs.ensureDirSync(path.join(projectRoot, "static"));
 
-  // 1. Copy everything from internal to .portosaurus
-  fs.copySync(internalDir, runtimeDir);
+  // Ensure notes/index.md exists
+  const userIndexPage = path.join(projectRoot, "notes/index.md");
+  if (!existsSync(userIndexPage)) {
+    const internalIndexPage = path.join(internalDir, "notes/index.md");
+    if (existsSync(internalIndexPage)) {
+      fs.copySync(internalIndexPage, userIndexPage);
+    }
+  }
+
+  // 1. Copy everything from internal to .portosaurus (skipping content folders except static)
+  fs.copySync(internalDir, runtimeDir, {
+    filter: (src) => {
+      const relative = path.relative(internalDir, src);
+      return !["notes", "blog"].includes(relative);
+    },
+  });
 
   // 2. Overwrite with user files if they exist in project root
-  const syncItems = [
-    ...new Set([...readdirSync(internalDir), "blog", "static"]),
-  ];
+  // We only sync "static" and other internal-shadowing files to runtime
+  // Notes and Blog are served directly from projectRoot via createConfig.js
+  const syncItems = [...new Set([...readdirSync(internalDir), "static"])];
+
   for (const file of syncItems) {
     const userFile = path.resolve(projectRoot, file);
     const destFile = path.resolve(runtimeDir, file);
 
+    // Skip notes and blog folders in the sync loop - they are served from root!
+    if (file === "notes" || file === "blog") continue;
+
     if (existsSync(userFile)) {
       if (fs.statSync(userFile).isDirectory()) {
         fs.ensureDirSync(destFile);
       }
       fs.copySync(userFile, destFile, {
         overwrite: true,
-        filter: (src) => {
-          if (src.endsWith(path.join("notes", "index.md"))) {
-            return false;
-          }
-          return true;
-        },
       });
     }
   }
@@ -106,26 +118,10 @@ async function prepareDocusaurusRun(projectRoot) {
   }
 
   // Ensure defaults if missing
-  if (!userConfig.usrConf) {
-    userConfig.usrConf = {};
-  }
-  if (!userConfig.usrConf.site_url) {
-    userConfig.usrConf.site_url = "auto";
-  }
-  if (!userConfig.usrConf.site_path) {
-    userConfig.usrConf.site_path = "auto";
-  }
-
   // Generate Docusaurus Config
-  const docusaurusConfig = createConfig(userConfig, projectRoot);
-
   // Write temp config file INSIDE .portosaurus
   const tempConfigPath = path.join(runtimeDir, "docusaurus.config.js");
-
-  const configContent = `// Auto-generated by Portosaurus
-module.exports = ${JSON.stringify(docusaurusConfig, null, 2)};`;
-
-  writeFileSync(tempConfigPath, configContent);
+  writeDocuConf(userConfig, projectRoot, tempConfigPath);
   logger.success("Generated Docusaurus config in .portosaurus.");
 
   return { runtimeDir };
@@ -302,6 +298,60 @@ program
     }
   });
 
+// --- CONFIG COMMAND ---
+
+program
+  .command("config")
+  .description("Show the generated Docusaurus config")
+  .option(
+    "-f, --file [filePath]",
+    "Output to a file (default: porto.docusaurus.config.js)",
+  )
+  .option("-c, --config <path>", "Path to config file")
+  .action(async (options) => {
+    const projectRoot = process.cwd();
+    let configPath;
+
+    if (options.config) {
+      configPath = path.resolve(projectRoot, options.config);
+    } else {
+      configPath = path.join(projectRoot, "config.js");
+    }
+
+    if (!existsSync(configPath)) {
+      logger.error(`Config file not found at ${configPath}`);
+      process.exit(1);
+    }
+
+    const require = createRequire(import.meta.url);
+
+    let userConfig;
+    try {
+      userConfig = require(configPath);
+    } catch (e) {
+      logger.error(`Failed to load config.js: ${e.message}`);
+      process.exit(1);
+    }
+
+    try {
+      if (options.file) {
+        let filename = "porto.docusaurus.config.js";
+        if (typeof options.file === "string") {
+          filename = options.file;
+        }
+        const outputPath = path.resolve(projectRoot, filename);
+        writeDocuConf(userConfig, projectRoot, outputPath);
+        logger.success(`Config written to ${filename}`);
+      } else {
+        const docusaurusConfig = createDocuConf(userConfig, projectRoot);
+        console.log(JSON.stringify(docusaurusConfig, null, 2));
+      }
+    } catch (error) {
+      logger.error(`Failed to generate config: ${error.message}`);
+      process.exit(1);
+    }
+  });
+
 // --- START COMMAND ---
 
 program

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "portosaurus",
-  "version": "1.16.1",
+  "version": "1.16.3",
   "author": "soymadip",
   "license": "GPL-3.0-only",
   "description": "Complete portfolio cum personal website solution for your digital personality.",
@@ -28,24 +28,25 @@
     "bin/",
     "src/internal/",
     "src/template/",
-    "src/utils/"
+    "src/utils/",
+    "src/config/"
   ],
   "dependencies": {
     "@docusaurus/core": "^3.9.2",
     "@docusaurus/preset-classic": "^3.9.2",
+    "@easyops-cn/docusaurus-search-local": "^0.52.1",
     "chalk": "^5.6.2",
+    "clsx": "^2.1.1",
     "commander": "^12.1.0",
+    "favicons": "^7.2.0",
     "fs-extra": "^11.3.3",
+    "plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
+    "prism-react-renderer": "^2.4.1",
     "prompts": "^2.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.4.0",
+    "react-icons": "^5.5.0",
     "react-slick": "^0.30.2",
-    "slick-carousel": "^1.8.1",
-    "clsx": "^2.1.1",
-    "prism-react-renderer": "^2.4.1",
-    "favicons": "^7.2.0",
-    "plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
-    "@easyops-cn/docusaurus-search-local": "^0.52.1"
+    "slick-carousel": "^1.8.1"
   }
 }

package/src/{internal/src/config → config}/iconMappings.js

@@ -1,4 +1,4 @@
-import { TbBrandCSharp, TbBrandCassandra, TbBrandVscode, TbBrandOnedrive, TbBrandAzure, TbBrandBing, TbBrandGithubCopilot } from "react-icons/tb";
+import { TbBrandCSharp, TbBrandVscode, TbBrandOnedrive, TbBrandAzure, TbBrandBing, TbBrandGithubCopilot } from "react-icons/tb";
 import { GrVirtualMachine } from "react-icons/gr";
 import { DiRasberryPi } from "react-icons/di";
 import { PiGithubLogoFill, PiMicrosoftExcelLogoDuotone, PiMicrosoftOutlookLogo, PiMicrosoftPowerpointLogo, PiMicrosoftWordLogo } from "react-icons/pi";

package/src/config/metaTags.js

@@ -0,0 +1,239 @@
+import { getCssVar } from "../internal/src/utils/cssUtils.js";
+
+const backgroundColor = getCssVar("--ifm-background-color");
+
+export const metaTags = [
+  // Theme color meta tags
+  {
+    tagName: "meta",
+    attributes: {
+      name: "msapplication-TileColor",
+      content: backgroundColor,
+    },
+  },
+  {
+    tagName: "meta",
+    attributes: {
+      name: "theme-color",
+      content: backgroundColor,
+    },
+  },
+
+  // Android Chrome icons
+  {
+    tagName: "link",
+    attributes: {
+      rel: "icon",
+      type: "image/png",
+      sizes: "36x36",
+      href: "/favicon/android-chrome-36x36.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "icon",
+      type: "image/png",
+      sizes: "48x48",
+      href: "/favicon/android-chrome-48x48.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "icon",
+      type: "image/png",
+      sizes: "72x72",
+      href: "/favicon/android-chrome-72x72.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "icon",
+      type: "image/png",
+      sizes: "96x96",
+      href: "/favicon/android-chrome-96x96.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "icon",
+      type: "image/png",
+      sizes: "144x144",
+      href: "/favicon/android-chrome-144x144.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "icon",
+      type: "image/png",
+      sizes: "192x192",
+      href: "/favicon/android-chrome-192x192.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "icon",
+      type: "image/png",
+      sizes: "256x256",
+      href: "/favicon/android-chrome-256x256.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "icon",
+      type: "image/png",
+      sizes: "384x384",
+      href: "/favicon/android-chrome-384x384.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "icon",
+      type: "image/png",
+      sizes: "512x512",
+      href: "/favicon/android-chrome-512x512.png",
+    },
+  },
+
+  // Apple touch icons
+  {
+    tagName: "link",
+    attributes: {
+      rel: "apple-touch-icon",
+      sizes: "57x57",
+      href: "/favicon/apple-touch-icon-57x57.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "apple-touch-icon",
+      sizes: "60x60",
+      href: "/favicon/apple-touch-icon-60x60.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "apple-touch-icon",
+      sizes: "72x72",
+      href: "/favicon/apple-touch-icon-72x72.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "apple-touch-icon",
+      sizes: "76x76",
+      href: "/favicon/apple-touch-icon-76x76.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "apple-touch-icon",
+      sizes: "114x114",
+      href: "/favicon/apple-touch-icon-114x114.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "apple-touch-icon",
+      sizes: "120x120",
+      href: "/favicon/apple-touch-icon-120x120.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "apple-touch-icon",
+      sizes: "144x144",
+      href: "/favicon/apple-touch-icon-144x144.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "apple-touch-icon",
+      sizes: "152x152",
+      href: "/favicon/apple-touch-icon-152x152.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "apple-touch-icon",
+      sizes: "167x167",
+      href: "/favicon/apple-touch-icon-167x167.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "apple-touch-icon",
+      sizes: "180x180",
+      href: "/favicon/apple-touch-icon-180x180.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "apple-touch-icon",
+      sizes: "1024x1024",
+      href: "/favicon/apple-touch-icon-1024x1024.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "apple-touch-icon-precomposed",
+      href: "/favicon/apple-touch-icon-precomposed.png",
+    },
+  },
+
+  // Standard favicons
+  {
+    tagName: "link",
+    attributes: {
+      rel: "icon",
+      type: "image/png",
+      sizes: "16x16",
+      href: "/favicon/favicon-16x16.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "icon",
+      type: "image/png",
+      sizes: "32x32",
+      href: "/favicon/favicon-32x32.png",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "icon",
+      type: "image/png",
+      sizes: "48x48",
+      href: "/favicon/favicon-48x48.png",
+    },
+  },
+
+  // Web manifest
+  {
+    tagName: "link",
+    attributes: {
+      rel: "manifest",
+      href: "/favicon/manifest.webmanifest",
+    },
+  },
+];

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

@@ -1,5 +1,4 @@
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { iconMap } from "@site/src/config/iconMappings";
 import { FaQuestionCircle } from "react-icons/fa";
 import styles from "./styles.module.css";
 
@@ -25,6 +24,8 @@ const sortEmail = (links) => {
 export default function ContactSection({ id, className, title, subtitle }) {
   const { siteConfig } = useDocusaurusContext();
   const { customFields } = siteConfig;
+  const { iconMap } = customFields.iconMap;
+
   let socialLinks = customFields.socialLinks.links || [];
 
   socialLinks = sortEmail(socialLinks);

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

@@ -1,9 +1,11 @@
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import { usePluginData } from "@docusaurus/useGlobalData";
-import { iconMap } from "@site/src/config/iconMappings";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import DocCardList from "@theme/DocCardList";
 
+const { iconMap } = useDocusaurusContext().siteConfig.customFields.iconMap;
+
 import { FaBook } from "react-icons/fa";
 import styles from "./styles.module.css";
 

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

@@ -1,75 +1,70 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import styles from './styles.module.css';
-import { FaQuestionCircle } from 'react-icons/fa';
+import { useState, useEffect, useMemo, useCallback } from "react";
+import styles from "./styles.module.css";
+import { FaQuestionCircle } from "react-icons/fa";
 
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-
-import Tooltip from '@site/src/components/Tooltip';
-import { iconMap } from '@site/src/config/iconMappings';
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 
+import Tooltip from "@site/src/components/Tooltip";
 
 // Default icon & icon
 const DEFAULT_ICON = FaQuestionCircle;
-const DEFAULT_COLOR = 'var(--ifm-color-primary)';
-
+const DEFAULT_COLOR = "var(--ifm-color-primary)";
 
 export default function SocialIcons({ showAll = false }) {
   const { siteConfig } = useDocusaurusContext();
   const { customFields } = siteConfig;
+  const { iconMap } = customFields.iconMap;
+
   const isBrowser = useIsBrowser();
 
   const [animationDelays, setAnimationDelays] = useState({});
 
   const allSocialLinks = customFields.socialLinks.links || [];
-  
+
   // FIX: `to prevent unnecessary recalculations`
   const socialLinks = useMemo(() => {
-    return showAll 
-      ? allSocialLinks 
-      : allSocialLinks.filter(link => link.pin);
+    return showAll ? allSocialLinks : allSocialLinks.filter((link) => link.pin);
   }, [allSocialLinks, showAll]);
-  
+
   // Calculate delays based on screen size
   const calculateDelays = useCallback(() => {
     if (!isBrowser) return {};
-    
+
     const isTablet = window.innerWidth <= 768;
     const isMobile = window.innerWidth <= 480;
     const delays = {};
-    
-    const baseDelay = isMobile ? 0.7 : (isTablet ? 0.9 : 1.3);
+
+    const baseDelay = isMobile ? 0.7 : isTablet ? 0.9 : 1.3;
     const incrementDelay = 0.1;
-    
+
     socialLinks.forEach((_, index) => {
-      delays[index] = `${baseDelay + (index * incrementDelay)}s`;
+      delays[index] = `${baseDelay + index * incrementDelay}s`;
     });
-    
+
     return delays;
   }, [isBrowser, socialLinks]);
 
   useEffect(() => {
     if (!isBrowser) return;
-    
+
     // Set initial delays
     setAnimationDelays(calculateDelays());
-    
+
     const handleResize = () => {
       setAnimationDelays(calculateDelays());
     };
-    
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [isBrowser, calculateDelays]);
 
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [isBrowser, calculateDelays]);
 
   // Get icon component and color
   const getIconDetails = (iconName) => {
-
     if (!iconName) {
       return {
         icon: DEFAULT_ICON,
-        color: DEFAULT_COLOR
+        color: DEFAULT_COLOR,
       };
     }
 
@@ -79,50 +74,51 @@ export default function SocialIcons({ showAll = false }) {
     if (!iconDetails) {
       return {
         icon: DEFAULT_ICON,
-        color: DEFAULT_COLOR
+        color: DEFAULT_COLOR,
       };
     }
 
     return {
       icon: iconDetails.icon,
-      color: iconDetails.color || DEFAULT_COLOR
+      color: iconDetails.color || DEFAULT_COLOR,
     };
   };
-  
+
   if (socialLinks.length === 0) {
     return null;
   }
-  
+
   return (
     <div className={styles.socialIcons}>
-      {
-        socialLinks.map((social, index) => {
-          const { icon: IconComponent, color: iconColor } = getIconDetails(social.icon);
-          const href = social.url || '#';
-          const displayColor = social.color || iconColor;
-
-          return (
-            <Tooltip
-              key={index}
-              content={social.desc || social.icon || 'Link'}
-              position="top"
-              color={displayColor}
+      {socialLinks.map((social, index) => {
+        const { icon: IconComponent, color: iconColor } = getIconDetails(
+          social.icon,
+        );
+        const href = social.url || "#";
+        const displayColor = social.color || iconColor;
+
+        return (
+          <Tooltip
+            key={index}
+            content={social.desc || social.icon || "Link"}
+            position="top"
+            color={displayColor}
+          >
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.socialLink}
+              style={{
+                "--hover-color": displayColor,
+                animationDelay: animationDelays[index] || "0s",
+              }}
+              aria-label={social.icon || "social link"}
             >
-              <a
-                href={href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className={styles.socialLink}
-                style={{
-                  '--hover-color': displayColor,
-                  animationDelay: animationDelays[index] || '0s'
-                }}
-                aria-label={social.icon || 'social link'}
-              >
-                <IconComponent size={24} />
-              </a>
-            </Tooltip>
-          );
+              <IconComponent size={24} />
+            </a>
+          </Tooltip>
+        );
       })}
     </div>
   );