cms, layout fixes

layouts/wettbewerbe/single.html

@@ -12,7 +12,7 @@
       <h2>{{ .Title }}</h2>
     </div>
     <div class="row align-items-center mb-5">
-      <div class="col-xl-6 order-sm-3 order-xl-2 col-12 order-2">
+      <div class="col-xl-8 order-sm-2 order-xl-2 col-12 order-2 col-sm-6">
         <ul class="list-inline">
           <li class="list-inline-item mr-4 mb-3 mb-sm-0">
             <div class="d-flex align-items-center">
@@ -25,7 +25,7 @@
           </li>
         </ul>
       </div>
-      <div class="col-xl-3 text-sm-right text-left order-sm-2 order-3 order-xl-3 col-sm-6 mb-4 mb-xl-0">
+      <div class="col-xl-2 text-left text-xl-right order-sm-3 order-3 order-xl-3 col-sm-6 col-12 mb-4 mb-xl-0">
         <a href="{{ .Params.Web_url | safeURL }}" class="btn btn-primary">{{ i18n "website" }}</a>
       </div>
       <div class="col-12 mt-4 order-4">

static/admin/config.yml

@@ -743,7 +743,8 @@ collections:
     filter: {field: "type", value: "ganztagsangebote"}
     create: true
     editor:
-      preview: false
+     preview: true
+     frame: true
     media_folder: '/static/media/ganztagsangebote'
     public_folder: '/media/ganztagsangebote'
     fields:
@@ -778,7 +779,8 @@ collections:
     filter: {field: "type", value: "wettbewerbe"}
     create: true
     editor:
-      preview: false
+     preview: true
+     frame: true
     media_folder: '/static/media/contests'
     public_folder: '/media/contests'
     fields:

static/admin/index.html

@@ -17,12 +17,16 @@
     </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>
+    <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']];
       icons.forEach(icon => {
         CMS.registerIcon(icon[0], ({}) => { return(h('i', {className: icon[1] + " icon-md"})); });
       });
+    </script>
+    <script id="status-seite">
       const StatusPage = () => {
         return h('div', {className: "row"},
         h('div', {className: "column"},
@@ -45,9 +49,10 @@
             h('div', {className: "row"},
             "dev.cantorgymnasium.de: ",
             h('a', {href: "https://dev.cantorgymnasium.de/", target: "_blank"}, h('img', {src: "https://status.cantorgymnasium.de/api/badge/31/status?upLabel=online&downLabel=offline&style=for-the-badge"}))
-        ))))
+        )))));
-        );
       };
+    </script>
+    <script id="links">
       CMS.registerAdditionalLink({
         id: 'status',
         title: 'Status',
@@ -64,6 +69,8 @@
           icon: 'help',
         },
       });
+    </script>
+    <script>   
       CMS.registerShortcode('gallery', {
         label: 'Gallery',
         openTag: '{{< ',
@@ -74,7 +81,6 @@
             var dir = args.find(arg => arg.startsWith('dir='))?.split('=')[1].replaceAll("\"","") ?? '';
             return { dir: dir };
           }
-      
           return { dir: '' };
         },
         toArgs: ({ dir }) => {
@@ -337,7 +343,7 @@
         },
       });
     </script>
-    <script>
+    <script id="preview-styles">
       CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/bootstrap/bootstrap.min.css");
       CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/fira/fira.css");
       CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/mdi/css/materialdesignicons.min.css");
@@ -454,28 +460,16 @@
                             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('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'))
+                          h('div', {className: "content"}, widgetFor('body')))))));
-                        )
-                      )
-                    )
-                  )
-                );
       };
