czon 0.9.5 → 0.9.7

package/dist/ssg/ContentPage.js

@@ -59,15 +59,15 @@ 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 border-r" },
-                    react_1.default.createElement(Navigator_1.Navigator, { ctx: props.ctx, file: props.file, lang: props.lang })), rightSidebar: react_1.default.createElement("aside", { className: "sidebar border-l" },
+                    react_1.default.createElement(Navigator_1.Navigator, { ctx: props.ctx, file: props.file, lang: props.lang })), rightSidebar: props.content.headings.length > 0 ? (react_1.default.createElement("aside", { className: "sidebar border-l" },
                     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 ms-${(heading.depth - 1) * 4} mb-2 border-b`, dangerouslySetInnerHTML: { __html: heading.html } })))), main: react_1.default.createElement("main", { className: "content max-w-4xl mx-auto my-8 px-4" },
+                    props.content.headings.map(heading => (react_1.default.createElement("a", { key: heading.id, href: `#${heading.id}`, className: `block ms-${(heading.depth - 1) * 4} mb-2 border-b`, dangerouslySetInnerHTML: { __html: heading.html } }))))) : undefined, 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 xl:hidden" },
+                    props.content.headings.length > 0 && (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 设置缩进
-                            className: `block ps-${heading.depth * 4} mb-2`, dangerouslySetInnerHTML: { __html: heading.html } })))),
+                            className: `block ps-${heading.depth * 4} mb-2`, dangerouslySetInnerHTML: { __html: heading.html } }))))),
                     react_1.default.createElement("div", { className: "content-body" },
                         react_1.default.createElement("article", { dangerouslySetInnerHTML: { __html: props.content.body } }),
                         relatedContents.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -87,6 +87,231 @@ 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))) }),
