Revamp Schuelerzeitung
This commit is contained in:
@ -9,153 +9,165 @@
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@staticcms/app@^3.0.0-beta.2/dist/main.css"
|
||||
href="https://unpkg.com/@staticcms/app@^3.0.0/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 src="https://unpkg.com/@staticcms/app@^3.0.0/dist/static-cms-app.js"></script>
|
||||
<script type="module">
|
||||
import Icons from "https://cantorgymnasium.de/admin/icons.js";
|
||||
import config from "./config.js";
|
||||
import Icons from "https://cantorgymnasium.de/admin/icons.js";
|
||||
import config from "./config.js";
|
||||
|
||||
CMS.init({ config });
|
||||
CMS.init({ config });
|
||||
|
||||
Icons.forEach((i) => CMS.registerIcon(i.name, i.icon));
|
||||
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("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("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.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(
|
||||
"posts",
|
||||
({ widgetFor, entry, fields, collection }) => {
|
||||
const imageField = useMemo(() => {
|
||||
return fields.find((field) => field.name === "thumbnail");
|
||||
}, [fields]);
|
||||
CMS.registerPreviewTemplate(
|
||||
"post",
|
||||
({ widgetFor, entry, fields, collection }) => {
|
||||
const imageField = useMemo(() => {
|
||||
return fields.find((field) => field.name === "image");
|
||||
}, [fields]);
|
||||
|
||||
const imageUrl = useMediaAsset(
|
||||
entry.data.thumbnail,
|
||||
collection,
|
||||
imageField,
|
||||
entry
|
||||
);
|
||||
const imageUrl = useMediaAsset(
|
||||
entry.data.image,
|
||||
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')
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
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)
|
||||
) : ""
|
||||
)
|
||||
)
|
||||
),
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
CMS.registerPreviewTemplate(
|
||||
"pages",
|
||||
({ widgetFor, entry, fields, collection }) => {
|
||||
const imageField = useMemo(() => {
|
||||
return fields.find((field) => field.name === "thumbnail");
|
||||
}, [fields]);
|
||||
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)
|
||||
) : ""
|
||||
)
|
||||
)
|
||||
),
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
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')
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
{{ $sass := resources.Get "scss/style.scss" }}
|
||||
{{ $style := $sass | resources.ToCSS | minify | resources.Fingerprint "sha256" }}
|
||||
CMS.registerPreviewStyle("{{ $style.RelPermalink }}")
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user