Static CMS v4 (#252)

Reviewed-on: #252

static/admin/config/collections/abiturienten.js

@@ -1,4 +1,4 @@
-import { MarkdownProps } from "../props.js";
+import { EditorProps, MarkdownProps, ImageProps } from "../props.js";
 import { DraftBoolean, Title } from "./widgets.js";
 
 const AbiturientenCollection = {
@@ -13,12 +13,7 @@ const AbiturientenCollection = {
     field: "type",
     value: "abiturienten",
   },
-  create: true,
+  ...EditorProps,
-  editor: {
-    preview: true,
-    frame: true,
-    size: "half",
-  },
   summary_fields: ["title", "draft"],
   sortable_fields: {
     fields: ["title"],
@@ -33,9 +28,8 @@ const AbiturientenCollection = {
     {
       name: "image",
       label: "Bild",
-      widget: "image",
       default: "/media/image.webp",
-      required: false,
+      ...ImageProps,
     },
     {
       name: "type",
@@ -46,7 +40,6 @@ const AbiturientenCollection = {
     {
       name: "body",
       label: "Text",
-      widget: "markdown",
       required: false,
       ...MarkdownProps,
     },

static/admin/config/collections/author.js

@@ -1,4 +1,4 @@
-import { MarkdownProps, PatternEmail } from "../props.js";
+import { EditorProps, MarkdownProps, PatternEmail, ImageProps } from "../props.js";
 import { DescriptionText } from "./widgets.js";
 
 const AuthorCollection = {
@@ -9,48 +9,54 @@ const AuthorCollection = {
     "Autoren können einem Blogartikel zugewiesen werden. Wir unterscheiden in aktive und inaktive sowie vereinfachte Autoren, welche nur mit dem Namen angezeigt werden, und erweiterte Autoren, für die eine Übersichtsseite angelegt wird.",
   icon: "user",
   folder: "content/author",
-  create: true,
+  ...EditorProps,
-  editor: {
-    preview: true,
-    frame: true,
-    size: "half",
-  },
   filter: {
     field: "type",
     value: "author",
   },
-  view_filters: [
+  view_filters: {
-    {
+    filters: [
-      label: "aktiv",
+      {
-      field: "active",
+        name: "active",
-      pattern: true,
+        label: "aktiv",
-    },
+        field: "active",
-    {
+        pattern: true,
-      label: "inaktiv",
+      },
-      field: "active",
+      {
-      pattern: false,
+        name: "inactive",
-    },
+        label: "inaktiv",
-    {
+        field: "active",
-      label: "einfach",
+        pattern: false,
-      field: "simplified",
+      },
-      pattern: true,
+      {
-    },
+        name: "simplified",
-    {
+        label: "einfach",
-      label: "erweitert",
+        field: "simplified",
-      field: "simplified",
+        pattern: true,
-      pattern: false,
+      },
-    },
+      {
-  ],
+        name: "extended",
-  view_groups: [
+        label: "erweitert",
-    {
+        field: "simplified",
-      label: "vereinfacht",
+        pattern: false,
-      field: "simplified",
+      },
-    },
+    ],
-    {
+  },
-      label: "aktiv",
+  view_groups: {
-      field: "active",
+    default: "active",
-    },
+    groups: [
-  ],
+      {
+        name: "simplified",
+        label: "vereinfacht",
+        field: "simplified",
+      },
+      {
+        name: "active",
+        label: "aktiv",
+        field: "active",
+      },
+    ],
+  },
   summary_fields: ["title", "active", "simplified", "body"],
   fields: [
     {
@@ -70,9 +76,8 @@ const AuthorCollection = {
     {
       name: "image",
       label: "Bild",
-      widget: "image",
-      required: false,
       default: "/media/people/gcg.webp",
+      ...ImageProps,
     },
     {
       name: "simplified",
@@ -96,7 +101,6 @@ const AuthorCollection = {
     {
       name: "body",
       label: "Beschreibung",
-      widget: "markdown",
       required: false,
       ...MarkdownProps,
     },

static/admin/config/collections/begabte.js

@@ -1,4 +1,4 @@
-import { MarkdownProps } from "../props.js";
+import { EditorProps, MarkdownProps, ImageProps } from "../props.js";
 import { DescriptionText, DraftBoolean, Title } from "./widgets.js";
 
 const BegabteCollection = {
@@ -9,12 +9,7 @@ const BegabteCollection = {
     "Hier kann die Übersicht der Begabtenförderungsangebote bearbeitet werden.",
   icon: "pi",
   folder: "content/begabte",
-  create: true,
+  EditorProps,
-  editor: {
-    preview: true,
-    frame: true,
-    size: "half",
-  },
   filter: {
     field: "type",
     value: "begabte",
@@ -27,9 +22,9 @@ const BegabteCollection = {
     {
       name: "image",
       label: "Titelbild",
-      widget: "image",
-      required: true,
       default: "/media/image.webp",
+      ...ImageProps,
+      required: true,
     },
     {
       name: "class",
@@ -52,7 +47,6 @@ const BegabteCollection = {
     {
       name: "body",
       label: "Inhalt",
-      widget: "markdown",
       required: true,
       ...MarkdownProps,
     },

static/admin/config/collections/blog.js

@@ -1,4 +1,4 @@
-import { DateFormat, MarkdownProps } from "../props.js";
+import { EditorProps, DateFormat, MarkdownProps, ImageProps } from "../props.js";
 import {
   AuthorRelation,
   DescriptionText,
@@ -14,22 +14,21 @@ const BlogCollection = {
     'Diese Artikel werden im Bereich "Aktuelles" auf der Schulhomepage angezeigt. Sie können sowohl direkt veröffentlicht, als auch als Entwurf gespeichert werden.',
   icon: "news",
   folder: "content/blog",
-  create: true,
+  ...EditorProps,
-  editor: {
-    preview: true,
-    frame: true,
-    size: "half",
-  },
   filter: {
     field: "type",
     value: "post",
   },
-  view_groups: [
+  view_groups: {
-    {
+    default: "draft",
-      label: "Entwurf",
+    groups: [
-      field: "draft",
+      {
-    },
+        name: "draft",
-  ],
+        label: "Entwurf",
+        field: "draft",
+      },
+    ],
+  },
   sortable_fields: {
     fields: ["date", "title"],
     default: {
@@ -53,9 +52,9 @@ const BlogCollection = {
       name: "image",
       label: "Titelbild",
       hint: "16:9 Seitenverhältnis beachten",
-      widget: "image",
-      required: true,
       default: "/media/image.webp",
+      ...ImageProps,
+      required: true,
     },
     AuthorRelation,
     {
@@ -102,7 +101,6 @@ const BlogCollection = {
     {
       name: "body",
       label: "Inhalt",
-      widget: "markdown",
       required: true,
       ...MarkdownProps,
     },

static/admin/config/collections/cantorfora.js

@@ -1,4 +1,4 @@
-import { MarkdownProps } from "../props.js";
+import { EditorProps, MarkdownProps, ImageProps } from "../props.js";
 import { DescriptionText, DraftBoolean, Title } from "./widgets.js";
 
 const CantorforaCollection = {
@@ -14,17 +14,7 @@ const CantorforaCollection = {
     value: "cantorfora",
   },
   create: true,
-  editor: {
+  ...EditorProps,
-    preview: true,
-    frame: true,
-    size: "half",
-  },
-  view_groups: [
-    {
-      label: "Entwürfe",
-      field: "draft",
-    },
-  ],
   summary_fields: ["title", "draft", "description"],
   sortable_fields: {
     fields: ["index", "title"],
@@ -50,8 +40,8 @@ const CantorforaCollection = {
     {
       name: "image",
       label: "Titelbild",
-      widget: "image",
       default: "/media/image.webp",
+      ...ImageProps,
       required: true,
     },
     {
@@ -63,7 +53,6 @@ const CantorforaCollection = {
     {
       name: "body",
       label: "Text",
-      widget: "markdown",
       required: true,
       ...MarkdownProps,
     },

static/admin/config/collections/cantorpreis.js

@@ -1,4 +1,4 @@
-import { MarkdownProps } from "../props.js";
+import { EditorProps, MarkdownProps, ImageProps } from "../props.js";
 import { DescriptionText, DraftBoolean } from "./widgets.js";
 
 const CantorpreisCollection = {
@@ -20,12 +20,7 @@ const CantorpreisCollection = {
     },
   },
   summary: "{{title}} - {{name}}",
-  create: true,
+  ...EditorProps,
-  editor: {
-    preview: true,
-    frame: true,
-    size: "half",
-  },
   summary_fields: ["title", "name", "draft", "body"],
   fields: [
     {
@@ -45,9 +40,8 @@ const CantorpreisCollection = {
     {
       name: "image",
       label: "Bild",
-      widget: "image",
       default: "/media/image.webp",
-      required: false,
+      ...ImageProps,
     },
     {
       name: "type",
@@ -58,7 +52,6 @@ const CantorpreisCollection = {
     {
       name: "body",
       label: "Text",
-      widget: "markdown",
       required: false,
       ...MarkdownProps,
     },

static/admin/config/collections/chronikjahre.js

@@ -43,7 +43,6 @@ const ChronikjahreCollection = {
       name: "pretext",
       label: "Einleitung",
       hint: "Text für die Jahreszahl",
-      widget: "markdown",
       required: false,
       ...MarkdownProps,
     },
@@ -64,7 +63,6 @@ const ChronikjahreCollection = {
         {
           name: "content",
           label: "Inhalt",
-          widget: "markdown",
           required: false,
           ...MarkdownProps,
         },
@@ -102,7 +100,6 @@ const ChronikjahreCollection = {
       name: "body",
       label: "Text",
       hint: "Erscheint zusätzlich zu den Kreativen Haufen",
-      widget: "markdown",
       required: false,
       ...MarkdownProps,
     },

static/admin/config/collections/chronikseiten.js

@@ -1,4 +1,4 @@
-import { MarkdownProps } from "../props.js";
+import { EditorProps, MarkdownProps } from "../props.js";
 import { DescriptionText, DraftBoolean, Title } from "./widgets.js";
 
 const ChronikseitenCollection = {
@@ -9,12 +9,7 @@ const ChronikseitenCollection = {
     "Chronikseiten entsprechen von der Funktionalität herkömmlichen Zusatzseiten, sind allerdings der Schulchronik vorbehalten.",
   icon: "page-add",
   folder: "content/chronikseiten",
-  create: true,
+  ...EditorProps,
-  editor: {
-    preview: true,
-    frame: true,
-    size: "half",
-  },
   filter: {
     field: "type",
     value: "pages",
@@ -48,7 +43,6 @@ const ChronikseitenCollection = {
     {
       name: "body",
       label: "Inhalt",
-      widget: "markdown",
       required: false,
       ...MarkdownProps,
     },

static/admin/config/collections/forms.js

@@ -1,4 +1,4 @@
-import { MarkdownProps } from "../props.js";
+import { EditorProps, MarkdownProps } from "../props.js";
 import { DescriptionText, DraftBoolean, Title } from "./widgets.js";
 
 const FormsCollection = {
@@ -9,12 +9,7 @@ const FormsCollection = {
     "Hier sind Formulare, Vorlagen und andere Dokumente zu hinterlegen.",
   icon: "document",
   folder: "content/forms",
-  create: true,
+  ...EditorProps,
-  editor: {
-    preview: true,
-    frame: true,
-    size: "half",
-  },
   filter: {
     field: "type",
     value: "forms",
@@ -43,6 +38,9 @@ const FormsCollection = {
           label: "Datei",
           widget: "file",
           required: true,
+          media_library: {
+            folder_support: true,
+          }
         },
       ],
     },
@@ -55,7 +53,6 @@ const FormsCollection = {
     {
       name: "body",
       label: "Inhalt",
-      widget: "markdown",
       required: false,
       ...MarkdownProps,
     },

static/admin/config/collections/ganztag.js

@@ -1,4 +1,4 @@
-import { MarkdownProps } from "../props.js";
+import { EditorProps, MarkdownProps, ImageProps } from "../props.js";
 import { Title, DescriptionText, DraftBoolean } from "./widgets.js";
 
 const GanztagCollection = {
@@ -9,12 +9,7 @@ const GanztagCollection = {
     "Hier kann die Übersicht der Ganztagsangebote bearbeitet werden.",
   icon: "group",
   folder: "content/ganztagsangebote",
-  create: true,
+  ...EditorProps,
-  editor: {
-    preview: true,
-    frame: true,
-    size: "half",
-  },
   filter: {
     field: "type",
     value: "ganztagsangebote",
@@ -27,8 +22,8 @@ const GanztagCollection = {
     {
       name: "image",
       label: "Titelbild",
-      widget: "image",
       default: "/media/ganztagsangebote/image.webp",
+      ...ImageProps,
       required: true,
     },
     {
@@ -82,7 +77,6 @@ const GanztagCollection = {
     {
       name: "body",
       label: "Inhalt",
-      widget: "markdown",
       required: false,
       ...MarkdownProps,
     },

static/admin/config/collections/index-pages.js

@@ -3,6 +3,7 @@ import {
   DateFormat,
   MarkdownProps,
   PatternEmail,
+  ImageProps
 } from "../props.js";
 import { DescriptionText, EnableBoolean, Title } from "./widgets.js";
 
@@ -36,8 +37,7 @@ const IndexPagesCollection = {
         {
           name: "image",
           label: "Bild",
-          widget: "image",
+          ...ImageProps,
-          required: false,
         },
         {
           name: "stats",
@@ -75,7 +75,6 @@ const IndexPagesCollection = {
         {
           name: "body",
           label: "Inhalt",
-          widget: "markdown",
           required: false,
           ...MarkdownProps,
         },
@@ -91,7 +90,6 @@ const IndexPagesCollection = {
         {
           name: "body",
           label: "Inhalt",
-          widget: "markdown",
           required: false,
           ...MarkdownProps,
         },
@@ -107,7 +105,6 @@ const IndexPagesCollection = {
             {
               name: "content",
               label: "Inhalt",
-              widget: "markdown",
               required: true,
               ...MarkdownProps,
             },
@@ -131,7 +128,6 @@ const IndexPagesCollection = {
         {
           name: "body",
           label: "Inhalt",
-          widget: "markdown",
           required: false,
           ...MarkdownProps,
         },
@@ -273,7 +269,6 @@ const IndexPagesCollection = {
         {
           name: "body",
           label: "Inhalt",
-          widget: "markdown",
           required: false,
           ...MarkdownProps,
         },
@@ -289,7 +284,6 @@ const IndexPagesCollection = {
         {
           name: "body",
           label: "Inhalt",
-          widget: "markdown",
           required: false,
           ...MarkdownProps,
         },
@@ -302,8 +296,7 @@ const IndexPagesCollection = {
             {
               name: "image",
               label: "Bild",
-              widget: "image",
+              ...ImageProps,
-              required: false,
             },
             {
               name: "quote",

static/admin/config/collections/pages.js

@@ -1,4 +1,4 @@
-import { MarkdownProps } from "../props.js";
+import { EditorProps, MarkdownProps } from "../props.js";
 import { DescriptionText, DraftBoolean, Title } from "./widgets.js";
 
 const PagesCollection = {
@@ -9,12 +9,7 @@ const PagesCollection = {
     "Zusatzseiten können direkt aus der grafischen Oberfläche heraus erstellt werden und sind unter https://cantorgymnasium.de/pages/[SEITENTITEL] einsehbar. Sie bestehen immer aus einem Titel, einer Metabeschreibung (kurzer Einstiegstext) und dem eigentlichen Inhalt. Einer Zusatzseite kann auch ein Alias, also eine alternative URL zugewiesen werden.",
   icon: "page-add",
   folder: "content/pages",
-  create: true,
+  ...EditorProps,
-  editor: {
-    preview: true,
-    frame: true,
-    size: "half",
-  },
   filter: {
     field: "type",
     value: "pages",
@@ -48,7 +43,6 @@ const PagesCollection = {
     {
       name: "body",
       label: "Inhalt",
-      widget: "markdown",
       required: false,
       ...MarkdownProps,
     },

static/admin/config/collections/projektwoche.js

@@ -1,4 +1,4 @@
-import { MarkdownProps } from "../props.js";
+import { EditorProps, MarkdownProps } from "../props.js";
 import { DescriptionText, DraftBoolean, IconList, Title } from "./widgets.js";
 
 const ProjektwocheCollection = {
@@ -12,12 +12,7 @@ const ProjektwocheCollection = {
     field: "type",
     value: "projektwoche",
   },
-  create: true,
+  ...EditorProps,
-  editor: {
-    preview: true,
-    frame: true,
-    size: "half",
-  },
   summary_fields: ["title", "draft", "tiles", "description"],
   fields: [
     Title(false),
@@ -32,7 +27,6 @@ const ProjektwocheCollection = {
     {
       name: "body",
       label: "Inhalt",
-      widget: "markdown",
       required: false,
       ...MarkdownProps,
     },
@@ -61,7 +55,6 @@ const ProjektwocheCollection = {
         {
           name: "content",
           label: "Inhalt",
-          widget: "markdown",
           required: true,
           ...MarkdownProps,
         },

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

@@ -3,6 +3,7 @@ import {
   DateFormat,
   MarkdownProps,
   PatternEmail,
+  ImageProps
 } from "../props.js";
 import {
   ButtonObject,
@@ -40,7 +41,6 @@ const SettingsCollection = {
             {
               name: "text",
               label: "Text",
-              widget: "markdown",
               required: false,
               ...MarkdownProps,
             },
@@ -90,7 +90,7 @@ const SettingsCollection = {
             {
               name: "bg_image",
               label: "Hintergrundbild",
-              widget: "image",
+              ...ImageProps,
               required: true,
             },
             Title(false),
@@ -136,7 +136,7 @@ const SettingsCollection = {
                 {
                   name: "image",
                   label: "Grafik",
-                  widget: "image",
+                  ...ImageProps,
                   required: true,
                 },
               ],
@@ -153,7 +153,6 @@ const SettingsCollection = {
             {
               name: "content",
               label: "Inhalt",
-              widget: "markdown",
               required: false,
               ...MarkdownProps,
             },
@@ -175,7 +174,7 @@ const SettingsCollection = {
             {
               name: "image",
               label: "Hintergrundbild",
-              widget: "image",
+              ...ImageProps,
               required: true,
             },
             {
@@ -200,13 +199,11 @@ const SettingsCollection = {
                     {
                       name: "image",
                       label: "Grafik",
-                      widget: "image",
+                      ...ImageProps,
-                      required: false,
                     },
                     {
                       name: "content",
                       label: "Inhalt",
-                      widget: "markdown",
                       required: false,
                       ...MarkdownProps,
                     },
@@ -228,7 +225,6 @@ const SettingsCollection = {
                     {
                       name: "content",
                       label: "Inhalt",
-                      widget: "markdown",
                       required: false,
                       ...MarkdownProps,
                     },
@@ -269,14 +265,13 @@ const SettingsCollection = {
             {
               name: "bg_image",
               label: "Hintergrundbild",
-              widget: "image",
+              ...ImageProps,
               required: true,
             },
             Title(false),
             {
               name: "content",
               label: "Inhalt",
-              widget: "markdown",
               required: false,
               ...MarkdownProps,
             },
@@ -304,13 +299,11 @@ const SettingsCollection = {
             {
               name: "image",
               label: "Bild",
-              widget: "image",
+              ...ImageProps,
-              required: false,
             },
             {
               name: "content",
               label: "Inhalt",
-              widget: "markdown",
               required: false,
               ...MarkdownProps,
             },
@@ -340,7 +333,7 @@ const SettingsCollection = {
                 {
                   name: "image",
                   label: "Grafik",
-                  widget: "image",
+                  ...ImageProps,
                   required: true,
                 },
               ],
@@ -360,13 +353,12 @@ const SettingsCollection = {
         {
           name: "image",
           label: "Titelbild",
-          widget: "image",
+          ...ImageProps,
           required: true,
         },
         {
           name: "content",
           label: "Inhalt",
-          widget: "markdown",
           required: false,
           ...MarkdownProps,
         },
@@ -512,7 +504,7 @@ const SettingsCollection = {
             {
               name: "logo",
               label: "Logo",
-              widget: "image",
+              ...ImageProps,
               required: true,
             },
             {
@@ -579,13 +571,13 @@ const SettingsCollection = {
                 {
                   name: "preloader",
                   label: "Logo",
-                  widget: "image",
+                  ...ImageProps,
                   required: true,
                 },
                 {
                   name: "loader",
                   label: "Ladeanimation",
-                  widget: "image",
+                  ...ImageProps,
                   required: true,
                 },
               ],
@@ -630,7 +622,6 @@ const SettingsCollection = {
               name: "copyright",
               label: "Copyright-Eintrag",
               hint: "Am Seitenende sichtbar",
-              widget: "markdown",
               required: true,
               ...MarkdownProps,
             },

static/admin/config/collections/superhaufen.js

@@ -1,4 +1,4 @@
-import { MarkdownProps } from "../props.js";
+import { EditorProps, MarkdownProps } from "../props.js";
 import { DraftBoolean, EnableBoolean, Title } from "./widgets.js";
 
 const SuperhaufenCollection = {
@@ -12,12 +12,7 @@ const SuperhaufenCollection = {
     field: "type",
     value: "superhaufen",
   },
-  create: true,
+  ...EditorProps,
-  editor: {
-    preview: true,
-    frame: true,
-    size: "half",
-  },
   summary_fields: ["title", "draft", "tiles"],
   fields: [
     Title(false),
@@ -74,8 +69,7 @@ const SuperhaufenCollection = {
         {
           name: "content",
           label: "Inhalt",
-          widget: "markdown",
+          required: false,
-          required: true,
           ...MarkdownProps,
         },
         {
@@ -89,8 +83,7 @@ const SuperhaufenCollection = {
             {
               name: "content",
               label: "Inhalt",
-              widget: "markdown",
+              required: false,
-              required: true,
               ...MarkdownProps,
             },
           ],

static/admin/config/collections/wettbewerbe.js

@@ -1,4 +1,4 @@
-import { MarkdownProps } from "../props.js";
+import { EditorProps, MarkdownProps, ImageProps } from "../props.js";
 import { DescriptionText, DraftBoolean, Title } from "./widgets.js";
 
 const WettbewerbeCollection = {
@@ -8,12 +8,7 @@ const WettbewerbeCollection = {
   description: "Hier kann die Übersicht der Wettbewerbe bearbeitet werden.",
   icon: "trophy",
   folder: "content/wettbewerbe",
-  create: true,
+  ...EditorProps,
-  editor: {
-    preview: true,
-    frame: true,
-    size: "half",
-  },
   filter: {
     field: "type",
     value: "wettbewerbe",
@@ -26,7 +21,7 @@ const WettbewerbeCollection = {
     {
       name: "image",
       label: "Titelbild",
-      widget: "image",
+      ...ImageProps,
       required: true,
       default: "/media/image.webp",
     },
@@ -63,7 +58,6 @@ const WettbewerbeCollection = {
     {
       name: "body",
       label: "Inhalt",
-      widget: "markdown",
       required: true,
       ...MarkdownProps,
     },

static/admin/config/index.js

@@ -17,6 +17,7 @@ import {
   SuperhaufenCollection,
   WettbewerbeCollection,
 } from "./collections/index.js";
+import { GCGThemeDark, GCGThemeLight } from "./themes.js";
 
 const config = {
   backend: {
@@ -35,7 +36,7 @@ const config = {
     },
   },
   local_backend: true,
-  media_folder: "/static/media",
+  media_folder: "static/media",
   public_folder: "/media",
   media_library: {
     max_file_size: 10240000,
@@ -48,6 +49,13 @@ const config = {
     clean_accents: true,
     sanitize_replacement: "-",
   },
+  theme: {
+    include_built_in_themes: false,
+    themes: [
+      GCGThemeDark,
+      GCGThemeLight
+    ]    
+  },
   collections: [
     SettingsCollection,
     IndexPagesCollection,

static/admin/config/props.js

@@ -1,4 +1,14 @@
+const EditorProps = {
+  create: true,
+  editor: {
+    preview: true,
+    frame: true,
+    size: "half",
+  },
+};
+
 const MarkdownProps = {
+  widget: "markdown",
   toolbar_buttons: {
     main: [
       "bold",
@@ -53,6 +63,9 @@ const MarkdownProps = {
       "shortcode",
     ],
   },
+  media_library: {
+    folder_support: true,
+  }
 };
 
 const DateFormat = {
@@ -74,4 +87,12 @@ const PatternEmail = {
   ],
 };
 
-export { MarkdownProps, DateFormat, DataObject, PatternEmail };
+const ImageProps = {
+  widget: "image",
+  required: false,
+  media_library: {
+    folder_support: true,
+  }
+};
+
+export { EditorProps, MarkdownProps, DateFormat, DataObject, PatternEmail, ImageProps };

static/admin/config/schulchronik.js

@@ -7,6 +7,7 @@ import {
   StatsCollection,
   SuperhaufenCollection,
 } from "./collections/index.js";
+import { GCGThemeDark, GCGThemeLight } from "./themes.js";
 
 const config = {
   backend: {
@@ -25,7 +26,7 @@ const config = {
     },
   },
   local_backend: true,
-  media_folder: "/static/media",
+  media_folder: "static/media",
   public_folder: "/media",
   media_library: {
     max_file_size: 10240000,
@@ -38,6 +39,13 @@ const config = {
     clean_accents: true,
     sanitize_replacement: "-",
   },
+  theme: {
+    include_built_in_themes: false,
+    themes: [
+      GCGThemeDark,
+      GCGThemeLight
+    ]    
+  },
   collections: [
     ChronikjahreCollection,
     SuperhaufenCollection,

static/admin/config/themes.js

@@ -0,0 +1,25 @@
+const GCGThemeDark = {
+  name: "GCG.Dark",
+  extends: "dark",
+  primary: {
+    main: "#ffbc3b",
+    contrastColor: "#4b4b4b",
+  },
+  background: {
+    main: "#1a1a37",
+    dark: "#13132d",
+  },
+};
+
+const GCGThemeLight = {
+  name: "GCG.Light",
+  extends: "light",
+  primary: {
+    main: "#1a1a37",
+  },
+  background: {
+    dark: "#f1f3f5",
+  },
+};
+
+export { GCGThemeDark, GCGThemeLight };

static/admin/index.html

@@ -9,12 +9,12 @@
     />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@staticcms/app@^3.0.0/dist/main.css"
+      href="https://unpkg.com/@staticcms/app@next/dist/main.css"
     />
     <title>Static CMS</title>
   </head>
   <body>
-    <script src="https://cdn.jsdelivr.net/npm/@staticcms/app@^3.0.0/dist/static-cms-app.js"></script>
+    <script src="https://unpkg.com/@staticcms/app@next/dist/static-cms-app.js"></script>
     <script type="module">
       import config from "./config/index.js";
       // imports

static/schulchronik/admin/index.html

@@ -9,12 +9,12 @@
     />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@staticcms/app@^3.0.0/dist/main.css"
+      href="https://unpkg.com/@staticcms/app@next/dist/main.css"
     />
     <title>Chronikverwaltung</title>
   </head>
   <body>
-    <script src="https://cdn.jsdelivr.net/npm/@staticcms/app@^3.0.0/dist/static-cms-app.js"></script>
+    <script src="https://unpkg.com/@staticcms/app@next/dist/static-cms-app.js"></script>
     <script type="module">
       import config from "../../admin/config/schulchronik.js";
       // imports