-
+      ["abiturienten", "cantorfora", "contact-index", "pages"].forEach(page => {
-    CMS.registerPreviewTemplate("abiturienten", PostPreviewContent);
+        CMS.registerPreviewTemplate(page, PostPreviewContent);
-    CMS.registerPreviewTemplate("cantorfora", PostPreviewContent);
+      });
-    CMS.registerPreviewTemplate("contact-index", PostPreviewContent);
-    CMS.registerPreviewTemplate("pages", PostPreviewContent);
-
     </script>
     <script>
       var AnmeldungPreviewContent = ({widgetsFor, widgetFor, entry}) => {
@@ -491,39 +485,21 @@
                             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('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title)),
-                        ),
+                        h('p', {className: "text-lighten"}, entry.data.description)))),
-                        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')
+                          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-left-0 border-right-0"},
                               h('div', {className: "card-body"},
-                                h('h4', {className: "card-title mb-3"},
+                                h('h4', {className: "card-title mb-3"}, element.data.title),
-                                  element.data.title
+                                h('div', {className: "content"}, element.widgets.content))));
-                                ),
+                        })))));
-                                h('div', {className: "content"},
-                                  element.widgets.content
-                                )
-                              )
-                            )
-                          );
-                        })
-                      )
-                    )
-                  ),
-                );
       };
     CMS.registerPreviewTemplate("anmeldung-index", AnmeldungPreviewContent);
     </script>
@@ -539,19 +515,11 @@
                         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('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("i", {className: "mdi mdi-chevron-double-right text-white"})),
-                            ),
+                            h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title)),
-                            h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title
+                          h('p', {className: "text-lighten"}, entry.data.description))))),
-                            )
-                          ),
-                          h('p', {className: "text-lighten"}, entry.data.description)
-                        )
-                      )
-                    )
-                  ),
                   h('section', {className: "section"},
                     h('div', {className: "container"},
                       h('div', {className: "row"},
@@ -562,26 +530,14 @@
                                 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
+                                    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)
+                                  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-right pr-0 pr-md-4 p-2 vertical-align-middle"},
                                   h('p', {},
-                                    h('i', {className: "mdi mdi-map-marker-radius-outline icon-s text-primary mr-2"}),
+                                    h('i', {className: "mdi mdi-map-marker-radius-outline icon-s text-primary mr-2"}), event.data.location)) : null);
-                                    event.data.location
+                            })))))));
-                                  )
-                                ) : null
-                              );
-                            })
-                          )
-                        )
-                      )
-                    )
-                  )
-                );
       };
     CMS.registerPreviewTemplate("event-index", EventPreview);
     </script>
@@ -597,27 +553,16 @@
                         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('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("i", {className: "mdi mdi-chevron-double-right text-white"})),
-                            ),
+                            h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title)),
-                            h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title
+                          h('p', {className: "text-lighten"}, entry.data.description))))));
-                            )
-                          ),
-                          h('p', {className: "text-lighten"}, entry.data.description)
-                        )
-                      )
-                    )
-                  )
-                );
       };
-    CMS.registerPreviewTemplate("blog-index", PagePreview);
+
-    CMS.registerPreviewTemplate("cantorpreis-index", PagePreview);
+      ["blog-index", "cantorpreis-index", "forms-index", "ganztagsangebote-index", "wettbewerbe-index", "begabte-index"].forEach(page => {
-    CMS.registerPreviewTemplate("forms-index", PagePreview);
+        CMS.registerPreviewTemplate(page, PagePreview);
-    CMS.registerPreviewTemplate("ganztagsangebote-index", PagePreview);
+      });
-    CMS.registerPreviewTemplate("wettbewerbe-index", PagePreview);
-    CMS.registerPreviewTemplate("begabte-index", PagePreview);
     </script>
     <script>
     var PagePreviewImage = ({ widgetFor, widgetsFor, getAsset, entry }) => {
@@ -682,10 +627,10 @@
                             ),
                             h('li', { className: "list-inline-item mr-4 mb-3 mb-md-0 text-light" },
                               h('span', { className: "font-weight-bold mr-2"}, "Kategorie:"),
-                              widgetFor('categories').props.value.map(function (category, index) {
+                              entry.data.categories != null ? entry.data.categories.map((category, index) => {
                                 var text = (index != 0 ? ", " : "") + category;
                                 return text;
-                              })
+                              }) : ""
                             ),
                           )
                         ),
@@ -701,6 +646,198 @@
                 );
       };
     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 mr-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 mr-2"}),
