gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2023-08-01 12:07:52 -04:00
parent f696d5c445
commit eb2d158054
10 changed files with 205 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
BREAKING_CHANGES.md
View File

@ -1,5 +0,0 @@
Breaking changes to be documented for v3
- gitea API config has changed.
- hidden removed as widget parameter
- events

16
packages/core/src/components/entry-editor/editor-control-pane/EditorControl.tsx
View File

@ -8,10 +8,6 @@ import {
changeDraftField as changeDraftFieldAction, changeDraftField as changeDraftFieldAction,
changeDraftFieldValidation, changeDraftFieldValidation,
} from '@staticcms/core/actions/entries'; } from '@staticcms/core/actions/entries';
import {
openMediaLibrary as openMediaLibraryAction,
removeInsertedMedia as removeInsertedMediaAction,
} from '@staticcms/core/actions/mediaLibrary';
import { query as queryAction } from '@staticcms/core/actions/search'; import { query as queryAction } from '@staticcms/core/actions/search';
import useDebouncedCallback from '@staticcms/core/lib/hooks/useDebouncedCallback'; import useDebouncedCallback from '@staticcms/core/lib/hooks/useDebouncedCallback';
import useMemoCompare from '@staticcms/core/lib/hooks/useMemoCompare'; import useMemoCompare from '@staticcms/core/lib/hooks/useMemoCompare';
@ -52,11 +48,8 @@ const EditorControl = ({
disabled = false, disabled = false,
parentDuplicate = false, parentDuplicate = false,
locale, locale,
mediaPaths,
openMediaLibrary,
parentPath, parentPath,
query, query,
removeInsertedMedia,
t, t,
value, value,
forList = false, forList = false,
@ -197,10 +190,7 @@ const EditorControl = ({
duplicate, duplicate,
label: getFieldLabel(field, t), label: getFieldLabel(field, t),
locale, locale,
mediaPaths,
onChange: handleDebouncedChangeDraftField, onChange: handleDebouncedChangeDraftField,
openMediaLibrary,
removeInsertedMedia,
path, path,
query, query,
t, t,
@ -230,10 +220,7 @@ const EditorControl = ({
duplicate, duplicate,
t, t,
locale, locale,
mediaPaths,
handleDebouncedChangeDraftField, handleDebouncedChangeDraftField,
openMediaLibrary,
removeInsertedMedia,
path, path,
query, query,
finalValue, finalValue,
@ -271,7 +258,6 @@ function mapStateToProps(state: RootState, ownProps: EditorControlOwnProps) {
return { return {
...ownProps, ...ownProps,
mediaPaths: state.mediaLibrary.controlMedia,
config: state.config, config: state.config,
entry, entry,
collection, collection,
@ -282,8 +268,6 @@ function mapStateToProps(state: RootState, ownProps: EditorControlOwnProps) {
const mapDispatchToProps = { const mapDispatchToProps = {
changeDraftField: changeDraftFieldAction, changeDraftField: changeDraftFieldAction,
openMediaLibrary: openMediaLibraryAction,
removeInsertedMedia: removeInsertedMediaAction,
query: queryAction, query: queryAction,
}; };

6
packages/core/src/interface.ts
View File

@ -316,13 +316,7 @@ export interface WidgetControlProps<T, F extends BaseField = UnknownField, EV =
duplicate: boolean; duplicate: boolean;
label: string; label: string;
locale: string | undefined; locale: string | undefined;
// @deprecated Use useMediaInsert instead
mediaPaths: Record<string, MediaPath>;
onChange: (value: T | null | undefined) => void; onChange: (value: T | null | undefined) => void;
// @deprecated Use useMediaInsert instead
openMediaLibrary: EditorControlProps['openMediaLibrary'];
// @deprecated Use useMediaInsert instead
removeInsertedMedia: EditorControlProps['removeInsertedMedia'];
i18n: I18nSettings | undefined; i18n: I18nSettings | undefined;
hasErrors: boolean; hasErrors: boolean;
errors: FieldError[]; errors: FieldError[];

3
packages/core/test/data/widgets.mock.ts
View File

@ -60,7 +60,6 @@ export const createMockWidgetControlProps = <
entry, entry,
value, value,
path, path,
mediaPaths: {},
fieldsErrors, fieldsErrors,
errors, errors,
hasErrors, hasErrors,
@ -74,8 +73,6 @@ export const createMockWidgetControlProps = <
controlled: false, controlled: false,
theme: 'light', theme: 'light',
onChange: jest.fn(), onChange: jest.fn(),
openMediaLibrary: jest.fn(),
removeInsertedMedia: jest.fn(),
query: jest.fn(), query: jest.fn(),
t: jest.fn(), t: jest.fn(),
...extra, ...extra,

93
packages/docs/content/docs/beta-features.mdx
View File

@ -81,54 +81,105 @@ Available transformations are `upper`, `lower`, `date('<format>')`, `default('de
## Registering to CMS Events ## Registering to CMS Events
You can execute a function when a specific CMS event occurs. You can execute a function when a specific CMS event occurs. Supported events are `mounted`, `login`, `logout`, `change`, `preSave` and `postSave`.
Example usage: ### Mounted
The `mounted` event handler fires once the CMS is fully loaded.
```javascript ```javascript
CMS.registerEventListener({ CMS.registerEventListener({
name: 'postSave', name: 'mounted',
handler: ({ author, entry }) => console.info(JSON.stringify({ author, data: entry.data })), handler: () => {
// your code here
},
}); });
``` ```
Supported events are `mounted`, `login`, `logout`, `change`, `preSave` and `postSave`. ### Login
The `login` event handler fires when a user logs into the CMS.
```javascript
CMS.registerEventListener({
name: 'login',
handler: ({ author: { login, name } }) => {
// your code here
},
});
```
### Logout
The `logout` event handler fires when a user logs out of the CMS.
```javascript
CMS.registerEventListener({
name: 'logout',
handler: () => {
// your code here
},
});
```
### Pre Save ### Pre Save
The `preSave` event handler can be used to modify the entry data like so: The `preSave` event handler fires before the changes have been saved to your git backend, and can be used to modify the entry data like so:
```javascript ```javascript
CMS.registerEventListener({ CMS.registerEventListener({
name: 'preSave', name: 'preSave',
handler: ({ entry }) => { collection: 'posts',
handler: ({ data: { entry } }) => {
return { return {
...entry,
data: {
...entry.data, ...entry.data,
title: 'new title', title: 'new title',
},
}; };
}, },
}); });
``` ```
### Post Save
The `postSave` event handler fires after the changes have been saved to your git backend.
```javascript
CMS.registerEventListener({
name: 'postSave',
collection: 'posts',
handler: ({ data: { entry } }) => {
// your code here
},
});
```
### Change ### Change
The `change` event handler must provide a field name, and can be used to modify the entry data like so: The `change` event handler must provide a field name, and can be used to modify the entry data like so:
```javascript ```javascript
CMS.registerEventListener( CMS.registerEventListener({
{
name: 'change', name: 'change',
handler: ({ entry }, { field }) => { collection: 'posts',
return 'newFieldValue';
},
},
{
field: 'path.to.my.field', field: 'path.to.my.field',
handler: ({ data, collection, field }) => {
const currentValue = data.path.to.my.field;
return {
...data,
path: {
...data.path,
to: {
...data.path.to,
my: {
...data.path.to.my,
field: `new${currentValue}`
}
}
}
};
}, },
); });
``` ```
## i18n Support ## i18n Support
@ -146,3 +197,9 @@ See [Gitea Backend](/docs/gitea-backend) for more information.
Netlify Large Media allows you to store your media files outside of your git backend. This is helpful if you are trying to store large media files. Netlify Large Media allows you to store your media files outside of your git backend. This is helpful if you are trying to store large media files.
See [Netlify Large Media](/docs/netlify-large-media) for more information. See [Netlify Large Media](/docs/netlify-large-media) for more information.
## Live Previews
For react based projects, such as [NextJS](https://nestjs.com/), you can now utilize live preivews.
See [Live Previews](/docs/live-previews) for more information.

2
packages/docs/content/docs/gitea-backend.mdx
View File

@ -9,7 +9,7 @@ beta: true
For repositories stored on Gitea, the `gitea` backend allows CMS users to log in directly with their Gitea account. Note that all users must have push access to your content repository for this to work. For repositories stored on Gitea, the `gitea` backend allows CMS users to log in directly with their Gitea account. Note that all users must have push access to your content repository for this to work.
Please note that only Gitea **1.20** and upwards is supported due to API limitations in previous versions. Please note that only Gitea `v1.20` and upwards is supported due to API limitations in previous versions.
## Authentication ## Authentication

28
packages/docs/content/docs/live-previews.mdx Normal file
View File

@ -0,0 +1,28 @@
---
group: Customization
title: Live Previews
beta: true
weight: 51
---
Live previews are an experimental feature introduced in `v3` to provide updates on a live page of your website while you update the content in your CMS. Currently this feature only works with react based projects, such as [NextJS](https://nestjs.com/).
## Getting Started
You can turn on live previews for either the whole CMS, individual collections or individual files in a collection.
Simply update your `editor` config with a url template for the live editor to use to load your live pages.
<CodeTabs>
```yaml
```
```javascript
editor: {
live_preview: ''
}
```
</CodeTabs>

284
packages/docs/content/docs/migration-guide-v2.mdx
View File

@ -1,284 +0,0 @@
---
group: Migration
title: How to Upgrade to v2
weight: 101
---
Static CMS v2 introduces a brand new UI and an updated media library.
In this guide, we will walk you through the steps for upgrading to Static CMS v2.
Please [report any issues](https://github.com/StaticJsCMS/static-cms/issues/new) you encounter while upgrading to Static CMS v2.
## Installing
To install the latest version of Static CMS:
```bash
npm install @staticcms/core@^2.0.0
```
Or if you’re using yarn:
```bash
yarn add @staticcms/core@^2.0.0
```
If you are using a CDN to load Static CMS, simply change your URL:
```html
<script src="https://unpkg.com/@staticcms/app@^2.0.0/dist/static-cms-app.js"></script>
```
### Proxy Server
If you are using `@staticcms/proxy-server` you will need to ensure you are using version `3.0.0` or above for all features in Static CMS `v2.0.0` to work.
## Deprecated Items Removed
All previously deprecated items have been removed as part of this release.
- `getAsset` - Use `useMediaAsset` React hook instead
- `createReactClass` - Use [react functional components](https://react.dev/learn) instead
- `isFieldDuplicate` - Use `duplicate` variable instead
- `isFieldHidden` - Use `hidden` variable instead
## Importing Static CMS Styles
In `v2.0.0` the apps stylings are not longer bundled into the main javscript file. For both CDN and bundled setups, you will need to include the css file yourself.
**CDN**:
```html
<link rel="stylesheet" href="https://unpkg.com/@staticcms/app@^2.0.0/dist/main.css" />
```
**Bundling**:
```js
import '@staticcms/core/dist/main.css';
```
### Custom Preview Styles
Some basic preview styles are now provided in order to properly support dark mode and make the basic previews look a bit better. However, if you [provide your own preview styles](/docs/custom-previews#editor-preview-styles) these default styles will not be included in the preview.
## Nested Collections
While still in beta, [Nested Collections](/docs/collection-types#nested-collections) are now fully working and supported in `v2.0.0`. However there are some breaking config changes. The `meta` config has been dropped and its `path` property has been moved into the `nested` prop. You can also no longer specify the widget type for the path.
**Old Config**
<CodeTabs>
```yaml
collections:
- name: pages
label: Pages
label_singular: 'Page'
folder: content/pages
create: true
nested:
depth: 100
summary: '{{title}}'
fields:
- label: Title
name: title
widget: string
- label: Body
name: body
widget: markdown
meta: { path: { widget: string, label: 'Path', index_file: 'index' } }
```
```js
{
collections: [
{
name: 'pages',
label: 'Pages',
label_singular: 'Page',
folder: 'content/pages',
create: true,
nested: {
depth: 100,
summary: '{{title}}',
},
fields: [
{
label: 'Title',
name: 'title',
widget: 'string',
},
{
label: 'Body',
name: 'body',
widget: 'markdown',
},
],
meta: {
path: {
widget: 'string',
label: 'Path',
index_file: 'index',
},
},
},
];
}
```
</CodeTabs>
**New Config**
<CodeTabs>
```yaml
collections:
- name: pages
label: Pages
label_singular: 'Page'
folder: content/pages
create: true
nested:
depth: 100
summary: '{{title}}'
path: { label: 'Path', index_file: 'index' }
fields:
- label: Title
name: title
widget: string
- label: Body
name: body
widget: markdown
```
```js
{
collections: [
{
name: 'pages',
label: 'Pages',
label_singular: 'Page',
folder: 'content/pages',
create: true,
nested: {
depth: 100,
summary: '{{title}}',
path: {
label: 'Path',
index_file: 'index',
},
},
fields: [
{
label: 'Title',
name: 'title',
widget: 'string',
},
{
label: 'Body',
name: 'body',
widget: 'markdown',
},
],
},
];
}
```
</CodeTabs>
## External Media Libraries
External media integrations for Cloudinary and Uploadcare have been removed as part of an ongoing to effect to narrow the focus of Static CMS. With [Decap](https://decapcms.org/) (previously Netlify CMS) being supported again its not as critical for Static CMS to support every possible option. So, in order to focus our efforts on other features, it has been decided to remove these external media integrations.
[Netlify Large Media](/docs/netlify-large-media) is still available.
This brings with it some breaking changes for the `media_library` config property.
**Old Config (for Image or File Field)**
<CodeTabs>
```yaml
name: thumbnail
label: Featured Image
widget: image
default: /uploads/chocolate-dogecoin.jpg
media_library:
choose_url: true
config:
max_file_size: 512000
```
```js
{
name: "thumbnail",
label: "Featured Image",
widget: "image",
default: "/uploads/chocolate-dogecoin.jpg",
media_library: {
choose_url: true,
config: {
max_file_size: 512000
}
}
}
```
</CodeTabs>
**New Config**
<CodeTabs>
```yaml
name: thumbnail
label: Featured Image
widget: image
default: /uploads/chocolate-dogecoin.jpg
choose_url: true
media_library:
max_file_size: 512000
```
```js
{
name: "thumbnail",
label: "Featured Image",
widget: "image",
default: "/uploads/chocolate-dogecoin.jpg",
choose_url: true,
media_library: {
max_file_size: 512000
}
}
```
</CodeTabs>
Also the `clearMediaControl` and `removeMediaControl` widget control props have been removed as they were only used for the external media library integrations.
## Other Breaking Changes
- [Card previews](/docs/custom-previews#collection-card-preview) now are only used for the card view. The `viewStyle` property has been removed. [Field previews](/docs/custom-previews#field-preview) can be used to change the table view.
- Widget Control component property changes:
- `isDisabled` renamed to `disabled`
- `isDuplicate` renamed to `duplicate`
- `isHidden` renamed to `hidden`
- `mediaPaths` is now object of id mapped to an object containing the `path` and optional `alt`
- `useMediaInsert` hook now requires a collection to be passed in. Its callback function now receives an object containing the `path` and optional `alt` instead of a string.
- `prePublish` and `postPublish` events have been dropped.
## Other Changes
- `summary_fields` property added to [collection configuration](/docs/collection-overview) to allow customization of the table view. This works with the new [field preview](/docs/custom-previews).
- New widget control property: `forSingleList`. It specifies if the widget is within a singleton `list` widget (string array, number array, etc)
## Deprecations
In the Widget Control component property, the following properties have been deprecated. They will be removed in `v3.0.0`.
| Param | Type | Description |
| ------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| mediaPaths | object | <Deprecated>Use [useMediaInsert](/docs/custom-widgets#interacting-with-the-media-library) instead.</Deprecated> Key/value object of control IDs (passed to the media library) mapping to media paths |
| openMediaLibrary | function | <Deprecated>Use [useMediaInsert](/docs/custom-widgets#interacting-with-the-media-library) instead.</Deprecated> Opens the media library popup. See [Open Media Library](#open-media-library) |
| removeInsertedMedia | function | <Deprecated>Use [useMediaInsert](/docs/custom-widgets#interacting-with-the-media-library) instead.</Deprecated> Removes draft media for a give control ID |

90
packages/docs/content/docs/migration-guide-v3.mdx Normal file
View File

@ -0,0 +1,90 @@
---
group: Migration
title: How to Upgrade to v3
weight: 101
---
Static CMS v3 introduces:
- Mobile support
- Depedent fields (see [Field Conditions](/docs/widgets#field-conditions) for more information)
- Live previews for react based projects <BetaImage /> (see [Live Previews](/docs/live-previews) for more information)
In this guide, we will walk you through the steps for upgrading to Static CMS v3.
Please [report any issues](https://github.com/StaticJsCMS/static-cms/issues/new) you encounter while upgrading to Static CMS v3.
## Installing
To install the latest version of Static CMS:
```bash
npm install @staticcms/core@^3.0.0
```
Or if you're using yarn:
```bash
yarn add @staticcms/core@^3.0.0
```
If you are using a CDN to load Static CMS, simply change your URLs:
```html
<link rel="stylesheet" href="https://unpkg.com/@staticcms/app@^3.0.0/dist/main.css" />
```
```html
<script src="https://unpkg.com/@staticcms/app@^3.0.0/dist/static-cms-app.js"></script>
```
## Gitea Backend Update <BetaImage />
While still remaining in beta, the Gitea backend has been evolving. This update switches the authentication mechanism to PKCE auth and improves performance when dealing with multiple file commits.
To use Gitea with Static CMS v3, you need to update your Gitea instance to at least `v1.20`. You will also need to update your config to match the setup for PKCE authentication. See [Gitea authentication](/docs/gitea-backend#authentication).
## CMS Events <BetaImage />
CMS Events have undergone a significant refactor in this update, including adding a new `change` event. You may need to update your config as follows to continue to use them. The `preSave` and `postSave` events along with the new `change` event, now require a `collection` be provided during registration, with an optional `file` if you are targeting a [file collection](/docs/collection-types#file-collections). All events now can handle async handlers as well.
**Old setup**
```js
CMS.registerEventListener({
name: 'preSave',
handler: ({ entry }) => {
return {
...entry,
data: {
...entry.data,
title: 'new title',
},
};
},
});
```
**New Setup**
```js
CMS.registerEventListener({
name: 'preSave',
collection: 'posts',
handler: ({ data: { entry } }) => {
return {
...entry.data,
title: 'new title',
};
},
});
```
See [CMS Events](/docs/beta-features#registering-to-cms-events) for more details.
## Other Breaking Changes
- The following Widget Control component properties have been removed:
- `hidden`
- `mediaPaths` - Use [useMediaInsert](/docs/custom-widgets#interacting-with-the-media-library) instead.
- `openMediaLibrary` - Use [useMediaInsert](/docs/custom-widgets#interacting-with-the-media-library) instead.
- `removeInsertedMedia` - Use [useMediaInsert](/docs/custom-widgets#interacting-with-the-media-library) instead.

6
packages/docs/content/releases.json
View File

@ -1,5 +1,11 @@
{ {
"releases": [ "releases": [
{
"date": "2023-08-01T10:00:00.000Z",
"version": "v3.0.0",
"type": "major",
"description": "Mobile support and dependent fields"
},
{ {
"date": "2023-06-14T10:00:00.000Z", "date": "2023-06-14T10:00:00.000Z",
"version": "v2.5.1", "version": "v2.5.1",