WIP: CMS rebuild

static/admin/config.yml

@@ -960,7 +960,7 @@ collections:
         name: "previous"
         widget: "object"
         fields:
-          - {label: "Aktiviert", name: "enable", widget: "hidden", default: true}
+          - {label: "Aktiviert", name: "enable", widget: "boolean", default: true}
           - {label: "Titel", name: "title", widget: "string", required: true}
           - {label: "Link", name: "link", widget: "string", required: true}
       - label: "Kacheln"

static/admin/config/collections/abiturienten.js

@@ -0,0 +1,54 @@
+import { MarkdownProps } from "../props.js";
+import { DraftBoolean, Title } from "./widgets.js";
+
+const AbiturientenCollection = {
+    name: "abiturienten",
+    label: "Abiturienten",
+    label_singular: "Abiturjahrgang",
+    description: "Hier kann die Übersicht der Abiturjahrgänge bearbeitet werden. Dieser Bereich wird von der Schulchronik verwaltet.",
+    icon: "graduation-cap",
+    folder: "content/german/abiturienten",
+    filter: {
+        field: "type",
+        value: "abiturienten"
+    },
+    create: true,
+    editor: {
+        preview: true,
+        frame: true
+    },
+    summary_fields: ["title", "draft"],
+    sortable_fields: {
+        fields: ["title"],
+        default: {
+            field: "title",
+            direction: "Descending"
+        }
+    },
+    fields: [
+        Title(false),
+        DraftBoolean,
+        {
+            name: "image",
+            label: "Bild",
+            widget: "image",
+            default: "/media/image.webp",
+            required: false
+        },
+        {
+            name: "type",
+            label: "Typ",
+            widget: "hidden",
+            default: "abiturienten"
+        },
+        {
+            name: "body",
+            label: "Text",
+            widget: "markdown",
+            required: false,
+            ...MarkdownProps
+        }
+    ]
+};
+
+export default AbiturientenCollection;

static/admin/config/collections/cantorfora.js

@@ -0,0 +1,71 @@
+import { MarkdownProps } from "../props.js";
+import { DescriptionText, DraftBoolean, Title } from "./widgets.js";
+
+const CantorforaCollection = {
+    name: "cantorfora",
+    label: "Cantorfora",
+    label_singular: "Cantorforum",
+    description: "Hier kann die Übersicht der Cantorfora bearbeitet werden. Dieser Bereich wird von der Schulchronik verwaltet.",
+    icon: "presentation",
+    folder: "content/german/cantorfora",
+    filter: {
+        field: "type",
+        value: "cantorfora"
+    },
+    create: true,
+    editor: {
+        preview: true,
+        frame: true
+    },
+    view_groups: [
+        {
+            label: "Entwürfe",
+            field: "draft"
+        }
+    ],
+    summary_fields: ["title", "draft", "description"],
+    sortable_fields: {
+        fields: ['index', 'title'],
+        default: {
+            field: "index",
+            direction: "Descending"
+        }
+    },
+    fields: [
+        Title(false),
+        {
+            name: "index",
+            label: "Laufindex",
+            hint: "Nummer des Cantorforums",
+            widget: "number",
+            value_type: "int",
+            min: 1,
+            step: 1,
+            required: true
+        },
+        DraftBoolean,
+        DescriptionText,
+        {
+            name: "image",
+            label: "Titelbild",
+            widget: "image",
+            default: "/media/image.webp",
+            required: true
+        },
+        {
+            name: "type",
+            label: "Typ",
+            widget: "hidden",
+            default: "cantorfora"
+        },
+        {
+            name: "body",
+            label: "Text",
+            widget: "markdown",
+            required: true,
+            ...MarkdownProps
+        }
+    ]
+};
+
+export default CantorforaCollection;

static/admin/config/collections/cantorpreis.js

