diff --git a/packages/core/src/interface.ts b/packages/core/src/interface.ts index 6bf54cb5..e2edcc1c 100644 --- a/packages/core/src/interface.ts +++ b/packages/core/src/interface.ts @@ -277,11 +277,16 @@ export interface WidgetControlProps; onChange: (value: T | null | undefined) => void; + // @deprecated Use useMediaInsert instead clearMediaControl: EditorControlProps['clearMediaControl']; + // @deprecated Use useMediaInsert instead openMediaLibrary: EditorControlProps['openMediaLibrary']; + // @deprecated Use useMediaInsert instead removeInsertedMedia: EditorControlProps['removeInsertedMedia']; + // @deprecated Use useMediaInsert instead removeMediaControl: EditorControlProps['removeMediaControl']; i18n: I18nSettings | undefined; hasErrors: boolean; diff --git a/packages/docs/content/docs/add-to-your-site-bundling.mdx b/packages/docs/content/docs/add-to-your-site-bundling.mdx index 7fbf91c3..35c0b168 100644 --- a/packages/docs/content/docs/add-to-your-site-bundling.mdx +++ b/packages/docs/content/docs/add-to-your-site-bundling.mdx @@ -18,16 +18,18 @@ npm install @staticcms/core@latest yarn add @staticcms/core@latest ``` -Then create a new route for your project (for instance at `/admin`), and import Static CMS: +Then create a new route for your project (for instance at `/admin`), then import Static CMS and its styles: ```js import CMS from '@staticcms/core'; +import '@staticcms/core/dist/main.css'; ``` The default export is a _CMS_ object, which has an `init` method that takes an object with a `config` attribute. The `config` attribute is an object representing the [configuration options](/docs/configuration-options). You can use destructuring assignment syntax as shorthand: ```js import CMS from '@staticcms/core'; +import '@staticcms/core/dist/main.css'; import config from './config'; // Initialize the CMS object @@ -38,12 +40,13 @@ CMS.registerPreviewTemplate('my-template', MyTemplate); **Note**: Wherever you initialize Static CMS (via `CMS.init()`), it takes over the current page. Make sure you only run the initialization code on your CMS page. -If the CMS object is initialized without being passed an object with a valid config attribute, it will try to fetch and read a `config.yml` file, via http, within the same path where the CMS resides (`/admin/config.yml`). +If the CMS object is initialized without being passed an object with a valid config attribute, it will try to fetch and read a `config.yml` file, via http, within the same path where Static CMS resides (`/admin/config.yml`). ```js import CMS from '@staticcms/core'; +import '@staticcms/core/dist/main.css'; -// Initialize the CMS object +// Initialize Static CMS object CMS.init(); // Now the registry is available via the CMS object. CMS.registerPreviewTemplate('my-template', MyTemplate); @@ -85,7 +88,7 @@ The configuration above specifies your backend protocol and your publication bra ### Media and Public Folders -Static CMS allows users to upload images directly within the editor. For this to work, the CMS needs to know where to save them. If you already have an `images` folder in your project, you could use its path, possibly creating an `uploads` sub-folder, for example: +Static CMS allows users to upload images directly within the editor. For this to work, Static CMS needs to know where to save them. If you already have an `images` folder in your project, you could use its path, possibly creating an `uploads` sub-folder, for example: ```js @@ -249,7 +252,7 @@ Netlify's Identity and Git Gateway services allow you to manage CMS admin users 1. Go to **Settings > Identity**, and select **Enable Identity service**. 2. Under **Registration preferences**, select **Open** or **Invite only**. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience. 3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under **External providers**. -4. Scroll down to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git host and generates an API access token. In this case, we're leaving the **Roles** field blank, which means any logged in user may access the CMS. For information on changing this, check the [Netlify Identity documentation](https://www.netlify.com/docs/identity/). +4. Scroll down to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git host and generates an API access token. In this case, we're leaving the **Roles** field blank, which means any logged in user may access Static CMS. For information on changing this, check the [Netlify Identity documentation](https://www.netlify.com/docs/identity/). ### Add the Netlify Identity Widget @@ -261,7 +264,7 @@ With the backend set to handle authentication, now you need a frontend interface Add this to the `` of your CMS index page at `/admin/index.html`, as well as the `` of your site's main index page. Depending on how your site generator is set up, this may mean you need to add it to the default template, or to a "partial" or "include" template. If you can find where the site stylesheet is linked, that's probably the right place. Alternatively, you can include the script in your site using Netlify's [Script Injection](https://www.netlify.com/docs/inject-analytics-snippets/) feature. -When a user logs in with the Netlify Identity widget, an access token directs to the site homepage. In order to complete the login and get back to the CMS, redirect the user back to the `/admin/` path. To do this, add the following script before the closing `body` tag of your site's main index page: +When a user logs in with the Netlify Identity widget, an access token directs to the site homepage. In order to complete the login and get back to Static CMS, redirect the user back to the `/admin/` path. To do this, add the following script before the closing `body` tag of your site's main index page: ```html + @@ -57,7 +58,7 @@ In this example, we pull the `admin/index.html` file from a public CDN. ``` -In the code above the `script` is loaded from the `unpkg` CDN. Should there be any issue, `jsDelivr` can be used as an alternative source. Simply set the `src` to `https://cdn.jsdelivr.net/npm/@staticcms/app@%5E1.0.0/dist/static-cms-app.js` +In the code above the `script` is loaded from the `unpkg` CDN. Should there be any issue, `jsDelivr` can be used as an alternative source. Simply replace `https://unpkg.com/` with `https://cdn.jsdelivr.net/npm/` ## Configuration @@ -91,7 +92,7 @@ The configuration above specifies your backend protocol and your publication bra ### Media and Public Folders -Static CMS allows users to upload images directly within the editor. For this to work, the CMS needs to know where to save them. If you already have an `images` folder in your project, you could use its path, possibly creating an `uploads` sub-folder, for example: +Static CMS allows users to upload images directly within the editor. For this to work, Static CMS needs to know where to save them. If you already have an `images` folder in your project, you could use its path, possibly creating an `uploads` sub-folder, for example: ```yaml @@ -256,7 +257,7 @@ Netlify's Identity and Git Gateway services allow you to manage CMS admin users 1. Go to **Settings > Identity**, and select **Enable Identity service**. 2. Under **Registration preferences**, select **Open** or **Invite only**. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience. 3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under **External providers**. -4. Scroll down to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git host and generates an API access token. In this case, we're leaving the **Roles** field blank, which means any logged in user may access the CMS. For information on changing this, check the [Netlify Identity documentation](https://www.netlify.com/docs/identity/). +4. Scroll down to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git host and generates an API access token. In this case, we're leaving the **Roles** field blank, which means any logged in user may access Static CMS. For information on changing this, check the [Netlify Identity documentation](https://www.netlify.com/docs/identity/). ### Add the Netlify Identity Widget @@ -268,7 +269,7 @@ With the backend set to handle authentication, now you need a frontend interface Add this to the `` of your CMS index page at `/admin/index.html`, as well as the `` of your site's main index page. Depending on how your site generator is set up, this may mean you need to add it to the default template, or to a "partial" or "include" template. If you can find where the site stylesheet is linked, that's probably the right place. Alternatively, you can include the script in your site using Netlify's [Script Injection](https://www.netlify.com/docs/inject-analytics-snippets/) feature. -When a user logs in with the Netlify Identity widget, an access token directs to the site homepage. In order to complete the login and get back to the CMS, redirect the user back to the `/admin/` path. To do this, add the following script before the closing `body` tag of your site's main index page: +When a user logs in with the Netlify Identity widget, an access token directs to the site homepage. In order to complete the login and get back to Static CMS, redirect the user back to the `/admin/` path. To do this, add the following script before the closing `body` tag of your site's main index page: ```html -``` - -Static CMS: - -```html - -``` - -### Bundling - -```bash -# Uninstall Netlify CMS -npm uninstall netlify-cms-app -npm uninstall netlify-cms-core - -# Install Static CMS -npm install @staticcms/core -``` - -#### Change your imports - -Netlify CMS: - -```js -import CMS from 'netlify-cms-app' -``` - -Static CMS: - -```js -import CMS from '@staticcms/core'; -``` - -## Changes -- React `18.2.0` is now the minimum supported React version. If you are using Static CMS through a CDN, this comes bundled. -- [Moment](https://momentjs.com/) has been dropped as the date library used. Instead we are now using [date-fns](https://date-fns.org/). Date formats in your configuration will need to be updated. See [format docs](https://date-fns.org/v2.29.3/docs/format). -- CMS must be explicitly initiated now by calling `CMS.init()` -- Passing a config to `CMS.init()` will now completely override `config.yml` (they are now exclusive), instead of being merged with `config.yml` -- A [new markdown editor](/docs/widget-markdown) has been added. It comes with a new [shortcode](/docs/widget-markdown#shortcodes) system, old editor components no longer work. -- The `sortable_fields` configuration option has been slightly changed, as we now allow a [default sorting option](/docs/collection-overview#sortable_fields). -

