238 lines
8.5 KiB
HTML
238 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/@staticcms/app@^4.0.1/dist/main.css"
|
|
/>
|
|
|
|
<title>Static CMS</title>
|
|
</head>
|
|
<body>
|
|
<script src="https://unpkg.com/@staticcms/app@^4.0.1/dist/static-cms-app.js"></script>
|
|
<script type="module">
|
|
import Icons from "https://cantorgymnasium.de/admin/icons.js";
|
|
import config from "./config.js";
|
|
|
|
CMS.init({ config });
|
|
|
|
Icons.forEach((i) => CMS.registerIcon(i.name, i.icon));
|
|
|
|
CMS.registerFieldPreview("post", "draft", ({ value }) =>
|
|
h(
|
|
"div",
|
|
{
|
|
style: {
|
|
backgroundColor:
|
|
value === true ? "rgb(37 99 235)" : "rgb(22 163 74)",
|
|
color: "white",
|
|
border: "none",
|
|
padding: "2px 6px",
|
|
textAlign: "center",
|
|
textDecoration: "none",
|
|
display: "inline-block",
|
|
borderRadius: "4px",
|
|
alignSelf: "center",
|
|
},
|
|
},
|
|
value ? "Entwurf" : "Veröffentlicht"
|
|
)
|
|
);
|
|
|
|
CMS.registerFieldPreview("page", "draft", ({ value }) =>
|
|
h(
|
|
"div",
|
|
{
|
|
style: {
|
|
backgroundColor:
|
|
value === true ? "rgb(37 99 235)" : "rgb(22 163 74)",
|
|
color: "white",
|
|
border: "none",
|
|
padding: "2px 6px",
|
|
textAlign: "center",
|
|
textDecoration: "none",
|
|
display: "inline-block",
|
|
borderRadius: "4px",
|
|
alignSelf: "center",
|
|
},
|
|
},
|
|
value ? "Entwurf" : "Veröffentlicht"
|
|
)
|
|
);
|
|
|
|
CMS.registerFieldPreview("categories", "style", ({ value }) =>
|
|
h(
|
|
"div",
|
|
{
|
|
style: {
|
|
backgroundColor: value.background,
|
|
color: value.color,
|
|
border: "none",
|
|
padding: "2px 6px",
|
|
textAlign: "center",
|
|
textDecoration: "none",
|
|
display: "inline-block",
|
|
borderRadius: "4px",
|
|
alignSelf: "center",
|
|
},
|
|
},
|
|
"Test"
|
|
)
|
|
);
|
|
|
|
|
|
CMS.registerPreviewTemplate(
|
|
"post",
|
|
({ widgetFor, entry, fields, collection }) => {
|
|
const imageField = useMemo(() => {
|
|
return fields.find((field) => field.name === "image");
|
|
}, [fields]);
|
|
|
|
const imageUrl = useMediaAsset(
|
|
entry.data.image,
|
|
collection,
|
|
imageField,
|
|
entry
|
|
);
|
|
|
|
return h(
|
|
"main",
|
|
{ className: "article-page full-width" },
|
|
h("article", { className: "main-article " + (imageField ? "has-image" : ""), style: {margin: "16px"} },
|
|
h("header", { className: "article-header" },
|
|
imageUrl ? h("div", { className: "article-image" },
|
|
h("img", { src: imageUrl, style: {width: "100%"} })
|
|
) : null,
|
|
h("div", { className: "article-details" },
|
|
h("header", { className: "article-category" },
|
|
entry.data.categories ? entry.data.categories.map(
|
|
(category, index) => h("a", {}, category)
|
|
) : ""
|
|
),
|
|
h("div", { className: "article-title-wrapper" },
|
|
h("h2", { className: "article-title" },
|
|
h("a", {}, entry.data.title)
|
|
),
|
|
h("h3", { className: "article-subtitle" },
|
|
entry.data.description
|
|
)
|
|
),
|
|
h("footer", { className: "article-time" },
|
|
h("div", {},
|
|
h("time", { className: "article-time--published" }, ((entry.data.date != null && entry.data.date != "") ? new Intl.DateTimeFormat("de-DE", {dateStyle: "long"}).format(new Date(entry.data.date)) : ""))
|
|
)
|
|
)
|
|
)
|
|
),
|
|
h("section", { className: "article-content" },
|
|
widgetFor("body")
|
|
),
|
|
h("footer", { className: "article-footer" },
|
|
h("section", { className: "article-tags" },
|
|
entry.data.tags ? entry.data.tags.map(
|
|
(tag, index) => h("a", {}, tag)
|
|
) : ""
|
|
)
|
|
)
|
|
),
|
|
);
|
|
}
|
|
);
|
|
|
|
CMS.registerPreviewTemplate(
|
|
"page",
|
|
({ widgetFor, entry, fields, collection }) => {
|
|
return h(
|
|
"main",
|
|
{ className: "article-page full-width" },
|
|
h("article", { className: "main-article", style: {margin: "16px"} },
|
|
h("header", { className: "article-header" },
|
|
h("div", { className: "article-details" },
|
|
h("div", { className: "article-title-wrapper" },
|
|
h("h2", { className: "article-title" },
|
|
h("a", {}, entry.data.title)
|
|
),
|
|
h("h3", { className: "article-subtitle" },
|
|
entry.data.description
|
|
)
|
|
),
|
|
h("footer", { className: "article-time" },
|
|
h("div", {},
|
|
h("time", { className: "article-time--published" }, ((entry.data.date != null && entry.data.date != "") ? new Intl.DateTimeFormat("de-DE", {dateStyle: "long"}).format(new Date(entry.data.date)) : ""))
|
|
)
|
|
)
|
|
)
|
|
),
|
|
h("section", { className: "article-content" },
|
|
widgetFor("body")
|
|
),
|
|
h("footer", { className: "article-footer" },
|
|
h("section", { className: "article-tags" },
|
|
entry.data.tags ? entry.data.tags.map(
|
|
(tag, index) => h("a", {}, tag)
|
|
) : ""
|
|
)
|
|
)
|
|
),
|
|
);
|
|
}
|
|
);
|
|
|
|
CMS.registerPreviewTemplate(
|
|
"categories",
|
|
({ widgetFor, entry }) => {
|
|
return h(
|
|
"main",
|
|
{ className: "article-page full-width" },
|
|
h("article", { className: "main-article", style: {margin: "16px"} },
|
|
h("header", { className: "article-header" },
|
|
h("div", { className: "article-details" },
|
|
h("header", { className: "article-category" },
|
|
h("a", { style: { "background-color": entry.data.style.background, "color": entry.data.style.color } }, entry.data.title)
|
|
),
|
|
h("div", { className: "article-title-wrapper" },
|
|
h("h2", { className: "article-title" },
|
|
h("a", {}, entry.data.title)
|
|
),
|
|
h("h3", { className: "article-subtitle" },
|
|
entry.data.description
|
|
)
|
|
),
|
|
h("footer", { className: "article-time" },
|
|
h("div", {},
|
|
h("time", { className: "article-time--published" }, ((entry.data.date != null && entry.data.date != "") ? new Intl.DateTimeFormat("de-DE", {dateStyle: "long"}).format(new Date(entry.data.date)) : ""))
|
|
)
|
|
)
|
|
)
|
|
),
|
|
),
|
|
);
|
|
}
|
|
);
|
|
|
|
CMS.registerEventListener({
|
|
name: "change",
|
|
collection: "categories",
|
|
// file: 'global', // You can specify a file if in a file collection
|
|
field: 'image',
|
|
handler: ({ data, collection, field }) => {
|
|
return {
|
|
...data,
|
|
image: data.image.replace("static", ""),
|
|
}
|
|
},
|
|
});
|
|
|
|
{{ $sass := resources.Get "scss/style.scss" }}
|
|
{{ $style := $sass | resources.ToCSS | minify | resources.Fingerprint "sha256" }}
|
|
CMS.registerPreviewStyle("{{ $style.RelPermalink }}")
|
|
</script>
|
|
</body>
|
|
</html>
|