2023-05-29 19:03:29 +02:00
|
|
|
<!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"
|
2023-12-12 19:19:34 +01:00
|
|
|
href="https://unpkg.com/@staticcms/app@^3.0.0/dist/main.css"
|
2023-05-29 19:03:29 +02:00
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<title>Static CMS</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2023-12-12 19:19:34 +01:00
|
|
|
<script src="https://unpkg.com/@staticcms/app@^3.0.0/dist/static-cms-app.js"></script>
|
2023-05-29 19:03:29 +02:00
|
|
|
<script type="module">
|
2023-10-21 20:25:30 +02:00
|
|
|
import Icons from "https://cantorgymnasium.de/admin/icons.js";
|
|
|
|
|
import config from "./config.js";
|
2023-05-29 19:03:29 +02:00
|
|
|
|
2023-10-21 20:25:30 +02:00
|
|
|
CMS.init({ config });
|
2023-05-29 19:03:29 +02:00
|
|
|
|
2023-10-21 20:25:30 +02:00
|
|
|
Icons.forEach((i) => CMS.registerIcon(i.name, i.icon));
|
2023-05-29 19:03:29 +02:00
|
|
|
|
2023-10-21 20:25:30 +02:00
|
|
|
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",
|
|
|
|
|
cursor: "pointer",
|
|
|
|
|
borderRadius: "4px",
|
|
|
|
|
fontSize: "14px",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
value ? "Entwurf" : "Veröffentlicht"
|
|
|
|
|
)
|
|
|
|
|
);
|
2023-05-29 19:03:29 +02:00
|
|
|
|
2023-10-21 20:25:30 +02:00
|
|
|
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",
|
|
|
|
|
cursor: "pointer",
|
|
|
|
|
borderRadius: "4px",
|
|
|
|
|
fontSize: "14px",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
value ? "Entwurf" : "Veröffentlicht"
|
|
|
|
|
)
|
|
|
|
|
);
|
2023-05-29 19:03:29 +02:00
|
|
|
|
2023-10-21 20:25:30 +02:00
|
|
|
CMS.registerPreviewTemplate(
|
|
|
|
|
"post",
|
|
|
|
|
({ widgetFor, entry, fields, collection }) => {
|
|
|
|
|
const imageField = useMemo(() => {
|
|
|
|
|
return fields.find((field) => field.name === "image");
|
|
|
|
|
}, [fields]);
|
2023-05-29 19:03:29 +02:00
|
|
|
|
2023-10-21 20:25:30 +02:00
|
|
|
const imageUrl = useMediaAsset(
|
|
|
|
|
entry.data.image,
|
|
|
|
|
collection,
|
|
|
|
|
imageField,
|
|
|
|
|
entry
|
|
|
|
|
);
|
2023-05-29 19:03:29 +02:00
|
|
|
|
2023-10-21 20:25:30 +02:00
|
|
|
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 != "" ? 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)
|
|
|
|
|
) : ""
|
|
|
|
|
)
|
|
|
|
|
)
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
);
|
2023-05-29 19:03:29 +02:00
|
|
|
|
2023-10-21 20:25:30 +02:00
|
|
|
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 != "" ? 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)
|
|
|
|
|
) : ""
|
|
|
|
|
)
|
|
|
|
|
)
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
);
|
2023-05-29 19:03:29 +02:00
|
|
|
|
2023-10-21 20:25:30 +02:00
|
|
|
{{ $sass := resources.Get "scss/style.scss" }}
|
|
|
|
|
{{ $style := $sass | resources.ToCSS | minify | resources.Fingerprint "sha256" }}
|
|
|
|
|
CMS.registerPreviewStyle("{{ $style.RelPermalink }}")
|
2023-05-29 19:03:29 +02:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
