Benno Lorenz
583bc2745e
Some checks failed
Build and Deploy / build-and-deploy (push) Failing after 1m5s
128 lines
5.0 KiB
HTML
128 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="robots" content="noindex" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.css">
|
|
<!-- Unminfied -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.min.css">
|
|
<!-- Untested, but Minified -->
|
|
<title>CMS for my privat page</title>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 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>
|
|
// 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>`;
|
|
}
|
|
});
|
|
|
|
// Register the GPX Map shortcode as an editor component
|
|
window.CMS.registerEditorComponent({
|
|
id: "gpx-map",
|
|
label: "GPX Track Map",
|
|
fields: [
|
|
{ name: "lat", label: "Latitude", widget: "string" },
|
|
{ name: "lon", label: "Longitude", widget: "string" },
|
|
{ name: "gpx", label: "GPX File Path", widget: "string", hint: "Example: /uploads/gpx/my-track.gpx" },
|
|
{ name: "zoom", label: "Zoom Level", widget: "number", default: 13, required: false },
|
|
{ name: "height", label: "Height (e.g. 500px)", widget: "string", default: "500px", required: false }
|
|
],
|
|
pattern: /{{<\s*gpx-map\s+lat="([^"]+)"\s+lon="([^"]+)"\s+gpx="([^"]+)"(?:\s+zoom="([^"]+)")?(?:\s+height="([^"]+)")?\s*>}}/,
|
|
fromBlock: function (match) {
|
|
return {
|
|
lat: match[1],
|
|
lon: match[2],
|
|
gpx: match[3],
|
|
zoom: match[4] || "13",
|
|
height: match[5] || "500px"
|
|
};
|
|
},
|
|
toBlock: function (obj) {
|
|
let params = `lat="${obj.lat}" lon="${obj.lon}" gpx="${obj.gpx}"`;
|
|
if (obj.zoom) params += ` zoom="${obj.zoom}"`;
|
|
if (obj.height) params += ` height="${obj.height}"`;
|
|
return `{{< gpx-map ${params} >}}`;
|
|
},
|
|
toPreview: function (obj) {
|
|
// Simple preview (not interactive)
|
|
return `<div style="border:1px solid #ccc;padding:1em;">
|
|
<strong>GPX Track Map</strong><br>
|
|
Lat: ${obj.lat}, Lon: ${obj.lon}<br>
|
|
GPX: ${obj.gpx}<br>
|
|
Zoom: ${obj.zoom || 13}, Height: ${obj.height || "500px"}
|
|
</div>`;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |