@portosaur/core 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portosaur/core",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "The engine of portosaur that translates YAML configuration into Docusaurus structures.",
   "license": "GPL-3.0-only",
   "author": "soymadip",
@@ -27,9 +27,11 @@
   },
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@portosaur/logger": "^0.2.0",
+    "@portosaur/logger": "^0.4.0",
     "favicons": "^7.2.0",
     "js-yaml": "^4.1.1",
+    "rehype-katex": "7",
+    "remark-math": "6",
     "sharp": "^0.34.5"
   },
   "engines": {

package/src/generators/docusaurusConfig.mjs

@@ -11,6 +11,9 @@ import {
   buildHeadTags,
 } from "../utils/docusaurus.mjs";
 
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+
 // ------- Main Configuration Generator -------
 
 /**
@@ -302,8 +305,15 @@ export function buildDocuConfig(rawUserConfig, projectDir, context = {}) {
               portoPaths.theme ?? context.portoRoot ?? "",
               "config/sidebar.jsx",
             ),
+            remarkPlugins: [remarkMath],
+            rehypePlugins: [rehypeKatex],
+          },
+          blog: {
+            path: "blog",
+            showReadingTime: false,
+            remarkPlugins: [remarkMath],
+            rehypePlugins: [rehypeKatex],
           },
-          blog: { path: "blog", showReadingTime: false },
           theme: {
             customCss: path.resolve(
               portoPaths.theme ?? context.portoRoot ?? "",
@@ -343,7 +353,37 @@ export function buildDocuConfig(rawUserConfig, projectDir, context = {}) {
 
     // ------- Plugins -------
 
+    stylesheets: [
+      {
+        href: "https://cdn.jsdelivr.net/npm/katex@0.17.0/dist/katex.min.css",
+        type: "text/css",
+        integrity:
+          "sha384-vlBdW0r3AcZO/HboRPznQNowvexd3fY8qHOWkBi5q7KGgqJ+F48+DceybYmrVbmB",
+        crossorigin: "anonymous",
+      },
+    ],
+
     plugins: [
+      function portosaurWebpackLoader(context, options) {
+        return {
+          name: "portosaur-webpack-loader",
+          configureWebpack(config, isServer, utils) {
+            return {
+              module: {
+                rules: [
+                  {
+                    test: /\.jsx?$/,
+                    include: [
+                      path.resolve(portoPaths.theme ?? context.portoRoot ?? ""),
+                    ],
+                    use: [utils.getJSLoader({ isServer })],
+                  },
+                ],
+              },
+            };
+          },
+        };
+      },
       [
         "@docusaurus/plugin-pwa",
         {

package/src/index.d.ts

@@ -31,6 +31,7 @@ export {
   openInBrowser,
 } from "./utils/system.mjs";
 export { porto, git, text, limits } from "./app.mjs";
+export { getCssVar } from "./utils/cssExtractor.mjs";
 export { generateFavicons } from "./generators/generateFavicons.mjs";
 export { generateRobotsTxt } from "./generators/generateRobots.mjs";
 export {

package/src/index.mjs

@@ -14,6 +14,8 @@ export {
 
 export * from "./app.mjs";
 
+export { getCssVar } from "./utils/cssExtractor.mjs";
+
 export { generateFavicons } from "./generators/generateFavicons.mjs";
 export { generateRobotsTxt } from "./generators/generateRobots.mjs";
 export { buildDocuConfig } from "./generators/docusaurusConfig.mjs";

package/src/utils/cssExtractor.mjs

@@ -0,0 +1,72 @@
+import fs from "fs";
+import { logger } from "@portosaur/logger";
+
+// Cache for CSS content and parsed variables to avoid redundant reads
+const cssCache = new Map();
+const varCache = new Map();
+
+/**
+ * Extracts a CSS variable's value from an array of CSS files.
+ * Supports resolving nested variables (e.g., var(--other-var)).
+ *
+ * @param {string} varName - The CSS variable name to find (e.g., '--ifm-color-primary').
+ * @param {string[]} cssFiles - Array of absolute paths to CSS files to search in.
+ * @returns {string|null} The resolved CSS variable value, or null if not found.
+ */
+export function getCssVar(varName, cssFiles = []) {
+  // Return cached value if exists
+  if (varCache.has(varName)) {
+    return varCache.get(varName);
+  }
+
+  for (const cssPath of cssFiles) {
+    try {
+      if (!fs.existsSync(cssPath)) {
+        continue;
+      }
+
+      let cssContent = cssCache.get(cssPath);
+      if (!cssContent) {
+        cssContent = fs.readFileSync(cssPath, "utf8");
+        cssCache.set(cssPath, cssContent);
+      }
+
+      // Find all occurrences of the variable (e.g., --var-name: value;)
+      // Using a regex that captures everything up to a semicolon or closing brace
+      const regex = new RegExp(`${varName}:\\s*([^;}]+)`, "g");
+      let lastValue = null;
+      let match;
+
+      // Find all matches and keep the last one (CSS cascade logic)
+      while ((match = regex.exec(cssContent)) !== null) {
+        lastValue = match[1].replace(/!important/g, "").trim();
+      }
+
+      // Process nested variables: if the value is var(--something)
+      if (lastValue && lastValue.includes("var(")) {
+        const nestedMatch = lastValue.match(/var\((--[^)]+)\)/);
+        if (nestedMatch) {
+          const nestedVar = nestedMatch[1];
+          try {
+            const resolvedValue = getCssVar(nestedVar, cssFiles);
+            if (resolvedValue) {
+              varCache.set(varName, resolvedValue);
+              return resolvedValue;
+            }
+          } catch (err) {
+            logger.warn(`Failed to resolve nested variable ${nestedVar}`);
+          }
+        }
+      }
+
+      if (lastValue) {
+        varCache.set(varName, lastValue);
+        return lastValue;
+      }
+    } catch (err) {
+      logger.warn(`Error processing CSS file ${cssPath}: ${err.message}`);
+    }
+  }
+
+  return null;
+}