portosaurus 0.14.0

package/src/config/metaTags.js

@@ -0,0 +1,240 @@
+import { getCssVar } from "../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/config/prism.js

@@ -0,0 +1,179 @@
+/**
+ * Catppuccin theme for Prism.js
+**/
+
+// Catppuccin Mocha (dark theme)
+export const catppuccinMocha = {
+  plain: {
+    color: '#cdd6f4',
+    backgroundColor: '#181825',
+  },
+  styles: [
+    {
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
+      style: {
+        color: '#6c7086',
+        fontStyle: 'italic',
+      },
+    },
+    {
+      types: ['namespace'],
+      style: {
+        opacity: 0.7,
+      },
+    },
+    {
+      types: ['string', 'char', 'attr-value'],
+      style: {
+        color: '#a6e3a1',
+      },
+    },
+    {
+      types: ['punctuation', 'operator'],
+      style: {
+        color: '#a6adc8',
+      },
+    },
+    {
+      types: [
+        'entity',
+        'url',
+        'symbol',
+        'number',
+        'boolean',
+        'variable',
+        'constant',
+        'property',
+        'regex',
+        'inserted',
+      ],
+      style: {
+        color: '#fab387',
+      },
+    },
+    {
+      types: ['atrule', 'keyword', 'attr-name', 'selector'],
+      style: {
+        color: '#cba6f7',
+      },
+    },
+    {
+      types: ['function', 'deleted', 'tag'],
+      style: {
+        color: '#f38ba8',
+      },
+    },
+    {
+      types: ['function-variable'],
+      style: {
+        color: '#89b4fa',
+      },
+    },
+    {
+      types: ['class-name'],
+      style: {
+        color: '#f9e2af',
+      },
+    },
+    {
+      types: ['important', 'bold'],
+      style: {
+        fontWeight: 'bold',
+      },
+    },
+    {
+      types: ['italic'],
+      style: {
+        fontStyle: 'italic',
+      },
+    },
+  ],
+};
+
+// Catppuccin Latte (light theme)
+export const catppuccinLatte = {
+  plain: {
+    color: '#4c4f69',
+    backgroundColor: '#FAF9F6',
+  },
+  styles: [
+    {
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
+      style: {
+        color: '#8c8fa1',
+        fontStyle: 'italic',
+      },
+    },
+    {
+      types: ['namespace'],
+      style: {
+        opacity: 0.7,
+      },
+    },
+    {
+      types: ['string', 'char', 'attr-value'],
+      style: {
+        color: '#40a02b',
+      },
+    },
+    {
+      types: ['punctuation', 'operator'],
+      style: {
+        color: '#8c8fa1',
+      },
+    },
+    {
+      types: [
+        'entity',
+        'url',
+        'symbol',
+        'number',
+        'boolean',
+        'variable',
+        'constant',
+        'property',
+        'regex',
+        'inserted',
+      ],
+      style: {
+        color: '#fe640b',
+      },
+    },
+    {
+      types: ['atrule', 'keyword', 'attr-name', 'selector'],
+      style: {
+        color: '#8839ef',
+      },
+    },
+    {
+      types: ['function', 'deleted', 'tag'],
+      style: {
+        color: '#d20f39',
+      },
+    },
+    {
+      types: ['function-variable'],
+      style: {
+        color: '#1e66f5',
+      },
+    },
+    {
+      types: ['class-name'],
+      style: {
+        color: '#df8e1d',
+      },
+    },
+    {
+      types: ['important', 'bold'],
+      style: {
+        fontWeight: 'bold',
+      },
+    },
+    {
+      types: ['italic'],
+      style: {
+        fontStyle: 'italic',
+      },
+    },
+  ],
+};

package/src/config/sidebar.js

@@ -0,0 +1,20 @@
+
+const sidebar = {
+  
+  notes: [
+    {
+      type: 'category',
+      label: 'Notes',
+      link: { type: 'doc', id: 'index' },
+      items: [
+        {
+          type: 'autogenerated',
+          dirName: '.'
+        }
+      ]
+    }
+  ]
+};
+
+
+module.exports = sidebar;

package/src/configLoader.js

