czon 0.9.7 → 0.9.8

package/dist/ssg/ContentPage.js

@@ -90,20 +90,36 @@ const ContentPage = props => {
             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("img", { className: "share-preview", id: "share-preview", alt: "Share preview", src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" }),
                     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("div", { className: "share-card", id: "share-card" },
+                react_1.default.createElement("div", { className: "share-card-header" },
+                    react_1.default.createElement("div", { className: "share-card-header-left" },
+                        react_1.default.createElement("div", { className: "share-card-site", id: "share-card-site" }),
+                        react_1.default.createElement("div", { className: "share-card-title", id: "share-card-title" })),
+                    react_1.default.createElement("div", { className: "share-card-qr" },
+                        react_1.default.createElement("canvas", { id: "share-qr-canvas", width: "64", height: "64" }),
+                        react_1.default.createElement("span", { className: "share-card-qr-hint" }, "Scan to read"))),
+                react_1.default.createElement("div", { className: "share-card-divider" }),
+                react_1.default.createElement("div", { className: "share-card-body", id: "share-card-body" })),
             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", { id: "html2canvas-lib", src: "https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.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 preview = document.getElementById('share-preview');
   var downloadBtn = document.getElementById('share-download-btn');
   var closeBtn = document.getElementById('share-close-btn');
-  var selectedText = '';
+  var shareCard = document.getElementById('share-card');
+  var cardSite = document.getElementById('share-card-site');
+  var cardTitle = document.getElementById('share-card-title');
+  var cardBody = document.getElementById('share-card-body');
+  var qrCanvas = document.getElementById('share-qr-canvas');
+  var savedRange = null;
   var articleTitle = ${JSON.stringify(title)};
   var siteName = ${JSON.stringify(props.ctx.site.options?.site?.title || 'CZON')};
 
@@ -125,25 +141,18 @@ const ContentPage = props => {
       floatBtn.style.display = 'none';
       return;
     }
-    selectedText = text;
+    savedRange = range.cloneRange();
     var rect = range.getBoundingClientRect();
     floatBtn.style.display = 'block';
-    floatBtn.style.top = (window.scrollY + rect.top - 36) + 'px';
+    floatBtn.style.top = (window.scrollY + rect.bottom + 6) + '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');
+    if (!savedRange) return;
+    renderShareCard(savedRange);
     floatBtn.style.display = 'none';
   });
 
@@ -155,159 +164,82 @@ const ContentPage = props => {
   });
 
   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');
+    var a = document.createElement('a');
+    a.href = preview.src;
+    a.download = 'share.png';
+    a.click();
   });
 
