feat: ui overhaul (#676)
Before Width: | Height: | Size: 808 KiB After Width: | Height: | Size: 808 KiB |
BIN
packages/core/dev-test/_posts/assets/uploads/moby-dick.jpg
Normal file
After Width: | Height: | Size: 310 KiB |
BIN
packages/core/dev-test/assets/uploads/lobby.jpg
Normal file
After Width: | Height: | Size: 808 KiB |
Before Width: | Height: | Size: 4.3 KiB |
@ -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
|
||||
|
||||
|
After Width: | Height: | Size: 67 KiB |
@ -0,0 +1 @@
|
||||
Some text here!
|
After Width: | Height: | Size: 61 KiB |
@ -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
|
||||
|
@ -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",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
@ -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}`,
|
||||
},
|
||||
|