+            react_1.default.createElement("button", { className: "share-float-btn", id: "share-float-btn" }, "Share"),
+            react_1.default.createElement("div", { className: "share-modal-overlay", id: "share-modal-overlay" },
+                react_1.default.createElement("div", { className: "share-modal" },
+                    react_1.default.createElement("canvas", { id: "share-canvas" }),
+                    react_1.default.createElement("div", { className: "share-modal-actions" },
+                        react_1.default.createElement("button", { className: "share-download-btn", id: "share-download-btn" }, "Save Image"),
+                        react_1.default.createElement("button", { className: "share-close-btn", id: "share-close-btn" }, "Close")))),
+            react_1.default.createElement("script", { id: "qrcode-lib", src: "https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js", defer: true }),
+            react_1.default.createElement("script", { dangerouslySetInnerHTML: {
+                    __html: `
+(function() {
+  var floatBtn = document.getElementById('share-float-btn');
+  var overlay = document.getElementById('share-modal-overlay');
+  var canvas = document.getElementById('share-canvas');
+  var downloadBtn = document.getElementById('share-download-btn');
+  var closeBtn = document.getElementById('share-close-btn');
+  var selectedText = '';
+  var articleTitle = ${JSON.stringify(title)};
+  var siteName = ${JSON.stringify(props.ctx.site.options?.site?.title || 'CZON')};
+
+  // Detect text selection within .content-body
+  document.addEventListener('selectionchange', function() {
+    var sel = window.getSelection();
+    if (!sel || sel.isCollapsed || !sel.rangeCount) {
+      floatBtn.style.display = 'none';
+      return;
+    }
+    var range = sel.getRangeAt(0);
+    var container = document.querySelector('.content-body');
+    if (!container || !container.contains(range.commonAncestorContainer)) {
+      floatBtn.style.display = 'none';
+      return;
+    }
+    var text = sel.toString().trim();
+    if (!text) {
+      floatBtn.style.display = 'none';
+      return;
+    }
+    selectedText = text;
+    var rect = range.getBoundingClientRect();
+    floatBtn.style.display = 'block';
+    floatBtn.style.top = (window.scrollY + rect.top - 36) + 'px';
+    floatBtn.style.left = (window.scrollX + rect.left + rect.width / 2 - 30) + 'px';
+  });
+
+  // Hide float button on click elsewhere
+  document.addEventListener('mousedown', function(e) {
+    if (e.target === floatBtn) return;
+    // Let selectionchange handle hiding
+  });
+
+  floatBtn.addEventListener('click', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!selectedText) return;
+    renderShareCard(selectedText);
+    overlay.classList.add('active');
+    floatBtn.style.display = 'none';
+  });
+
+  closeBtn.addEventListener('click', function() {
+    overlay.classList.remove('active');
+  });
+  overlay.addEventListener('click', function(e) {
+    if (e.target === overlay) overlay.classList.remove('active');
+  });
+
+  downloadBtn.addEventListener('click', function() {
+    canvas.toBlob(function(blob) {
+      var url = URL.createObjectURL(blob);
+      var a = document.createElement('a');
+      a.href = url;
+      a.download = 'share.png';
+      a.click();
+      URL.revokeObjectURL(url);
+    }, 'image/png');
+  });
+
+  function wrapText(ctx, text, maxWidth, lineHeight) {
+    var lines = [];
+    var paragraphs = text.split('\\n');
+    for (var p = 0; p < paragraphs.length; p++) {
+      var words = paragraphs[p];
+      var line = '';
+      for (var i = 0; i < words.length; i++) {
+        var testLine = line + words[i];
+        var metrics = ctx.measureText(testLine);
+        if (metrics.width > maxWidth && line.length > 0) {
+          lines.push(line);
+          line = words[i];
+        } else {
+          line = testLine;
+        }
+      }
+      if (line) lines.push(line);
+      if (p < paragraphs.length - 1) lines.push('');
+    }
+    return lines;
+  }
+
+  function renderShareCard(text) {
+    var dpr = window.devicePixelRatio || 1;
+    var W = 800;
+    var pad = 48;
+    var contentW = W - pad * 2;
+    var ctx = canvas.getContext('2d');
+
+    // Pre-calculate heights
+    ctx.font = 'bold 28px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+    var titleLines = wrapText(ctx, articleTitle, contentW, 36);
+    var titleH = titleLines.length * 36;
+
+    ctx.font = '20px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+    var maxTextLen = 300;
+    var displayText = text.length > maxTextLen ? text.slice(0, maxTextLen) + '...' : text;
+    var textLines = wrapText(ctx, displayText, contentW - 32, 30);
+    var textH = textLines.length * 30;
+
+    var qrSize = 120;
+    var siteNameH = 40;
+    var separatorGap = 24;
+    var quoteTopPad = 24;
+    var quoteBottomPad = 24;
+    var qrTopPad = 32;
+    var qrBottomPad = 16;
+    var bottomPad = 32;
+
+    var H = pad + siteNameH + titleH + separatorGap * 2 + quoteTopPad + textH + quoteBottomPad + qrTopPad + qrSize + qrBottomPad + 20 + bottomPad;
+
+    canvas.width = W * dpr;
+    canvas.height = H * dpr;
+    canvas.style.width = W + 'px';
+    canvas.style.height = H + 'px';
+    ctx.scale(dpr, dpr);
+
+    // Background
+    ctx.fillStyle = '#ffffff';
+    ctx.beginPath();
+    ctx.roundRect(0, 0, W, H, 12);
+    ctx.fill();
+
+    var y = pad;
+
+    // Site name
+    ctx.fillStyle = '#999999';
+    ctx.font = '16px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+    ctx.fillText(siteName, pad, y + 16);
+    y += siteNameH;
+
+    // Title
+    ctx.fillStyle = '#1a1a1a';
+    ctx.font = 'bold 28px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+    for (var i = 0; i < titleLines.length; i++) {
+      ctx.fillText(titleLines[i], pad, y + 28);
+      y += 36;
+    }
+    y += separatorGap;
+
+    // Separator
+    ctx.strokeStyle = '#e5e5e5';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(pad, y);
+    ctx.lineTo(W - pad, y);
+    ctx.stroke();
+    y += separatorGap;
+
+    // Quote block background
+    var quoteBlockY = y;
+    var quoteBlockH = quoteTopPad + textH + quoteBottomPad;
+    ctx.fillStyle = '#f8f9fa';
+    ctx.beginPath();
+    ctx.roundRect(pad, quoteBlockY, contentW, quoteBlockH, 8);
+    ctx.fill();
+
+    // Quote accent bar
+    ctx.fillStyle = '#007bff';
+    ctx.beginPath();
+    ctx.roundRect(pad, quoteBlockY, 4, quoteBlockH, 2);
+    ctx.fill();
+
+    // Quote text
+    y += quoteTopPad;
+    ctx.fillStyle = '#333333';
+    ctx.font = '20px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+    for (var i = 0; i < textLines.length; i++) {
+      if (textLines[i] !== '') {
+        ctx.fillText(textLines[i], pad + 16, y + 20);
+      }
+      y += 30;
+    }
+    y += quoteBottomPad + qrTopPad;
+
+    // QR code
+    if (typeof qrcode !== 'undefined') {
+      var qr = qrcode(0, 'M');
+      qr.addData(window.location.href);
+      qr.make();
+      var moduleCount = qr.getModuleCount();
+      var cellSize = qrSize / moduleCount;
+      var qrX = W - pad - qrSize;
+      var qrY = y;
+
+      // White background for QR
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(qrX - 4, qrY - 4, qrSize + 8, qrSize + 8);
+
+      ctx.fillStyle = '#1a1a1a';
+      for (var r = 0; r < moduleCount; r++) {
+        for (var c = 0; c < moduleCount; c++) {
+          if (qr.isDark(r, c)) {
+            ctx.fillRect(qrX + c * cellSize, qrY + r * cellSize, cellSize + 0.5, cellSize + 0.5);
+          }
+        }
+      }
+
+      // Hint text next to QR
+      ctx.fillStyle = '#999999';
+      ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+      ctx.fillText('Scan to read the original', pad, y + qrSize / 2 + 5);
+    }
+  }
+})();
+`,
+                } }),
             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', () => {