@@ -0,0 +1,66 @@
+import { MarkdownProps } from "../props.js";
+import { DescriptionText, DraftBoolean } from "./widgets.js";
+
+const CantorpreisCollection = {
+    name: "cantorpreis",
+    label: "Cantorpreisträger",
+    description: "Hier sind alle Cantorpreisträger aufgelistet. Dieser Bereich wird von der Schulchronik verwaltet.",
+    icon: "award",
+    folder: "content/german/cantorpreis",
+    filter: {
+        field: "type",
+        value: "cantorpreis"
+    },
+    sortable_fields: {
+        fields: ['title', 'name'],
+        default: {
+            field: "title",
+            direction: "Descending"
+        }
+    },
+    summary: "{{title}} - {{name}}",
+    create: true,
+    editor: {
+        preview: true,
+        frame: true
+    },
+    summary_fields: ["title", "name", "draft", "body"],
+    fields: [
+        {
+            name: "title",
+            label: "Jahr",
+            widget: "string",
+            required: true
+        },
+        {
+            name: "name",
+            label: "Name",
+            widget: "string",
+            required: true
+        },
+        DraftBoolean,
+        DescriptionText,
+        {
+            name: "image",
+            label: "Bild",
+            widget: "image",
+            default: "/media/image.webp",
+            required: false
+        },
+        {
+            name: "type",
+            label: "Typ",
+            widget: "hidden",
+            default: "cantorpreis"
+        },
+        {
+            name: "body",
+            label: "Text",
+            widget: "markdown",
+            required: false,
+            ...MarkdownProps
+        }
+    ]
+};
+
+export default CantorpreisCollection;

static/admin/config/collections/chronikjahre.js