Netlify CMS: - ```yaml - sortable_fields: - - field1 - - field2 - ``` -
Static CMS: - ```yaml - sortable_fields: - fields: - - field1 - - field2 - ``` -
-- Support in the List Widget for the `field` property has been dropped. A single field in the `fields` property [achieves the same behavior](/docs/widget-list). -- Custom widget creation has changed slightly. React class components have been deprecated. Widgets should all be [functional components](https://reactjs.org/docs/components-and-props.html#function-and-class-components) now. There have also been changes to how custom widgets are registered and the properties passed to the controls and previews. See [custom widgets](/docs/custom-widgets) for full details. - -## Deprecated and Removed Features -- Dropped the following beta features from Netlify CMS. - - GraphQL support for GitHub and GitLab - - Remark plugins (new markdown editor has its own plugin system) - - Dynamic Default Values - - Custom Mount Element -- Dropped support for AssetStore integration -- Dropped support for Azure backend -- All deprecated features were removed - - `date` widget has been removed - - `datetime` widget - - `dateFormat` has been removed (Use `date_format` instead) - - `timeFormat` has been removed (Use `time_format` instead) - - Gitlab, Client-Side Implicit Grant has been removed -- `createClass` is deprecated, [functional components](https://reactjs.org/docs/components-and-props.html#function-and-class-components) should be used instead. Basic react hooks are provided as globals now. -- `getAsset` is deprecated, the new `useMediaAsset` hook should be used instead. See [Interacting With The Media Library](/docs/custom-widgets#interacting-with-the-media-library). - -## Beta Features - -All beta features from Netlify CMS that were kept, remain in beta and may not fully function in their current state. Please [submit an issue](https://github.com/StaticJsCMS/static-cms/issues) for any bugs you find. - -## Platform Changes - -### Gatsby - -If you are using Gatsby you will need to change out your CMS plugin. - -```bash -# Uninstall Netlify CMS plugin -npm uninstall gatsby-plugin-netlify-cms - -# Install Static CMS plugin -npm install gatsby-plugin-static-cms -``` - -## Local Development Changes - -If you are using the local backend you will need to switch the proxy server package you are using. - -Netlify CMS: - -```bash -npx netlify-cms-proxy-server -``` - -Static CMS: - -```bash -npx @staticcms/proxy-server -``` diff --git a/packages/docs/content/docs/start-with-a-template.mdx b/packages/docs/content/docs/start-with-a-template.mdx index 1b90b69f..570d9489 100644 --- a/packages/docs/content/docs/start-with-a-template.mdx +++ b/packages/docs/content/docs/start-with-a-template.mdx @@ -49,7 +49,7 @@ After clicking one of those buttons, authenticate with GitHub and choose a repos ![Sample email subject line: You've been invited to join radiologist-amanda-53841.netlify.com](/img/email-subject.webp) 2. Wait for the deployment to complete, then click the link to accept the invite. Your site will open with a prompt to create a password. !["Complete your signup" modal on the Kaldi coffee site](/img/create-password.webp) -3. Enter a password, sign in, and you'll go to the CMS. (For future visits, you can go straight to `/admin/`.) +3. Enter a password, sign in, and you'll go to Static CMS. (For future visits, you can go straight to `/admin/`.) Try adding and editing posts, or changing the content of the Products page. When you save, the changes are pushed immediately to your Git repository, triggering a build on Netlify, and updating the content on your site. Check out the configuration code by visiting your site repo. diff --git a/packages/docs/content/docs/typescript.mdx b/packages/docs/content/docs/typescript.mdx index be9f61f0..5676f022 100644 --- a/packages/docs/content/docs/typescript.mdx +++ b/packages/docs/content/docs/typescript.mdx @@ -58,8 +58,6 @@ const EditorControl: FC> = ({ field, // Typed as a HtmlField value, // Typed as string | null | undefined onChange, // Typed to accept string | null | undefined - openMediaLibrary, - mediaPaths }) => { ... }; diff --git a/packages/docs/content/docs/updating-your-cms.mdx b/packages/docs/content/docs/updating-your-cms.mdx index 610aafad..f61234ed 100644 --- a/packages/docs/content/docs/updating-your-cms.mdx +++ b/packages/docs/content/docs/updating-your-cms.mdx @@ -12,14 +12,14 @@ If you are using a package manager like Yarn or NPM, use their standard procedur ## CDN -If you are using the CMS through a CDN like Unpkg, then that depends on the version tag you are using. You can find the version tag in the `/admin/index.html` file of your site. +If you are using Static CMS through a CDN like Unpkg, then that depends on the version tag you are using. You can find the version tag in the `/admin/index.html` file of your site. -- (Recommended) If you use `^1.0.0`, the CMS does all updates except major versions automatically. - - It upgrades to `1.0.1`, `1.1.0`, `1.1.1`. +- (Recommended) If you use `^2.0.0`, Static CMS does all updates except major versions automatically. + - It upgrades to `2.0.1`, `2.1.0`, `2.1.1`. - It does not upgrade to `2.0.0` or higher. - It does not upgrade to beta versions. -- If you use `~1.0.0`, the CMS will do only patch updates automatically. - - It upgrades `1.0.1`, `1.0.2`. - - It does not upgrade to `1.1.0` or higher. +- If you use `~2.0.0`, Static CMS will do only patch updates automatically. + - It upgrades `2.0.1`, `2.0.2`. + - It does not upgrade to `2.1.0` or higher. - It does not upgrade beta versions. diff --git a/packages/docs/content/docs/uploadcare.mdx b/packages/docs/content/docs/uploadcare.mdx index ad18d9b4..09a60b0a 100644 --- a/packages/docs/content/docs/uploadcare.mdx +++ b/packages/docs/content/docs/uploadcare.mdx @@ -7,7 +7,7 @@ beta: true Uploadcare is a sleek service that allows you to upload files without worrying about maintaining a growing collection — more of an asset store than a library. Just upload when you need to, and the files are hosted on their CDN. They provide image processing controls from simple cropping and rotation to filters and face detection, and a lot more. You can check out Uploadcare's full feature set on their [website](https://uploadcare.com/). -The Uploadcare media library integration for Static CMS allows you to use Uploadcare as your media handler within the CMS itself. It's available by default as of our 2.1.0 release, and works in tandem with the existing file and image widgets, so using it only requires creating an Uploadcare account and updating your Static CMS configuration. +The Uploadcare media library integration for Static CMS allows you to use Uploadcare as your media handler within Static CMS itself. It's available by default as of our 2.1.0 release, and works in tandem with the existing file and image widgets, so using it only requires creating an Uploadcare account and updating your Static CMS configuration. **Please make sure that Static CMS is updated to 2.1.0 or greater before proceeding.** diff --git a/packages/docs/content/docs/widget-markdown.mdx b/packages/docs/content/docs/widget-markdown.mdx index 48b13ec8..5cf10487 100644 --- a/packages/docs/content/docs/widget-markdown.mdx +++ b/packages/docs/content/docs/widget-markdown.mdx @@ -10,7 +10,7 @@ weight: 19 The markdown widget provides a full fledged text editor allowing users to format text with features such as headings and blockquotes. Users can change their editing view with a handy toggle button. -_Please note:_ If you want to use your markdown editor to fill a markdown file contents after its frontmatter, you'll have to name the field `body` so the CMS recognizes it and saves the file accordingly. +_Please note:_ If you want to use your markdown editor to fill a markdown file contents after its frontmatter, you'll have to name the field `body` so Static CMS recognizes it and saves the file accordingly. ## Widget Options diff --git a/packages/docs/content/docs/widgets.mdx b/packages/docs/content/docs/widgets.mdx index 109c68d8..200992c1 100644 --- a/packages/docs/content/docs/widgets.mdx +++ b/packages/docs/content/docs/widgets.mdx @@ -8,7 +8,7 @@ Widgets define the data type and interface for entry fields. Static CMS comes wi Widgets are specified as collection fields in the Static CMS `config` file. Note that [YAML syntax](https://en.wikipedia.org/wiki/YAML#Basic_components) allows lists and objects to be written in block or inline style, and the code samples below include a mix of both. -To see working examples of all of the built-in widgets, try making a 'Kitchen Sink' collection item on the [CMS demo site](https://demo.staticcms.org/). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/StaticJsCMS/static-cms/blob/main/dev-test/config.yml) to see how each field was configured. +To see working examples of all of the built-in widgets, try making a 'Kitchen Sink' collection item on the [CMS demo site](https://demo.staticcms.org/). (No login required: click the login button and Static CMS will open.) You can refer to the demo [configuration code](https://github.com/StaticJsCMS/static-cms/blob/main/dev-test/config.yml) to see how each field was configured. ## Available Widgets diff --git a/packages/docs/src/components/docs/components/Alert.tsx b/packages/docs/src/components/docs/components/Alert.tsx new file mode 100644 index 00000000..84032312 --- /dev/null +++ b/packages/docs/src/components/docs/components/Alert.tsx @@ -0,0 +1,27 @@ +import MuiAlert from '@mui/material/Alert'; + +import type { AlertProps } from '@mui/material/Alert'; + +const Alert = ({ children, ...props }: AlertProps) => { + return ( + + {children} + + ); +}; + +export default Alert; diff --git a/packages/docs/src/components/docs/components/Deprecated.tsx b/packages/docs/src/components/docs/components/Deprecated.tsx new file mode 100644 index 00000000..ed6d3682 --- /dev/null +++ b/packages/docs/src/components/docs/components/Deprecated.tsx @@ -0,0 +1,29 @@ +import Typography from '@mui/material/Typography'; + +import type { FC, ReactNode } from 'react'; + +interface DeprecatedProps { + children?: ReactNode; +} + +const Deprecated: FC = ({ children }) => { + return ( + + Deprecated.{children ? <> {children} : null} + + ); +}; + +export default Deprecated; diff --git a/packages/docs/src/pages/docs/[doc].tsx b/packages/docs/src/pages/docs/[doc].tsx index 93a0032d..75f4e72f 100644 --- a/packages/docs/src/pages/docs/[doc].tsx +++ b/packages/docs/src/pages/docs/[doc].tsx @@ -1,13 +1,19 @@ -import Alert from '@mui/material/Alert'; import { styled, useTheme } from '@mui/material/styles'; import { MDXRemote } from 'next-mdx-remote'; import { serialize } from 'next-mdx-remote/serialize'; import remarkGfm from 'remark-gfm'; import BetaImage from '../../components/docs/BetaImage'; +import DocsContent from '../../components/docs/DocsContent'; +import DocsLeftNav from '../../components/docs/DocsLeftNav'; +import DocsRightNav from '../../components/docs/DocsRightNav'; +import Alert from '../../components/docs/components/Alert'; import Anchor from '../../components/docs/components/Anchor'; import Blockquote from '../../components/docs/components/Blockquote'; import CodeTabs from '../../components/docs/components/CodeTabs'; +import Deprecated from '../../components/docs/components/Deprecated'; +import Template from '../../components/docs/components/Template'; +import Templates from '../../components/docs/components/Templates'; import Header1 from '../../components/docs/components/headers/Header1'; import Header2 from '../../components/docs/components/headers/Header2'; import Header3 from '../../components/docs/components/headers/Header3'; @@ -19,11 +25,6 @@ import TableBody from '../../components/docs/components/table/TableBody'; import TableBodyCell from '../../components/docs/components/table/TableBodyCell'; import TableHead from '../../components/docs/components/table/TableHead'; import TableHeaderCell from '../../components/docs/components/table/TableHeaderCell'; -import Template from '../../components/docs/components/Template'; -import Templates from '../../components/docs/components/Templates'; -import DocsContent from '../../components/docs/DocsContent'; -import DocsLeftNav from '../../components/docs/DocsLeftNav'; -import DocsRightNav from '../../components/docs/DocsRightNav'; import Page from '../../components/layout/Page'; import { fetchDocsContent, getSearchablePages } from '../../lib/docs'; @@ -133,6 +134,7 @@ const Docs = ({ Template, Templates, BetaImage, + Deprecated, }} />