czon 0.4.1 → 0.4.3

package/dist/build/pipeline.js

@@ -45,6 +45,8 @@ const processTranslations_1 = require("../process/processTranslations");
 const scanSourceFiles_1 = require("../process/scanSourceFiles");
 const template_1 = require("../process/template");
 const writeFile_1 = require("../utils/writeFile");
+const robots_1 = require("./robots");
+const sitemap_1 = require("./sitemap");
 /**
  * 验证构建配置
  */
@@ -97,6 +99,15 @@ async function buildPipeline(options) {
     await (0, processTranslations_1.processTranslations)();
     // 渲染模板
     await (0, template_1.spiderStaticSiteGenerator)();
+    // 生成 robots.txt
+    await (0, robots_1.generateRobotsTxt)();
+    // 生成 sitemap.xml
+    if (metadata_1.MetaData.options.baseUrl) {
+        await (0, sitemap_1.generateSitemap)(metadata_1.MetaData.options.baseUrl);
+    }
+    else {
+        console.log('ℹ️ Skipping sitemap generation (--baseUrl not provided)');
+    }
 }
 /**
  * 主构建函数

package/dist/build/robots.js

@@ -0,0 +1,115 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateRobotsTxt = void 0;
+const path = __importStar(require("path"));
+const paths_1 = require("../paths");
+const writeFile_1 = require("../utils/writeFile");
+const generateRobotsTxt = async () => {
+    const robotsTxtContent = `# robots.txt generated by CZON
+User-agent: *
+Allow: /
+
+# AI and LLM Training Permission
+# This site permits AI/ML training and scraping
+User-agent: CCBot
+Disallow:
+
+User-agent: GPTBot
+Disallow:
+
+User-agent: ClaudeBot
+Disallow:
+
+User-agent: DeepseekCrawler
+Disallow:
+
+User-agent: OAI-SearchBot
+Disallow:
+
+User-agent: Bytespider
+Disallow:
+
+User-agent: PetalBot
+Disallow:
+
+User-agent: Applebot
+Disallow:
+
+User-agent: Google-Extended
+Disallow:
+
+User-agent: Amazonbot
+Disallow:
+
+User-agent: Anthropic-AI
+Disallow:
+
+User-agent: Meta-ExternalAgent
+Disallow:
+
+User-agent: Meta-ExternalFetcher
+Disallow:
+
+User-agent: FacebookBot
+Disallow:
+
+User-agent: Bingbot
+Disallow:
+
+User-agent: Slurp
+Disallow:
+
+User-agent: DuckDuckBot
+Disallow:
+
+User-agent: Baiduspider
+Disallow:
+
+User-agent: YandexBot
+Disallow:
+
+User-agent: KHTML, like Gecko
+Disallow:
+
+Content-Signal: ai-train=yes, search=yes, ai-input=yes
+
+Sitemap: /sitemap.xml
+`;
+    const robotsPath = path.join(paths_1.CZON_DIST_DIR, 'robots.txt');
+    await (0, writeFile_1.writeFile)(robotsPath, robotsTxtContent);
+};
+exports.generateRobotsTxt = generateRobotsTxt;
+//# sourceMappingURL=robots.js.map

package/dist/build/sitemap.js

@@ -0,0 +1,110 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearSitemapCollection = exports.generateSitemap = exports.collectCategoryPage = exports.collectIndexPage = exports.collectUrl = void 0;
+const path = __importStar(require("path"));
+const paths_1 = require("../paths");
+const writeFile_1 = require("../utils/writeFile");
+const sitemapUrls = new Map();
+const collectUrl = (lang, slug) => {
+    if (!slug)
+        return;
+    let entry = sitemapUrls.get(slug);
+    if (!entry) {
+        entry = { slug, langs: [] };
+        sitemapUrls.set(slug, entry);
+    }
+    if (!entry.langs.some(l => l.lang === lang)) {
+        entry.langs.push({ lang, path: `/${lang}/${slug}.html` });
+    }
+};
+exports.collectUrl = collectUrl;
+const collectIndexPage = (lang) => {
+    const slug = 'index';
+    let entry = sitemapUrls.get(slug);
+    if (!entry) {
+        entry = { slug, langs: [] };
+        sitemapUrls.set(slug, entry);
+    }
+    if (!entry.langs.some(l => l.lang === lang)) {
+        entry.langs.push({ lang, path: `/${lang}/index.html` });
+    }
+};
+exports.collectIndexPage = collectIndexPage;
+const collectCategoryPage = (lang, category) => {
+    const slug = `categories_${category}`;
+    let entry = sitemapUrls.get(slug);
+    if (!entry) {
+        entry = { slug, langs: [] };
+        sitemapUrls.set(slug, entry);
+    }
+    if (!entry.langs.some(l => l.lang === lang)) {
+        entry.langs.push({ lang, path: `/${lang}/categories_${category}.html` });
+    }
+};
+exports.collectCategoryPage = collectCategoryPage;
+const generateSitemap = async (baseUrl) => {
+    if (sitemapUrls.size === 0) {
+        console.warn('⚠️ No URLs collected for sitemap');
+        return;
+    }
+    const baseUrlClean = baseUrl.replace(/\/$/, '');
+    let sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+        xmlns:xhtml="http://www.w3.org/1999/xhtml">
+`;
+    for (const entry of sitemapUrls.values()) {
+        sitemap += `  <url>\n`;
+        for (const langEntry of entry.langs) {
+            const fullUrl = `${baseUrlClean}${langEntry.path}`;
+            const fullUrlEncoded = encodeURI(fullUrl);
+            if (langEntry.lang === entry.langs[0].lang) {
+                sitemap += `    <loc>${fullUrlEncoded}</loc>\n`;
+            }
+            sitemap += `    <xhtml:link rel="alternate" hreflang="${langEntry.lang}" href="${fullUrlEncoded}"/>\n`;
+        }
+        sitemap += `  </url>\n`;
+    }
+    sitemap += `</urlset>`;
+    const sitemapPath = path.join(paths_1.CZON_DIST_DIR, 'sitemap.xml');
+    await (0, writeFile_1.writeFile)(sitemapPath, sitemap);
+    console.log(`✅ Generated sitemap.xml with ${sitemapUrls.size} URLs`);
+};
+exports.generateSitemap = generateSitemap;
+const clearSitemapCollection = () => {
+    sitemapUrls.clear();
+};
+exports.clearSitemapCollection = clearSitemapCollection;
+//# sourceMappingURL=sitemap.js.map

package/dist/cli.js

@@ -1,42 +1,8 @@
 #!/usr/bin/env node
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 const clipanion_1 = require("clipanion");
 const dotenv_1 = require("dotenv");
-const path = __importStar(require("path"));
 const pipeline_1 = require("./build/pipeline");
 const version_1 = require("./version");
 // 加载 .env 文件中的环境变量
@@ -45,18 +11,20 @@ const version_1 = require("./version");
 class BuildCommand extends clipanion_1.Command {
     constructor() {
         super(...arguments);
-        this.template = clipanion_1.Option.String('-t,--template');
         this.verbose = clipanion_1.Option.Boolean('-v,--verbose');
         this.lang = clipanion_1.Option.Array('--lang', {
             description: 'Target languages for translation (e.g., en-US, ja-JP)',
         });
+        this.baseUrl = clipanion_1.Option.String('--baseUrl', {
+            description: 'Base URL for sitemap generation (e.g., https://yoursite.com). If not provided, sitemap will not be generated.',
+        });
     }
     async execute() {
         try {
             await (0, pipeline_1.buildSite)({
-                template: this.template ? path.resolve(this.template) : undefined,
                 verbose: this.verbose,
                 langs: this.lang,
+                baseUrl: this.baseUrl,
             });
             return 0;
         }
@@ -76,6 +44,7 @@ BuildCommand.usage = clipanion_1.Command.Usage({
       Examples:
         $ czon build
         $ czon build --lang en-US --lang ja-JP (translate to English and Japanese)
+        $ czon build --baseUrl https://yoursite.com (generate sitemap.xml)
     `,
 });
 // 创建 CLI 应用

package/dist/process/template.js

@@ -38,6 +38,7 @@ const fs = __importStar(require("fs/promises"));
 const path = __importStar(require("path"));
 const metadata_1 = require("../metadata");
 const paths_1 = require("../paths");
+const sitemap_1 = require("../build/sitemap");
 const ssg_1 = require("../ssg");
 const convertMarkdownToHtml_1 = require("../utils/convertMarkdownToHtml");
 const frontmatter_1 = require("../utils/frontmatter");
@@ -46,6 +47,7 @@ const writeFile_1 = require("../utils/writeFile");
  * 使用简单的爬虫抓取生成的站点页面
  */
 const spiderStaticSiteGenerator = async () => {
+    (0, sitemap_1.clearSitemapCollection)();
     const queue = ['/index.html', '/404.html'];
     // 将每个语言的首页加入队列
     for (const lang of metadata_1.MetaData.options.langs || []) {
@@ -117,6 +119,22 @@ const spiderStaticSiteGenerator = async () => {
             return match;
         });
         console.info(`🕷️ Crawled ${currentPath}`);
+        // 收集 URL 用于 sitemap
+        const urlMatch = currentPath.match(/^\/([^/]+)\/(.+)\.html$/);
+        if (urlMatch) {
+            const lang = urlMatch[1];
+            const page = urlMatch[2];
+            if (page === 'index') {
+                (0, sitemap_1.collectIndexPage)(lang);
+            }
+            else if (page.startsWith('categories_')) {
+                const category = page.replace('categories_', '');
+                (0, sitemap_1.collectCategoryPage)(lang, category);
+            }
+            else {
+                (0, sitemap_1.collectUrl)(lang, page);
+            }
+        }
         await (0, writeFile_1.writeFile)(path.join(paths_1.CZON_DIST_DIR, currentPath), html);
         // 提取生成的 HTML 中的站内链接，加入爬取队列
         const linkRegex = /href="([^"]+)"/g;

