czon 0.3.4 → 0.3.6

package/dist/ssg/ContentPage.js

@@ -29,7 +29,7 @@ const ContentPage = props => {
             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("body", null,
-            react_1.default.createElement(PageLayout_1.PageLayout, { header: react_1.default.createElement(CZONHeader_1.CZONHeader, { ctx: props.ctx }), navigator: react_1.default.createElement("nav", { className: "sidebar" },
+            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" },
                     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(ContentMeta_1.ContentMeta, { ctx: props.ctx, file: props.file, lang: props.lang }),
                     react_1.default.createElement("div", { className: "content-body" },
@@ -106,7 +106,44 @@ const ContentPage = props => {
           }, 300);
         }
         
-        `))));
+        `),
+            react_1.default.createElement("script", { id: "embla-lib", src: "https://unpkg.com/embla-carousel/embla-carousel.umd.js", defer: true }),
+            react_1.default.createElement("script", { id: "embla-autoplay-lib", src: "https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js", defer: true }),
+            react_1.default.createElement("script", null, `
+          Promise.all([
+            new Promise(resolve => {document.getElementById('embla-lib').addEventListener('load', resolve)}),
+            new Promise(resolve => {document.getElementById('embla-autoplay-lib').addEventListener('load', resolve)}),
+          ]).then(() => {
+            console.log('Embla Carousel and Autoplay loaded');
+            renderEmblaCarousels();
+          });
+
+          function renderEmblaCarousels() {
+            // Detect image groups, make them carousels automatically
+            Map.groupBy(document.querySelectorAll('img'), x => x.parentNode).entries().forEach(([container, images]) => {
+                const outer = document.createElement('div');
+                outer.classList.add('embla');
+                container.appendChild(outer);
+                
+                const inner = document.createElement('div');
+                inner.classList.add('embla__container');
+                outer.appendChild(inner);
+
+                images.forEach(img => {
+                    container.removeChild(img);
+
+                    const slide = document.createElement('div');
+                    slide.classList.add('embla__slide');
+                    
+                    slide.appendChild(img);
+                    inner.appendChild(slide);
+                });
+
+                EmblaCarousel(outer, { loop: true }, [EmblaCarouselAutoplay()]);
+            });
+
+          }
+            `))));
 };
 exports.ContentPage = ContentPage;
 //# sourceMappingURL=ContentPage.js.map

package/dist/ssg/IndexPage.js

