bennolor/hugoblog
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

copium
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 42s
Details

Browse Source
This commit is contained in:
Benno Lorenz
2025-06-10 23:20:32 +02:00
parent 788a94ebe8
commit 2c78017019
1 changed files with 129 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
static/admin/index.html
View File

@@ -1,85 +1,142 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" /> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="utf-8" />
<meta name="robots" content="noindex" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.css"> <!-- Unminfied --> <meta name="robots" content="noindex" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.min.css"> <!-- Untested, but Minified --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.css">
<title>CMS for my privat page</title> <!-- Unminfied -->
</head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.min.css">
<body> <!-- Untested, but Minified -->
<!-- Include the script that builds the page and powers Decap CMS --> <title>CMS for my privat page</title>
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script> </head>
<script src="prefixed-image-widget.js"></script>
<script> <body>
// Register the OSM shortcode as an editor component <!-- Include the script that builds the page and powers Decap CMS -->
window.CMS.registerEditorComponent({ <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
id: "osm", <script>
label: "OpenStreetMap", // Register the proper prefixed image widget
fields: [ CMS.registerWidget("prefixed-image", {
{ name: "lat", label: "Latitude", widget: "string" }, // Control component (what editors interact with)
{ name: "lon", label: "Longitude", widget: "string" }, control: createClass({
{ name: "zoom", label: "Zoom", widget: "number", default: 15, required: false }, handleChange: function(e) {
{ name: "height", label: "Height (e.g. 400px)", widget: "string", default: "400px", required: false } const file = e.target.files[0];
], if (!file) return;
pattern: /{{<\s*osm\s+lat="([^"]+)"\s+lon="([^"]+)"(?:\s+zoom="([^"]+)")?(?:\s+height="([^"]+)")?\s*>}}/,
fromBlock: function(match) { // Add prefix to filename
return { const prefix = "feature-";
lat: match[1], const fileName = file.name.startsWith(prefix) ? file.name : prefix + file.name;
lon: match[2], const newFile = new File([file], fileName, { type: file.type });
zoom: match[3] || "15",
height: match[4] || "400px" // 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}"`; render: function() {
if (obj.zoom) params += ` zoom="${obj.zoom}"`; const value = this.props.value;
if (obj.height) params += ` height="${obj.height}"`; return h('div', {},
return `{{< osm ${params} >}}`; h('input', {
}, type: 'file',
toPreview: function(obj) { accept: 'image/*',
// Simple preview (not interactive) onChange: this.handleChange
return `<div style="border:1px solid #ccc;padding:1em;"> }),
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> <strong>OpenStreetMap Widget</strong><br>
Lat: ${obj.lat}, Lon: ${obj.lon}, Zoom: ${obj.zoom || 15}, Height: ${obj.height || "400px"} Lat: ${obj.lat}, Lon: ${obj.lon}, Zoom: ${obj.zoom || 15}, Height: ${obj.height || "400px"}
</div>`; </div>`;
} }
}); });
// Register the carousel shortcode as an editor component // Register the carousel shortcode as an editor component
window.CMS.registerEditorComponent({ window.CMS.registerEditorComponent({
id: "carousel", id: "carousel",
label: "Image Carousel", label: "Image Carousel",
fields: [ fields: [
{ name: "images", label: "Images (comma-separated filenames or URLs)", widget: "string" }, { 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: "aspectRatio", label: "Aspect Ratio (e.g. 16-9)", widget: "string", required: false },
{ name: "interval", label: "Interval (ms)", widget: "number", required: false } { name: "interval", label: "Interval (ms)", widget: "number", required: false }
], ],
pattern: /{{<\s*carousel\s+images="([^"]+)"(?:\s+aspectRatio="([^"]+)")?(?:\s+interval="([^"]+)")?\s*>}}/, pattern: /{{<\s*carousel\s+images="([^"]+)"(?:\s+aspectRatio="([^"]+)")?(?:\s+interval="([^"]+)")?\s*>}}/,
fromBlock: function(match) { fromBlock: function (match) {
return { return {
images: match[1], images: match[1],
aspectRatio: match[2] || "", aspectRatio: match[2] || "",
interval: match[3] || "" interval: match[3] || ""
}; };
}, },
toBlock: function(obj) { toBlock: function (obj) {
let params = `images="${obj.images}"`; let params = `images="${obj.images}"`;
if (obj.aspectRatio) params += ` aspectRatio="${obj.aspectRatio}"`; if (obj.aspectRatio) params += ` aspectRatio="${obj.aspectRatio}"`;
if (obj.interval) params += ` interval="${obj.interval}"`; if (obj.interval) params += ` interval="${obj.interval}"`;
return `{{< carousel ${params} >}}`; return `{{< carousel ${params} >}}`;
}, },
toPreview: function(obj) { toPreview: function (obj) {
// Simple preview (not interactive) // Simple preview (not interactive)
return `<div style="border:1px solid #ccc;padding:1em;"> return `<div style="border:1px solid #ccc;padding:1em;">
<strong>Image Carousel</strong><br> <strong>Image Carousel</strong><br>
Images: ${obj.images}<br> Images: ${obj.images}<br>
Aspect Ratio: ${obj.aspectRatio || "16-9"}<br> Aspect Ratio: ${obj.aspectRatio || "16-9"}<br>
Interval: ${obj.interval || "2000"} ms Interval: ${obj.interval || "2000"} ms
</div>`; </div>`;
} }
}); });
</script> </script>
</body> </body>
</html> </html>