+                              h('div', {className: "text-left"},
+                                h('h6', {className: "mb-0"}, "Zeit"),
+                                h('p', {className: "mb-0"}, entry.data.weekly)
+                              )
+                            )
+                          ),
+                          h('li', { className: "list-inline-item mr-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 mr-2"}),
+                              h('div', {className: "text-left"},
+                                h('h6', {className: "mb-0"}, "Dauer"),
+                                h('p', {className: "mb-0"}, entry.data.duration)
+                              )
+                            )
+                          ),
+                          h('li', { className: "list-inline-item mr-4 mb-3 mb-sm-0" },
+                            h('div', {className: "d-flex align-items-center"},
+                              h('i', {className: "mdi mdi-crowd text-primary icon-md mr-2"}),
+                              h('div', {className: "text-left"},
+                                h('h6', {className: "mb-0"}, "Klassen(n)"),
+                                h('p', {className: "mb-0"}, entry.data.class)
+                              )
+                            )
+                          ),
+                          h('li', { className: "list-inline-item mr-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 mr-2"}),
+                              h('div', {className: "text-left"},
+                                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 mr-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 mr-2"}),
+                              h('div', {className: "text-left"},
+                                h('h6', {className: "mb-0"}, "Klasse(n)"),
+                                h('p', {className: "mb-0"}, entry.data.class)
+                              )
+                            )
+                          ),
+                        )
+                      ),
+                      h('div', {className: "col-xl-2 text-left text-xl-right 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}) => {
@@ -778,27 +915,18 @@
     </script>
     <script>   
       const PostPreviewCard = ({ entry, widgetFor, viewStyle }) => {
-        return h(
+        return h('div', { style: { width: '100%', height: '100%' } },
-          'div',
-          { style: { width: '100%', height: '100%' } },
           viewStyle === 'grid' ? widgetFor('image') : null,
           viewStyle === 'grid' ? 
-          h(
+          h('div', { style: { padding: '16px', paddingBottom: '8px', width: '100%' } },
-            'div',
+            h('div', {
-            { style: { padding: '16px', paddingBottom: '8px', width: '100%' } },
-            h(
-              'div',
-              {
                 style: {
                   display: 'flex',
                   width: '100%',
                   justifyContent: 'space-between',
                   alignItems: 'start',
-                },
+                }},
-              },
+              h('div', {
-              h(
-                'div',
-                {
                   style: {
                     backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green',
                     color: 'white',
@@ -809,57 +937,36 @@
                     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,
-          ) : null,
+          h('div', { style: { padding: '16px', paddingTop: '8px', width: '100%' } },
-          h(
+            h('div', {
-            'div',
-            { style: { padding: '16px', paddingTop: '8px', width: '100%' } },
-            h(
-              'div',
-              {
                 style: {
                   display: 'flex',
                   width: '100%',
                   justifyContent: 'space-between',
                   alignItems: 'start',
-                },
+                }},
-              },
+              h('div', {
-              h(
-                'div',
-                {
                   style: {
                     display: 'flex',
                     flexDirection: viewStyle === 'grid' ? 'column' : 'row',
                     alignItems: 'baseline',
                     gap: '8px',
-                  },
+                  }},
-                },
+                h('strong', { style: { fontSize: '20px' } }, entry.data.title)))),
-                h('strong', { style: { fontSize: '20px' } }, entry.data.title),
+          viewStyle != 'grid' ? h('div', { style: { padding: '16px', paddingBottom: '8px', paddingTop: '0px', width: '100%' } },
-              ),
+            h('div', {
-            ),
-          ),
-          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', {
-              h(
-                'div',
-                {
                   style: {
                     backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green',
                     color: 'white',
@@ -869,38 +976,26 @@
                     textDecoration: 'none',
                     display: 'inline-block',
                     cursor: 'pointer',
-                    borderRadius: '4px',
+                    borderRadius: '4px'
-                  },
+                  }},
-                },
+                entry.data.draft === true ? 'Entwurf' : 'Öffentlich'),
-                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))))
-              ),
-              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(
+        return h('div', { style: { width: '100%', height: '100%' } },
-          'div',
-          { style: { width: '100%', height: '100%' } },
           viewStyle === 'grid' ? widgetFor('image') : null,
           viewStyle === 'grid' ? 
-          h(
+          h('div', { style: { padding: '16px', paddingBottom: '8px', width: '100%' } },
-            'div',
+            h('div', {
-            { style: { padding: '16px', paddingBottom: '8px', width: '100%' } },
-            h(
-              'div',
-              {
                 style: {
                   display: 'flex',
                   width: '100%',
                   justifyContent: 'space-between',
                   alignItems: 'start',
-                },
+                }},
-              },
+              h('div', {
-              h(
-                'div',
-                {
                   style: {
                     backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green',
                     color: 'white',
@@ -911,41 +1006,27 @@
                     display: 'inline-block',
                     cursor: 'pointer',
                     borderRadius: '4px',
-                  },
+                  }},
-                },
                 entry.data.draft === true ? 'Entwurf' : 'Öffentlich',
               ),
-              h('span', { style: { fontSize: '16px' } }, entry.data.category)
+              h('span', { style: { fontSize: '16px' } }, entry.data.category))) : null,
-            ),
+          h('div', { style: { padding: '16px', paddingTop: viewStyle === 'grid' ? '8px' : '16px', width: '100%' } },
-          ) : null,
+            h('div', {
-          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', {
-              h(
-                'div',
-                {
                   style: {
                     display: 'flex',
                     flexDirection: viewStyle === 'grid' ? 'column' : 'row',
                     alignItems: 'baseline',
                     gap: '8px',
-                  },
+                  }},
-                },
+                h('strong', { style: { fontSize: '20px' } }, entry.data.title)),
-                h('strong', { style: { fontSize: '20px' } }, entry.data.title),
+              viewStyle != 'grid' ? h('div', {
-              ),
-              viewStyle != 'grid' ? h(
-                'div',
-                {
                   style: {
                     backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green',
                     color: 'white',
@@ -956,15 +1037,10 @@
                     display: 'inline-block',
                     cursor: 'pointer',
                     borderRadius: '4px',
-                  },
+                  }},
-                },
+                entry.data.draft === true ? 'Entwurf' : 'Öffentlich') : null)));
-                entry.data.draft === true ? 'Entwurf' : 'Öffentlich',
-              ) : null,
-            ),
-          ),
-        );
       };
