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

83
static/admin/index.html
View File

@@ -1,17 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<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 -->
<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>
</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 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]);
}
});
},
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({
@@ -24,7 +80,7 @@
{ 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) {
fromBlock: function (match) {
return {
lat: match[1],
lon: match[2],
@@ -32,13 +88,13 @@
height: match[4] || "400px"
};
},
toBlock: function(obj) {
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) {
toPreview: function (obj) {
// Simple preview (not interactive)
return `<div style="border:1px solid #ccc;padding:1em;">
<strong>OpenStreetMap Widget</strong><br>
@@ -57,20 +113,20 @@
{ name: "interval", label: "Interval (ms)", widget: "number", required: false }
],
pattern: /{{<\s*carousel\s+images="([^"]+)"(?:\s+aspectRatio="([^"]+)")?(?:\s+interval="([^"]+)")?\s*>}}/,
fromBlock: function(match) {
fromBlock: function (match) {
return {
images: match[1],
aspectRatio: match[2] || "",
interval: match[3] || ""
};
},
toBlock: function(obj) {
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) {
toPreview: function (obj) {
// Simple preview (not interactive)
return `<div style="border:1px solid #ccc;padding:1em;">
<strong>Image Carousel</strong><br>
@@ -81,5 +137,6 @@
}
});
</script>
</body>
</body>
</html>