-  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;
+  function renderQR() {
+    if (typeof qrcode === 'undefined') return;
+    var size = 64;
+    var qr = qrcode(0, 'M');
+    qr.addData(window.location.href);
+    qr.make();
+    var moduleCount = qr.getModuleCount();
+    var cellSize = size / moduleCount;
+    var ctx = qrCanvas.getContext('2d');
+    ctx.clearRect(0, 0, size, size);
+    ctx.fillStyle = '#1a1a1a';
+    for (var r = 0; r < moduleCount; r++) {
+      for (var c = 0; c < moduleCount; c++) {
+        if (qr.isDark(r, c)) {
+          ctx.fillRect(c * cellSize, r * cellSize, cellSize + 0.5, cellSize + 0.5);
         }
       }
-      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;
+  function renderShareCard(range) {
+    // Populate card content
+    cardSite.textContent = siteName;
+    cardTitle.textContent = articleTitle;
 
-    var qrSize = 120;
-    var siteNameH = 40;
-    var separatorGap = 24;
-    var quoteTopPad = 24;
-    var quoteBottomPad = 24;
-    var qrTopPad = 32;
-    var qrBottomPad = 16;
-    var bottomPad = 32;
+    // Clone selected DOM fragment with rich formatting
+    var fragment = range.cloneContents();
+    cardBody.innerHTML = '';
+    cardBody.appendChild(fragment);
 
-    var H = pad + siteNameH + titleH + separatorGap * 2 + quoteTopPad + textH + quoteBottomPad + qrTopPad + qrSize + qrBottomPad + 20 + bottomPad;
+    // Copy computed styles for elements that need them (e.g. KaTeX)
+    var allStyles = document.querySelectorAll('style, link[rel="stylesheet"]');
+    var styleClones = [];
+    allStyles.forEach(function(s) {
+      styleClones.push(s.cloneNode(true));
+    });
 
-    canvas.width = W * dpr;
-    canvas.height = H * dpr;
-    canvas.style.width = W + 'px';
-    canvas.style.height = H + 'px';
-    ctx.scale(dpr, dpr);
+    // Render QR code
+    renderQR();
 
-    // 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;
+    // Show card for html2canvas to capture
+    shareCard.classList.add('rendering');
 
-    // 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);
+    // Wait a frame for layout
+    requestAnimationFrame(function() {
+      // Enforce minimum 3:4 aspect ratio
+      var cardW = shareCard.offsetWidth;
+      var cardH = shareCard.offsetHeight;
+      var minH = Math.round(cardW * 4 / 3);
+      if (cardH < minH) {
+        shareCard.style.minHeight = minH + 'px';
       }
-      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);
+      html2canvas(shareCard, {
+        scale: 2,
+        useCORS: true,
+        backgroundColor: '#ffffff',
+        logging: false,
+      }).then(function(canvas) {
+        shareCard.classList.remove('rendering');
+        shareCard.style.minHeight = '';
 
-      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);
-    }
+        preview.src = canvas.toDataURL('image/png');
+        overlay.classList.add('active');
+      }).catch(function(err) {
+        console.error('Share card render error:', err);
+        shareCard.classList.remove('rendering');
+        shareCard.style.minHeight = '';
+      });
+    });
   }
 })();
 `,
@@ -410,7 +342,7 @@ const ContentPage = props => {
 
           function renderEmblaCarousels() {
             // Detect image groups, make them carousels automatically
-            Map.groupBy(document.querySelectorAll('img'), x => x.parentNode).entries().forEach(([container, images]) => {
+            Map.groupBy(document.querySelectorAll('.content-body img'), x => x.parentNode).entries().forEach(([container, images]) => {
                 const outer = document.createElement('div');
                 outer.classList.add('embla');
                 container.appendChild(outer);

package/dist/ssg/style.js

@@ -424,7 +424,7 @@ html:not(.dark) body {
   align-items: center;
   gap: 16px;
 }
-.share-modal canvas {
+.share-modal img.share-preview {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
@@ -449,5 +449,90 @@ html:not(.dark) body {
   background: var(--tag-bg);
   color: var(--tag-text);
 }
+
+/* Share card (off-screen DOM for html2canvas capture) */
+.share-card {
+  display: none;
+  position: fixed;
+  left: -9999px;
+  top: 0;
+  width: 540px;
+  min-height: 720px;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 36px;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  color: #1a1a1a;
+  flex-direction: column;
+  pointer-events: none;
+}
+.share-card.rendering {
+  display: flex;
+}
+.share-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.share-card-header-left {
+  flex: 1;
+  min-width: 0;
+}
+.share-card-site {
+  font-size: 14px;
+  color: #999999;
+  margin-bottom: 8px;
+}
+.share-card-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 1.3;
+  word-wrap: break-word;
+}
+.share-card-qr {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.share-card-qr canvas {
+  display: block;
+}
+.share-card-qr-hint {
+  font-size: 10px;
+  color: #bbbbbb;
+  margin-top: 4px;
+  white-space: nowrap;
+}
+.share-card-divider {
+  height: 1px;
+  background: #e5e5e5;
+  margin-bottom: 20px;
+}
+.share-card-body {
+  flex: 1;
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 20px;
+  font-size: 18px;
+  line-height: 1.8;
+  color: #333333;
+  overflow: hidden;
+}
+.share-card-body img {
+  max-width: 100%;
+  height: auto;
+}
+.share-card-body pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.share-card-body strong {
+  color: #ff5722;
+}
 `;
 //# sourceMappingURL=style.js.map

package/package.json

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