feat: ui overhaul (#676)

packages/core/dev-test/backends/proxy/_posts/2022-11-01-something/index.md

@@ -1,8 +1,8 @@
 ---
-title: Something something something...
+title: Something something something2...
 draft: false
 date: 2022-11-01 06:30
-image: ori_3587884_d966kldqzc6mvdeq67hyk16rnbe3gb1k8eeoy31s_shark-icon.jpg
+image: static-cms-icon.svg
 ---
 # Welcome
 

packages/core/dev-test/backends/proxy/assets/upload/document.txt

@@ -0,0 +1 @@
+Some text here!

packages/core/dev-test/config.yml

@@ -25,7 +25,10 @@ collections:
       and editing guidelines that are specific to a collection.
     folder: _posts
     slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
-    summary: '{{title}} -- {{year}}/{{month}}/{{day}}'
+    summary_fields:
+      - title
+      - date
+      - draft
     sortable_fields:
       fields:
         - title
@@ -219,7 +222,7 @@ collections:
             time_format: 'h:mm aaa'
             required: false
           - name: date_and_time_with_default
-            label: Date and Time With Deafult
+            label: Date and Time With Default
             widget: datetime
             format: 'MMM d, yyyy h:mm aaa'
             date_format: 'MMM d, yyyy'
@@ -233,22 +236,25 @@ collections:
             time_format: false
             required: false
           - name: date_with_default
-            label: Date With Deafult
+            label: Date With Default
             widget: datetime
             format: 'MMM d, yyyy'
             date_format: 'MMM d, yyyy'
+            time_format: false
             required: false
             default: 'Jan 12, 2023'
           - name: time
             label: Time
             widget: datetime
             format: 'h:mm aaa'
+            date_format: false
             time_format: 'h:mm aaa'
             required: false
           - name: time_with_default
-            label: Time With Deafult
+            label: Time With Default
             widget: datetime
             format: 'h:mm aaa'
+            date_format: false
             time_format: 'h:mm aaa'
             required: false
             default: '12:00 am'
@@ -641,7 +647,7 @@ collections:
               - date
             search_fields:
               - title
-              - body
+              - date
             value_field: title
           - label: Required With Default
             name: with_default
@@ -652,7 +658,7 @@ collections:
               - date
             search_fields:
               - title
-              - body
+              - date
             value_field: title
             default: This is a YAML front matter post
           - label: Optional Validation
@@ -665,7 +671,7 @@ collections:
               - date
             search_fields:
               - title
-              - body
+              - date
             value_field: title
           - label: Multiple
             name: multiple
@@ -678,7 +684,7 @@ collections:
               - date
             search_fields:
               - title
-              - body
+              - date
             value_field: title
           - label: Multiple With Default
             name: multiple_with_default
@@ -694,7 +700,7 @@ collections:
               - date
             search_fields:
               - title
-              - body
+              - date
             value_field: title
       - name: select
         label: Select

packages/core/dev-test/index.html

@@ -6,7 +6,27 @@
     <title>Static CMS Development Test</title>
     <script>
       window.repoFiles = {
+        assets: {
+          uploads: {
+            'moby-dick.jpg': {
+              content: '',
+            },
+            'lobby.jpg': {
+              content: '',
+            },
+          },
+        },
         _posts: {
+          assets: {
+            uploads: {
+              'moby-dick.jpg': {
+                content: '',
+              },
+              'lobby.jpg': {
+                content: '',
+              },
+            },
+          },
           '2015-02-14-this-is-a-post.md': {
             content:
               '---\ntitle: This is a YAML front matter post\ndraft: true\nimage: /assets/uploads/moby-dick.jpg\ndate: 2015-02-14T00:00:00.000Z\n---\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
@@ -15,10 +35,6 @@
             content:
               '{\n"title": "This is a JSON front matter post",\n"draft": false,\n"image": "/assets/uploads/moby-dick.jpg",\n"date": "2015-02-15T00:00:00.000Z"\n}\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
           },
-          '2015-02-16-this-is-a-toml-frontmatter-post.md': {
-            content:
-              '+++\ntitle = "This is a TOML front matter post"\nimage = "/assets/uploads/moby-dick.jpg"\ndate = "2015-02-16T00:00:00.000Z"\n+++\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
-          },
           '2015-02-14-this-is-a-post-with-a-different-extension.other': {
             content:
               '---\ntitle: This post should not appear because the extension is different\ndraft: false\nimage: /assets/uploads/moby-dick.jpg\ndate: 2015-02-14T00:00:00.000Z\n---\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
@@ -104,15 +120,15 @@
         _i18n_playground: {
           'file1.en.md': {
             content:
-              '---\nslug: file1\ndescription: Coffee is a small tree or shrub that grows in the forest understory in its wild form, and traditionally was grown commercially under other trees that provided shade. The forest-like structure of shade coffee farms provides habitat for a great number of migratory and resident species.\ndate: 2015-02-14T00:00:00.000Z\n---\n'
+              '---\nslug: file1\ndescription: Coffee is a small tree or shrub that grows in the forest understory in its wild form, and traditionally was grown commercially under other trees that provided shade. The forest-like structure of shade coffee farms provides habitat for a great number of migratory and resident species.\ndate: 2015-02-14T00:00:00.000Z\n---\n',
           },
           'file1.de.md': {
             content:
-              '---\ndescription: Kaffee ist ein kleiner Baum oder Strauch, der in seiner wilden Form im Unterholz des Waldes wächst und traditionell kommerziell unter anderen Bäumen angebaut wurde, die Schatten spendeten. Die waldähnliche Struktur schattiger Kaffeefarmen bietet Lebensraum für eine Vielzahl von wandernden und ansässigen Arten.\ndate: 2015-02-14T00:00:00.000Z\n---\n'
+              '---\ndescription: Kaffee ist ein kleiner Baum oder Strauch, der in seiner wilden Form im Unterholz des Waldes wächst und traditionell kommerziell unter anderen Bäumen angebaut wurde, die Schatten spendeten. Die waldähnliche Struktur schattiger Kaffeefarmen bietet Lebensraum für eine Vielzahl von wandernden und ansässigen Arten.\ndate: 2015-02-14T00:00:00.000Z\n---\n',
           },
           'file1.fr.md': {
             content:
-              '---\ndescription: Le café est un petit arbre ou un arbuste qui pousse dans le sous-étage de la forêt sous sa forme sauvage et qui était traditionnellement cultivé commercialement sous d\'autres arbres qui fournissaient de l\'ombre. La structure forestière des plantations de café d\'ombre fournit un habitat à un grand nombre d\'espèces migratrices et résidentes.\ndate: 2015-02-14T00:00:00.000Z\n---\n'
+              "---\ndescription: Le café est un petit arbre ou un arbuste qui pousse dans le sous-étage de la forêt sous sa forme sauvage et qui était traditionnellement cultivé commercialement sous d'autres arbres qui fournissaient de l'ombre. La structure forestière des plantations de café d'ombre fournit un habitat à un grand nombre d'espèces migratrices et résidentes.\ndate: 2015-02-14T00:00:00.000Z\n---\n",
           },
         },
       };

packages/core/dev-test/index.js

@@ -11,11 +11,15 @@ const PostPreview = ({ entry, widgetFor }) => {
   );
 };
 
-const PostPreviewCard = ({ entry, widgetFor, viewStyle }) => {
+const PostPreviewCard = ({ entry, theme }) => {
+  const date = new Date(entry.data.date);
+
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+
   return h(
     'div',
     { style: { width: '100%' } },
-    viewStyle === 'grid' ? widgetFor('image') : null,
     h(
       'div',
       { style: { padding: '16px', width: '100%' } },
@@ -27,6 +31,8 @@ const PostPreviewCard = ({ entry, widgetFor, viewStyle }) => {
             width: '100%',
             justifyContent: 'space-between',
             alignItems: 'start',
+            gap: '4px',
+            color: theme === 'dark' ? 'white' : 'inherit',
           },
         },
         h(
@@ -34,13 +40,31 @@ const PostPreviewCard = ({ entry, widgetFor, viewStyle }) => {
           {
             style: {
               display: 'flex',
-              flexDirection: viewStyle === 'grid' ? 'column' : 'row',
+              flexDirection: 'column',
               alignItems: 'baseline',
-              gap: '8px',
+              gap: '4px',
             },
           },
-          h('strong', { style: { fontSize: '24px' } }, entry.data.title),
-          h('span', { style: { fontSize: '16px' } }, entry.data.date),
+          h(
+            'div',
+            {
+              style: {
+                fontSize: '14px',
+                fontWeight: 700,
+                color: 'rgb(107, 114, 128)',
+                fontSize: '14px',
+                lineHeight: '18px',
+              },
+            },
+            entry.data.title,
+          ),
+          h(
+            'span',
+            { style: { fontSize: '14px' } },
+            `${date.getFullYear()}-${month < 10 ? `0${month}` : month}-${
+              day < 10 ? `0${day}` : day
+            }`,
+          ),
         ),
         h(
           'div',
@@ -49,12 +73,13 @@ const PostPreviewCard = ({ entry, widgetFor, viewStyle }) => {
               backgroundColor: entry.data.draft === true ? 'blue' : 'green',
               color: 'white',
               border: 'none',
-              padding: '4px 8px',
+              padding: '2px 6px',
               textAlign: 'center',
               textDecoration: 'none',
               display: 'inline-block',
               cursor: 'pointer',
               borderRadius: '4px',
+              fontSize: '14px',
             },
           },
           entry.data.draft === true ? 'Draft' : 'Published',
@@ -64,6 +89,40 @@ const PostPreviewCard = ({ entry, widgetFor, viewStyle }) => {
   );
 };
 
+const PostDateFieldPreview = ({ value }) => {
+  const date = new Date(value);
+
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+
+  return h(
+    'div',
+    {},
+    `${date.getFullYear()}-${month < 10 ? `0${month}` : month}-${day < 10 ? `0${day}` : day}`,
+  );
+};
+
+const PostDraftFieldPreview = ({ value }) => {
+  return h(
+    'div',
+    {
+      style: {
+        backgroundColor: value === true ? 'rgb(37 99 235)' : 'rgb(22 163 74)',
+        color: 'white',
+        border: 'none',
+        padding: '2px 6px',
+        textAlign: 'center',
+        textDecoration: 'none',
+        display: 'inline-block',
+        cursor: 'pointer',
+        borderRadius: '4px',
+        fontSize: '14px',
+      },
+    },
+    value === true ? 'Draft' : 'Published',
+  );
+};
+
 const GeneralPreview = ({ widgetsFor, entry, collection }) => {
   const title = entry.data.site_title;
   const posts = entry.data.posts;
@@ -134,6 +193,8 @@ const CustomPage = () => {
 
 CMS.registerPreviewTemplate('posts', PostPreview);
 CMS.registerPreviewCard('posts', PostPreviewCard);
+CMS.registerFieldPreview('posts', 'date', PostDateFieldPreview);
+CMS.registerFieldPreview('posts', 'draft', PostDraftFieldPreview);
 CMS.registerPreviewTemplate('general', GeneralPreview);
 CMS.registerPreviewTemplate('authors', AuthorsPreview);
 // Pass the name of a registered control to reuse with a new widget preview.
@@ -170,7 +231,8 @@ CMS.registerShortcode('youtube', {
   toArgs: ({ src }) => {
     return [src];
   },
-  control: ({ src, onChange }) => {
+  control: ({ src, onChange, theme }) => {
+    console.log('[SHORTCUT] shortcut theme', theme);
     return h('span', {}, [
       h('input', {
         key: 'control-input',
@@ -178,12 +240,18 @@ CMS.registerShortcode('youtube', {
         onChange: event => {
           onChange({ src: event.target.value });
         },
+        style: {
+          width: '100%',
+          backgroundColor: theme === 'dark' ? 'rgb(30, 41, 59)' : 'white',
+          color: theme === 'dark' ? 'white' : 'black',
+          padding: '4px 8px',
+        },
       }),
       h(
         'iframe',
         {
           key: 'control-preview',
-          width: '420',
+          width: '100%',
           height: '315',
           src: `https://www.youtube.com/embed/${src}`,
         },