czon 0.9.6 → 0.9.8

package/dist/ssg/ContentPage.js

@@ -87,6 +87,163 @@ 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("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 preview = document.getElementById('share-preview');
+  var downloadBtn = document.getElementById('share-download-btn');
+  var closeBtn = document.getElementById('share-close-btn');
+  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')};
+
+  // 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;
+    }
+    savedRange = range.cloneRange();
+    var rect = range.getBoundingClientRect();
+    floatBtn.style.display = 'block';
+    floatBtn.style.top = (window.scrollY + rect.bottom + 6) + 'px';
+    floatBtn.style.left = (window.scrollX + rect.left + rect.width / 2 - 30) + 'px';
+  });
+
+  floatBtn.addEventListener('click', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!savedRange) return;
+    renderShareCard(savedRange);
+    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() {
+    var a = document.createElement('a');
+    a.href = preview.src;
+    a.download = 'share.png';
+    a.click();
+  });
+
+  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);
+        }
+      }
+    }
+  }
+
+  function renderShareCard(range) {
+    // Populate card content
+    cardSite.textContent = siteName;
+    cardTitle.textContent = articleTitle;
+
+    // Clone selected DOM fragment with rich formatting
+    var fragment = range.cloneContents();
+    cardBody.innerHTML = '';
+    cardBody.appendChild(fragment);
+
+    // 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));
+    });
+
+    // Render QR code
+    renderQR();
+
+    // Show card for html2canvas to capture
+    shareCard.classList.add('rendering');
+
+    // 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';
+      }
+
+      html2canvas(shareCard, {
+        scale: 2,
+        useCORS: true,
+        backgroundColor: '#ffffff',
+        logging: false,
+      }).then(function(canvas) {
+        shareCard.classList.remove('rendering');
+        shareCard.style.minHeight = '';
+
+        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 = '';
+      });
+    });
+  }
+})();
+`,
+                } }),
             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', () => {
@@ -185,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

@@ -378,5 +378,161 @@ 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 img.share-preview {
+  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);
+}
+
+/* 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.6",
+  "version": "0.9.8",
   "description": "CZON - AI enhanced Markdown content engine",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",