czon 0.3.5 → 0.3.6

package/dist/ssg/ContentPage.js

@@ -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/style.js

@@ -434,5 +434,16 @@ exports.style = `
           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.5",
+  "version": "0.3.6",
   "description": "CZone - AI enhanced Markdown content engine",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",