czon 0.3.7 → 0.3.9

package/dist/ssg/ContentPage.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentPage = void 0;
+const node_path_1 = require("node:path");
 const react_1 = __importDefault(require("react"));
 const ContentMeta_1 = require("./components/ContentMeta");
 const CZONFooter_1 = require("./components/CZONFooter");
@@ -20,6 +21,9 @@ const ContentPage = props => {
     const tags = frontmatter.tags || [];
     const category = props.file.category;
     const relatedContents = props.ctx.site.files.filter(f => f.category === category && f.hash !== props.file.hash);
+    // 查找指向当前文章的其他文章
+    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));
     return (react_1.default.createElement("html", { lang: props.lang, style: { background: 'black', overflow: 'hidden' } },
         react_1.default.createElement("head", null,
             react_1.default.createElement("meta", { charSet: "UTF-8" }),
@@ -40,6 +44,13 @@ const ContentPage = props => {
                                 const theContent = props.ctx.contents.find(c => c.lang === props.lang && c.hash === f.hash);
                                 return (react_1.default.createElement("li", { key: f.hash },
                                     react_1.default.createElement("a", { href: `${f.metadata?.slug}.html` }, theContent?.frontmatter.title)));
+                            })))),
+                        referencedFiles.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("h2", null, "Referenced By"),
+                            react_1.default.createElement("ul", null, referencedFiles.map(f => {
+                                const theContent = props.ctx.contents.find(c => c.lang === props.lang && c.hash === f.hash);
+                                return (react_1.default.createElement("li", { key: f.hash },
+                                    react_1.default.createElement("a", { href: `${f.metadata?.slug}.html` }, theContent?.frontmatter.title)));
                             }))))),
                     react_1.default.createElement("footer", { className: "footer" },
                         react_1.default.createElement(LanguageSwitcher_1.LanguageSwitcher, { ctx: props.ctx, lang: props.lang, file: props.file }),

package/dist/ssg/components/LanguageSwitch.js

@@ -7,6 +7,63 @@ exports.LanguageSwitch = void 0;
 const node_path_1 = require("node:path");
 const react_1 = __importDefault(require("react"));
 const languages_1 = require("../../languages");
+const style = `
+/* 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-icon {
+  transition: transform 0.2s ease;
+}
+
+.language-switch-dropdown {
+  max-width: 80vw;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition:
+    opacity 0.2s ease,
+    visibility 0.2s ease,
+    transform 0.2s ease;
+}
+#language-switch-toggle:checked ~ .language-switch-dropdown {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+#language-switch-toggle:checked ~ .language-switch-trigger .language-switch-icon {
+  transform: rotate(180deg);
+}
+
+.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;
+}
+`;
 const LanguageSwitch = props => {
     // 获取当前语言名称
     const currentLangName = languages_1.LANGUAGE_NAMES[props.lang] || props.lang;
@@ -18,13 +75,15 @@ const LanguageSwitch = props => {
         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("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("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 => {
+                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: `

package/dist/ssg/style.js

@@ -301,140 +301,6 @@ exports.style = `
         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;
 }
@@ -445,5 +311,5 @@ exports.style = `
   flex: 0 0 100%;
   min-width: 0;
 }
-        `;
+`;
 //# sourceMappingURL=style.js.map

package/package.json

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