<!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@3.4.6/dist/main.css" /> <title>Static CMS</title> </head> <body> <script src="https://unpkg.com/@staticcms/app@3.4.6/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", cursor: "pointer", borderRadius: "4px", fontSize: "14px", }, }, 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", cursor: "pointer", borderRadius: "4px", fontSize: "14px", }, }, value ? "Entwurf" : "Veröffentlicht" ) ); 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 != "" ? 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) ) : "" ) ) ), ); } ); {{ $sass := resources.Get "scss/style.scss" }} {{ $style := $sass | resources.ToCSS | minify | resources.Fingerprint "sha256" }} CMS.registerPreviewStyle("{{ $style.RelPermalink }}") </script> </body> </html>