czon 0.7.5 → 0.7.7

package/dist/paths.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LOCAL_OPENCODE_AGENT_DIR = exports.GLOBAL_OPENCODE_AGENT_DIR = exports.CZON_META_PATH = exports.CZON_SRC_DIR = exports.CZON_DIST_RAW_CONTENT_DIR = exports.CZON_DIST_DIR = exports.CZON_DIR = exports.INPUT_DIR = void 0;
+exports.LOCAL_OPENCODE_AGENT_DIR = exports.GLOBAL_OPENCODE_AGENT_DIR = exports.CZON_DIST_CUSTOM_STYLE_PATH = exports.CZON_CUSTOM_STYLE_PATH = exports.CZON_META_PATH = exports.CZON_SRC_DIR = exports.CZON_DIST_RAW_CONTENT_DIR = exports.CZON_DIST_DIR = exports.CZON_DIR = exports.INPUT_DIR = void 0;
 const os_1 = require("os");
 const path_1 = require("path");
 exports.INPUT_DIR = process.cwd();
@@ -9,6 +9,8 @@ exports.CZON_DIST_DIR = (0, path_1.join)(exports.CZON_DIR, 'dist');
 exports.CZON_DIST_RAW_CONTENT_DIR = (0, path_1.join)(exports.CZON_DIST_DIR, '__raw__');
 exports.CZON_SRC_DIR = (0, path_1.join)(exports.CZON_DIR, 'src');
 exports.CZON_META_PATH = (0, path_1.join)(exports.CZON_DIR, 'meta.json');
+exports.CZON_CUSTOM_STYLE_PATH = (0, path_1.join)(exports.CZON_DIR, 'style.css');
+exports.CZON_DIST_CUSTOM_STYLE_PATH = (0, path_1.join)(exports.CZON_DIST_DIR, 'style.css');
 /**
  * ~/.config/opencode/agents/
  */

package/dist/process/template.js

@@ -65,13 +65,24 @@ const copyFavicon = async () => {
     await fs.copyFile(defaultFaviconSource, faviconTarget);
     console.info(`📄 Copied default favicon to: ${faviconTarget}`);
 };
