czon 0.6.3 → 0.6.5

package/dist/ssg/ContentPage.js

@@ -49,9 +49,11 @@ const ContentPage = props => {
                 } })),
         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" },
+                    react_1.default.createElement(Navigator_1.Navigator, { ctx: props.ctx, file: props.file, lang: props.lang })), rightSidebar: react_1.default.createElement("aside", null,
+                    react_1.default.createElement("h2", { className: "text-2xl font-semibold mb-2" }, "Table of Contents"),
+                    props.content.headings.map(heading => (react_1.default.createElement("a", { key: heading.id, href: `#${heading.id}`, className: `block ps-${heading.depth * 4} mb-2` }, heading.text)))), main: react_1.default.createElement("main", { className: "content max-w-4xl mx-auto my-8 px-4" },
                     react_1.default.createElement(ContentMeta_1.ContentMeta, { ctx: props.ctx, file: props.file, lang: props.lang }),
-                    react_1.default.createElement("div", { className: "border-b mb-4 pb-2" },
+                    react_1.default.createElement("div", { className: "border-b mb-4 pb-2 xl:hidden" },
                         react_1.default.createElement("h2", { className: "text-2xl font-semibold mb-2" }, "Table of Contents"),
                         props.content.headings.map(heading => (react_1.default.createElement("a", { key: heading.id, href: `#${heading.id}`, 
                             // 按照 heading.depth 设置缩进
@@ -74,7 +76,7 @@ const ContentPage = props => {
                             }))))),
                     react_1.default.createElement("footer", { className: "footer" },
                         react_1.default.createElement(LanguageSwitcher_1.LanguageSwitcher, { ctx: props.ctx, lang: props.lang, file: props.file }),
-                        react_1.default.createElement(CZONFooter_1.CZONFooter, null))), footer: null }),
+                        react_1.default.createElement(CZONFooter_1.CZONFooter, null))) }),
             react_1.default.createElement("script", { id: "hljs-lib", src: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js", defer: true }),
             react_1.default.createElement("script", null, `
         document.getElementById('hljs-lib').addEventListener('load', () => {

package/dist/ssg/IndexPage.js

@@ -70,7 +70,7 @@ const IndexPage = props => {
                     })),
                     react_1.default.createElement("footer", null,
                         react_1.default.createElement(LanguageSwitcher_1.LanguageSwitcher, { ctx: props.ctx, lang: props.lang }),
-                        react_1.default.createElement(CZONFooter_1.CZONFooter, null))), footer: null }))));
+                        react_1.default.createElement(CZONFooter_1.CZONFooter, null))) }))));
     // TODO: 渲染多语言首页列表
     // return (
     //   <div>

package/dist/ssg/layouts/PageLayout.js

@@ -6,14 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayout = void 0;
 const react_1 = __importDefault(require("react"));
 const PageLayout = props => {
+    const hasRightSidebar = !!props.rightSidebar;
     return (
     // 100% 宽度，100% 高度，垂直方向排列
     react_1.default.createElement("div", { className: "flex flex-col w-full h-full overflow-hidden items-stretch" },
-        react_1.default.createElement("header", { className: "shrink-0" }, props.header),
-        react_1.default.createElement("div", { className: "flex flex-col overflow-auto md:flex-row flex-1 md:overflow-hidden md:items-stretch" },
-            react_1.default.createElement("nav", { className: "md:overflow-auto md:shrink-0" }, props.navigator),
-            react_1.default.createElement("main", { className: "md:flex-1 md:overflow-auto" }, props.main)),
-        react_1.default.createElement("footer", { className: "shrink-0" }, props.footer)));
+        react_1.default.createElement("header", { className: "fixed h-18 top-0 left-0 right-0 z-10 shrink-0" }, props.header),
+        react_1.default.createElement("div", { className: "flex mt-18 flex-col overflow-auto md:flex-row flex-1 md:overflow-hidden md:items-stretch" },
+            props.navigator && (react_1.default.createElement("nav", { className: "fixed left-0 top-18 bottom-0 w-88 z-9 hidden lg:block overflow-auto shrink-0" }, props.navigator)),
+            react_1.default.createElement("main", { className: `w-full lg:pl-88 xl:pr-88 overflow-auto` }, props.main),
+            hasRightSidebar && (react_1.default.createElement("aside", { className: "fixed right-0 top-18 bottom-0 w-88 hidden xl:block overflow-auto shrink-0 sidebar-right" }, props.rightSidebar)))));
 };
 exports.PageLayout = PageLayout;
 //# sourceMappingURL=PageLayout.js.map

package/dist/ssg/style.js

@@ -55,16 +55,23 @@ html:not(.dark) body {
   color: var(--text-primary);
   background: var(--bg-secondary);
 }
+.czon-header {
+  background: var(--bg-secondary);
+}
+.anchor-heading {
+  scroll-margin-top: 72px;
+}
 
-      .sidebar {
-        width: 280px;
-        background: var(--sidebar-bg);
-        border-right: 1px solid var(--border-color);
-        padding: 2rem 1rem;
-        overflow-y: auto;
+       .sidebar {
+         background: var(--sidebar-bg);
+         border-right: 1px solid var(--border-color);
+         padding: 2rem 1rem;
+       }
 
-        flex-shrink: 0;
-      }
+       .sidebar-right {
+         background: var(--sidebar-bg);
+         padding: 2rem 1rem;
+       }
 
       .sidebar-header {
         margin-bottom: 2rem;
@@ -121,13 +128,6 @@ html:not(.dark) body {
         color: var(--text-primary);
       }
 
-      .content {
-        flex: 1;
-        margin-inline-start: 80px;
-        padding: 3rem 4rem;
-        max-width: 900px;
-      }
-
       .content-header {
         margin-bottom: 2rem;
         padding-bottom: 1rem;
@@ -169,6 +169,24 @@ html:not(.dark) body {
         color: var(--text-primary);
       }
 
+      .content-body h4 {
+        font-size: 1.25rem;
+        margin: 1.25rem 0 0.625rem;
+        color: var(--text-primary);
+      }
+      
+      .content-body h5 {
+        font-size: 1.125rem;
+        margin: 1.125rem 0 0.5625rem;
+        color: var(--text-primary);
+      }
+
+      .content-body h6 {
+        font-size: 1rem;
+        margin: 1rem 0 0.5rem;
+        color: var(--text-primary);
+      }
+
       .content-body p {
         margin: 1rem 0;
       }
@@ -284,21 +302,22 @@ html:not(.dark) body {
         font-size: 0.875rem;
       }
 
-      @media (max-width: 768px) {
+       @media (max-width: 768px) {
 
-        .sidebar {
-          width: 100%;
-          height: auto;
-          position: static;
-          border-right: none;
-          border-bottom: 1px solid var(--border-color);
-        }
+         .sidebar {
+           width: 100%;
+           height: auto;
+           position: static;
+           border-right: none;
+           border-bottom: 1px solid var(--border-color);
+         }
 
-        .content {
-          margin-left: 0;
-          padding: 2rem;
-        }
-      }
+         .content {
+           margin-left: 0;
+           padding: 1.5rem;
+           max-width: 100%;
+         }
+       }
       
       /* Mermaid diagram styles */
       .mermaid-diagram {

package/dist/utils/convertMarkdownToHtml.js

@@ -105,7 +105,7 @@ const convertMarkdownToHtml = (article, path, lang, mdContent) => {
             depth: heading.depth,
         });
         // TODO: 处理重复的标题文本以避免重复的 id
-        return `<h${heading.depth} id="${id}">${heading.text}</h${heading.depth}>`;
+        return `<h${heading.depth} id="${id}" class="anchor-heading">${heading.text}</h${heading.depth}>`;
     };
     // 重写代码块渲染器以支持 Mermaid - 使用 any 类型绕过类型检查
     renderer.code = function (code, language, isEscaped) {

package/package.json

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