package/dist/ssg/ContentPage.js

@@ -31,7 +31,21 @@ const ContentPage = props => {
             react_1.default.createElement("title", null, title),
             react_1.default.createElement("meta", { name: "description", content: `tags: ${tags.join(', ')}` }),
             react_1.default.createElement("script", { src: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4", defer: true }),
-            react_1.default.createElement("style", null, style_1.style)),
+            react_1.default.createElement("style", null, style_1.style),
+            react_1.default.createElement("script", { dangerouslySetInnerHTML: {
+                    __html: `
+          (function() {
+            const saved = localStorage.getItem('theme');
+            const theme = saved || 'auto';
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDark = theme === 'auto' ? prefersDark : theme === 'dark';
+            document.documentElement.setAttribute('data-theme', theme);
+            if (isDark) {
+              document.documentElement.classList.add('dark');
+            }
+          })();
+        `,
+                } })),
         react_1.default.createElement("body", null,
             react_1.default.createElement(PageLayout_1.PageLayout, { header: react_1.default.createElement(CZONHeader_1.CZONHeader, { ctx: props.ctx, lang: props.lang, file: props.file }), navigator: react_1.default.createElement("nav", { className: "sidebar hidden md:block" },
                     react_1.default.createElement(Navigator_1.Navigator, { ctx: props.ctx, file: props.file, lang: props.lang })), main: react_1.default.createElement("main", { className: "content" },
@@ -64,11 +78,10 @@ const ContentPage = props => {
         `),
             react_1.default.createElement("script", { id: "mermaid-lib", src: "https://cdn.jsdelivr.net/npm/mermaid@11.4.0/dist/mermaid.min.js", defer: true }),
             react_1.default.createElement("script", null, `
-        document.getElementById('mermaid-lib').addEventListener('load', () => {
-            console.log('Mermaid loaded');
+        function runMermaid() {
             mermaid.initialize({
               startOnLoad: true,
-              theme: 'default',
+              theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default',
               securityLevel: 'strict',
               flowchart: {
                 useMaxWidth: true,
@@ -87,6 +100,13 @@ const ContentPage = props => {
                 barGap: 4,
               },
             });
+            mermaid.run().catch(err => {
+              console.error('Mermaid render error:', err);
+            });
+        }
+        document.getElementById('mermaid-lib').addEventListener('load', () => {
+            console.log('Mermaid loaded');
+            runMermaid();
         });
         `),
             react_1.default.createElement("script", null, `
@@ -113,7 +133,11 @@ const ContentPage = props => {
           // 延迟一点，确保首屏渲染完成
           setTimeout(() => {
             loadCSS("https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css", 'katex-css');
-            loadCSS("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css", 'hljs-css');
+            const isDark = document.documentElement.classList.contains('dark');
+            const hljsTheme = isDark
+              ? "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css"
+              : "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css";
+            loadCSS(hljsTheme, 'hljs-css');
           }, 300);
         }
         

package/dist/ssg/IndexPage.js

@@ -28,7 +28,21 @@ const IndexPage = props => {
                 props.lang),
             react_1.default.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }),
             react_1.default.createElement("meta", { name: "description", content: `Index page for language ${props.lang}` }),
-            react_1.default.createElement("style", null, style_1.style)),
+            react_1.default.createElement("style", null, style_1.style),
+            react_1.default.createElement("script", { dangerouslySetInnerHTML: {
+                    __html: `
+          (function() {
+            const saved = localStorage.getItem('theme');
+            const theme = saved || 'auto';
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDark = theme === 'auto' ? prefersDark : theme === 'dark';
+            document.documentElement.setAttribute('data-theme', theme);
+            if (isDark) {
+              document.documentElement.classList.add('dark');
+            }
+          })();
+        `,
+                } })),
         react_1.default.createElement("body", null,
             react_1.default.createElement(PageLayout_1.PageLayout, { header: react_1.default.createElement(CZONHeader_1.CZONHeader, { ctx: props.ctx, lang: props.lang }), navigator: undefined, main: react_1.default.createElement("div", { className: "p-6 max-w-3xl mx-auto" },
                     react_1.default.createElement("div", null,

package/dist/ssg/RedirectPage.js

@@ -14,7 +14,21 @@ const RedirectPage = props => {
             react_1.default.createElement("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }),
             react_1.default.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }),
             react_1.default.createElement("meta", { httpEquiv: "refresh", content: `0; url=${toURL}` }),
-            react_1.default.createElement("title", null, "Redirecting...")),
+            react_1.default.createElement("title", null, "Redirecting..."),
+            react_1.default.createElement("script", { dangerouslySetInnerHTML: {
+                    __html: `
+          (function() {
+            const saved = localStorage.getItem('theme');
+            const theme = saved || 'auto';
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDark = theme === 'auto' ? prefersDark : theme === 'dark';
+            document.documentElement.setAttribute('data-theme', theme);
+            if (isDark) {
+              document.documentElement.classList.add('dark');
+            }
+          })();
+        `,
+                } })),
         react_1.default.createElement("body", null,
             react_1.default.createElement("p", null,
                 "Redirecting to ",

package/dist/ssg/RootPage.js

@@ -25,7 +25,21 @@ const RootPage = props => {
             react_1.default.createElement("title", null, "CZON Multilingual Site Navigator"),
             react_1.default.createElement("meta", { name: "description", content: "Select your preferred language to explore our content." }),
             props.ctx.site.options.langs.map(lang => (react_1.default.createElement("link", { rel: "alternate", hrefLang: lang, href: `${lang}/index.html` }))),
-            react_1.default.createElement("link", { rel: "alternate", hrefLang: "x-default", href: `${props.ctx.site.options.langs[0]}/index.html` })),
+            react_1.default.createElement("link", { rel: "alternate", hrefLang: "x-default", href: `${props.ctx.site.options.langs[0]}/index.html` }),
+            react_1.default.createElement("script", { dangerouslySetInnerHTML: {
+                    __html: `
+          (function() {
+            const saved = localStorage.getItem('theme');
+            const theme = saved || 'auto';
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDark = theme === 'auto' ? prefersDark : theme === 'dark';
+            document.documentElement.setAttribute('data-theme', theme);
+            if (isDark) {
+              document.documentElement.classList.add('dark');
+            }
+          })();
+        `,
+                } })),
         react_1.default.createElement("body", null,
             react_1.default.createElement("h1", null, "Welcome to CZON Multilingual Site"),
             react_1.default.createElement("p", null, "Please select your preferred language if automatic redirection does not work:"),

package/dist/ssg/components/CZONHeader.js

@@ -5,12 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CZONHeader = void 0;
 const react_1 = __importDefault(require("react"));
+const DarkModeSwitch_1 = require("./DarkModeSwitch");
 const LanguageSwitch_1 = require("./LanguageSwitch");
 const CZONHeader = props => {
     return (react_1.default.createElement("header", { className: "czon-header py-4 border-b flex justify-between items-center px-6" },
         react_1.default.createElement("h1", { className: "text-2xl font-bold" },
             react_1.default.createElement("a", { href: "index.html" }, "CZON")),
-        props.lang && (react_1.default.createElement(LanguageSwitch_1.LanguageSwitch, { ctx: props.ctx, lang: props.lang, file: props.file }))));
+        react_1.default.createElement("div", { className: "flex items-center gap-4" },
+            react_1.default.createElement(DarkModeSwitch_1.DarkModeSwitch, null),
+            props.lang && react_1.default.createElement(LanguageSwitch_1.LanguageSwitch, { ctx: props.ctx, lang: props.lang, file: props.file }))));
 };
 exports.CZONHeader = CZONHeader;
 //# sourceMappingURL=CZONHeader.js.map

package/dist/ssg/components/DarkModeSwitch.js

@@ -0,0 +1,149 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DarkModeSwitch = void 0;
+const react_1 = __importDefault(require("react"));
+const style = `
+.dark-mode-switch-container {
+  position: relative;
+  display: inline-block;
+}
+
+.dark-mode-switch-trigger {
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.dark-mode-switch-trigger:hover {
+  box-shadow: 0 2px 4px var(--shadow-color);
+  background: var(--tag-bg);
+}
+
+.dark-mode-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  transition: all 0.2s ease;
+}
+
+[data-theme="light"] .icon-sun { display: block; }
+[data-theme="light"] .icon-moon { display: none; }
+[data-theme="light"] .icon-auto { display: none; }
+
+[data-theme="dark"] .icon-sun { display: none; }
+[data-theme="dark"] .icon-moon { display: block; }
+[data-theme="dark"] .icon-auto { display: none; }
+
+[data-theme="auto"] .icon-sun { display: none; }
+[data-theme="auto"] .icon-moon { display: none; }
+[data-theme="auto"] .icon-auto { display: block; }
+`;
+const DarkModeSwitch = () => {
+    return (react_1.default.createElement("div", { className: "dark-mode-switch-container relative inline-block" },
+        react_1.default.createElement("style", null, style),
+        react_1.default.createElement("input", { id: "theme-toggle", type: "checkbox", className: "hidden", "aria-hidden": "true" }),
+        react_1.default.createElement("label", { htmlFor: "theme-toggle", className: "dark-mode-switch-trigger p-2 rounded-full flex items-center justify-center transition-colors", "aria-label": "Toggle theme", role: "button", tabIndex: 0 },
+            react_1.default.createElement("svg", { className: "dark-mode-icon icon-sun", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" })),
+            react_1.default.createElement("svg", { className: "dark-mode-icon icon-moon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" })),
+            react_1.default.createElement("svg", { className: "dark-mode-icon icon-auto", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }))),
+        react_1.default.createElement("script", null, `
+(function() {
+  const STORAGE_KEY = 'theme';
+  const toggle = document.getElementById('theme-toggle');
+  const html = document.documentElement;
+  const label = document.querySelector('label[for="theme-toggle"]');
+
+  function updateHljsTheme(isDark) {
+    const link = document.getElementById('hljs-css');
+    if (link) {
+      const url = isDark
+        ? "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css"
+        : "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css";
+      link.href = url;
+    }
+  }
+
+  function updateMermaidTheme(isDark) {
+    if (typeof mermaid !== 'undefined') {
+      document.querySelectorAll('.mermaid').forEach(el => {
+        const pre = el;
+        const content = pre.getAttribute('data-mermaid-content');
+        if (content) {
+          pre.style.visibility = 'visible';
+          pre.textContent = decodeURIComponent(content);
+          delete pre.dataset.processed;
+        }
+      });
+      runMermaid();
+    }
+  }
+  window.updateMermaidTheme = updateMermaidTheme;
+
+  function applyTheme(theme) {
+    localStorage.setItem(STORAGE_KEY, theme);
+    html.setAttribute('data-theme', theme);
+    
+    let isDark;
+    if (theme === 'auto') {
+      isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    } else {
+      isDark = theme === 'dark';
+    }
+    
+    if (isDark) {
+      html.classList.add('dark');
+      if (toggle) toggle.checked = true;
+    } else {
+      html.classList.remove('dark');
+      if (toggle) toggle.checked = false;
+    }
+    
+    updateHljsTheme(isDark);
+    updateMermaidTheme(isDark);
+  }
+
+  function cycleTheme() {
+    const current = html.getAttribute('data-theme') || 'auto';
+    const next = current === 'light' ? 'dark' : current === 'dark' ? 'auto' : 'light';
+    applyTheme(next);
+  }
+
+  function initTheme() {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    const theme = saved || 'auto';
+    applyTheme(theme);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTheme);
+  } else {
+    initTheme();
+  }
+
+  document.addEventListener('click', function(e) {
+    if (label && label.contains(e.target)) {
+      e.preventDefault();
+      cycleTheme();
+    }
+  });
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+    if (html.getAttribute('data-theme') === 'auto') {
+      if (e.matches) {
+        html.classList.add('dark');
+      } else {
+        html.classList.remove('dark');
+      }
+      updateHljsTheme(e.matches);
+      updateMermaidTheme(e.matches);
+    }
+  });
+})();
+      `)));
+};
+exports.DarkModeSwitch = DarkModeSwitch;
+//# sourceMappingURL=DarkModeSwitch.js.map

package/dist/ssg/components/LanguageSwitch.js

@@ -16,15 +16,20 @@ const style = `
 
 .language-switch-trigger {
   transition: all 0.2s ease;
+  background: var(--ls-bg-primary);
+  border-color: var(--ls-border-color);
+  color: var(--ls-text-primary);
 }
 
 .language-switch-trigger:hover {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background: var(--ls-bg-hover);
 }
 
 .language-switch-icon {
   transition: transform 0.2s ease;
   max-width: 1rem;
+  color: var(--ls-text-secondary);
 }
 
 .language-switch-dropdown {
@@ -53,18 +58,62 @@ const style = `
 
 .language-switch-option {
   transition: all 0.15s ease;
+  background: var(--ls-bg-primary);
+  color: var(--ls-text-secondary);
 }
 
 .language-switch-option:hover {
   transform: translateY(-1px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background: var(--ls-bg-hover);
+}
+
+.language-switch-option.active {
+  background: var(--ls-bg-active);
+  color: var(--ls-text-active);
 }
 
 .language-switch-option:focus {
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
 }
+
+.language-switch-info {
+  border-color: var(--ls-border-color);
+}
+
+.language-switch-count {
+  color: var(--ls-text-muted);
+}
+
+html.dark .language-switch-trigger {
+  background: var(--bg-secondary);
+  border-color: var(--border-color);
+  color: var(--text-primary);
+}
+
+html.dark .language-switch-trigger:hover {
+  background: var(--border-color);
+}
+
+html.dark .language-switch-dropdown {
+  background: var(--bg-secondary);
+  border-color: var(--border-color);
+}
+
+html.dark .language-switch-option:hover {
+  background: var(--border-color);
+}
+
+html.dark .language-switch-option.active {
+  background: var(--border-color);
+  color: var(--text-primary);
+}
 `;
+const triggerClasses = 'language-switch-trigger px-4 py-2 border rounded-md flex items-center gap-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors';
+const dropdownClasses = 'language-switch-dropdown absolute top-full mt-1 w-96 md:w-2xl lg:w-3xl max-h-96 overflow-y-auto border rounded-md shadow-lg z-50';
+const optionActiveClasses = 'language-switch-option active font-semibold';
+const optionInactiveClasses = 'language-switch-option';
 const LanguageSwitch = props => {
     // 获取当前语言名称
     const currentLangName = languages_1.LANGUAGE_NAMES[props.lang] || props.lang;
@@ -78,25 +127,22 @@ const LanguageSwitch = props => {
     return (react_1.default.createElement("div", { className: "language-switch-container relative inline-block" },
         react_1.default.createElement("style", null, style),
         react_1.default.createElement("input", { id: "language-switch-toggle", type: "checkbox", className: "hidden", "aria-hidden": "true" }),
-        react_1.default.createElement("label", { htmlFor: "language-switch-toggle", className: "language-switch-trigger px-4 py-2 border border-gray-300 rounded-md flex items-center gap-2 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors", "aria-label": `Language switcher. Current language: ${currentLangName}`, "aria-haspopup": "true", "aria-expanded": "false", "aria-controls": "language-dropdown" },
+        react_1.default.createElement("label", { htmlFor: "language-switch-toggle", className: triggerClasses, "aria-label": `Language switcher. Current language: ${currentLangName}`, "aria-haspopup": "true", "aria-expanded": "false", "aria-controls": "language-dropdown" },
             react_1.default.createElement("span", { className: "text-sm font-medium" }, currentLangName),
             react_1.default.createElement("svg", { className: "language-switch-icon w-4 h-4 transition-transform", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" },
                 react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))),
-        react_1.default.createElement("div", { id: "language-dropdown", className: "language-switch-dropdown absolute top-full mt-1 w-96 md:w-2xl lg:w-3xl max-h-96 overflow-y-auto bg-white border border-gray-300 rounded-md shadow-lg z-50", role: "menu", "aria-label": "Available languages" },
+        react_1.default.createElement("div", { id: "language-dropdown", className: dropdownClasses, role: "menu", "aria-label": "Available languages" },
             react_1.default.createElement("div", { className: "p-4" },
                 react_1.default.createElement("div", { className: "language-switch-grid grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-2" }, languages.map(lang => {
                     const langName = languages_1.LANGUAGE_NAMES[lang] || lang;
                     const isActive = lang === props.lang;
                     return (react_1.default.createElement("a", { key: lang, href: getLanguageLink(lang), className: `
-                    language-switch-option block px-3 py-2 rounded text-sm text-center
-                    ${isActive
-                            ? 'bg-blue-100 text-blue-700 font-semibold'
-                            : 'text-gray-700 hover:bg-gray-100'}
+                    ${isActive ? optionActiveClasses : optionInactiveClasses} block px-3 py-2 rounded text-center
                     transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500
                   `, role: "menuitem", "aria-current": isActive ? 'page' : undefined, lang: lang }, langName));
                 })),
-                react_1.default.createElement("div", { className: "language-switch-info mt-3 pt-3 border-t border-gray-200" },
-                    react_1.default.createElement("p", { className: "language-switch-count text-xs text-gray-500 text-center" },
+                react_1.default.createElement("div", { className: "language-switch-info mt-3 pt-3 border-t" },
+                    react_1.default.createElement("p", { className: "language-switch-count text-xs text-center" },
                         languages.length,
                         " languages available"))))));
 };

package/dist/ssg/style.js

@@ -2,27 +2,65 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = void 0;
 exports.style = `
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --text-primary: #333333;
+  --text-secondary: #6c757d;
+  --border-color: #e9ecef;
+  --code-bg: #f8f9fa;
+  --link-color: #007bff;
+  --sidebar-bg: #ffffff;
+  --tag-bg: #e9ecef;
+  --tag-text: #495057;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --primary-color: #007bff;
+  --text-on-primary: #ffffff;
+}
 
-      html, body {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-      }
+html.dark {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #262626;
+  --text-primary: #e5e5e5;
+  --text-secondary: #a3a3a3;
+  --border-color: #404040;
+  --code-bg: #333333;
+  --link-color: #60a5fa;
+  --sidebar-bg: #262626;
+  --tag-bg: #404040;
+  --tag-text: #d4d4d4;
+  --shadow-color: rgba(0, 0, 0, 0.5);
+  --primary-color: #3b82f6;
+  --text-on-primary: #ffffff;
+}
 
-      html[lang='ar-SA'] {
-        direction: rtl;
-      }
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
 
-      body {
-        color: #333;
-        background: #f8f9fa;
-      }
+html[lang='ar-SA'] {
+  direction: rtl;
+}
+
+html.dark body {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+}
+
+html:not(.dark) body {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+}
 
       .sidebar {
         width: 280px;
-        background: #fff;
-        border-right: 1px solid #e9ecef;
+        background: var(--sidebar-bg);
+        border-right: 1px solid var(--border-color);
         padding: 2rem 1rem;
         overflow-y: auto;
 
@@ -32,17 +70,17 @@ exports.style = `
       .sidebar-header {
         margin-bottom: 2rem;
         padding-bottom: 1rem;
-        border-bottom: 1px solid #e9ecef;
+        border-bottom: 1px solid var(--border-color);
       }
 
       .sidebar-header h1 {
         font-size: 1.5rem;
         font-weight: 600;
-        color: #212529;
+        color: var(--text-primary);
       }
 
       .sidebar-header p {
-        color: #6c757d;
+        color: var(--text-secondary);
         font-size: 0.875rem;
         margin-top: 0.5rem;
       }
@@ -54,20 +92,20 @@ exports.style = `
       .nav-link {
         display: block;
         padding: 0.5rem 1rem;
-        color: #495057;
+        color: var(--text-secondary);
         text-decoration: none;
         border-radius: 4px;
         transition: all 0.2s;
       }
 
       .nav-link:hover {
-        background: #e9ecef;
-        color: #212529;
+        background: var(--border-color);
+        color: var(--text-primary);
       }
 
       .nav-link.active {
-        background: #007bff;
-        color: white;
+        background: var(--primary-color);
+        color: var(--text-on-primary);
       }
 
       .nav-submenu {
@@ -77,11 +115,11 @@ exports.style = `
       }
 
       blockquote {
-        border-left: 4px solid #007bff;
+        border-left: 4px solid var(--link-color);
         padding: 0.5rem 1rem;
         margin: 1rem 0;
-        background: #f8f9fa;
-        color: #495057;
+        background: var(--code-bg);
+        color: var(--text-primary);
       }
 
       .content {
@@ -94,18 +132,18 @@ exports.style = `
       .content-header {
         margin-bottom: 2rem;
         padding-bottom: 1rem;
-        border-bottom: 1px solid #e9ecef;
+        border-bottom: 1px solid var(--border-color);
       }
 
       .content-header h1 {
         font-size: 2.5rem;
         font-weight: 700;
-        color: #212529;
+        color: var(--text-primary);
         margin-bottom: 0.5rem;
       }
 
       .content-header .meta {
-        color: #6c757d;
+        color: var(--text-secondary);
         font-size: 0.875rem;
       }
 
@@ -117,19 +155,19 @@ exports.style = `
       .content-body h1 {
         font-size: 2rem;
         margin: 2rem 0 1rem;
-        color: #212529;
+        color: var(--text-primary);
       }
 
       .content-body h2 {
         font-size: 1.75rem;
         margin: 1.75rem 0 0.875rem;
-        color: #343a40;
+        color: var(--text-primary);
       }
 
       .content-body h3 {
         font-size: 1.5rem;
         margin: 1.5rem 0 0.75rem;
-        color: #495057;
+        color: var(--text-primary);
       }
 
       .content-body p {
@@ -146,23 +184,24 @@ exports.style = `
       }
 
       .content-body blockquote {
-        border-left: 4px solid #007bff;
+        border-left: 4px solid var(--link-color);
         padding: 0.5rem 1rem;
         margin: 1rem 0;
-        background: #f8f9fa;
-        color: #495057;
+        background: var(--code-bg);
+        color: var(--text-primary);
       }
 
       .content-body code {
-        background: #f8f9fa;
+        background: var(--code-bg);
         padding: 0.2rem 0.4rem;
         border-radius: 3px;
         font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
         font-size: 0.875em;
+        color: var(--text-primary);
       }
 
       .content-body pre {
-        background: #f8f9fa;
+        background: var(--code-bg);
         padding: 1rem;
         border-radius: 6px;
         overflow-x: auto;
@@ -182,13 +221,13 @@ exports.style = `
 
       .content-body th,
       .content-body td {
-        border: 1px solid #dee2e6;
+        border: 1px solid var(--border-color);
         padding: 0.75rem;
         text-align: left;
       }
 
       .content-body th {
-        background: #f8f9fa;
+        background: var(--code-bg);
         font-weight: 600;
       }
 
@@ -199,8 +238,12 @@ exports.style = `
         margin: 1rem 0;
       }
 
+      html.dark .content-body img {
+        filter: brightness(0.85) contrast(1.1);
+      }
+
       a {
-        color: #007bff;
+        color: var(--link-color);
         text-decoration: none;
       }
 
@@ -211,8 +254,8 @@ exports.style = `
       .footer {
         margin-top: 3rem;
         padding-top: 2rem;
-        border-top: 1px solid #e9ecef;
-        color: #6c757d;
+        border-top: 1px solid var(--border-color);
+        color: var(--text-secondary);
         font-size: 0.875rem;
         text-align: center;
       }
@@ -227,8 +270,8 @@ exports.style = `
       }
 
       .tag-item {
-        background: #e9ecef;
-        color: #495057;
+        background: var(--tag-bg);
+        color: var(--tag-text);
         padding: 0.25rem 0.5rem;
         border-radius: 4px;
         font-size: 0.875rem;
@@ -241,7 +284,7 @@ exports.style = `
           height: auto;
           position: static;
           border-right: none;
-          border-bottom: 1px solid #e9ecef;
+          border-bottom: 1px solid var(--border-color);
         }
 
         .content {
@@ -253,15 +296,15 @@ exports.style = `
       /* Mermaid diagram styles */
       .mermaid-diagram {
         margin: 1.5rem 0;
-        border: 1px solid #e9ecef;
+        border: 1px solid var(--border-color);
         border-radius: 6px;
         overflow: hidden;
-        background: #fff;
+        background: var(--bg-primary);
       }
 
       .mermaid-placeholder {
         padding: 2rem;
-        background: #f8f9fa;
+        background: var(--code-bg);
         min-height: 200px;
         display: flex;
         align-items: center;
@@ -270,15 +313,15 @@ exports.style = `
       }
 
       .mermaid-loading {
-        color: #6c757d;
+        color: var(--text-secondary);
         font-style: italic;
         font-size: 0.875rem;
       }
 
       .mermaid-error {
-        color: #dc3545;
+        color: #f87171;
         padding: 1rem;
-        background: #f8d7da;
+        background: rgba(248, 113, 113, 0.1);
         border-radius: 4px;
         font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
         font-size: 0.875rem;

package/dist/utils/convertMarkdownToHtml.js

@@ -40,7 +40,7 @@ const convertMarkdownToHtml = (mdContent) => {
             const chartId = 'mermaid-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
             return `
 <div class="mermaid-diagram" data-mermaid-id="${chartId}">
-  <pre class="mermaid">${escapeHtml(codeText)}</pre>
+  <pre class="mermaid" data-mermaid-content="${encodeURIComponent(codeText)}">${escapeHtml(codeText)}</pre>
 </div>
 `;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "czon",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "CZone - AI enhanced Markdown content engine",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,7 +8,7 @@
   "scripts": {
     "build": "npx rimraf dist && tsc",
     "dev": "ts-node src/cli.ts",
-    "build:doc": "npm run build && node dist/cli.js build --lang zh-Hans --lang en-US --lang ja-JP --lang ko-KR --lang es-ES --lang fr-FR --lang de-DE --lang ru-RU --lang pt-PT --lang it-IT --lang nl-NL --lang pl-PL --lang sv-SE --lang fi-FI --lang da-DK --lang no-NO --lang zh-Hant --lang hi-IN --lang ar-SA --lang th-TH --lang vi-VN --lang id-ID --lang pt-BR --lang es-MX --lang tr-TR --lang uk-UA --verbose",
+    "build:doc": "npm run build && node dist/cli.js build --lang zh-Hans --lang en-US --lang ja-JP --lang ko-KR --lang es-ES --lang fr-FR --lang de-DE --lang ru-RU --lang pt-PT --lang it-IT --lang nl-NL --lang pl-PL --lang sv-SE --lang fi-FI --lang da-DK --lang no-NO --lang zh-Hant --lang hi-IN --lang ar-SA --lang th-TH --lang vi-VN --lang id-ID --lang pt-BR --lang es-MX --lang tr-TR --lang uk-UA --verbose --baseUrl 'https://czon.zccz14.com/'",
     "test": "npm run build && node --test dist/**/*.test.js",
     "test:types": "tsc --noEmit",
     "test:build": "npm run build && test -f dist/index.js && test -f dist/cli.js",