@@ -159,6 +384,18 @@ const ContentPage = props => {
           }, 300);
         }
         
+        `),
+            react_1.default.createElement("script", null, `
+        // 页面加载后将当前激活的导航链接滚动到可视区域
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', scrollActiveNavLink);
+        } else {
+          scrollActiveNavLink();
+        }
+        function scrollActiveNavLink() {
+          var el = document.querySelector('.nav-link.active');
+          if (el) el.scrollIntoView({ block: 'center', behavior: 'instant' });
+        }
         `),
             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 }),

package/dist/ssg/style.js

@@ -378,5 +378,76 @@ html:not(.dark) body {
   flex: 0 0 100%;
   min-width: 0;
 }
+
+/* Share feature */
+.share-float-btn {
+  display: none;
+  position: absolute;
+  z-index: 1000;
+  background: var(--primary-color);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 4px 12px;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  white-space: nowrap;
+  line-height: 1.6;
+}
+.share-float-btn:hover {
+  opacity: 0.9;
+}
+
+.share-modal-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  background: rgba(0,0,0,0.5);
+  justify-content: center;
+  align-items: center;
+}
+.share-modal-overlay.active {
+  display: flex;
+}
+.share-modal {
+  background: var(--bg-primary);
+  border-radius: 12px;
+  padding: 20px;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: auto;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+.share-modal canvas {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+}
+.share-modal-actions {
+  display: flex;
+  gap: 12px;
+}
+.share-modal-actions button {
+  padding: 8px 24px;
+  border-radius: 6px;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+}
+.share-modal-actions .share-download-btn {
+  background: var(--primary-color);
+  color: #fff;
+}
+.share-modal-actions .share-close-btn {
+  background: var(--tag-bg);
+  color: var(--tag-text);
+}
 `;
 //# sourceMappingURL=style.js.map

package/package.json

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