feat: ui overhaul (#676)
This commit is contained in:
committed by
GitHub
parent
5c86462859
commit
66b81e9228
3
packages/demo/config-overrides.js
Normal file
3
packages/demo/config-overrides.js
Normal file
@ -0,0 +1,3 @@
|
||||
const { removeModuleScopePlugin } = require("customize-cra");
|
||||
|
||||
module.exports = removeModuleScopePlugin();
|
@ -3,8 +3,8 @@
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "react-scripts start",
|
||||
"build": "react-scripts build"
|
||||
"dev": "react-app-rewired start",
|
||||
"build": "react-app-rewired build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/eslint-parser": "7.21.3",
|
||||
@ -18,16 +18,21 @@
|
||||
"@babel/core": "7.21.3",
|
||||
"@babel/plugin-syntax-flow": "7.18.6",
|
||||
"@babel/plugin-transform-react-jsx": "7.21.0",
|
||||
"autoprefixer": "10.4.13",
|
||||
"copy-webpack-plugin": "11.0.0",
|
||||
"customize-cra": "1.0.0",
|
||||
"eslint": "8.36.0",
|
||||
"eslint-import-resolver-typescript": "3.5.3",
|
||||
"eslint-plugin-cypress": "2.12.1",
|
||||
"eslint-plugin-import": "2.27.5",
|
||||
"eslint-plugin-prettier": "4.2.1",
|
||||
"eslint-plugin-react-hooks": "4.6.0",
|
||||
"eslint-plugin-react": "7.32.2",
|
||||
"eslint-plugin-react-hooks": "4.6.0",
|
||||
"eslint-plugin-unicorn": "46.0.0",
|
||||
"eslint": "8.36.0",
|
||||
"postcss": "8.4.21",
|
||||
"postcss-scss": "4.0.6",
|
||||
"prettier": "2.8.4",
|
||||
"react-app-rewired": "2.2.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "4.9.5",
|
||||
"webpack": "5.76.2"
|
||||
|
Before Width: | Height: | Size: 808 KiB After Width: | Height: | Size: 808 KiB |
BIN
packages/demo/public/_posts/assets/uploads/moby-dick.jpg
Normal file
BIN
packages/demo/public/_posts/assets/uploads/moby-dick.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 310 KiB |
BIN
packages/demo/public/assets/uploads/lobby.jpg
Normal file
BIN
packages/demo/public/assets/uploads/lobby.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 808 KiB |
Binary file not shown.
Before Width: | Height: | Size: 4.3 KiB |
@ -3,6 +3,19 @@ backend:
|
||||
site_url: 'https://staticcms.org/'
|
||||
media_folder: assets/uploads
|
||||
locale: en
|
||||
i18n:
|
||||
# Required and can be one of multiple_folders, multiple_files or single_file
|
||||
# multiple_folders - persists files in `<folder>/<locale>/<slug>.<extension>`
|
||||
# multiple_files - persists files in `<folder>/<slug>.<locale>.<extension>`
|
||||
# single_file - persists a single file in `<folder>/<slug>.<extension>`
|
||||
structure: multiple_files
|
||||
|
||||
# Required - a list of locales to show in the editor UI
|
||||
locales: [en, de, fr]
|
||||
|
||||
# Optional, defaults to the first item in locales.
|
||||
# The locale to be used for fields validation and as a baseline for the entry.
|
||||
defaultLocale: en
|
||||
collections:
|
||||
- name: posts
|
||||
label: Posts
|
||||
@ -12,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
|
||||
@ -206,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'
|
||||
@ -217,25 +233,28 @@ collections:
|
||||
label: Date
|
||||
widget: datetime
|
||||
format: 'MMM d, yyyy'
|
||||
date_format: 'MMM d, yyyy'
|
||||
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'
|
||||
@ -593,6 +612,27 @@ collections:
|
||||
name: thumb
|
||||
widget: image
|
||||
required: false
|
||||
- label: Collapsed, optional with required children
|
||||
name: collapsed_optional_with_required_children
|
||||
widget: object
|
||||
required: false
|
||||
collapsed: true
|
||||
fields:
|
||||
- name: layout
|
||||
widget: hidden
|
||||
default: post
|
||||
- label: Number of posts on frontpage
|
||||
name: front_limit
|
||||
widget: number
|
||||
required: true
|
||||
- label: Author
|
||||
name: author
|
||||
widget: string
|
||||
required: true
|
||||
- label: Thumbnail
|
||||
name: thumb
|
||||
widget: image
|
||||
required: true
|
||||
- name: relation
|
||||
label: Relation
|
||||
file: _widgets/relation.json
|
||||
@ -607,7 +647,7 @@ collections:
|
||||
- date
|
||||
search_fields:
|
||||
- title
|
||||
- body
|
||||
- date
|
||||
value_field: title
|
||||
- label: Required With Default
|
||||
name: with_default
|
||||
@ -618,7 +658,7 @@ collections:
|
||||
- date
|
||||
search_fields:
|
||||
- title
|
||||
- body
|
||||
- date
|
||||
value_field: title
|
||||
default: This is a YAML front matter post
|
||||
- label: Optional Validation
|
||||
@ -631,7 +671,7 @@ collections:
|
||||
- date
|
||||
search_fields:
|
||||
- title
|
||||
- body
|
||||
- date
|
||||
value_field: title
|
||||
- label: Multiple
|
||||
name: multiple
|
||||
@ -644,7 +684,7 @@ collections:
|
||||
- date
|
||||
search_fields:
|
||||
- title
|
||||
- body
|
||||
- date
|
||||
value_field: title
|
||||
- label: Multiple With Default
|
||||
name: multiple_with_default
|
||||
@ -660,7 +700,7 @@ collections:
|
||||
- date
|
||||
search_fields:
|
||||
- title
|
||||
- body
|
||||
- date
|
||||
value_field: title
|
||||
- name: select
|
||||
label: Select
|
||||
@ -1188,3 +1228,24 @@ collections:
|
||||
- label: File
|
||||
name: file
|
||||
widget: file
|
||||
- name: i18n_playground
|
||||
label: i18n Playground
|
||||
i18n: true
|
||||
folder: _i18n_playground
|
||||
identifier_field: slug
|
||||
create: true
|
||||
fields:
|
||||
# The slug field will be omitted from the translation.
|
||||
- name: slug
|
||||
label: Slug
|
||||
widget: string
|
||||
# same as 'i18n: translate'. Allows translation of the description field
|
||||
- name: description
|
||||
label: Description
|
||||
widget: text
|
||||
i18n: true
|
||||
# The date field will be duplicated from the default locale.
|
||||
- name: date
|
||||
label: Date
|
||||
widget: datetime
|
||||
i18n: duplicate
|
||||
|
File diff suppressed because one or more lines are too long
@ -63,6 +63,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 }) => {
|
||||
const title = entry.data.site_title;
|
||||
const posts = entry.data.posts;
|
||||
@ -134,6 +168,8 @@ const CustomPage = () => {
|
||||
cms.registerPreviewStyle(".toastui-editor-contents h1 { color: blue }", { raw: true });
|
||||
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.
|
||||
|
@ -1,11 +1,12 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
|
||||
import './cms';
|
||||
import "../../core/src/styles/main.css";
|
||||
import "./cms";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<div />
|
||||
</React.StrictMode>,
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
7
packages/demo/tailwind.config.js
Normal file
7
packages/demo/tailwind.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
const baseConfig = require('../../tailwind.base.config');
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['../core/src/**/*.tsx'],
|
||||
...baseConfig,
|
||||
};
|
Reference in New Issue
Block a user