-      const NoCatCard = ({ entry, widgetFor, viewStyle }) => {
+      const NoDateCard = ({ entry, widgetFor, viewStyle }) => {
         return h(
           'div',
           { style: { width: '100%', height: '100%' } },
@@ -1066,26 +1142,17 @@
         );
       };
       
+      ['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('ganztagsangebote', GenericCard);  
+      CMS.registerPreviewCard('abiturienten', NoDateCard);
-      CMS.registerPreviewCard('wettbewerbe', GenericCard); 
+      CMS.registerPreviewCard('cantorfora', NoDateCard);
-      CMS.registerPreviewCard('begabte', GenericCard); 
-      CMS.registerPreviewCard('abiturienten', NoCatCard);
-      CMS.registerPreviewCard('cantorfora', NoCatCard);
-      CMS.registerPreviewCard('blog-index', SmallCard);
-      CMS.registerPreviewCard('about-index', SmallCard);
-      CMS.registerPreviewCard('anmeldung-index', SmallCard);
-      CMS.registerPreviewCard('cantorpreis-index', SmallCard);
-      CMS.registerPreviewCard('contact-index', SmallCard);  
-      CMS.registerPreviewCard('event-index', SmallCard);
-      CMS.registerPreviewCard('forms-index', SmallCard);
-      CMS.registerPreviewCard('ganztagsangebote-index', SmallCard);
-      CMS.registerPreviewCard('wettbewerbe-index', SmallCard);
-      CMS.registerPreviewCard('begabte-index', SmallCard);
-      CMS.registerPreviewCard('pages', SmallCard);
-      CMS.registerPreviewCard('forms', SmallCard);
-      CMS.registerPreviewCard('schulchronik', SmallCard);
     </script>
   </body>
 </html>