+/**
+ * 检测并复制自定义样式文件
+ * @returns 是否存在自定义样式
+ */
+const copyCustomStyle = async () => {
+    if (await (0, isExists_1.isExists)(paths_1.CZON_CUSTOM_STYLE_PATH)) {
+        await fs.mkdir(path.dirname(paths_1.CZON_DIST_CUSTOM_STYLE_PATH), { recursive: true });
+        await fs.copyFile(paths_1.CZON_CUSTOM_STYLE_PATH, paths_1.CZON_DIST_CUSTOM_STYLE_PATH);
+        console.info(`🎨 Copied custom style from ${paths_1.CZON_CUSTOM_STYLE_PATH} to: ${paths_1.CZON_DIST_CUSTOM_STYLE_PATH}`);
+        return true;
+    }
+    return false;
+};
 /**
  * 使用简单的爬虫抓取生成的站点页面
  */
 const spiderStaticSiteGenerator = async () => {
     (0, sitemap_1.clearSitemapCollection)();
-    // 复制 favicon 图标
-    await copyFavicon();
     const queue = ['/index.html', '/404.html'];
     // 将每个语言的首页加入队列
     for (const lang of metadata_1.MetaData.options.langs || []) {
@@ -79,6 +90,12 @@ const spiderStaticSiteGenerator = async () => {
     }
     const isVisited = new Set();
     const contents = [];
+    // 检测并复制自定义样式
+    const hasCustomStyle = await copyCustomStyle();
+    isVisited.add('/style.css'); // 标记自定义样式为已访问
+    // 复制 favicon 图标
+    await copyFavicon();
+    isVisited.add('/favicon.ico'); // 标记 favicon 为已访问
     // 预加载所有 Markdown 内容，因为 React 内部异步渲染比较麻烦
     for (const file of metadata_1.MetaData.files) {
         if (!file.path.endsWith('.md'))
@@ -107,6 +124,7 @@ const spiderStaticSiteGenerator = async () => {
                 path: currentPath,
                 site: metadata_1.MetaData,
                 contents,
+                hasCustomStyle,
             });
         console.info(`🕷️ Crawled ${currentPath}`);
         // 收集 URL 用于 sitemap
@@ -137,9 +155,9 @@ const spiderStaticSiteGenerator = async () => {
             const resolvedPath = path.resolve('/', path.dirname(currentPath), link);
             if (resolvedPath.startsWith('/__raw__/'))
                 continue; // 跳过原始内容目录
-            if (resolvedPath === '/favicon.ico')
-                continue; // 跳过 favicon.ico
-            console.info(`   ➕ Found link: ${link} -> ${resolvedPath} (${isVisited.has(resolvedPath) ? 'visited' : 'new'})`);
+            // console.info(
+            //   `   ➕ Found link: ${link} -> ${resolvedPath} (${isVisited.has(resolvedPath) ? 'visited' : 'new'})`
+            // );
             if (!isVisited.has(resolvedPath)) {
                 queue.push(resolvedPath);
             }

package/dist/ssg/ContentPage.js

@@ -27,6 +27,7 @@ const ContentPage = props => {
     const thisPath = (0, node_path_1.resolve)('/', props.file.path);
     const referencedFiles = props.ctx.site.files.filter(f => f.links.some(link => (0, node_path_1.resolve)('/', (0, node_path_1.dirname)(f.path), link) === thisPath));
     const faviconUrl = (0, resourceMap_1.getFaviconUrlFrom)(props.ctx.path);
+    const customStyleUrl = props.ctx.hasCustomStyle ? (0, resourceMap_1.getCustomStyleUrlFrom)(props.ctx.path) : null;
     return (react_1.default.createElement("html", { lang: props.lang },
         react_1.default.createElement("head", null,
             react_1.default.createElement("meta", { charSet: "UTF-8" }),
@@ -37,6 +38,7 @@ const ContentPage = props => {
             react_1.default.createElement(Analytics_1.Analytics, { ctx: props.ctx }),
             react_1.default.createElement("script", { src: (0, resourceMap_1.getResourceUrlFrom)(props.ctx.path, 'tailwindcss.js') }),
             react_1.default.createElement("style", null, style_1.style),
+            customStyleUrl && react_1.default.createElement("link", { rel: "stylesheet", href: customStyleUrl }),
             react_1.default.createElement("script", { dangerouslySetInnerHTML: {
                     __html: `
           (function() {

package/dist/ssg/IndexPage.js

@@ -23,6 +23,7 @@ const IndexPage = props => {
     ]);
     const allCategories = Array.from(new Set([undefined].concat(props.ctx.site.files.map(f => f.category))));
     const faviconUrl = (0, resourceMap_1.getFaviconUrlFrom)(props.ctx.path);
+    const customStyleUrl = props.ctx.hasCustomStyle ? (0, resourceMap_1.getCustomStyleUrlFrom)(props.ctx.path) : null;
     return (react_1.default.createElement("html", null,
         react_1.default.createElement("head", null,
             react_1.default.createElement("meta", { charSet: "UTF-8" }),
@@ -33,6 +34,7 @@ const IndexPage = props => {
             react_1.default.createElement(Analytics_1.Analytics, { ctx: props.ctx }),
             react_1.default.createElement("script", { src: (0, resourceMap_1.getResourceUrlFrom)(props.ctx.path, 'tailwindcss.js') }),
             react_1.default.createElement("style", null, style_1.style),
+            customStyleUrl && react_1.default.createElement("link", { rel: "stylesheet", href: customStyleUrl }),
             react_1.default.createElement("script", { dangerouslySetInnerHTML: {
                     __html: `
           (function() {

package/dist/ssg/RootPage.js

@@ -21,6 +21,7 @@ const RootPage = props => {
         }
     }
     const faviconUrl = (0, resourceMap_1.getFaviconUrlFrom)(props.ctx.path);
+    const customStyleUrl = props.ctx.hasCustomStyle ? (0, resourceMap_1.getCustomStyleUrlFrom)(props.ctx.path) : null;
     return (react_1.default.createElement("html", { lang: "en" },
         react_1.default.createElement("head", null,
             react_1.default.createElement("meta", { charSet: "UTF-8" }),
@@ -28,6 +29,7 @@ const RootPage = props => {
             react_1.default.createElement("title", null, "CZON Multilingual Site Navigator"),
             react_1.default.createElement("link", { rel: "icon", href: faviconUrl, type: "image/x-icon" }),
             react_1.default.createElement("meta", { name: "description", content: "Select your preferred language to explore our content." }),
+            customStyleUrl && react_1.default.createElement("link", { rel: "stylesheet", href: customStyleUrl }),
             react_1.default.createElement(Analytics_1.Analytics, { ctx: props.ctx }),
             props.ctx.site.options.langs.map(lang => (react_1.default.createElement("link", { key: lang, 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` }),

package/dist/ssg/components/CZONHeader.js

@@ -7,10 +7,16 @@ exports.CZONHeader = void 0;
 const react_1 = __importDefault(require("react"));
 const DarkModeSwitch_1 = require("./DarkModeSwitch");
 const LanguageSwitch_1 = require("./LanguageSwitch");
+const NavLinks_1 = require("./NavLinks");
 const CZONHeader = props => {
+    const navLinks = props.ctx.site.options.site?.navLinks;
+    const hasNavLinks = navLinks && navLinks.length > 0;
     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" }, props.ctx.site.options.site?.title ?? 'CZON')),
+        react_1.default.createElement("div", { className: "flex items-center gap-4" },
+            hasNavLinks && react_1.default.createElement(NavLinks_1.NavLinksMobile, { navLinks: navLinks }),
+            react_1.default.createElement("h1", { className: "text-2xl font-bold" },
+                react_1.default.createElement("a", { href: "index.html" }, props.ctx.site.options.site?.title ?? 'CZON')),
+            hasNavLinks && react_1.default.createElement(NavLinks_1.NavLinksDesktop, { navLinks: navLinks })),
         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 }))));

package/dist/ssg/components/NavLinks.js

@@ -0,0 +1,282 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavLinksDesktop = exports.NavLinksMobile = void 0;
+const react_1 = __importDefault(require("react"));
+const mobileStyle = `
+/* Mobile hamburger menu styles */
+.nav-links-mobile {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .nav-links-mobile {
+    display: none;
+  }
+}
+
+.nav-links-mobile-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.nav-links-mobile-trigger:hover {
+  background: var(--ls-bg-hover);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Hamburger icon animation */
+.nav-links-hamburger {
+  width: 1.25rem;
+  height: 1.25rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+}
+
+.nav-links-hamburger span {
+  display: block;
+  width: 100%;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+  transition: all 0.3s ease;
+}
+
+#nav-links-toggle:checked ~ .nav-links-mobile-trigger .nav-links-hamburger span:nth-child(1) {
+  transform: translateY(6px) rotate(45deg);
+}
+
+#nav-links-toggle:checked ~ .nav-links-mobile-trigger .nav-links-hamburger span:nth-child(2) {
+  opacity: 0;
+}
+
+#nav-links-toggle:checked ~ .nav-links-mobile-trigger .nav-links-hamburger span:nth-child(3) {
+  transform: translateY(-6px) rotate(-45deg);
+}
+
+/* Mobile dropdown */
+.nav-links-dropdown {
+  position: fixed;
+  top: 4rem;
+  left: 0;
+  right: 0;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+}
+
+#nav-links-toggle:checked ~ .nav-links-dropdown {
+  max-height: 80vh;
+  opacity: 1;
+  overflow-y: auto;
+}
+
+.nav-links-dropdown-list {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem;
+}
+
+.nav-link-mobile-item {
+  display: block;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-decoration: none;
+  border-radius: 0.375rem;
+  transition: all 0.15s ease;
+}
+
+.nav-link-mobile-item:hover {
+  background: var(--ls-bg-hover);
+  color: var(--text-primary);
+}
+`;
+const desktopStyle = `
+/* Desktop nav styles */
+.nav-links-desktop {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .nav-links-desktop {
+    display: flex;
+    max-width: 40vw;
+    overflow: hidden;
+  }
+}
+
+.nav-links-desktop-list {
+  display: flex;
+  gap: 0.5rem;
+  overflow: hidden;
+}
+
+.nav-link-item {
+  white-space: nowrap;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.nav-link-item:hover {
+  background: var(--ls-bg-hover);
+  color: var(--text-primary);
+}
+
+/* Desktop overflow menu */
+.nav-links-more-container {
+  position: relative;
+}
+
+.nav-links-more-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.nav-links-more-trigger:hover {
+  background: var(--ls-bg-hover);
+  color: var(--text-primary);
+}
+
+.nav-links-more-icon {
+  width: 1rem;
+  height: 1rem;
+  transition: transform 0.2s ease;
+}
+
+#nav-links-more-toggle:checked ~ .nav-links-more-trigger .nav-links-more-icon {
+  transform: rotate(180deg);
+}
+
+.nav-links-more-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.25rem;
+  min-width: 12rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 50;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+}
+
+#nav-links-more-toggle:checked ~ .nav-links-more-dropdown {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.nav-links-more-list {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem;
+}
+
+.nav-link-more-item {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-decoration: none;
+  border-radius: 0.375rem;
+  transition: all 0.15s ease;
+}
+
+.nav-link-more-item:hover {
+  background: var(--ls-bg-hover);
+  color: var(--text-primary);
+}
+`;
+/**
+ * 移动端汉堡菜单导航组件
+ * 仅在移动端显示（< 768px）
+ */
+const NavLinksMobile = ({ navLinks }) => {
+    if (!navLinks || navLinks.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement("nav", { className: "nav-links-mobile", "aria-label": "Mobile navigation" },
+        react_1.default.createElement("style", null, mobileStyle),
+        react_1.default.createElement("input", { id: "nav-links-toggle", type: "checkbox", className: "hidden", "aria-hidden": "true" }),
+        react_1.default.createElement("label", { htmlFor: "nav-links-toggle", className: "nav-links-mobile-trigger", "aria-label": "Toggle navigation menu", "aria-haspopup": "true", "aria-expanded": "false" },
+            react_1.default.createElement("div", { className: "nav-links-hamburger" },
+                react_1.default.createElement("span", null),
+                react_1.default.createElement("span", null),
+                react_1.default.createElement("span", null))),
+        react_1.default.createElement("div", { className: "nav-links-dropdown", role: "menu", "aria-label": "Navigation links" },
+            react_1.default.createElement("div", { className: "nav-links-dropdown-list" }, navLinks.map((link, index) => (react_1.default.createElement("a", { key: index, href: link.href, className: "nav-link-mobile-item", role: "menuitem" }, link.title)))))));
+};
+exports.NavLinksMobile = NavLinksMobile;
+/**
+ * 计算在 40% 宽度内可以显示的链接数量
+ * 由于是 SSG，这里使用固定值，假设每个链接平均宽度约 100px
+ * 在 40vw 下大约可以显示 4-6 个链接
+ */
+const MAX_VISIBLE_LINKS = 5;
+/**
+ * 桌面端导航组件
+ * 仅在桌面端显示（>= 768px），最大宽度 40vw
+ */
+const NavLinksDesktop = ({ navLinks }) => {
+    if (!navLinks || navLinks.length === 0) {
+        return null;
+    }
+    const visibleLinks = navLinks.slice(0, MAX_VISIBLE_LINKS);
+    const overflowLinks = navLinks.slice(MAX_VISIBLE_LINKS);
+    const hasOverflow = overflowLinks.length > 0;
+    return (react_1.default.createElement("nav", { className: "nav-links-desktop", "aria-label": "Main navigation" },
+        react_1.default.createElement("style", null, desktopStyle),
+        react_1.default.createElement("div", { className: "nav-links-desktop-list" }, visibleLinks.map((link, index) => (react_1.default.createElement("a", { key: index, href: link.href, className: "nav-link-item" }, link.title)))),
+        hasOverflow && (react_1.default.createElement("div", { className: "nav-links-more-container" },
+            react_1.default.createElement("input", { id: "nav-links-more-toggle", type: "checkbox", className: "hidden", "aria-hidden": "true" }),
+            react_1.default.createElement("label", { htmlFor: "nav-links-more-toggle", className: "nav-links-more-trigger", "aria-label": "More navigation links", "aria-haspopup": "true", "aria-expanded": "false" },
+                react_1.default.createElement("span", null, "More"),
+                react_1.default.createElement("svg", { className: "nav-links-more-icon", 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", { className: "nav-links-more-dropdown", role: "menu", "aria-label": "Additional navigation links" },
+                react_1.default.createElement("div", { className: "nav-links-more-list" }, overflowLinks.map((link, index) => (react_1.default.createElement("a", { key: index, href: link.href, className: "nav-link-more-item", role: "menuitem" }, link.title)))))))));
+};
+exports.NavLinksDesktop = NavLinksDesktop;
+//# sourceMappingURL=NavLinks.js.map

package/dist/ssg/resourceMap.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFaviconUrlFrom = exports.getResourceUrlFrom = exports.EXTERNAL_RESOURCES = void 0;
+exports.getCustomStyleUrlFrom = exports.getFaviconUrlFrom = exports.getResourceUrlFrom = exports.EXTERNAL_RESOURCES = void 0;
 const path_1 = require("path");
 exports.EXTERNAL_RESOURCES = [
     {
@@ -28,4 +28,12 @@ const getFaviconUrlFrom = (path) => {
     return (0, path_1.relative)((0, path_1.dirname)(path), '/favicon.ico');
 };
 exports.getFaviconUrlFrom = getFaviconUrlFrom;
+/**
+ * 获取自定义样式的相对引用 URL
+ * @param path - 当前文件路径 (e.g. `/en-US/index.html`)
+ */
+const getCustomStyleUrlFrom = (path) => {
+    return (0, path_1.relative)((0, path_1.dirname)(path), '/style.css');
+};
+exports.getCustomStyleUrlFrom = getCustomStyleUrlFrom;
 //# sourceMappingURL=resourceMap.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "czon",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "description": "CZON - AI enhanced Markdown content engine",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",