This commit is contained in:
@@ -1,85 +1,142 @@
|
||||
<!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 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"
|
||||
};
|
||||
|
||||
<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 proper prefixed image widget
|
||||
CMS.registerWidget("prefixed-image", {
|
||||
// Control component (what editors interact with)
|
||||
control: createClass({
|
||||
handleChange: function(e) {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
// Add prefix to filename
|
||||
const prefix = "feature-";
|
||||
const fileName = file.name.startsWith(prefix) ? file.name : prefix + file.name;
|
||||
const newFile = new File([file], fileName, { type: file.type });
|
||||
|
||||
// Upload the file with the new name
|
||||
this.props.mediaPersist([newFile]).then(urls => {
|
||||
if (urls && urls.length > 0) {
|
||||
this.props.onChange(urls[0]);
|
||||
}
|
||||
});
|
||||
},
|
||||
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;">
|
||||
|
||||
render: function() {
|
||||
const value = this.props.value;
|
||||
return h('div', {},
|
||||
h('input', {
|
||||
type: 'file',
|
||||
accept: 'image/*',
|
||||
onChange: this.handleChange
|
||||
}),
|
||||
value && h('img', {
|
||||
src: value,
|
||||
alt: '',
|
||||
style: { maxWidth: '200px', marginTop: '10px' }
|
||||
})
|
||||
);
|
||||
}
|
||||
}),
|
||||
|
||||
// Preview component (how it appears in the preview pane)
|
||||
preview: createClass({
|
||||
render: function() {
|
||||
return this.props.value ?
|
||||
h('img', {
|
||||
src: this.props.value,
|
||||
alt: '',
|
||||
style: { maxWidth: '100%' }
|
||||
}) : null;
|
||||
}
|
||||
})
|
||||
});
|
||||
</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;">
|
||||
// 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>
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user