feat: add login and logout event, clean up collection page styles (#798)

packages/core/dev-test/config.yml

@@ -387,6 +387,28 @@ collections:
               - label: Description
                 name: description
                 widget: text
+          - name: list_with_object_child
+            label: List With Object Child
+            widget: list
+            fields:
+              - label: Name
+                name: name
+                widget: string
+                hint: First and Last
+              - label: Description
+                name: description
+                widget: text
+              - label: Object
+                name: object
+                widget: object
+                fields:
+                  - label: Name
+                    name: name
+                    widget: string
+                    hint: First and Last
+                  - label: Description
+                    name: description
+                    widget: text
           - name: string_list
             label: String List
             widget: list

packages/core/dev-test/index.html

@@ -184,16 +184,15 @@
         var slug = dateString + '-post-number-' + i + '.md';
 
         window.repoFiles._posts[slug] = {
-          content:
-            '---\ntitle: "This is post # ' +
-            i +
-            `\"\ndraft: ${i % 2 === 0}` +
-            '\nimage: /assets/uploads/lobby.jpg' +
-            '\ndate: ' +
-            dateString +
-            'T00:00:00.000Z\n---\n# The post is number ' +
-            i +
-            `\n\n![Static CMS](https://raw.githubusercontent.com/StaticJsCMS/static-cms/main/static-cms-logo.png)
+          content: `---
+title: "This is post # ${i}"
+draft: ${i % 2 === 0}
+image: /assets/uploads/lobby.jpg
+date: ${dateString}T00:00:00.000Z
+---
+# The post is number ${i}
+
+![Static CMS](https://raw.githubusercontent.com/StaticJsCMS/static-cms/main/static-cms-logo.png)
 
 # Awesome Editor!
 

packages/core/dev-test/index.js

@@ -11,15 +11,31 @@ const PostPreview = ({ entry, widgetFor }) => {
   );
 };
 
-const PostPreviewCard = ({ entry, theme, hasLocalBackup }) => {
+const PostPreviewCard = ({ entry, theme, hasLocalBackup, widgetFor }) => {
   const date = new Date(entry.data.date);
 
   const month = date.getMonth() + 1;
   const day = date.getDate();
 
+  const image = entry.data.image;
+
   return h(
     'div',
     { style: { width: '100%' } },
+    h('div', {
+      style: {
+        width: '100%',
+        borderTopLeftRadius: '8px',
+        borderTopRightRadius: '8px',
+        overflow: 'hidden',
+        height: '140px',
+        backgroundSize: 'cover',
+        backgroundRepat: 'no-repeat',
+        backgroundPosition: 'center',
+        objectFit: 'cover',
+        backgroundImage: `url('${image}')`,
+      },
+    }),
     h(
       'div',
       { style: { padding: '16px', width: '100%' } },
@@ -52,7 +68,6 @@ const PostPreviewCard = ({ entry, theme, hasLocalBackup }) => {
                 fontSize: '14px',
                 fontWeight: 700,
                 color: 'rgb(107, 114, 128)',
-                fontSize: '14px',
                 lineHeight: '18px',
               },
             },
@@ -93,7 +108,7 @@ const PostPreviewCard = ({ entry, theme, hasLocalBackup }) => {
                     justifyContent: 'center',
                     textAlign: 'center',
                   },
-                  title: 'Has local backup'
+                  title: 'Has local backup',
                 },
                 'i',
               )
@@ -151,6 +166,8 @@ const PostDraftFieldPreview = ({ value }) => {
         cursor: 'pointer',
         borderRadius: '4px',
         fontSize: '14px',
+        lineHeight: '16px',
+        height: '20px',
       },
     },
     value === true ? 'Draft' : 'Published',
@@ -226,7 +243,7 @@ const CustomPage = () => {
 };
 
 CMS.registerPreviewTemplate('posts', PostPreview);
-CMS.registerPreviewCard('posts', PostPreviewCard);
+CMS.registerPreviewCard('posts', PostPreviewCard, () => 240);
 CMS.registerFieldPreview('posts', 'date', PostDateFieldPreview);
 CMS.registerFieldPreview('posts', 'draft', PostDraftFieldPreview);
 CMS.registerPreviewTemplate('general', GeneralPreview);