<!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"> <title>Static CMS</title> </head> <body> <style> body { font-family: sans-serif; } .icon-md { font-size: 25px; } </style> <script src="https://cdn.jsdelivr.net/npm/@staticcms/app@^1.2.7/dist/static-cms-app.js"></script> <!--script src="https://cantorgymnasium.de/plugins/wordcloud/wordcloud2.min.js"></script--> <script id="cms-init"> CMS.init(); </script> <script id="icons"> var icons = [['settings', 'mdi mdi-cog-outline'], ['user', 'mdi mdi-fountain-pen-tip'], ['page', 'mdi mdi-file-document-outline'], ['page-add', 'mdi mdi-file-document-plus-outline'], ['document', 'mdi mdi-file-document-multiple-outline'], ['news', 'mdi mdi-newspaper'], ['award', 'mdi mdi-seal-variant'], ['group', 'mdi mdi-crowd'], ['trophy', 'mdi mdi-trophy-outline'], ['pi', 'mdi mdi-pi-box'], ['pillar', 'mdi mdi-pillar'], ['graduation-cap', 'mdi mdi-school-outline'], ['help', 'mdi mdi-lifebuoy'], ['dash', 'mdi mdi-monitor-dashboard'], ['presentation', 'mdi mdi-presentation'], ['projektwoche', 'mdi mdi-calendar-range-outline']]; icons.forEach(icon => { CMS.registerIcon(icon[0], ({}) => { return(h('i', {className: icon[1] + " icon-md"})); }); }); </script> <script id="status-seite"> const StatusPage = () => { return h("iframe", {src: "https://grafana.cantorgymnasium.de/d/ni-7T-J4z/status?orgId=2&refresh=5s&kiosk", width: "100%", height: "100%"}); }; </script> <script id="links"> CMS.registerAdditionalLink({ id: 'status', title: 'Status', data: StatusPage, options: { icon: 'dash', }, }); CMS.registerAdditionalLink({ id: 'wiki', title: 'GCG.Wiki', data: 'https://wiki.cantorgymnasium.de', options: { icon: 'help', }, }); </script> <script> CMS.registerShortcode('gallery', { label: 'Bildergallerie', openTag: '{{< ', closeTag: ' >}}', separator: ' ', toProps: args => { if (args.length > 0) { var dir = args.find(arg => arg.startsWith('dir='))?.split('=')[1].replaceAll("\"","") ?? ''; return { dir: dir }; } return { dir: '' }; }, toArgs: ({ dir }) => { return [`dir=\"${dir}\"`]; }, control: ({ dir, onChange }) => { return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }}, h('b', {style: {width: "30%", fontFamily: "sans-serif", margin: "10px"}}, "Gallerie-Ordner: "), h('input', { key: 'control-input', value: dir, style: { border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "80%" }, onChange: event => { onChange({ dir: event.target.value }); }, })); }, preview: ({ dir }) => { return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "8px", padding: "10px", marginBottom: "5px" }}, h('b', {style: { marginRight: "5px" }}, "Gallerie-Ordner:"), h('code', {}, dir)); }, }); CMS.registerShortcode('figure', { label: 'Bild', openTag: '{{< ', closeTag: ' >}}', separator: ' ', toProps: args => { if (args.length > 0) { var src = args.find(arg => arg.startsWith('src='))?.split('=')[1].replaceAll("\"","") ?? ''; return { src }; } return { dir: '' }; }, toArgs: ({ src }) => { return [`src=\"${src}\"`]; }, control: ({ src, onChange }) => { return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "16px", padding: "10px" }}, h('b', {style: {width: "30%", fontFamily: "sans-serif", margin: "10px"}}, "Bild-Pfad:"), h('input', { key: 'control-input', value: src, style: { border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "80%" }, onChange: event => { onChange({ src: event.target.value }); }, })); }, preview: ({ src }) => { return h('div', {className: "row", style: { border: "1px solid #ccc", borderRadius: "16px", padding: "10px" }}, h('b', {style: { marginRight: "5px" }}, "Gallerie-Ordner:"), h('code', {}, src)); }, }); CMS.registerShortcode('download', { label: 'Download-Karte', openTag: '{{< ', closeTag: ' >}}', separator: ' ', toProps: args => { if (args.length > 0) { var title = ""; var link = ""; var linkIndex = args.findIndex(arg => arg.startsWith('link="')); var titleIndex = args.findIndex(arg => arg.startsWith('title="')); if (titleIndex + 1 < linkIndex) { title += args.find(arg => arg.startsWith('title='))?.split('=')[1].replaceAll("\"","") ?? ''; for (let i = titleIndex + 1; i < linkIndex; i++) { title += " " + args[i].replaceAll("\"","") ; } } else { title = args.find(arg => arg.startsWith('title='))?.split('=')[1].replaceAll("\"","") ?? '' } if (linkIndex + 1 < args.length) { link += args.find(arg => arg.startsWith('link='))?.split('=')[1].replaceAll("\"","") ?? ''; for (let i = linkIndex + 1; i < args.length; i++) { link += " " + args[i].replaceAll("\"",""); } } else { link = args.find(arg => arg.startsWith('link='))?.split('=')[1].replaceAll("\"","") ?? '' } title.trim(); link.trim(); return { title: title, link: link }; } return { title: '', link: '' }; }, toArgs: ({ title, link }) => { return [`title=\"${title}\"`, `link=\"${link}\"`]; }, control: ({ title, link, onChange }) => { return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }}, h('b', {style: {width: "30%", fontFamily: "sans-serif", margin: "10px"}}, "Download-Karte:"), h('input', { key: 'control-input', value: title, style: { border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "35%", marginLeft: "5px", marginRight: "5px" }, onChange: event => { onChange({ title: event.target.value, link: link }); }, }), h('input', { key: 'control-input', value: link, style: { border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "35%", marginLeft: "5px", marginRight: "5px" }, onChange: event => { onChange({ title: title, link: event.target.value }); }, }) ); }, preview: ({ title, link }) => { return 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"}, h('a', {className: "text-decoration-none", href: link}, title), ), h('a', {className: "mb-0 btn btn-primary btn-sm text-decoration-none", href: link}, "Download") )))}, }); CMS.registerShortcode('card', { label: 'Link-Karte', openTag: '{{< ', closeTag: ' >}}', separator: ' ', toProps: args => { if (args.length > 0) { var title = ""; var link = ""; var linkIndex = args.findIndex(arg => arg.startsWith('link="')); var titleIndex = args.findIndex(arg => arg.startsWith('title="')); if (titleIndex + 1 < linkIndex) { title += args.find(arg => arg.startsWith('title='))?.split('=')[1].replaceAll("\"","") ?? ''; for (let i = titleIndex + 1; i < linkIndex; i++) { title += " " + args[i].replaceAll("\"","") ; } } else { title = args.find(arg => arg.startsWith('title='))?.split('=')[1].replaceAll("\"","") ?? '' } if (linkIndex + 1 < args.length) { link += args.find(arg => arg.startsWith('link='))?.split('=')[1].replaceAll("\"","") ?? ''; for (let i = linkIndex + 1; i < args.length; i++) { link += " " + args[i].replaceAll("\"",""); } } else { link = args.find(arg => arg.startsWith('link='))?.split('=')[1].replaceAll("\"","") ?? '' } title.trim(); link.trim(); return { title: title, link: link }; } return { title: '', link: '' }; }, toArgs: ({ title, link }) => { return [`title=\"${title}\"`, `link=\"${link}\"`]; }, control: ({ title, link, onChange }) => { return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }}, h('b', {style: {width: "30%", fontFamily: "sans-serif", margin: "10px"}}, "Link-Karte:"), h('input', { key: 'control-input', value: title, style: { border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "40%", marginLeft: "5px", marginRight: "5px" }, onChange: event => { onChange({ title: event.target.value, link: link }); }, }), h('input', { key: 'control-input', value: link, style: { border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "40%", marginLeft: "5px", marginRight: "5px" }, onChange: event => { onChange({ title: title, link: event.target.value }); }, }) ); }, preview: ({ title, link }) => { return 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"}, h('a', {className: "text-decoration-none", href: link}, title), ), h('a', {className: "mb-0 btn btn-primary btn-sm text-decoration-none", href: link}, "Mehr anzeigen") )))}, }); CMS.registerShortcode('youtube', { label: 'YouTube-Video', openTag: '{{< ', closeTag: ' >}}', separator: ' ', toProps: args => { if (args.length > 0) { return { src: args[0] }; } return { src: '' }; }, toArgs: ({ src }) => { return [src] }, control: ({ src, onChange }) => { return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }}, h('b', {style: {fontFamily: "sans-serif", margin: "10px"}}, "YoutTube-Video:"), h('input', { key: 'control-input', value: src, style: { border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "80%" }, onChange: event => { onChange({ src: event.target.value }); }, }), h('div', {className: "row", style: {"marginTop": "10px"}}, h( 'iframe', { key: 'control-preview', width: '100%', height: '360', src: `https://piped.kavin.rocks/embed/${src}`, style: { borderRadius: "8px" } }, '', ) )); }, preview: ({ src }) => { return h( 'span', {}, h( 'iframe', { width: '420', height: '315', src: `https://piped.kavin.rocks/embed/${src}`, }, '', ), ); }, }); </script> <script id="preview-styles"> CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css"); CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/fonts/fira/fira.css"); CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css"); CMS.registerPreviewStyle("https://cantorgymnasium.de/scss/style.css"); </script> <!--script> var ChronikPreview = ({widgetFor, widgetsFor, entry, document, window }) => { const divStyle = { backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")', }; return h('div', {"id": "sc-root"}, h('section', {className: "page-title-section overlay", style: divStyle}, h('div', {className: "container"}, h('div', {className: "col-md-8"}, h('ul', {className: "list-inline"}, h('li', {className: "list-inline-item h2"}, h('a', {className: "text-primary font-secondary", href: ""}, "Schulchronik")), 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('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') ) ) ) ) ); }; CMS.registerPreviewTemplate("schulchronik", ChronikPreview); </script--> <script> var PostPreviewContent = ({widgetFor, entry}) => { const divStyle = { backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")', }; return h('div', {}, h('section', {className: "page-title-section overlay", style: divStyle}, h('div', {className: "container"}, h('div', {className: "col-md-8"}, h('ul', {className: "list-inline"}, h('li', {className: "list-inline-item h2"}, h('a', {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)))), h('section', {className: "section-sm"}, h('div', {className: "container"}, h('div', {className: "row"}, h('div', {className: "col-12 mb-4"}, h('div', {className: "content"}, widgetFor('body'))))))); }; ["abiturienten", "cantorfora", "contact-index", "pages"].forEach(page => { CMS.registerPreviewTemplate(page, PostPreviewContent); }); </script> <script> var AnmeldungPreviewContent = ({widgetsFor, widgetFor, entry}) => { const divStyle = { backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")', }; return h('div', {}, h('section', {className: "page-title-section overlay", style: divStyle}, h('div', {className: "container"}, h('div', {className: "col-md-8"}, h('ul', {className: "list-inline"}, h('li', {className: "list-inline-item h2"}, h('a', {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)))), h('section', {className: "section-sm"}, h('div', {className: "container"}, h('div', {className: "row mb-5"}, 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-4 col-sm-6 mb-4"}, h('div', {className: "card rounded-0 hover-shadow border-top-0 border-start-0 border-end-0"}, h('div', {className: "card-body"}, h('h4', {className: "card-title mb-3"}, element.data.title), h('div', {className: "content"}, element.widgets.content)))); }))))); }; CMS.registerPreviewTemplate("anmeldung-index", AnmeldungPreviewContent); </script> <script> var EventPreview = ({widgetsFor, entry}) => { const divStyle = { backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")', }; return h('div', {}, h('section', {className: "page-title-section overlay", style: divStyle}, h('div', {className: "row"}, h('div', {className: "container"}, h('div', {className: "col-md-8"}, h('ul', {className: "list-inline"}, h('li', {className: "list-inline-item h2"}, h('a', {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))))), h('section', {className: "section"}, h('div', {className: "container"}, h('div', {className: "row"}, h('div', {className: "col-12 "}, h('ul', {className: "list-unstyled"}, widgetsFor('events').map(function(event, index) { return h('li', {className: "d-md-table mb-4 w-100 border-bottom hover-shadow"}, h('div', {className: "d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0 termin-tc"}, event.data.date != null && event.data.date != "" ? h('span', {className: "h2 d-block"}, Intl.DateTimeFormat('de-De', { day: 'numeric'}).format(new Date(event.data.date))) : "", h('span', {className: "d-block"}, event.data.date != null && event.data.date != "" ? Intl.DateTimeFormat('de-De', { month: 'short', year: 'numeric' }).format(new Date(event.data.date)) : ""), event.data.enddate != null && event.data.enddate != "" ? [h('br'), Intl.DateTimeFormat('de-De', { day: 'numeric', month: 'short', year: 'numeric'}).format(new Date(event.data.date))] : 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 != null && event.data.location != "" ? h('div', {className: "d-md-table-cell text-end pe-0 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); }))))))); }; CMS.registerPreviewTemplate("event-index", EventPreview); </script> <script> var PagePreview = ({widgetFor, entry}) => { const divStyle = { backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")', }; return h('div', {}, h('section', {className: "page-title-section overlay", style: divStyle}, h('div', {className: "row"}, h('div', {className: "container"}, h('div', {className: "col-md-8"}, h('ul', {className: "list-inline"}, h('li', {className: "list-inline-item h2"}, h('a', {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)))))); }; ["blog-index", "cantorpreis-index", "forms-index", "ganztagsangebote-index", "wettbewerbe-index", "begabte-index"].forEach(page => { CMS.registerPreviewTemplate(page, PagePreview); }); </script> <script> var PagePreviewImage = ({ widgetFor, widgetsFor, getAsset, entry }) => { const [imageUrl, setImageUrl] = useState(''); const image = useMemo(() => entry.data.image, [entry.data.image]); useEffect(() => { let alive = true; const loadImage = async () => { const imageAsset = await getAsset(image); if (alive) { setImageUrl(imageAsset.toString()); } }; loadImage(); return () => { alive = false; }; }, [image]); const divStyle = { backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")', }; return h('div', {}, h('section', {className: "page-title-section overlay", style: divStyle}, h('div', {className: "row"}, h('div', {className: "container"}, h('div', {className: "col-md-8"}, h('ul', {className: "list-inline"}, h('li', {className: "list-inline-item h2"}, h('a', {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 )) ) ) ), h('section', {className: "section-sm"}, h('div', {className: "container"}, h('div', {className: "row"}, h('div', {className: "col-12 mb-4"}, h('img', {className: "img-fluid w-100 mb-4", src: imageUrl}), ), h('div', {className: "col-12"}, h('ul', {className: "list-inline"}, h('li', {className: "list-inline-item me-4 mb-3 mb-md-0 text-light"}, h('span', {className: "fw-bold me-2"}, "Geschrieben von:"), entry.data.author ), h('li', { className: "list-inline-item me-4 mb-3 mb-md-0 text-light" }, h('span', { className: "fw-bold me-2"}, "Datum:"), entry.data.date ? Intl.DateTimeFormat('de-De', { day: 'numeric', month: 'short', year: 'numeric'}).format(new Date(entry.data.date)) : "" ), h('li', { className: "list-inline-item me-4 mb-3 mb-md-0 text-light" }, h('span', { className: "fw-bold me-2"}, "Kategorie:"), entry.data.categories != null ? entry.data.categories.map((category, index) => { var text = (index != 0 ? ", " : "") + category; return text; }) : "" ), ) ), h('div', { className: "col-12 my-4"}, h('div', {className: "border-bottom"}) ), h('div', {className: "col-12 mb-5 content"}, widgetFor('body') ) ) ) ) ); }; CMS.registerPreviewTemplate("blog", PagePreviewImage); </script> <script> var GTAPreview = ({ widgetFor, widgetsFor, getAsset, entry }) => { const [imageUrl, setImageUrl] = useState(''); const image = useMemo(() => entry.data.image, [entry.data.image]); useEffect(() => { let alive = true; const loadImage = async () => { const imageAsset = await getAsset(image); if (alive) { setImageUrl(imageAsset.toString()); } }; loadImage(); return () => { alive = false; }; }, [image]); const divStyle = { backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")', }; return h('div', {}, h('section', {className: "page-title-section overlay", style: divStyle}, h('div', {className: "row"}, h('div', {className: "container"}, h('div', {className: "col-md-8"}, h('ul', {className: "list-inline"}, h('li', {className: "list-inline-item h2"}, h('a', {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 )) ) ) ), h('section', {className: "section-sm"}, h('div', {className: "container"}, h('div', {className: "row"}, h('div', {className: "col-12 mb-4"}, h('img', {className: "img-fluid w-100 mb-4", src: imageUrl}), ), ), h('div', {}, h('h2', {}, entry.data.title) ), h('div', {className: "row align-items-center mb-5"}, h('div', {className: "col-xl-8 order-sm-3 order-xl-2 col-12 order-2"}, h('ul', {className: "list-inline"}, h('li', {className: "list-inline-item me-4 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('li', { className: "list-inline-item me-4 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('li', { className: "list-inline-item me-4 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"}, "Klassen(n)"), h('p', {className: "mb-0"}, entry.data.class) ) ) ), h('li', { className: "list-inline-item me-4 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 order-4"}, h('div', {className: "border-bottom border-primary"}) ), ), h('div', {className: "row"}, h('div', {className: "col-12 mb-5 content"}, widgetFor('body') )) ), )); }; CMS.registerPreviewTemplate("ganztagsangebote", GTAPreview); </script> <script> var ContestPreview = ({ widgetFor, widgetsFor, getAsset, entry }) => { const [imageUrl, setImageUrl] = useState(''); const image = useMemo(() => entry.data.image, [entry.data.image]); useEffect(() => { let alive = true; const loadImage = async () => { const imageAsset = await getAsset(image); if (alive) { setImageUrl(imageAsset.toString()); } }; loadImage(); return () => { alive = false; }; }, [image]); const divStyle = { backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")', }; return h('div', {}, h('section', {className: "page-title-section overlay", style: divStyle}, h('div', {className: "row"}, h('div', {className: "container"}, h('div', {className: "col-md-8"}, h('ul', {className: "list-inline"}, h('li', {className: "list-inline-item h2"}, h('a', {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 )) ) ) ), h('section', {className: "section-sm"}, h('div', {className: "container"}, h('div', {className: "row"}, h('div', {className: "col-12 mb-4"}, h('img', {className: "img-fluid w-100 mb-4", src: imageUrl}), ), ), h('div', {}, h('h2', {}, entry.data.title) ), h('div', {className: "row align-items-center mb-5"}, h('div', {className: "col-xl-8 order-sm-2 order-xl-2 col-12 order-2 col-sm-6"}, h('ul', {className: "list-inline"}, h('li', {className: "list-inline-item me-4 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"}, "Klasse(n)"), h('p', {className: "mb-0"}, entry.data.class) ) ) ), ) ), h('div', {className: "col-xl-2 text-start text-xl-end order-sm-3 order-3 order-xl-3 col-sm-6 col-12 mb-4 mb-xl-0"}, h('a', {href: entry.data.web_url, className: "btn btn-primary"}, "Website") ), h('div', { className: "col-12 mt-4 order-4"}, h('div', {className: "border-bottom border-primary"}) ), ), h('div', {className: "row"}, h('div', {className: "col-12 mb-5 content"}, widgetFor('body') )) ), )); }; CMS.registerPreviewTemplate("wettbewerbe", ContestPreview); </script> <script> var AboutPreview = ({ widgetFor, widgetsFor, getAsset, entry}) => { const [imageUrl, setImageUrl] = useState(''); const image = useMemo(() => entry.data.image, [entry.data.image]); useEffect(() => { let alive = true; const loadImage = async () => { const imageAsset = await getAsset(image); if (alive) { setImageUrl(imageAsset.toString()); } }; loadImage(); return () => { alive = false; }; }, [image]); const divStyle = { backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")', }; return h('div', {}, h('section', {className: "page-title-section overlay", style: divStyle}, h('div', {className: "row"}, h('div', {className: "container"}, h('div', {className: "col-md-8"}, h('ul', {className: "list-inline"}, h('li', {className: "list-inline-item h2"}, h('a', {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 )) ) ) ), h('section', {className: "section-sm"}, h('div', {className: "container"}, h('div', {className: "row"}, h('div', {className: "col-12 mb-4"}, 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-3 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 ); }; CMS.registerPreviewTemplate("about-index", AboutPreview); </script> <script> const PostPreviewCard = ({ entry, widgetFor, viewStyle }) => { return h('div', { style: { width: '100%', height: '100%' } }, viewStyle === 'grid' ? widgetFor('image') : null, viewStyle === 'grid' ? h('div', { style: { padding: '16px', paddingBottom: '8px', width: '100%' } }, h('div', { style: { display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'start', }}, h('div', { style: { backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green', color: 'white', border: 'none', padding: '4px 8px', textAlign: 'center', textDecoration: 'none', display: 'inline-block', cursor: 'pointer', borderRadius: '4px', }}, entry.data.draft === true ? 'Entwurf' : 'Öffentlich', ), h('span', { style: { fontSize: '16px' } }, Intl.DateTimeFormat('de-De', { day: 'numeric', month: 'numeric', year: 'numeric'}).format(new Date(entry.data.date))) )) : null, h('div', { style: { padding: '16px', paddingTop: '8px', width: '100%' } }, h('div', { style: { display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'start', }}, h('div', { style: { display: 'flex', flexDirection: viewStyle === 'grid' ? 'column' : 'row', alignItems: 'baseline', gap: '8px', }}, h('strong', { style: { fontSize: '20px' } }, entry.data.title)))), viewStyle != 'grid' ? h('div', { style: { padding: '16px', paddingBottom: '8px', paddingTop: '0px', width: '100%' } }, h('div', { style: { display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'start', }}, h('div', { style: { backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green', color: 'white', border: 'none', padding: '4px 8px', textAlign: 'center', textDecoration: 'none', display: 'inline-block', cursor: 'pointer', borderRadius: '4px' }}, entry.data.draft === true ? 'Entwurf' : 'Öffentlich'), h('span', { style: { fontSize: '16px' } }, Intl.DateTimeFormat('de-De', { day: 'numeric', month: 'numeric', year: 'numeric'}).format(new Date(entry.data.date)))) ) : null, ); }; const GenericCard = ({ entry, widgetFor, viewStyle }) => { return h('div', { style: { width: '100%', height: '100%' } }, viewStyle === 'grid' ? widgetFor('image') : null, viewStyle === 'grid' ? h('div', { style: { padding: '16px', paddingBottom: '8px', width: '100%' } }, h('div', { style: { display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'start', }}, h('div', { style: { backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green', color: 'white', border: 'none', padding: '4px 8px', textAlign: 'center', textDecoration: 'none', display: 'inline-block', cursor: 'pointer', borderRadius: '4px', }}, entry.data.draft === true ? 'Entwurf' : 'Öffentlich', ), h('span', { style: { fontSize: '16px' } }, entry.data.category))) : null, h('div', { style: { padding: '16px', paddingTop: viewStyle === 'grid' ? '8px' : '16px', width: '100%' } }, h('div', { style: { display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'start', }}, h('div', { style: { display: 'flex', flexDirection: viewStyle === 'grid' ? 'column' : 'row', alignItems: 'baseline', gap: '8px', }}, h('strong', { style: { fontSize: '20px' } }, entry.data.title)), viewStyle != 'grid' ? h('div', { style: { backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green', color: 'white', border: 'none', padding: '4px 8px', textAlign: 'center', textDecoration: 'none', display: 'inline-block', cursor: 'pointer', borderRadius: '4px', }}, entry.data.draft === true ? 'Entwurf' : 'Öffentlich') : null))); }; const NoDateCard = ({ entry, widgetFor, viewStyle }) => { return h( 'div', { style: { width: '100%', height: '100%' } }, viewStyle === 'grid' ? widgetFor('image') : null, h( 'div', { style: { padding: '16px', width: '100%' } }, h( 'div', { style: { display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'start', }, }, h( 'div', { style: { display: 'flex', flexDirection: viewStyle === 'grid' ? 'column' : 'row', alignItems: 'baseline', gap: '8px', }, }, h('strong', { style: { fontSize: '20px' } }, entry.data.title), ), h( 'div', { style: { backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green', color: 'white', border: 'none', padding: '4px 8px', textAlign: 'center', textDecoration: 'none', display: 'inline-block', cursor: 'pointer', borderRadius: '4px', }, }, entry.data.draft === true ? 'Entwurf' : 'Öffentlich', ), ), ), ); }; const SmallCard = ({ entry, widgetFor, viewStyle }) => { return h( 'div', { style: { width: '100%', height: '100%' } }, h( 'div', { style: { padding: '16px', width: '100%' } }, h( 'div', { style: { display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'start', }, }, h( 'div', { style: { display: 'flex', flexDirection: viewStyle === 'grid' ? 'column' : 'row', alignItems: 'baseline', gap: '8px', }, }, h('strong', { style: { fontSize: '20px' } }, entry.data.title), ), h( 'div', { style: { backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green', color: 'white', border: 'none', padding: '4px 8px', textAlign: 'center', textDecoration: 'none', display: 'inline-block', cursor: 'pointer', borderRadius: '4px', }, }, entry.data.draft === true ? 'Entwurf' : 'Öffentlich', ), ), ), ); }; ['schulchronik', 'forms', 'pages', 'begabte-index', 'wettbewerbe-index', 'ganztagsangebote-index', 'forms-index', 'event-index', 'contact-index', 'cantorpreis-index', 'anmeldung-index', 'about-index', 'blog-index'].forEach(page => { CMS.registerPreviewCard(page, SmallCard); }); ['ganztagsangebote', 'wettbewerbe', 'begabte'].forEach(page => { CMS.registerPreviewCard(page, GenericCard); }); CMS.registerPreviewCard('blog', PostPreviewCard); CMS.registerPreviewCard('abiturienten', NoDateCard); CMS.registerPreviewCard('cantorfora', NoDateCard); </script> </body> </html>