Static CMS v2.0 (#226)

- [x] Update auf Static CMS v2.0
- [x] aktualisierte Shortcodes (schließt #225)
- [x] aktualisierte Previews (schließt #181)
- Ordnerunterstützung
- [x] vervollständigte Seiten
- [x] Aufräumarbeiten

Reviewed-on: https://git.cantorgymnasium.de/gcg/gcg-website/pulls/226

static/admin/previews/field-previews/body-preview.js

@@ -0,0 +1,5 @@
+import { truncate } from "./components/index.js";
+
+const BodyPreview = ({ value }) => h("p", {}, truncate(value ?? "", 50));
+
+export default BodyPreview;

static/admin/previews/field-previews/boolean-preview.js

@@ -0,0 +1,6 @@
+const BooleanPreview = ({ value }) =>
+	h("i", {
+		className: value ? "mdi mdi-check" : "mdi mdi-close",
+	});
+
+export default BooleanPreview;

static/admin/previews/field-previews/components/index.js

@@ -0,0 +1,3 @@
+import truncate from "./truncate.js";
+
+export { truncate };

static/admin/previews/field-previews/components/truncate.js

@@ -0,0 +1,9 @@
+function truncate(str, num) {
+	if (str.length > num) {
+		return str.slice(0, num) + "...";
+	} else {
+		return str;
+	}
+}
+
+export default truncate;

static/admin/previews/field-previews/count-preview.js

@@ -0,0 +1,3 @@
+const CountPreview = ({ value }) => (value ? value.length : 0);
+
+export default CountPreview;

static/admin/previews/field-previews/date-preview.js

@@ -0,0 +1,11 @@
+const DatePreview = ({ value }) =>
+	h(
+		"p",
+		{},
+		new Intl.DateTimeFormat("de-DE", {
+			year: "numeric",
+			month: "2-digit",
+			day: "2-digit",
+			hour12: false,
+		}).format(new Date(value))
+	);

static/admin/previews/field-previews/draft-preview.js

@@ -0,0 +1,21 @@
+const DraftPreview = ({ 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"
+	);
+
+export default DraftPreview;

static/admin/previews/field-previews/index.js

@@ -0,0 +1,13 @@
+import BooleanPreview from "./boolean-preview.js";
+import DraftPreview from "./draft-preview.js";
+import CountPreview from "./count-preview.js";
+import BodyPreview from "./body-preview.js";
+import DraftPreview from "./draft-preview.js";
+
+export {
+	BooleanPreview,
+	DraftPreview,
+	CountPreview,
+	BodyPreview,
+	DraftPreview,
+};

static/admin/previews/page-previews/abiturienten-preview.js

@@ -0,0 +1,32 @@
+import { Container, PageHeader, Section, Row } from "./components/index.js";
+
+const AbiturientenPreview = ({ widgetFor, entry, collection, fields }) => {
+	const imageField = useMemo(
+		() => fields.find((field) => field.name === "image"),
+		[fields]
+	);
+
+	const imageUrl = useMediaAsset(
+		entry.data.image,
+		collection,
+		imageField,
+		entry
+	);
+	return [
+		PageHeader(entry),
+		Section(
+			Container(
+				Row([
+					h(
+						"div",
+						{ className: "col-12 mb-4" },
+						h("img", { className: "img-fluid w-100", src: imageUrl })
+					),
+					h("div", { className: "col-12 content" }, widgetFor("body")),
+				])
+			)
+		),
+	];
+};
+
+export default AbiturientenPreview;

static/admin/previews/page-previews/about-preview.js

@@ -0,0 +1,64 @@
+import { PageHeader } from "./components/index.js";
+
+const AboutPreview = ({ widgetFor, widgetsFor, entry, fields, collection }) => {
+	const imageField = useMemo(
+		() => fields.find((field) => field.name === "image"),
+		[fields]
+	);
+
+	const imageUrl = useMediaAsset(
+		entry.data.image,
+		collection,
+		imageField,
+		entry
+	);
+	return [
+		PageHeader(entry),
+		h(
+			"section",
+			{ className: "section-sm" },
+			h(
+				"div",
+				{ className: "container" },
+				h(
+					"div",
+					{ className: "row" },
+					h(
+						"div",
+						{ className: "col-12" },
+						h("img", { className: "img-fluid w-100 mb-4", src: imageUrl }),
+						widgetFor("body")
+					)
+				)
+			)
+		),
+		entry.data.stats.enable
+			? h(
+					"section",
+					{ className: "section-sm bg-primary" },
+					h(
+						"div",
+						{ className: "container" },
+						h(
+							"div",
+							{ className: "row" },
+							widgetsFor("stats").data.zahlen.map((element) => {
+								return h(
+									"div",
+									{ className: "col-md-4 col-sm-6 mb-4 mb-md-0" },
+									h(
+										"div",
+										{ className: "text-center" },
+										h("h2", { className: "count text-white" }, element.count),
+										h("h5", { className: "text-white" }, element.name)
+									)
+								);
+							})
+						)
+					)
+			  )
+			: null,
+	];
+};
+
+export default AboutPreview;

static/admin/previews/page-previews/anmeldeformular-preview.js

@@ -0,0 +1,159 @@
+import { PageHeader } from "./components/index.js";
+
+const AnmeldeformularPreview = ({ widgetFor, entry }) => {
+	return [
+		PageHeader(entry),
+		h(
+			"section",
+			{ className: "section-sm bg-gray" },
+			h(
+				"div",
+				{ className: "container" },
+				h(
+					"div",
+					{ className: "row" },
+					h(
+						"div",
+						{ className: "col-lg-8 mb-4 mb-lg-0" },
+						h(
+							"form",
+							{},
+							h(
+								"div",
+								{ className: "input-group" },
+								h("input", {
+									className: "form-control mb-3",
+									type: "text",
+									placeholder: "Name (Schüler/in)",
+								}),
+								h("input", {
+									className: "form-control mb-3",
+									type: "text",
+									placeholder: "Vorname",
+								})
+							),
+							h(
+								"div",
+								{ className: "input-group mb-3" },
+								h("span", { className: "input-group-text" }, "Geburtsdatum"),
+								h("input", { className: "form-control", type: "date" })
+							),
+							h("input", {
+								className: "form-control mb-3",
+								type: "text",
+								placeholder: "Straße",
+							}),
+							h(
+								"div",
+								{ className: "input-group" },
+								h("input", {
+									className: "form-control mb-3",
+									type: "text",
+									placeholder: "Hausnummer",
+								}),
+								h("input", {
+									className: "form-control mb-3",
+									type: "text",
+									placeholder: "Adresszusatz",
+								})
+							),
+							h(
+								"div",
+								{ className: "input-group" },
+								h("input", {
+									className: "form-control mb-3",
+									type: "text",
+									placeholder: "PLZ",
+								}),
+								h("input", {
+									className: "form-control mb-3",
+									type: "text",
+									placeholder: "Stadt",
+								})
+							),
+							h("input", {
+								className: "form-control mb-3",
+								type: "text",
+								placeholder: "Landkreis",
+							}),
+							h(
+								"div",
+								{ className: "input-group" },
+								h("input", {
+									className: "form-control mb-3",
+									type: "text",
+									placeholder: "Telefon privat",
+								}),
+								h("input", {
+									className: "form-control mb-3",
+									type: "text",
+									placeholder: "Telefon dienstl.",
+								})
+							),
+							h("input", {
+								className: "form-control mb-3",
+								type: "text",
+								placeholder: "Abweichender Elternname",
+							}),
+							h("input", {
+								className: "form-control mb-3",
+								type: "text",
+								placeholder: "Grundschule",
+							}),
+							h("input", {
+								className: "form-control mb-3",
+								type: "text",
+								placeholder: "Ihre E-Mail-Adresse",
+							}),
+							h("textarea", {
+								className: "form-control mb-3",
+								placeholder: "Bemerkungen",
+							}),
+							h(
+								"div",
+								{ className: "input-group mb-3" },
+								h("input", { className: "form-control", type: "file" }),
+								h(
+									"span",
+									{ className: "input-group-text" },
+									"Zeugnis (Vorderseite)"
+								)
+							),
+							h(
+								"div",
+								{ className: "input-group mb-3" },
+								h("input", { className: "form-control", type: "file" }),
+								h(
+									"span",
+									{ className: "input-group-text" },
+									"Zeugnis (Rückseite)"
+								)
+							),
+							h(
+								"div",
+								{ className: "input-group mb-3" },
+								h(
+									"div",
+									{ className: "input-group-text" },
+									h("input", {
+										className: "form-check-input",
+										type: "checkbox",
+									})
+								),
+								h(
+									"p",
+									{ className: "form-control mb-0" },
+									"Hiermit melden wir unser Kind verbindlich zur Aufnahmeprüfung an."
+								)
+							),
+							h("button", { className: "btn btn-primary" }, "Senden")
+						)
+					),
+					h("div", { className: "col-lg-4" }, widgetFor("body"))
+				)
+			)
+		),
+	];
+};
+
+export default AnmeldeformularPreview;

static/admin/previews/page-previews/anmeldung-preview.js

@@ -0,0 +1,44 @@
+import { PageHeader } from "./components/index.js";
+
+const AnmeldungPreview = ({ widgetsFor, widgetFor, entry }) => {
+	return [
+		PageHeader(entry),
+		h(
+			"section",
+			{ className: "section-sm" },
+			h(
+				"div",
+				{ className: "container" },
+				h(
+					"div",
+					{ className: "row mb-4" },
+					h("div", { className: "col-md-6 content" }, widgetFor("body"))
+				),
+				h(
+					"div",
+					{ className: "row" },
+					widgetsFor("elements").map(function (element, index) {
+						return h(
+							"div",
+							{
+								className: "col-lg-6 col-sm-6 mb-4 d-flex align-items-stretch",
+							},
+							h(
+								"div",
+								{ className: "card rounded-0 hover-shadow border-primary" },
+								h(
+									"div",
+									{ className: "card-body" },
+									h("h4", { className: "card-title mb-3" }, element.data.title),
+									h("div", { className: "content" }, element.widgets.content)
+								)
+							)
+						);
+					})
+				)
+			)
+		),
+	];
+};
+
+export default AnmeldungPreview;

static/admin/previews/page-previews/author-preview.js

@@ -0,0 +1,72 @@
+import { PageHeader, md5 } from "./components/index.js";
+
+const AuthorPreview = ({ widgetFor, entry, fields, collection }) => {
+	const imageField = useMemo(
+		() => fields.find((field) => field.name === "image"),
+		[fields]
+	);
+
+	const imageUrl = entry.data.image
+		? useMediaAsset(entry.data.image, collection, imageField, entry)
+		: entry.data.email
+		? undefined
+		: useMediaAsset("/media/people/gcg.webp", collection, imageField, entry);
+
+	return [
+		PageHeader(entry),
+		h(
+			"section",
+			{ className: "section-sm bg-light" },
+			h(
+				"div",
+				{ className: "container" },
+				h(
+					"div",
+					{ className: "row" },
+					h(
+						"div",
+						{ className: "col-lg-10 mx-auto" },
+						h(
+							"div",
+							{ className: "text-center" },
+							h(
+								"figure",
+								{},
+								h("img", {
+									className: "rounded-circle img-fluid mb-4",
+									src:
+										imageUrl ??
+										"https://www.gravatar.com/avatar/" +
+											md5(entry.data.email) +
+											"?s=128&pg&d=identicon",
+									width: "128px",
+								}),
+								h(
+									"figcaption",
+									{},
+									h("h4", { className: "fw-bold" }, entry.data.title)
+								)
+							),
+							h("hr"),
+							widgetFor("body"),
+							h("hr"),
+							h(
+								"ul",
+								{ className: "list-inline" },
+								entry.data.email
+									? h(
+											"li",
+											{ className: "list-inline-item" },
+											h("i", { className: "mdi mdi-at" })
+									  )
+									: null
+							)
+						)
+					)
+				)
+			)
+		),
+	];
+};
+
+export default AuthorPreview;

static/admin/previews/page-previews/blog-preview.js

@@ -0,0 +1,89 @@
+import {
+	DateFormat,
+	PageHeader,
+	Section,
+	Container,
+	Col12,
+	Row,
+} from "./components/index.js";
+
+const BlogPreview = ({ 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 [
+		PageHeader(entry),
+		Section(
+			Container(
+				Row([
+					h(
+						"div",
+						{ key: "cover-image", className: "col-12 mb-4" },
+						h("img", { className: "img-fluid w-100", src: imageUrl })
+					),
+					Col12(
+						h(
+							"div",
+							{ className: "row mb-3" },
+							h(
+								"div",
+								{ className: "col-6 mb-md-0 text-light" },
+								h("span", { className: "fw-bold me-1" }, "Geschrieben von:"),
+								entry.data.author
+							),
+							h(
+								"div",
+								{ className: "col-6 mb-3 mb-md-0 text-light" },
+								h("span", { className: "fw-bold me-1" }, "Datum:"),
+								entry.data.date
+									? DateFormat({
+											date: entry.data.date,
+											format: {
+												day: "numeric",
+												month: "short",
+												year: "numeric",
+											},
+									  })
+									: ""
+							)
+						)
+					),
+					Row(
+						h(
+							"div",
+							{ className: "col-12 mb-md-0 text-light" },
+							h("span", { className: "fw-bold me-1" }, "Kategorie:"),
+							entry.data.categories
+								? entry.data.categories.map(
+										(category, index) => (index != 0 ? ", " : "") + category
+								  )
+								: ""
+						)
+					),
+					h(
+						"div",
+						{ key: "border-bottom", className: "col-12 my-4" },
+						h("div", { className: "border-bottom" })
+					),
+					h(
+						"div",
+						{
+							key: "body-content",
+							className: "col-12 mb-5 content content-justify",
+						},
+						widgetFor("body")
+					),
+				])
+			)
+		),
+	];
+};
+
+export default BlogPreview;

static/admin/previews/page-previews/cantorpreis-preview.js

@@ -0,0 +1,49 @@
+import {
+	PageHeader,
+	Section,
+	Container,
+	Row,
+	Content,
+} from "./components/index.js";
+
+const CantorpreisPreview = ({ widgetFor, entry, fields, collection }) => {
+	const imageField = useMemo(
+		() => fields.find((field) => field.name === "image"),
+		[fields]
+	);
+
+	const imageUrl = useMediaAsset(
+		entry.data.image,
+		collection,
+		imageField,
+		entry
+	);
+
+	return [
+		PageHeader(entry),
+		Section(
+			Container(
+				Row([
+					h(
+						"div",
+						{ className: "col-md-5 mb-5" },
+						h("img", {
+							className: "img-fluid w-75",
+							src: imageUrl,
+							alt: entry.data.name,
+						})
+					),
+					h(
+						"div",
+						{ className: "col-md-7 mb-5" },
+						h("h3", {}, entry.data.name),
+						h("h6", { className: "text-color" }, entry.data.title),
+						Content(widgetFor("body"))
+					),
+				])
+			)
+		),
+	];
+};
+
+export default CantorpreisPreview;

static/admin/previews/page-previews/chronik-index-preview.js

@@ -0,0 +1,113 @@
+import { PageHeader } from "./components/index.js";
+
+const ChronikIndexPreview = ({
+	widgetFor,
+	widgetsFor,
+	entry,
+	fields,
+	collection,
+}) => {
+	const imageField = useMemo(
+		() => fields.find((field) => field.name === "image"),
+		[fields]
+	);
+
+	const imageUrl = useMediaAsset(
+		widgetsFor("infocard").data.image,
+		collection,
+		imageField,
+		entry
+	);
+	return [
+		PageHeader(entry),
+		h(
+			"section",
+			{ className: "section-sm" },
+			h("div", { className: "container" }, widgetFor("body")),
+			widgetsFor("infocard").data.enable
+				? h(
+						"div",
+						{ className: "container" },
+						h(
+							"div",
+							{ className: "card mb-3" },
+							h(
+								"div",
+								{ className: "row g-0" },
+								h(
+									"div",
+									{ className: "col-md-3" },
+									h("img", {
+										className: "img-fluid rounded w-100",
+										src: imageUrl,
+									})
+								),
+								h(
+									"div",
+									{ className: "col-md-9 d-flex align-items-center" },
+									h(
+										"div",
+										{ className: "card-body" },
+										h(
+											"p",
+											{ className: "h2 card-title" },
+											widgetsFor("infocard").data.quote
+										),
+										h(
+											"p",
+											{ className: "card-text" },
+											h(
+												"small",
+												{ className: "text-muted" },
+												widgetsFor("infocard").data.author
+											)
+										)
+									)
+								)
+							)
+						)
+				  )
+				: null,
+			h(
+				"div",
+				{ className: "container" },
+				h("h2", { className: "section-title" }, "Informationsseiten"),
+				h(
+					"div",
+					{ className: "row" },
+					widgetsFor("links").map((element) =>
+						h(
+							"div",
+							{ className: "col-lg-4 col-sm-6" },
+							h(
+								"div",
+								{
+									className: "card border-primary rounded-0 hover-shadow mb-4",
+								},
+								h(
+									"div",
+									{ className: "card-body" },
+									h(
+										"h4",
+										{ className: "card-title text-truncate" },
+										h("a", { href: element.data.link }, element.data.title)
+									),
+									h(
+										"a",
+										{
+											className: "btn btn-primary btn-sm",
+											href: element.data.link,
+										},
+										"Mehr anzeigen"
+									)
+								)
+							)
+						)
+					)
+				)
+			)
+		),
+	];
+};
+
+export default ChronikIndexPreview;

static/admin/previews/page-previews/chronik-preview.js

@@ -0,0 +1,78 @@
+import { PageHeader } from "./components/index.js";
+
+const ChronikPreview = ({ widgetFor, widgetsFor, entry, document, window }) => {
+	/*return [PageHeader,
+            h('section', {className: "section-sm"},
+                h('div', {className: "container"},
+                    h('div', {className: "row"},
+                    h('div', {className: "col-12 mb-4 content"},
+                    widgetsFor('topics').map(function(i, index) {
+                        return h('div', {"id": i.data.id, className: "modal"},
+                            h('div', {className: "modal-dialog modal-lg", "role": "document"},
+                            h('div', {className: "modal-content"},
+                                h('div', {className: "modal-header"},
+                                h('h5', {className: "modal-title"}, i.data.title),
+                                h('button', {className: "close", type: "button", "dataDismiss": "modal", "ariaLabel": "Close"},
+                                    h('span', {"ariaHidden": "true"}, '\u{00d7}')
+                                )
+                                ),
+                                h('div', {className: "modal-body"},
+                                h('div', {className: "content"}, i.content)
+                                )
+                            )
+                            )
+                        );
+                    }),
+                    entry.data.pretext != "" && entry.data.pretext != null ? h('div', {"id": "pretext", className: "modal"},
+                    h('div', {className: "modal-dialog modal-lg", "role": "document"},
+                        h('div', {className: "modal-content"},
+                        h('div', {className: "modal-header"},
+                            h('h5', {className: "modal-title"}, entry.data.title),
+                            h('button', {className: "close", type: "button", "dataDismiss": "modal", "ariaLabel": "Close"},
+                            h('span', {"ariaHidden": "true"}, '\u{00d7}')
+                            )
+                        ),
+                        h('div', {className: "modal-body"},
+                            h('div', {className: "content"}, widgetFor('pretext'))
+                        )
+                        )
+                    )
+                    ) : null,
+                    h('div', {"id": "wc-canvas"}),
+                    () => {
+                        var topics = [[entry.data.title, 100, "pretext"]];
+                        widgetsFor('topics').map(function(i, index) {
+                        topics.push([i.data.title, 40, i.data.id]);
+                        });
+                        var script = document.createElement('script');
+                        var div = document.getElementById('sc-root');
+                        div.appendChild(script);
+                        WordCloud(
+                        document.getElementById('wc-canvas'),
+                        {
+                            click: function (item) {
+                            if (item[1] != 100 || (item[1] == 100 && item[2] == "pretext")) {
+                                $('#' + item[2]).modal('show');
+                            }
+                            },
+                            color: function (word, weight) {
+                            return (weight === 100) ? '#ffbc3b' : '#1a1a37';
+                            },
+                            fontFamily: 'Fira Sans, serif',
+                            fontWeight: 800,
+                            list: topics,
+                            shrinkToFit: true,
+                            gridSize: 25,
+                            rotateRatio: 0,
+                        } 
+                        );
+                    },
+                    widgetFor('body')
+                    )
+                    )
+                )
+            )
+    ];*/
+};
+
+export default ChronikPreview;

static/admin/previews/page-previews/components/base.js

@@ -0,0 +1,8 @@
+const Section = (children) =>
+	h("section", { className: "section-sm" }, children);
+const Container = (children) => h("div", { className: "container" }, children);
+const Row = (children) => h("div", { className: "row" }, children);
+const Content = (children) => h("div", { className: "content" }, children);
+const Col12 = (children) => h("div", { className: "col-12" }, children);
+
+export { Section, Container, Row, Content, Col12 };

static/admin/previews/page-previews/components/date-format.js

@@ -0,0 +1,5 @@
+const DateFormat = ({ date, format }) => {
+	return new Intl.DateTimeFormat("de-DE", format).format(new Date(date));
+};
+
+export default DateFormat;

static/admin/previews/page-previews/components/index.js

@@ -0,0 +1,6 @@
+import PageHeader from "./page-header.js";
+import DateFormat from "./date-format.js";
+import md5 from "./md5.js";
+import { Section, Container, Row, Content, Col12 } from "./base.js";
+
+export { PageHeader, DateFormat, md5, Section, Container, Row, Content, Col12 };

static/admin/previews/page-previews/components/md5.js

@@ -0,0 +1,5 @@
+function md5gen(d){return rstr2hex(binl2rstr(binl_md5(rstr2binl(d),8*d.length)))}function rstr2hex(d){for(var _,m="0123456789ABCDEF",f="",r=0;r<d.length;r++)_=d.charCodeAt(r),f+=m.charAt(_>>>4&15)+m.charAt(15&_);return f}function rstr2binl(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<<m%32;return _}function binl2rstr(d){for(var _="",m=0;m<32*d.length;m+=8)_+=String.fromCharCode(d[m>>5]>>>m%32&255);return _}function binl_md5(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n<d.length;n+=16){var h=m,t=f,g=r,e=i;f=md5_ii(f=md5_ii(f=md5_ii(f=md5_ii(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_ff(f=md5_ff(f=md5_ff(f=md5_ff(f,r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+0],7,-680876936),f,r,d[n+1],12,-389564586),m,f,d[n+2],17,606105819),i,m,d[n+3],22,-1044525330),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+4],7,-176418897),f,r,d[n+5],12,1200080426),m,f,d[n+6],17,-1473231341),i,m,d[n+7],22,-45705983),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+8],7,1770035416),f,r,d[n+9],12,-1958414417),m,f,d[n+10],17,-42063),i,m,d[n+11],22,-1990404162),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+12],7,1804603682),f,r,d[n+13],12,-40341101),m,f,d[n+14],17,-1502002290),i,m,d[n+15],22,1236535329),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+1],5,-165796510),f,r,d[n+6],9,-1069501632),m,f,d[n+11],14,643717713),i,m,d[n+0],20,-373897302),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+5],5,-701558691),f,r,d[n+10],9,38016083),m,f,d[n+15],14,-660478335),i,m,d[n+4],20,-405537848),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+9],5,568446438),f,r,d[n+14],9,-1019803690),m,f,d[n+3],14,-187363961),i,m,d[n+8],20,1163531501),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+13],5,-1444681467),f,r,d[n+2],9,-51403784),m,f,d[n+7],14,1735328473),i,m,d[n+12],20,-1926607734),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+5],4,-378558),f,r,d[n+8],11,-2022574463),m,f,d[n+11],16,1839030562),i,m,d[n+14],23,-35309556),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+1],4,-1530992060),f,r,d[n+4],11,1272893353),m,f,d[n+7],16,-155497632),i,m,d[n+10],23,-1094730640),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+13],4,681279174),f,r,d[n+0],11,-358537222),m,f,d[n+3],16,-722521979),i,m,d[n+6],23,76029189),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+9],4,-640364487),f,r,d[n+12],11,-421815835),m,f,d[n+15],16,530742520),i,m,d[n+2],23,-995338651),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+0],6,-198630844),f,r,d[n+7],10,1126891415),m,f,d[n+14],15,-1416354905),i,m,d[n+5],21,-57434055),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+12],6,1700485571),f,r,d[n+3],10,-1894986606),m,f,d[n+10],15,-1051523),i,m,d[n+1],21,-2054922799),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+8],6,1873313359),f,r,d[n+15],10,-30611744),m,f,d[n+6],15,-1560198380),i,m,d[n+13],21,1309151649),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+4],6,-145523070),f,r,d[n+11],10,-1120210379),m,f,d[n+2],15,718787259),i,m,d[n+9],21,-343485551),m=safe_add(m,h),f=safe_add(f,t),r=safe_add(r,g),i=safe_add(i,e)}return Array(m,f,r,i)}function md5_cmn(d,_,m,f,r,i){return safe_add(bit_rol(safe_add(safe_add(_,d),safe_add(f,i)),r),m)}function md5_ff(d,_,m,f,r,i,n){return md5_cmn(_&m|~_&f,d,_,r,i,n)}function md5_gg(d,_,m,f,r,i,n){return md5_cmn(_&f|m&~f,d,_,r,i,n)}function md5_hh(d,_,m,f,r,i,n){return md5_cmn(_^m^f,d,_,r,i,n)}function md5_ii(d,_,m,f,r,i,n){return md5_cmn(m^(_|~f),d,_,r,i,n)}function safe_add(d,_){var m=(65535&d)+(65535&_);return(d>>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_}
+
+const md5 = (string) => md5gen(unescape(encodeURIComponent(string))).toLowerCase();
+
+export default md5;

static/admin/previews/page-previews/components/page-header.js

@@ -0,0 +1,51 @@
+const PageHeader = (entry) => {
+	return h(
+		"section",
+		{
+			key: "page-header",
+			className: "page-title-section overlay",
+			style: {
+				backgroundImage:
+					'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")',
+			},
+		},
+		h(
+			"div",
+			{ className: "container" },
+			h(
+				"div",
+				{ className: "row" },
+				h(
+					"div",
+					{ className: "col-md-8 position-relative" },
+					h(
+						"ul",
+						{ className: "list-inline" },
+						h(
+							"li",
+							{ className: "list-inline-item h2" },
+							h(
+								"font",
+								{ className: "text-primary font-secondary", href: "" },
+								"Startseite"
+							)
+						),
+						h(
+							"li",
+							{ className: "list-inline-item h2" },
+							h("i", { className: "mdi mdi-chevron-double-right text-white" })
+						),
+						h(
+							"li",
+							{ className: "list-inline-item text-white h2 font-secondary" },
+							entry.data.title
+						)
+					),
+					h("p", { className: "text-lighten" }, entry.data.description)
+				)
+			)
+		)
+	);
+};
+
+export default PageHeader;

static/admin/previews/page-previews/contest-preview.js

@@ -0,0 +1,67 @@
+import { Container, PageHeader, Row, Section } from "./components/index.js";
+
+const ContestPreview = ({ 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 [
+		PageHeader(entry),
+		Section(
+			Container([
+				entry.data.image &&
+				!["/media/contests/image.webp", "/media/begabte/image.webp"].includes(
+					entry.data.image
+				)
+					? Row(
+							h(
+								"div",
+								{ className: "col-12 mb-4" },
+								h("img", { className: "img-fluid w-100", src: imageUrl })
+							)
+					  )
+					: null,
+				h(
+					"div",
+					{ className: "row mb-4" },
+					h(
+						"div",
+						{ className: "col-7" },
+						h(
+							"div",
+							{ className: "d-flex align-items-center" },
+							h("i", { className: "mdi mdi-crowd text-primary icon-md me-2" }),
+							h(
+								"div",
+								{ className: "text-start" },
+								h("h6", { className: "mb-0" }, "KLASSE(N)"),
+								h("p", { className: "mb-0" }, entry.data.class)
+							)
+						)
+					),
+					entry.data.web_url
+						? h(
+								"div",
+								{ className: "col-5 text-end mb-4 mb-xl-0" },
+								h("a", { className: "btn btn-primary" }, "Website")
+						  )
+						: null,
+					h(
+						"div",
+						{ className: "col-12 mt-4" },
+						h("div", { className: "border-bottom border-primary" })
+					)
+				),
+				Row(h("div", { className: "col-12 content" }, widgetFor("body"))),
+			])
+		),
+	];
+};
+
+export default ContestPreview;

static/admin/previews/page-previews/event-preview.js

@@ -0,0 +1,147 @@
+import { PageHeader, DateFormat } from "./components/index.js";
+
+function isFuture(date, enddate) {
+	let date1 = new Date(date ? date : 0);
+	let date2 = new Date(enddate ? enddate : 0);
+	let present = new Date();
+	if (date1 >= present || date2 >= present) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+const EventPreview = ({ widgetsFor, entry }) => {
+	return [
+		PageHeader(entry),
+		h(
+			"section",
+			{ className: "section-sm" },
+			h(
+				"div",
+				{ className: "container" },
+				h(
+					"div",
+					{ className: "row" },
+					h(
+						"div",
+						{ className: "col-12" },
+						h(
+							"div",
+							{ className: "row" },
+							h(
+								"div",
+								{ className: "col-12" },
+								h(
+									"ul",
+									{ className: "list-inline text-center filter-controls mb-5" },
+									h(
+										"li",
+										{ className: "list-inline-item m-3 text-uppercase active" },
+										"Alle"
+									),
+									h(
+										"li",
+										{ className: "list-inline-item m-3 text-uppercase" },
+										"Anstehend"
+									),
+									h(
+										"li",
+										{ className: "list-inline-item m-3 text-uppercase" },
+										"Vergangen"
+									)
+								)
+							)
+						),
+						h(
+							"div",
+							{ className: "filtr-container" },
+							widgetsFor("events").map((event) =>
+								h(
+									"div",
+									{ className: "mb-2 mt-2 col-12 filtr-item" },
+									h(
+										"div",
+										{
+											className:
+												"card d-md-table w-100 hover-shadow border-primary ps-0 pe-0 mb-4",
+										},
+										h(
+											"div",
+											{
+												className:
+													"d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0 termin-tc rounded",
+											},
+											h(
+												"span",
+												{ className: "h2 d-block" },
+												event.data.date != null && event.data.date != ""
+													? DateFormat({
+															date: event.data.date,
+															format: { day: "numeric" },
+													  })
+													: null
+											),
+											h(
+												"span",
+												{ className: "d-block" },
+												event.data.date != null && event.data.date != ""
+													? DateFormat({
+															date: event.data.date,
+															format: { month: "short", year: "numeric" },
+													  })
+													: null
+											),
+											event.data.enddate != null && event.data.enddate != ""
+												? [
+														h("br"),
+														"bis " +
+															DateFormat({
+																date: event.data.enddate,
+																format: {
+																	day: "numeric",
+																	month: "short",
+																	year: "numeric",
+																},
+															}),
+												  ]
+												: null
+										),
+										h(
+											"div",
+											{
+												className:
+													"d-md-table-cell px-4 vertical-align-middle mb-4 mb-md-0 p-2",
+											},
+											h("p", { className: "h4 mb-0 d-block" }, event.data.title)
+										),
+										event.data.location
+											? h(
+													"div",
+													{
+														className:
+															"d-md-table-cell text-end pe-md-4 p-2 vertical-align-middle",
+													},
+													h(
+														"p",
+														{},
+														h("i", {
+															className:
+																"mdi mdi-map-marker-radius-outline icon-s text-primary me-2",
+														}),
+														event.data.location
+													)
+											  )
+											: null
+									)
+								)
+							)
+						)
+					)
+				)
+			)
+		),
+	];
+};
+
+export default EventPreview;

static/admin/previews/page-previews/forms-preview.js

@@ -0,0 +1,64 @@
+import { PageHeader } from "./components/index.js";
+
+const FormsPreview = ({ widgetsFor, widgetFor, entry }) => {
+	return [
+		PageHeader(entry),
+		h(
+			"section",
+			{ className: "section-sm" },
+			h(
+				"div",
+				{ className: "container" },
+				h(
+					"div",
+					{ className: "row" },
+					h(
+						"div",
+						{ className: "col-12" },
+						h("h2", { className: "section-title" }, entry.data.title)
+					)
+				),
+				h(
+					"div",
+					{ className: "row" },
+					h(
+						"div",
+						{ className: "col-12 content" },
+						widgetsFor("files").map((file) =>
+							h(
+								"div",
+								{ className: "container mb-0" },
+								h(
+									"div",
+									{
+										className:
+											"card border-primary rounded-0 hover-shadow mb-5",
+									},
+									h(
+										"div",
+										{ className: "card-body mb-0" },
+										h("h4", { className: "card-title" }, file.data.title),
+										h(
+											"a",
+											{
+												className:
+													"text-decoration-none btn btn-primary btn-sm mb-0",
+											},
+											h("i", {
+												className: "mdi mdi-tray-arrow-down mb-0 me-2",
+											}),
+											"Download"
+										)
+									)
+								)
+							)
+						),
+						widgetFor("body")
+					)
+				)
+			)
+		),
+	];
+};
+
+export default FormsPreview;

static/admin/previews/page-previews/ganztag-preview.js

@@ -0,0 +1,127 @@
+import {
+	Col12,
+	Container,
+	PageHeader,
+	Row,
+	Section,
+} from "./components/index.js";
+
+const GanztagPreview = ({
+	widgetFor,
+	widgetsFor,
+	entry,
+	fields,
+	collection,
+}) => {
+	const imageField = useMemo(() => {
+		return fields.find((field) => field.name === "image");
+	}, [fields]);
+
+	const imageUrl = useMediaAsset(
+		entry.data.image,
+		collection,
+		imageField,
+		entry
+	);
+	return [
+		PageHeader(entry),
+		Section(
+			Container([
+				Row(
+					h(
+						"div",
+						{ className: "col-12 mb-4" },
+						h("img", { className: "img-fluid w-100", src: imageUrl })
+					)
+				),
+				h("h2", {}, entry.data.title),
+				h(
+					"div",
+					{ className: "row align-items-center mb-4" },
+					Col12(
+						Row([
+							h(
+								"div",
+								{ className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
+								h(
+									"div",
+									{ className: "d-flex align-items-center" },
+									h("i", {
+										className:
+											"mdi mdi-calendar-today-outline text-primary icon-md me-2",
+									}),
+									h(
+										"div",
+										{ className: "text-start" },
+										h("h6", { className: "mb-0" }, "ZEIT"),
+										h("p", { className: "mb-0" }, entry.data.schedule)
+									)
+								)
+							),
+							h(
+								"div",
+								{ className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
+								h(
+									"div",
+									{ className: "d-flex align-items-center" },
+									h("i", {
+										className: "mdi mdi-timer-sand text-primary icon-md me-2",
+									}),
+									h(
+										"div",
+										{ className: "text-start" },
+										h("h6", { className: "mb-0" }, "DAUER"),
+										h("p", { className: "mb-0" }, entry.data.duration)
+									)
+								)
+							),
+							h(
+								"div",
+								{ className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
+								h(
+									"div",
+									{ className: "d-flex align-items-center" },
+									h("i", {
+										className: "mdi mdi-crowd text-primary icon-md me-2",
+									}),
+									h(
+										"div",
+										{ className: "text-start" },
+										h("h6", { className: "mb-0" }, "KLASSE(N)"),
+										h("p", { className: "mb-0" }, entry.data.class)
+									)
+								)
+							),
+							h(
+								"div",
+								{ className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
+								h(
+									"div",
+									{ className: "d-flex align-items-center" },
+									h("i", {
+										className:
+											"mdi mdi-map-marker-radius-outline text-primary icon-md me-2",
+									}),
+									h(
+										"div",
+										{ className: "text-start" },
+										h("h6", { className: "mb-0" }, "RAUM"),
+										h("p", { className: "mb-0" }, entry.data.room)
+									)
+								)
+							),
+						])
+					),
+					h(
+						"div",
+						{ className: "col-12 mt-4" },
+						h("div", { className: "border-bottom border-primary" })
+					)
+				),
+				Row(h("div", { className: "col-12 content" }, widgetFor("body"))),
+			])
+		),
+	];
+};
+
+export default GanztagPreview;

static/admin/previews/page-previews/header-preview.js

@@ -0,0 +1,5 @@
+import { PageHeader } from "./components/index.js";
+
+const HeaderPreview = ({ entry }) => PageHeader(entry);
+
+export default HeaderPreview;

static/admin/previews/page-previews/index.js

@@ -0,0 +1,40 @@
+import AboutPreview from "./about-preview.js";
+import BlogPreview from "./blog-preview.js";
+import ContestPreview from "./contest-preview.js";
+import GanztagPreview from "./ganztag-preview.js";
+import PagePreview from "./page-preview.js";
+import EventPreview from "./event-preview.js";
+import AnmeldungPreview from "./anmeldung-preview.js";
+import HeaderPreview from "./header-preview.js";
+import ChronikPreview from "./chronik-preview.js";
+import KontaktPreview from "./kontakt-preview.js";
+import AnmeldeformularPreview from "./anmeldeformular-preview.js";
+import ChronikIndexPreview from "./chronik-index-preview.js";
+import AuthorPreview from "./author-preview.js";
+import FormsPreview from "./forms-preview.js";
+import CantorpreisPreview from "./cantorpreis-preview.js";
+import ProjektwochePreview from "./projektwoche-preview.js";
+import AbiturientenPreview from "./abiturienten-preview.js";
+
+import PreviewStyles from "./styles.js";
+
+export {
+	AboutPreview,
+	BlogPreview,
+	ContestPreview,
+	GanztagPreview,
+	PagePreview,
+	EventPreview,
+	AnmeldungPreview,
+	HeaderPreview,
+	ChronikPreview,
+	KontaktPreview,
+	AnmeldeformularPreview,
+	ChronikIndexPreview,
+	AuthorPreview,
+	FormsPreview,
+	CantorpreisPreview,
+	ProjektwochePreview,
+	AbiturientenPreview,
+	PreviewStyles,
+};

static/admin/previews/page-previews/kontakt-preview.js

@@ -0,0 +1,98 @@
+import { PageHeader } from "./components/index.js";
+
+const KontaktPreview = ({ widgetsFor, entry }) => {
+	return [
+		PageHeader(entry),
+		h(
+			"section",
+			{ className: "section-sm bg-gray" },
+			h(
+				"div",
+				{ className: "container" },
+				h(
+					"div",
+					{ className: "row" },
+					h(
+						"div",
+						{ className: "col-lg-6 mb-4 mb-lg-0" },
+						h(
+							"form",
+							{},
+							h("input", {
+								className: "form-control form-control-lg mb-3",
+								type: "text",
+								placeholder: "Ihr Name",
+							}),
+							h("input", {
+								className: "form-control form-control-lg mb-3",
+								type: "text",
+								placeholder: "Ihre E-Mail Adresse",
+							}),
+							h("input", {
+								className: "form-control form-control-lg mb-3",
+								type: "text",
+								placeholder: "Betreff",
+							}),
+							h("textarea", {
+								className: "form-control form-control-lg mb-3",
+								placeholder: "Nachricht",
+							}),
+							h("button", { className: "btn btn-primary" }, "Senden")
+						)
+					),
+					h(
+						"div",
+						{ className: "col-lg-6" },
+						h(
+							"div",
+							{ className: "card" },
+							h("div", { className: "card-header fw-bold" }, "Kontaktdaten"),
+							h(
+								"ul",
+								{ className: "list-group list-group-flush" },
+								widgetsFor("kontaktdaten").map((person) =>
+									h(
+										"li",
+										{ className: "list-group-item" },
+										h("p", { className: "card-title mb-0" }, person.data.name),
+										h(
+											"p",
+											{ className: "text-muted mb-0" },
+											person.data.position
+										),
+										h(
+											"p",
+											{ className: "card-text" },
+											h("i", {
+												className: "mdi mdi-email-multiple-outline me-2",
+											}),
+											person.data.email.replace("@", "(at)")
+										)
+									)
+								),
+								h(
+									"li",
+									{ className: "list-group-item" },
+									h(
+										"p",
+										{ className: "card-text" },
+										h("i", { className: "mdi mdi-phone-outline me-2" }),
+										"Telefon: +49-0345/6903156"
+									),
+									h(
+										"p",
+										{ className: "card-text" },
+										h("i", { className: "mdi mdi-fax me-2" }),
+										"Fax: +49-0345/6903157"
+									)
+								)
+							)
+						)
+					)
+				)
+			)
+		),
+	];
+};
+
+export default KontaktPreview;

static/admin/previews/page-previews/page-preview.js

@@ -0,0 +1,26 @@
+import { PageHeader } from "./components/index.js";
+
+const PagePreview = ({ widgetFor, entry }) => {
+	return [
+		PageHeader(entry),
+		h(
+			"section",
+			{ className: "section-sm" },
+			h(
+				"div",
+				{ className: "container" },
+				h(
+					"div",
+					{ className: "row" },
+					h(
+						"div",
+						{ className: "col-12" },
+						h("div", { className: "content" }, widgetFor("body"))
+					)
+				)
+			)
+		),
+	];
+};
+
+export default PagePreview;

static/admin/previews/page-previews/projektwoche-preview.js

@@ -0,0 +1,55 @@
+import { Container, PageHeader, Row, Section } from "./components/index.js";
+
+const ProjektwochePreview = ({ widgetsFor, widgetFor, entry }) => {
+	return [
+		PageHeader(entry),
+		Section([
+			Container(
+				Row(h("div", { className: "col-12 mb-4 content" }, widgetFor("body")))
+			),
+			Container(
+				Row([
+					widgetsFor("tiles").map((tile) =>
+						h(
+							"div",
+							{ className: "col-lg-4 col-sm-6" },
+							h(
+								"div",
+								{
+									className: "card border-primary rounded-0 hover-shadow mb-4",
+								},
+								h(
+									"div",
+									{
+										className: "container fb-tile-color",
+										style: { backgroundColor: tile.data.bg_color },
+									},
+									h("i", {
+										className: (tile.data.icon ?? "") + " fb-tile-icon",
+										style: { color: tile.data.font_color },
+									})
+								),
+								h(
+									"div",
+									{ className: "card-body" },
+									h(
+										"h4",
+										{ className: "card-title text-truncate" },
+										tile.data.title
+									),
+									h(
+										"button",
+										{ type: "button", className: "btn btn-primary btn-sm" },
+										"Mehr anzeigen"
+									)
+								)
+							)
+						)
+					),
+				])
+			),
+		]),
+	];
+};
+
+export default ProjektwochePreview;

static/admin/previews/page-previews/styles.js

@@ -0,0 +1,8 @@
+const PreviewStyles = [
+	"https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css",
+	"https://assets.cantorgymnasium.de/fonts/fira/fira.css",
+	"https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css",
+	"https://cantorgymnasium.de/scss/style.css",
+];
+
+export default PreviewStyles;