@@ -0,0 +1,99 @@
+const path = require('path');
+const fs = require('fs');
+
+function resolvePath(obj, path) {
+  const parts = path.split('.');
+  let current = obj;
+
+  for (const part of parts) {
+    if (current === null || current === undefined || typeof current !== 'object') {
+      return undefined;
+    }
+    current = current[part];
+  }
+
+  return current;
+}
+
+function parseStringValue(value, config) {
+  if (typeof value !== 'string') {
+    return value;
+  }
+
+  // Find all ${...} references
+  return value.replace(/\${([^}]+)}/g, (match, path) => {
+    const resolvedValue = resolvePath(config, path);
+    
+    if (resolvedValue === undefined) {
+      console.warn(`Warning: Could not resolve reference "${path}" in config value "${value}"`);
+      return match;
+    }
+    
+    if (typeof resolvedValue === 'string' && resolvedValue.includes('${')) {
+      return parseStringValue(resolvedValue, config);
+    }
+    
+    return resolvedValue;
+  });
+}
+
+function parseConfigObject(obj, config) {
+  if (Array.isArray(obj)) {
+    return obj.map(item => parseConfigObject(item, config));
+  }
+  
+  if (obj !== null && typeof obj === 'object') {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = parseConfigObject(value, config);
+    }
+    return result;
+  }
+  
+  if (typeof obj === 'string') {
+    return parseStringValue(obj, config);
+  }
+  
+  return obj;
+}
+
+function parseConfig(config) {
+  const parsedConfig = JSON.parse(JSON.stringify(config));
+  return parseConfigObject(parsedConfig, config);
+}
+
+function loadUserConfig() {
+  const configPath = path.resolve(process.cwd(), 'config.js');
+  
+  if (!fs.existsSync(configPath)) {
+    console.warn(`\n⚠️  No config.js found at ${configPath}. Using empty config.\n`);
+    return {};
+  }
+
+  try {
+    const rawConfig = require(configPath);
+    // Support both `module.exports = { usrConf: ... }` and direct object
+    const rootConfig = rawConfig.usrConf || rawConfig;
+    
+    // Parse the config (resolve variables)
+    const parsedExports = {};
+    for (const key in rootConfig) {
+      parsedExports[key] = parseConfig(rootConfig[key]);
+    }
+    
+    return {
+        ...parsedExports,
+        // Helper methods attached if needed, but mostly we just return the object
+    };
+
+  } catch (err) {
+    console.error(`\n❌ Error loading config.js:`, err);
+    process.exit(1);
+  }
+}
+
+module.exports = {
+  loadUserConfig,
+  parseConfig,
+  resolvePath
+};

package/src/index.js

@@ -0,0 +1,79 @@
+const path = require('path');
+const { loadUserConfig } = require('./configLoader');
+
+module.exports = function preset(context, options) {
+  // 1. Load User Configuration
+  const userConfig = loadUserConfig();
+
+  // 2. Resolve Paths
+  const customCss = [
+    require.resolve('./theme/css/catppuccin.css'),
+    require.resolve('./theme/css/custom.css'),
+    require.resolve('./theme/css/tasks.css') // Globally available
+  ];
+
+  // 3. Define the Preset
+  return {
+    themes: [
+      // In Docusaurus 3, we can't easily "inject" a theme folder without a proper theme definition.
+      // But since we are packaging components, we can add a local plugin that performs `addRoute` 
+      // or we just trust the user to rely on our components? 
+      // Actually, standard way is to return a theme from options.
+      // We will assume `preset-classic` handles the heavy lifting, and we just override CSS.
+      // EXCEPT: We likely have swizzled components in `src/theme/components`.
+      // To use them, we need to register a theme plugin that points to `src/theme`.
+      
+      // Let's define a simple inline theme plugin to expose our components
+      function (context, options) {
+        return {
+          name: 'docusaurus-theme-portosaurus-components',
+          getThemePath() {
+            return path.resolve(__dirname, './theme');
+          }
+        };
+      }
+    ],
+    plugins: [
+        // Search Plugin
+        [
+            require.resolve('@easyops-cn/docusaurus-search-local'),
+            {
+                hashed: true,
+                indexDocs: true,
+                docsDir: "notes",
+                docsRouteBasePath: "notes",
+                highlightSearchTermsOnTargetPage: true,
+                searchContextByPaths: ["notes", "blog"],
+                ...((userConfig.usrConf && userConfig.usrConf.search) || {})
+            }
+        ],
+        // Image Zoom
+        require.resolve('plugin-image-zoom'),
+    ],
+    presets: [
+      [
+        require.resolve('@docusaurus/preset-classic'),
+        {
+          docs: {
+            path: 'notes',
+            routeBasePath: 'notes',
+            sidebarPath: require.resolve('./config/sidebar.js'),
+            // Pass through any user overrides if needed
+            ...((userConfig.usrConf && userConfig.usrConf.docs) || {})
+          },
+          blog: {
+            path: 'blog',
+            showReadingTime: false,
+            // Pass through
+             ...((userConfig.usrConf && userConfig.usrConf.blog) || {})
+          },
+          theme: {
+            customCss: customCss,
+          },
+          // Pages?? 
+          // If we want to support user pages in `src/pages` (root), it works by default.
+        },
+      ],
+    ],
+  };
+};

package/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>
+  );
+}