@@ -30,7 +30,7 @@ const IndexPage = props => {
             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("body", null,
-            react_1.default.createElement(PageLayout_1.PageLayout, { header: react_1.default.createElement(CZONHeader_1.CZONHeader, { ctx: props.ctx }), navigator: undefined, main: react_1.default.createElement("div", { className: "p-6 max-w-3xl mx-auto" },
+            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,
                         react_1.default.createElement("span", { className: "font-bold" }),
                         react_1.default.createElement("div", { className: "mb-6 gap-6 flex flex-wrap" }, allCategories.map(category => {

package/dist/ssg/components/CZONHeader.js

@@ -5,10 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CZONHeader = void 0;
 const react_1 = __importDefault(require("react"));
+const LanguageSwitch_1 = require("./LanguageSwitch");
 const CZONHeader = props => {
-    return (react_1.default.createElement("header", { className: "czon-header py-4 border-b" },
-        react_1.default.createElement("h1", { className: "text-2xl font-bold px-6" },
-            react_1.default.createElement("a", { href: "index.html" }, "CZON"))));
+    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 }))));
 };
 exports.CZONHeader = CZONHeader;
 //# sourceMappingURL=CZONHeader.js.map

package/dist/ssg/components/LanguageSwitch.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LanguageSwitch = void 0;
+const node_path_1 = require("node:path");
+const react_1 = __importDefault(require("react"));
+const languages_1 = require("../../languages");
+const LanguageSwitch = props => {
+    // 获取当前语言名称
+    const currentLangName = languages_1.LANGUAGE_NAMES[props.lang] || props.lang;
+    // 获取所有支持的语言
+    const languages = props.ctx.site.options.langs || [];
+    // 生成语言链接（纯静态，无状态）
+    const getLanguageLink = (lang) => {
+        const target = props.file ? `${props.file.metadata.slug}.html` : 'index.html';
+        return (0, node_path_1.join)('..', lang, target);
+    };
+    return (react_1.default.createElement("div", { className: "language-switch-container relative inline-block" },
+        react_1.default.createElement("button", { type: "button", 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("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", { className: "p-4" },
+                react_1.default.createElement("div", { className: "language-switch-grid grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 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'}
+                    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" },
+                        languages.length,
+                        " languages available"))))));
+};
+exports.LanguageSwitch = LanguageSwitch;
+//# sourceMappingURL=LanguageSwitch.js.map

package/dist/ssg/style.js

@@ -300,5 +300,150 @@ exports.style = `
         display: block;
         margin: 0 auto;
       }
+
+      /* LanguageSwitch dropdown styles - Pure CSS version */
+      .language-switch-container {
+        position: relative;
+        display: inline-block;
+      }
+
+      .language-switch-trigger {
+        transition: all 0.2s ease;
+      }
+
+      .language-switch-trigger:hover {
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      .language-switch-trigger:focus {
+        outline: 2px solid #3b82f6;
+        outline-offset: 2px;
+      }
+
+      .language-switch-icon {
+        transition: transform 0.2s ease;
+      }
+
+      .language-switch-option {
+        transition: all 0.15s ease;
+      }
+
+      .language-switch-option:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      .language-switch-option:focus {
+        outline: 2px solid #3b82f6;
+        outline-offset: 2px;
+      }
+
+      /* Pure CSS dropdown using :focus-within */
+      .language-switch-dropdown {
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-10px);
+        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+      }
+
+      .language-switch-container:focus-within .language-switch-dropdown {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+
+      .language-switch-container:focus-within .language-switch-icon {
+        transform: rotate(180deg);
+      }
+
+      /* Ensure dropdown stays visible when focusing inside it */
+      .language-switch-dropdown:focus-within {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+
+      .language-switch-dropdown {
+        max-width: 80vw;
+        inset-inline-start: auto;
+        inset-inline-end: 0;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+      }
+
+
+      /* Mobile responsiveness for language dropdown */
+      @media (max-width: 768px) {
+        .language-switch-trigger {
+          padding: 0.5rem 0.75rem;
+          font-size: 0.875rem;
+        }
+
+
+        .language-switch-option {
+          padding: 0.5rem 0.75rem;
+          font-size: 0.8125rem;
+        }
+
+        .language-switch-grid {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+
+      @media (max-width: 480px) {
+        .language-switch-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      /* Scrollbar styling for dropdown */
+      .language-switch-dropdown::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      .language-switch-dropdown::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 4px;
+      }
+
+      .language-switch-dropdown::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 4px;
+      }
+
+      .language-switch-dropdown::-webkit-scrollbar-thumb:hover {
+        background: #a8a8a8;
+      }
+
+      /* Browser compatibility fallback for :focus-within */
+      @supports not selector(:focus-within) {
+        .language-switch-dropdown {
+          display: none;
+        }
+
+        .language-switch-container:hover .language-switch-dropdown,
+        .language-switch-container:focus .language-switch-dropdown {
+          display: block;
+          opacity: 1;
+          visibility: visible;
+          transform: translateY(0);
+        }
+
+        .language-switch-container:hover .language-switch-icon,
+        .language-switch-container:focus .language-switch-icon {
+          transform: rotate(180deg);
+        }
+      }
+
+.embla {
+  overflow: hidden;
+}
+.embla__container {
+  display: flex;
+}
+.embla__slide {
+  flex: 0 0 100%;
+  min-width: 0;
+}
         `;
 //# sourceMappingURL=style.js.map

package/package.json

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