162 lines
5.0 KiB
HTML
162 lines
5.0 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://cdn.jsdelivr.net/npm/@staticcms/app@^3.0.0-beta.2/dist/main.css"
|
|
/>
|
|
|
|
<title>Static CMS</title>
|
|
</head>
|
|
<body>
|
|
<script src="https://cdn.jsdelivr.net/npm/@staticcms/app@3.0.0-beta.2/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("posts", "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("pages", "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(
|
|
"posts",
|
|
({ widgetFor, entry, fields, collection }) => {
|
|
const imageField = useMemo(() => {
|
|
return fields.find((field) => field.name === "thumbnail");
|
|
}, [fields]);
|
|
|
|
const imageUrl = useMediaAsset(
|
|
entry.data.thumbnail,
|
|
collection,
|
|
imageField,
|
|
entry
|
|
);
|
|
|
|
return h(
|
|
"div",
|
|
{},
|
|
h(
|
|
"div",
|
|
{ className: "relative max-w-5xl mx-auto px-4 pt-8" },
|
|
h("img", {
|
|
className: "rounded-lg shadow-sm w-full object-contain",
|
|
src: imageUrl,
|
|
})
|
|
),
|
|
h("article", {
|
|
className: "prose lg:prose-lg mx-auto my-8 dark:prose-dark px-4",
|
|
},
|
|
h("h1", { className: "text-2xl font-bold mb-2" }, entry.data.title),
|
|
h("h5", { className: "text-sm flex items-center flex-wrap"},
|
|
"Gepostet am " + (entry.data.date != "" ? new Intl.DateTimeFormat("de-DE", {dateStyle: "long"}).format(new Date(entry.data.date)) : ""),
|
|
" • " + entry.data.author
|
|
),
|
|
widgetFor('body')
|
|
)
|
|
);
|
|
}
|
|
);
|
|
|
|
CMS.registerPreviewTemplate(
|
|
"pages",
|
|
({ widgetFor, entry, fields, collection }) => {
|
|
const imageField = useMemo(() => {
|
|
return fields.find((field) => field.name === "thumbnail");
|
|
}, [fields]);
|
|
|
|
const imageUrl = useMediaAsset(
|
|
entry.data.thumbnail,
|
|
collection,
|
|
imageField,
|
|
entry
|
|
);
|
|
|
|
return h(
|
|
"div",
|
|
{},
|
|
h(
|
|
"div",
|
|
{ className: "relative max-w-5xl mx-auto px-4 pt-8" },
|
|
h("img", {
|
|
className: "rounded-lg shadow-sm w-full object-contain",
|
|
src: imageUrl,
|
|
})
|
|
),
|
|
h("article", {
|
|
className: "prose lg:prose-lg mx-auto my-8 dark:prose-dark px-4",
|
|
},
|
|
h("h1", { className: "text-2xl font-bold mb-2" }, entry.data.title),
|
|
h("h5", { className: "text-sm flex items-center flex-wrap"},
|
|
"Gepostet am " + (entry.data.date != "" ? new Intl.DateTimeFormat("de-DE", {dateStyle: "long"}).format(new Date(entry.data.date)) : ""),
|
|
" • " + entry.data.author
|
|
),
|
|
widgetFor('body')
|
|
)
|
|
);
|
|
}
|
|
);
|
|
</script>
|
|
{{- $styles := resources.Get "css/styles.css" | postCSS (dict "config"
|
|
"./assets/css/postcss.config.js") -}} {{- if .Site.IsServer }}
|
|
<script>
|
|
CMS.registerPreviewStyle("{{ $styles.RelPermalink }}");
|
|
</script>
|
|
{{ else }} {{- $styles := $styles| minify | fingerprint |
|
|
resources.PostProcess -}}
|
|
<script>
|
|
CMS.registerPreviewStyle("{{ $styles.Permalink }}");
|
|
</script>
|
|
{{ end -}}
|
|
</body>
|
|
</html>
|