@@ -0,0 +1,111 @@
+import { MarkdownProps } from "../props.js";
+import { DraftBoolean, EnableBoolean } from "./widgets.js";
+
+const ChronikjahreCollection = {
+    name: "chronikjahre",
+    description: "Hier können die Chronikjahre bearbeitet werden. Dieser Bereich wird von der Schulchronik verwaltet.",
+    icon: "schulchronik",
+    label: "Chronikjahre",
+    label_singular: "Chronikjahr",
+    folder: "content/german/schulchronik",
+    filter: {
+        field: "type",
+        value: "schulchronik"
+    },
+    create: true,
+    editor: {
+        preview: false
+    },
+    summary_fields: ["title", "draft", "cantorpreisträger", "topics"],
+    sortable_fields: {
+        fields: ['title'],
+        default: {
+            field: "title",
+            direction: "Descending"
+        }
+    },
+    fields: [
+        {
+            name: "title",
+            label: "Jahr",
+            widget: "string"
+        },
+        DraftBoolean,
+        {
+            name: "type",
+            label: "Typ",
+            widget: "hidden",
+            default: "schulchronik"
+        },
+        {
+            name: "pretext",
+            label: "Einleitung",
+            hint: "Text für die Jahreszahl",
+            widget: "markdown",
+            required: false,
+            ...MarkdownProps
+        },
+        {
+            name: "topics",
+            label: "Kreative Haufen",
+            label_singular: "Haufen",
+            widget: "list",
+            required: false,
+            collapsed: true,
+            fields: [
+                {
+                    name: "title",
+                    label: "Titel",
+                    widget: "string",
+                    required: true,
+                },
+                {
+                    name: "content",
+                    label: "Inhalt",
+                    widget: "markdown",
+                    required: false,
+                    ...MarkdownProps
+                },
+                {
+                    name: "superhaufen",
+                    label: "Superhaufen",
+                    widget: "object",
+                    required: false,
+                    fields: [
+                        EnableBoolean,
+                        {
+                            name: "link",
+                            label: "Superhaufen",
+                            widget: "relation",
+                            collection: "superhaufen",
+                            search_fields: ["title"],
+                            value_field: "title",
+                            required: false,
+                            collapsed: true
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            name: "cantorpreisträger",
+            label: "Cantorpreisträger",
+            widget: "relation",
+            collection: "cantorpreis",
+            search_fields: ["jahr", "name"],
+            value_field: "name",
+            required: false
+        },
+        {
+            name: "body",
+            label: "Text",
+            hint: "Erscheint zusätzlich zu den Kreativen Haufen",
+            widget: "markdown",
+            required: false,
+            ...MarkdownProps
+        }
+
+    ]
+}
+
+export default ChronikjahreCollection;

static/admin/config/collections/index.js

@@ -0,0 +1,8 @@
+import SettingsCollection from "./settings-collection.js";
+import ChronikjahreCollection from "./chronikjahre.js";
+import SuperhaufenCollection from "./superhaufen.js";
+import CantorpreisCollection from "./cantorpreis.js";
+import AbiturientenCollection from "./abiturienten.js";
+import CantorforaCollection from "./cantorfora.js";
+
+export { SettingsCollection, ChronikjahreCollection, SuperhaufenCollection, CantorpreisCollection, AbiturientenCollection, CantorforaCollection };

static/admin/config/collections/settings-collection.js

@@ -0,0 +1,135 @@
+import { DateFormat, MarkdownProps } from "../props.js";
+import { EnableBoolean, Title } from "./widgets.js";
+
+const SettingsCollection = {
+    name: "settings",
+    label: "Einstellungen",
+    icon: "settings",
+    description: "Hier können die Basiseinstellungen der Website geändert werden. Die meisten Bereiche müssen nur in Ausnahmefällen angepasst werden.",
+    editor: {
+        preview: false
+    },
+    files: [
+        {
+            name: "data-homepage",
+            label: "Startseiteneinstellungen",
+            file: "data/de/homepage.yml",
+            fields: [
+                {
+                    name: "top_banner",
+                    label: "Banner",
+                    widget: "object",
+                    collapsed: true,
+                    summary: "{{fields.enable | ternary('aktiv', 'inaktiv')}}",
+                    fields: [
+                        EnableBoolean,
+                        {
+                            name: "text",
+                            label: "Text",
+                            widget: "markdown",
+                            required: false,
+                            ...MarkdownProps
+                        },
+                        {
+                            name: "color",
+                            label: "Farbe",
+                            widget: "color",
+                            required: false
+                        },
+                        {
+                            name: "font_color",
+                            label: "Schriftfarbe",
+                            widget: "color",
+                            required: false
+                        },
+                        {
+                            name: "icon",
+                            label: "Symbol",
+                            widget: "string",
+                            required: false,
+                            hint: "Liste unter https://assets.cantorgymnasium.de/fonts/mdi/v7/preview.html"
+                        },
+                        {
+                            name: "temporarily",
+                            label: "Zeitschaltung",
+                            widget: "object",
+                            fields: [
+                                EnableBoolean,
+                                {
+                                    name: "start_date",
+                                    label: "Startdatum",
+                                    widget: "datetime",
+                                    ...DateFormat,
+                                    required: false,
+                                },
+                                {
+                                    name: "end_date",
+                                    label: "Enddatum",
+                                    widget: "datetime",
+                                    ...DateFormat,
+                                    required: false,
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: "slider",
+                    label: "Karusell",
+                    widget: "object",
+                    collapsed: true,
+                    summary: "{{fields.enable | ternary('aktiv', 'inaktiv')}}",
+                    fields: [
+                        EnableBoolean,
+                        {
+                            name: "bg_image",
+                            label: "Hintergrundbild",
+                            widget: "image",
+                            required: false,
+                        },
+                        Title(true),
+                        {
+                            name: "slider_item",
+                            label: "Elemente",
+                            label_singular: "Element",
+                            widget: "list",
+                            collapsed: true,
+                            fields: [
+                                {
+                                    name: "content",
+                                    label: "Text",
+                                    widget: "string",
+                                    required: false
+                                },
+                                {
+                                    name: "button",
+                                    label: "Button",
+                                    widget: "object",
+                                    required: false,
+                                    collapsed: true,
+                                    fields: [
+                                        EnableBoolean,
+                                        {
+                                            name: "label",
+                                            label: "Aufschrift",
+                                            widget: "string",
+                                            required: false
+                                        },
+                                        {
+                                            name: "link",
+                                            label: "Link",
+                                            widget: "string",
+                                            required: false
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+};
+
+export default SettingsCollection;

static/admin/config/collections/superhaufen.js

@@ -0,0 +1,101 @@
+import { MarkdownProps } from "../props.js";
+import { DraftBoolean, EnableBoolean, Title } from "./widgets.js";
+
+const SuperhaufenCollection = {
+    name: "superhaufen",
+    label: "Superhaufen",
+    description: "\"Superhaufen\" sind ein besonderer Bereich der Schulchronik, um besonders ausführliche Ereignisse darzustellen. Dieser Bereich wird von der Schulchronik verwaltet.",
+    icon: "superhaufen",
+    folder: "content/german/superhaufen",
+    filter: {
+        field: "type",
+        value: "superhaufen"
+    },
+    create: true,
+    editor: {
+        preview: true,
+        frame: true,
+    },
+    summary_fields: ["title", "draft", "tiles"],
+    fields: [
+        Title(false),
+        DraftBoolean,
+        {
+            name: "type",
+            label: "Typ",
+            widget: "hidden",
+            default: "superhaufen"
+        },
+        {
+            name: "previous",
+            label: "Rückverlinkung",
+            widget: "object",
+            collapsed: true,
+            fields: [
+                EnableBoolean,
+                Title(false),
+                {
+                    name: "link",
+                    label: "Link",
+                    widget: "string",
+                    required: true
+                }
+            ]
+        },
+        {
+            name: "tiles",
+            label: "Kacheln",
+            hint: "Die Vorschau zeigt nur die generierten Symbolkarten, NICHT die Inhalte.",
+            widget: "list",
+            required: false,
+            collapsed: true,
+            fields: [
+                Title(false),
+                {
+                    name: "bg_color",
+                    label: "Hintergrundfarbe",
+                    widget: "color",
+                    required: true,
+                },
+                {
+                    name: "icon",
+                    label: "Symbol",
+                    widget: "string",
+                    required: true,
+                },
+                {
+                    name: "font_color",
+                    label: "Symbolfarbe",
+                    widget: "color",
+                    required: true,
+                },
+                {
+                    name: "content",
+                    label: "Inhalt",
+                    widget: "markdown",
+                    required: true,
+                    ...MarkdownProps
+                },
+                {
+                    name: "unterhaufen",
+                    label: "Unterhaufen",
+                    widget: "list",
+                    required: false,
+                    collapsed: true,
+                    fields: [
+                        Title(false),
+                        {
+                            name: "content",
+                            label: "Inhalt",
+                            widget: "markdown",
+                            required: true,
+                            ...MarkdownProps
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}
+
+export default SuperhaufenCollection;

static/admin/config/collections/widgets.js

@@ -0,0 +1,30 @@
+const EnableBoolean = {
+    name: "enable",
+    label: "Aktivieren",
+    widget: "boolean",
+    required: false
+};
+
+const DraftBoolean = {
+    name: "draft",
+    label: "Entwurf",
+    widget: "boolean",
+    default: false,
+    required: false
+}
+
+const Title = (optional = false) => ({
+    name: "title",
+    label: "Titel",
+    widget: "string",
+    required: !optional
+});
+
+const DescriptionText = {
+    name: "description",
+    label: "Beschreibung",
+    widget: "text",
+    required: false
+};
+
+export { EnableBoolean, DraftBoolean, Title, DescriptionText };

static/admin/config/index.js

@@ -0,0 +1,37 @@
+import { SettingsCollection } from "./collections/index.js";
+
+const config = {
+    backend: {
+        name: "gitea",
+        repo: "gcg/gcg-website",
+        branch: "master",
+        api_root: "https://git.cantorgymnasium.de/api/v1",
+        base_url: "https://oauth.cantorgymnasium.de",
+        commit_messages: {
+            create: "{{collection}} {{slug}} erstellt",
+            update: "{{collection}} {{slug}} aktualisiert",
+            delete: "{{collection}} {{slug}} gelöscht",
+            updateMedia: "{{path}} hochgeladen",
+            deleteMedia: "{{path}} gelöscht"
+        }
+    },
+    local_backend: true,
+    media_folder: "/static/media",
+    public_folder: "/media",
+    media_library: {
+        max_file_size: 10240000,
+        folder_support: true
+    },
+    site_url: "https://cantorgymnasium.de",
+    locale: "de",
+    slug: {
+        encoding: "ascii",
+        clean_accents: true,
+        sanitize_replacement: "-"
+    },
+    collections: [
+        SettingsCollection
+    ]
+};
+
+export default config;

static/admin/config/props.js

@@ -0,0 +1,56 @@
+const MarkdownProps = {
+    toolbar_buttons: {
+        main: [
+            'bold',
+            'italic',
+            'strikethrough',
+            'code',
+            'font',
+            'unordered-list',
+            'ordered-list',
+            'decrease-indent',
+            'increase-indent',
+            'insert-table',
+            'blockquote',
+            'file-link',
+            'code-block',
+            'shortcode',
+          ],
+          empty: [],
+          selection: ['bold', 'italic', 'strikethrough', 'code', 'font', 'file-link', 'blockquote'],
+          table_empty: [
+            'bold',
+            'italic',
+            'strikethrough',
+            'code',
+            'insert-row',
+            'delete-row',
+            'insert-column',
+            'delete-column',
+            'delete-table',
+            'file-link',
+            'shortcode',
+          ],
+          table_selection: [
+            'bold',
+            'italic',
+            'strikethrough',
+            'code',
+            'insert-row',
+            'delete-row',
+            'insert-column',
+            'delete-column',
+            'delete-table',
+            'file-link',
+            'shortcode',
+          ]
+    }
+};
+
+const DateFormat = {
+    date_format: "dd.MM.yyyy",
+    time_format: false,
+    format: "yyyy-MM-dd'T'HH:mm:ss.SSSXXX"
+};
+
+export { MarkdownProps, DateFormat };

static/admin/config/schulchronik.js

@@ -0,0 +1,42 @@
+import { AbiturientenCollection, CantorforaCollection, CantorpreisCollection, ChronikjahreCollection, SuperhaufenCollection } from "./collections/index.js";
+
+
+const config = {
+    backend: {
+        name: "gitea",
+        repo: "gcg/gcg-website",
+        branch: "master",
+        api_root: "https://git.cantorgymnasium.de/api/v1",
+        base_url: "https://oauth.cantorgymnasium.de",
+        commit_messages: {
+            create: "{{collection}} {{slug}} erstellt",
+            update: "{{collection}} {{slug}} aktualisiert",
+            delete: "{{collection}} {{slug}} gelöscht",
+            updateMedia: "{{path}} hochgeladen",
+            deleteMedia: "{{path}} gelöscht"
+        }
+    },
+    local_backend: true,
+    media_folder: "/static/media",
+    public_folder: "/media",
+    media_library: {
+        max_file_size: 10240000,
+        folder_support: true
+    },
+    site_url: "https://cantorgymnasium.de/schulchronik/",
+    locale: "de",
+    slug: {
+        encoding: "ascii",
+        clean_accents: true,
+        sanitize_replacement: "-"
+    },
+    collections: [
+        ChronikjahreCollection,
+        SuperhaufenCollection,
+        CantorpreisCollection,
+        AbiturientenCollection,
+        CantorforaCollection
+    ]
+};
+
+export default config;

static/admin/icons.js

@@ -9,7 +9,7 @@ const IconNames = {
     group: "mdi mdi-crowd",
     trophy: "mdi mdi-trophy-outline",
     pi: "mdi mdi-pi-box",
-    pillar: "mdi mdi-pillar",
+    schulchronik: "mdi mdi-pillar",
     "graduation-cap": "mdi mdi-school-outline",
     help: "mdi mdi-lifebuoy",
     dash: "mdi mdi-monitor-dashboard",

static/admin/index.html

@@ -10,6 +10,7 @@
   <body>
     <script src="https://cdn.jsdelivr.net/npm/@staticcms/app@^2.0.0/dist/static-cms-app.js"></script>
     <script type="module">
+      import config from "./config/index.js";
       // imports
       import {
         AboutPreview,
@@ -61,7 +62,7 @@
       CMS.registerPreviewTemplate("contact-index", KontaktPreview);
       CMS.registerPreviewTemplate("event-index", EventPreview);
       CMS.registerPreviewTemplate("anmeldung-index", AnmeldungPreview);
-      CMS.registerPreviewTemplate("schulchronik", ChronikPreview);
+      CMS.registerPreviewTemplate("chronikjahre", ChronikPreview);
       CMS.registerPreviewTemplate("anmeldeformular", AnmeldeformularPreview);
       CMS.registerPreviewTemplate("schulchronik-index", ChronikIndexPreview);
       CMS.registerPreviewTemplate("author", AuthorPreview);
@@ -119,7 +120,7 @@
       CMS.registerFieldPreview("author", "active", BooleanPreview);
       CMS.registerFieldPreview("author", "simplified", BooleanPreview);
       CMS.registerFieldPreview("blog", "date", DatePreview);
-      CMS.registerFieldPreview("schulchronik", "topics", CountPreview);
+      CMS.registerFieldPreview("chronikjahre", "topics", CountPreview);
       ["projektwoche", "superhaufen"].forEach((collection) =>
         CMS.registerFieldPreview(collection, "tiles", CountPreview)
       );
@@ -132,7 +133,7 @@
         "wettbewerbe",
         "begabte",
         "projektwoche",
-        "schulchronik",
+        "chronikjahre",
         "abiturienten",
         "superhaufen",
         "cantorfora",

static/schulchronik/admin/config.yml

@@ -209,7 +209,7 @@ collections:
               - {label: "Titel", name: "title", widget: "string", required: false}
               - {label: "Inhalt", name: "content", widget: "markdown", required: true}
   - name: "schulchronik"
-    icon: "pillar"
+    icon: "schulchronik"
     label: "Schulchronik"
     label_singular: "Chronikjahr"
     folder: "content/german/schulchronik"

static/schulchronik/admin/index.html

@@ -4,571 +4,109 @@
     <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@^2.0.0/dist/main.css" />
     <title>Chronikverwaltung</title>
   </head>
   <body>
-    <style>
+    <script src="https://cdn.jsdelivr.net/npm/@staticcms/app@^2.0.0/dist/static-cms-app.js"></script>
-      body {
+    <script type="module">
-        font-family: sans-serif;
+      import config from "../../admin/config/schulchronik.js";
-      }
+      // imports
-      .icon-md {
+      import {
-        font-size: 25px;
+        PagePreview,
-      }
+        HeaderPreview,
-    </style>
+        ChronikPreview,
-    <script src="https://cdn.jsdelivr.net/npm/@staticcms/app@^1.2.7/dist/static-cms-app.js"></script>
+        ChronikIndexPreview,
-    <!--script src="https://cantorgymnasium.de/plugins/wordcloud/wordcloud2.min.js"></script-->
+        CantorpreisPreview,
-    <script id="cms-init">
+        AbiturientenPreview,
-      CMS.init();
+        ProjektwochePreview,
-    </script>
+        PreviewStyles,
-    <script id="icons">
+      } from "../../admin/previews/page-previews/index.js";
-      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'], ['superhaufen', 'mdi mdi-view-dashboard'], ['stats', 'mdi mdi-chart-bar']];
+      import {
-      icons.forEach(icon => {
+        BooleanPreview,
-        CMS.registerIcon(icon[0], ({}) => { return(h('i', {className: icon[1] + " icon-md"})); });
+        DraftPreview,
-      });
+        CountPreview,
-    </script>
+        BodyPreview,
-    <script id="links">
+        DatePreview,
-      CMS.registerAdditionalLink({
+      } from "../../admin/previews/field-previews/index.js";
-        id: 'wiki',
+      import {
-        title: 'GCG.Wiki',
+        GalleryShortcode,
-        data: 'https://wiki.cantorgymnasium.de',
+        ImageShortcode,
-        options: {
+        DownloadShortcode,
-          icon: 'help',
+        CardShortcode,
-        },
+        YoutubeShortcode,
-      });
+        AudioShortcode,
-    </script>
+        SliderShortcode,
-    <script>   
+      } from "../../admin/shortcodes/index.js";
-      CMS.registerShortcode('gallery', {
+      import { WikiLink } from "../../admin/links/index.js";
-        label: 'Bildergallerie',
+      import Icons from "../../admin/icons.js";
-        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: '' };
+      // cms initialization
-        },
+      CMS.init({ config });
-        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: '' };
+      // preview templates
-        },
+      CMS.registerPreviewTemplate("chronikjahre", ChronikPreview);
-        toArgs: ({ title, link }) => {
+      CMS.registerPreviewTemplate("schulchronik-index", ChronikIndexPreview);
-          return [`title=\"${title}\"`, `link=\"${link}\"`];
+      CMS.registerPreviewTemplate("cantorpreis", CantorpreisPreview);
-        },
+      CMS.registerPreviewTemplate("superhaufen", ProjektwochePreview);
-        control: ({ title, link, onChange }) => {
+      ["abiturienten", "cantorfora"].forEach((page) =>
-          return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }},
+        CMS.registerPreviewTemplate(page, AbiturientenPreview)
-          h('b', {style: {width: "30%", fontFamily: "sans-serif", margin: "10px"}}, "Link-Karte:"),
+      );
-          h('input', {
+      [
-            key: 'control-input',
+        "cantorpreis-index",
-            value: title,
+        "abiturienten-index",
-            style: {
+      ].forEach((page) => CMS.registerPreviewTemplate(page, HeaderPreview));
-              border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "40%", marginLeft: "5px", marginRight: "5px"
+      [
-            },
+        "abiturienten",
-            onChange: event => {
+        "cantorfora-index",
-              onChange({ title: event.target.value, link: link });
+        "schulchronik-index",
-            },
+        "chronikseiten",
-          }),
+      ].forEach((page) => CMS.registerPreviewTemplate(page, PagePreview));
-          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);
+      PreviewStyles.forEach((url) => {
+        CMS.registerPreviewStyle(url);
+      });
 
-    </script-->
+      //shortcodes
-    <script>
+      CMS.registerShortcode("gallery", GalleryShortcode);
-      var PostPreviewContent = ({widgetFor, entry}) => {
+      CMS.registerShortcode("image", ImageShortcode);
-        const divStyle = {
+      CMS.registerShortcode("download", DownloadShortcode);
-          backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")',
+      CMS.registerShortcode("card", CardShortcode);
-        };
+      CMS.registerShortcode("youtube", YoutubeShortcode);
-        return h('div', {},
+      CMS.registerShortcode("audio", AudioShortcode);
-                  h('section', {className: "page-title-section overlay", style: divStyle},
+      CMS.registerShortcode("slider", SliderShortcode);
-                    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", "chronikseiten"].forEach(page => {
-        CMS.registerPreviewTemplate(page, PostPreviewContent);
-      });
-    </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))))));
-      };
 
-      ["cantorpreis-index"].forEach(page => {
+      // links
-        CMS.registerPreviewTemplate(page, PagePreview);
+      CMS.registerAdditionalLink(WikiLink);
-      });
+
-    </script>
+      // icons
-    <script>   
+      Icons.forEach((i) => CMS.registerIcon(i.name, i.icon));
-      const NoDateCard = ({ entry, widgetFor, viewStyle }) => {
+
-        return h(
+      // field previews
-          'div',
+
-          { style: { width: '100%', height: '100%' } },
+      CMS.registerFieldPreview("chronikjahre", "topics", CountPreview);
-          viewStyle === 'grid' ? widgetFor('image') : null,
+      CMS.registerFieldPreview("superhaufen", "tiles", CountPreview);
-          h(
+      [
-            'div',
+        "cantorpreis",
-            { style: { padding: '16px', width: '100%' } },
+        "chronikjahre",
-            h(
+        "abiturienten",
-              'div',
+        "superhaufen",
-              {
+        "cantorfora",
-                style: {
+        "chronikseiten",
-                  display: 'flex',
+      ].forEach((collection) =>
-                  width: '100%',
+        CMS.registerFieldPreview(collection, "draft", DraftPreview)
-                  justifyContent: 'space-between',
+      );
-                  alignItems: 'start',
+      ["chronikseiten", "cantorpreis"].forEach(
-                },
+        (collection) => CMS.registerFieldPreview(collection, "body", BodyPreview)
-              },
+      );
-              h(
+      [
-                'div',
+        "cantorpreis-index",
-                {
+        "abiturienten-index",
-                  style: {
+        "cantorfora",
-                    display: 'flex',
+      ].forEach((collection) =>
-                    flexDirection: viewStyle === 'grid' ? 'column' : 'row',
+        CMS.registerFieldPreview(collection, "description", BodyPreview)
-                    alignItems: 'baseline',
+      );
-                    gap: '8px',
+      CMS.registerFieldPreview("chronikseiten", "title", BodyPreview);
-                  },
-                },
-                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', 'chronikseiten', 'cantorpreis-index'].forEach(page => {
-        CMS.registerPreviewCard(page, SmallCard);
-      });
-      
-      CMS.registerPreviewCard('abiturienten', NoDateCard);
-      CMS.registerPreviewCard('cantorfora', NoDateCard);
     </script>
   </body>
 </html>