shortcode integrations

static/admin/config.yml

@@ -22,8 +22,8 @@ collections:
     fields:
       - { label: "Layout", name: "layout", widget: "hidden", default: "post" }
       - { label: "Title", name: "title", widget: "string" }
-      - { label: "Summary", name: "summary", widget: "string" }
-      - { label: "Description", name: "description", widget: "string" }
+      - { label: "Summary", name: "summary", widget: "string", required: false }
+      - { label: "Description", name: "description", widget: "string", required: false }
       - {
           label: "Authors",
           name: "authors",
@@ -33,8 +33,12 @@ collections:
         }
       - { label: "Date", name: "date", widget: "datetime" }
       - { label: "Draft", name: "draft", widget: "boolean", default: true }
-      - { label: "Cover Image", name: "image", widget: "prefixed-image" }
+
+      - { label: "Cover Image", name: "image", widget: "prefixed-image", required : false }
       - { label: "Cover Style", name: "cover_style", widget: "select", options: ["basic", "big", "background", "thumbAndBackground"], default: "default" }
+      
+      
+
       - { label: "images", name: "images", widget: "image", multiple: true }
       - { label: "Body", name: "body", widget: "markdown" }
   

static/admin/index.html

@@ -12,5 +12,74 @@
     <!-- Include the script that builds the page and powers Decap CMS -->
     <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
     <script src="prefixed-image-widget.js"></script>
+    <script>
+      // Register the OSM shortcode as an editor component
+      window.CMS.registerEditorComponent({
+        id: "osm",
+        label: "OpenStreetMap",
+        fields: [
+          { name: "lat", label: "Latitude", widget: "string" },
+          { name: "lon", label: "Longitude", widget: "string" },
+          { name: "zoom", label: "Zoom", widget: "number", default: 15, required: false },
+          { name: "height", label: "Height (e.g. 400px)", widget: "string", default: "400px", required: false }
+        ],
+        pattern: /{{<\s*osm\s+lat="([^"]+)"\s+lon="([^"]+)"(?:\s+zoom="([^"]+)")?(?:\s+height="([^"]+)")?\s*>}}/,
+        fromBlock: function(match) {
+          return {
+            lat: match[1],
+            lon: match[2],
+            zoom: match[3] || "15",
+            height: match[4] || "400px"
+          };
+        },
+        toBlock: function(obj) {
+          let params = `lat="${obj.lat}" lon="${obj.lon}"`;
+          if (obj.zoom) params += ` zoom="${obj.zoom}"`;
+          if (obj.height) params += ` height="${obj.height}"`;
+          return `{{< osm ${params} >}}`;
+        },
+        toPreview: function(obj) {
+          // Simple preview (not interactive)
+          return `<div style="border:1px solid #ccc;padding:1em;">
+            <strong>OpenStreetMap Widget</strong><br>
+            Lat: ${obj.lat}, Lon: ${obj.lon}, Zoom: ${obj.zoom || 15}, Height: ${obj.height || "400px"}
+          </div>`;
+        }
+      });
+
+      // Register the carousel shortcode as an editor component
+      window.CMS.registerEditorComponent({
+        id: "carousel",
+        label: "Image Carousel",
+        fields: [
+          { name: "images", label: "Images (comma-separated filenames or URLs)", widget: "string" },
+          { name: "aspectRatio", label: "Aspect Ratio (e.g. 16-9)", widget: "string", required: false },
+          { name: "interval", label: "Interval (ms)", widget: "number", required: false }
+        ],
+        pattern: /{{<\s*carousel\s+images="([^"]+)"(?:\s+aspectRatio="([^"]+)")?(?:\s+interval="([^"]+)")?\s*>}}/,
+        fromBlock: function(match) {
+          return {
+            images: match[1],
+            aspectRatio: match[2] || "",
+            interval: match[3] || ""
+          };
+        },
+        toBlock: function(obj) {
+          let params = `images="${obj.images}"`;
+          if (obj.aspectRatio) params += ` aspectRatio="${obj.aspectRatio}"`;
+          if (obj.interval) params += ` interval="${obj.interval}"`;
+          return `{{< carousel ${params} >}}`;
+        },
+        toPreview: function(obj) {
+          // Simple preview (not interactive)
+          return `<div style="border:1px solid #ccc;padding:1em;">
+            <strong>Image Carousel</strong><br>
+            Images: ${obj.images}<br>
+            Aspect Ratio: ${obj.aspectRatio || "16-9"}<br>
+            Interval: ${obj.interval || "2000"} ms
+          </div>`;
+        }
+      });
+    </script>
   </body>
 </html>