@sveltia/cms 0.31.0 → 0.31.1

package/README.md

@@ -26,14 +26,16 @@ Sveltia CMS is **still in beta**, so please be careful when trying it out.
 
 While we are fixing reported bugs as fast as we can, usually within 24 hours, the overall progress may be slower than you think. The thing is, it’s not just a personal project of [@kyoshino](https://github.com/kyoshino), but also involves different kinds of activities:
 
-- Ensuring maximum compatibility with existing versions of Netlify/Decap CMS
+- Ensuring maximum [compatibility with existing versions of Netlify/Decap CMS](#compatibility)
 - Tackling as many [issues reported to Netlify/Decap CMS](https://github.com/decaporg/decap-cms/issues) as possible
   - So far, 100+ of them have been effectively solved in Sveltia CMS, with the goal of reaching 150 by GA and 250 in later releases.
   - [Let us know](https://github.com/sveltia/sveltia-cms/issues/new) if you have any specific issues you’d like to see solved!
 - Responding to user feedback
-- Implementing our own enhancement ideas
+- Implementing our own UX enhancement ideas
 
-Sveltia CMS **version 1.0 is expected to ship in Q3 2024**. Check our [release notes](https://github.com/sveltia/sveltia-cms/releases) for updates.
+Sveltia CMS **version 1.0 is expected to ship in Q3 2024**. Check our [release notes](https://github.com/sveltia/sveltia-cms/releases) for updates. See also our [roadmap](#roadmap).
+
+![100+ Netlify/Decap CMS Issues Solved in Sveltia CMS](docs/headline-1-20240527.webp)<br>
 
 ## Features
 
@@ -43,11 +45,11 @@ We are working hard to create a **significantly better alternative to Netlify CM
 
 - Ready to be used as a drop-in replacement for Netlify/Decap CMS _in some casual use case scenarios_ with a single line of code update.
 - Your existing [configuration file](https://decapcms.org/docs/configuration-options/) can be reused as is.
-- Various features are still missing though — look at the [compatibility info](#compatibility) below to see if you can migrate now or soon.
+- Some features are still missing or will not be added though — look at the [compatibility info](#compatibility) below to see if you can migrate now or soon.
 
 ### Better UX
 
-- Created and maintained by an [experienced UX engineer](https://github.com/kyoshino) who loves code, design and marketing. You can expect constant UX improvements across the platform.
+- Created and maintained by an [experienced UX engineer](https://github.com/kyoshino) who loves code, design and marketing. You can expect constant improvements to the user experience (UX) and developer experience (DX) across the platform.
 - Offers a modern, intuitive user interface, including an immersive dark mode[^2], inspired in part by the Netlify CMS v3 prototype[^1].
 - Comes with touch device support. While the UI is not yet optimized for small screens, large tablets like iPad Pro or Pixel Tablet should work well. Mobile support is planned after the 1.0 release.
 - Made with Svelte, not React, means we can spend more time on UX rather than tedious state management. It also allows us to avoid fatal React app crashes[^999]. Best of all, Svelte offers great performance!
@@ -67,10 +69,11 @@ We are working hard to create a **significantly better alternative to Netlify CM
 ### Better productivity
 
 - You can [work with a local Git repository](#working-with-a-local-git-repository) without any extra configuration or proxy server[^26].
+  - Deleting an entry or asset file also deletes the empty enclosing folder, so you don’t have to delete it manually.
   - In addition to a streamlined workflow, it offers great performance by loading files natively through the browser rather than using a slow, ad hoc REST API.
   - It also avoids a number of issues, including the 30 MB file size limit[^51], an unknown error with `publish_mode`[^75], and an unused `logo_url`[^49].
 - Eliminates some workflow disruptions in the Content Editor:
-  - A local backup of an entry draft is automatically created without interruption by a confirmation dialog, which annoys users and can cause a page navigation problem when it’s dismissed[^106]. It can then be reliably restored without unexpected overwriting[^85].
+  - A local backup of an entry draft is automatically created without interruption by a confirmation dialog, which annoys users and can cause a page navigation problem if dismissed[^106]. The backup can then be reliably restored without unexpected overwriting[^85].
   - Click once (the Save button) instead of twice (Publish > Publish now) to save an entry.
   - The editor closes automatically when an entry is saved.
 - You can upload multiple assets at once[^5].
@@ -83,20 +86,20 @@ We are working hard to create a **significantly better alternative to Netlify CM
 - Improved keyboard handling lets you efficiently navigate through UI elements using the Tab, Space, Enter and arrow keys[^17][^67].
 - Comprehensive [WAI-ARIA](https://w3c.github.io/aria/) support enables users who rely on screen readers such as NVDA and VoiceOver.
 - Ensures sufficient contrast between the foreground text and background colours.
-- Honours your operating system’s [reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) and [reduced transparency](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) settings.
 - Enabled and disabled buttons can be clearly distinguished[^105].
+- Honours your operating system’s [reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) and [reduced transparency](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) settings.
 - We’ll continue to test and improve the application to meet [WCAG 2.2](https://w3c.github.io/wcag/guidelines/22/).
 
 ### Better security
 
 - Avoids high/critical severity vulnerabilities through constant dependency updates and frequent releases[^33].
-- We have documented how to [set up a Content Security Policy](#setting-up-content-security-policy) for the CMS.
+- We have documented how to [set up a Content Security Policy](#setting-up-content-security-policy) for the CMS to prevent any unexpected errors or otherwise insecure configuration[^108].
 - The `unsafe-eval` and `unsafe-inline` keywords are not needed in the `script-src` CSP directive[^34].
 - The `same-origin` referrer policy is automatically set with a `<meta>` tag.
 
 ### Better configuration
 
-- Some servers and frameworks remove the trailing slash from the CMS URL (`/admin`) depending on the configuration. In such cases, the config file is loaded from a root-relative URL (`/admin/config.yml`) instead of a regular relative URL (`/config.yml`), which results in a 404 Not Found[^107].
+- Some servers and frameworks remove the trailing slash from the CMS URL (`/admin`) depending on the configuration. In such cases, the config file is loaded from a root-relative URL (`/admin/config.yml`) instead of a regular relative URL (`./config.yml` = `/config.yml`) that results in a 404 Not Found error[^107].
 - Supports a [JSON configuration file](#providing-a-json-configuration-file) that can be generated for bulk or complex collections[^60].
 
 ### Better backend support
@@ -104,7 +107,8 @@ We are working hard to create a **significantly better alternative to Netlify CM
 - Uses the GraphQL API where possible for better performance, as mentioned above. You don’t need to set the `use_graphql` option to enable it for GitHub and GitLab.
 - The Git branch name is automatically set to the repository’s default branch (`main`, `master` or whatever) if not specified in the configuration file, preventing data loading errors due to a hardcoded fallback to `master`[^95][^27].
 - You can [disable automatic deployments](#disabling-automatic-deployments) by default or on demand to save costs and resources associated with CI/CD and to publish multiple changes at once[^24].
-- The GitLab backend support comes with background [service status](https://status.gitlab.com/) checking, just like GitHub. Checks are performed frequently and an incident notification is displayed prominently for both services.
+- The GitLab backend support comes with background [service status](https://status.gitlab.com/) checking, just like GitHub.
+- Service status checks are performed frequently and an incident notification is displayed prominently.
 - You can quickly open the source file of an entry or asset in your repository using View on GitHub (or GitLab) under the 3-dot menu.
 
 ### Better i18n support
@@ -140,14 +144,16 @@ Sveltia CMS has been built with a multilingual architecture from the very beginn
 - You can choose a [custom icon for each collection](#using-a-custom-icon-for-a-collection)[^3].
 - You can [add dividers to the collection list](#adding-dividers-to-the-collection-list).
 - Assets stored in a [per-collection media folder](#using-a-custom-media-folder-for-a-collection) can be displayed next to the entries.
-- Entry slug template tags support [filter transformations](https://decapcms.org/docs/summary-strings/) just like summary string template tags[^29].
-- You can set the maximum number of characters for an entry slug with the new `slug_length` collection option[^25].
-- Single quotes in a slug will be replaced with `sanitize_replacement` (default: hyphen) rather than being removed[^52].
 - You can use nested fields (dot notation) in the `path` option for a folder collection, e.g. `{{fields.state.name}}/{{slug}}`[^62].
 - You can use Markdown in collection descriptions[^79]. Bold, italic, strikethrough, code and links are allowed.
 - The New Entry button won’t appear when a developer accidentally sets the `create: true` option on a file collection because it’s useless[^89].
 - The Delete Entry button won’t appear when a developer accidentally sets the `delete: true` option on a file collection because the preconfigured files should not be deleted.
 - A folder collection filter with a boolean value works as expected[^93].
+- Improved entry slugs
+  - You can [use a random UUID for an entry slug](#using-a-random-id-for-an-entry-slug).
+  - Entry slug template tags support [filter transformations](https://decapcms.org/docs/summary-strings/) just like summary string template tags[^29].
+  - Single quotes in a slug will be replaced with `sanitize_replacement` (default: hyphen) rather than being removed[^52].
+  - You can set the maximum number of characters for an entry slug with the new `slug_length` collection option[^25].
 
 ### Better content editing
 
@@ -228,6 +234,7 @@ Sveltia CMS has been built with a multilingual architecture from the very beginn
 - Relation and Select
   - If a dropdown list has options with long wrapping labels, they won’t overlap with the next option[^83].
   - When there are 5 or fewer options, the UI switches from a dropdown list to radio buttons (single-select) or checkboxes (multi-select) for faster data entry[^61].
+    - This number can be changed with the `dropdown_threshold` option for the `relation` and `select` widgets.
 - String and Text
   - Supports the `minlength` and `maxlength` options, which allow developers to specify the minimum and maximum number of characters required for input without having to write a custom regular expression with the `pattern` option. A character counter is available when one of the options is given, and a user-friendly validation error is displayed if the condition is not met.
 
@@ -258,7 +265,7 @@ Sveltia CMS has been built with a multilingual architecture from the very beginn
   - View asset details, including size, dimensions, commit author/date and a list of entries that use the selected asset.
   - More features are planned so that you’ll be able to utilize Sveltia CMS as digital asset management (DAM) software.
 - PDF documents are displayed with a thumbnail image in both the Asset Library and the Select File dialog, making it easier to find the file you’re looking for[^38].
-- Assets stored in an entry-relative media folder are automatically deleted when the associated entry is deleted because these assets are not available for other entries[^22]. If you’re [working with a local repository](#working-with-a-local-git-repository), the empty enclosing folder is also deleted.
+- Assets stored in an entry-relative media folder are automatically deleted when the associated entry is deleted because these assets are not available for other entries[^22]. When you’re [working with a local repository](#working-with-a-local-git-repository), the empty enclosing folder is also deleted.
 - Hidden files (dot files) don’t appear in the Asset Library[^47].
 - You can add assets using the Quick Add button in the upper right corner of the application.
 - Files are uploaded with their original names, without converting uppercase letters and spaces to lowercase letters and hyphens[^97].
@@ -305,14 +312,15 @@ Missing other features? Let us know by [filing an issue](https://github.com/svel
 
 ### Before the 1.0 release
 
-- Enhanced compatibility with Netlify/Decap CMS (see above for the status)
+- Enhanced [compatibility with Netlify/Decap CMS](#compatibility)
+- [Tackling more Netlify/Decap CMS issues](#development-status)
 - Broad automation test coverage (Vitest + Playwright)
 - [Svelte 5](https://svelte.dev/blog/svelte-5-release-candidate) migration
-- Localization
+- Localization with [Fluent](https://projectfluent.org)
 - Documentation
 - Marketing site
-- Demo site
-- Starter templates
+- Live demo site
+- Starter templates for popular frameworks
 
 ### After the 1.0 release
 
@@ -374,6 +382,8 @@ Updating Sveltia CMS is transparent, unless you include a specific version in th
 
 If you’ve chosen to install with npm, updating the package is your responsibility. We recommend using [`ncu`](https://www.npmjs.com/package/npm-check-updates) or a service like [Dependabot](https://github.blog/2020-06-01-keep-all-your-packages-up-to-date-with-dependabot/) to keep dependencies up to date, otherwise you’ll miss important bug fixes and new features.
 
+## Tips & tricks
+
 ### Providing a JSON configuration file
 
 Sveltia CMS supports a configuration file written in the JSON format in addition to the standard YAML format. This allows developers to programmatically generate the CMS configuration to enable bulk or complex collections. To do this, simply add a `<link>` tag to your HTML, just like a [custom YAML config link](https://decapcms.org/docs/configuration-options/#configuration-file), but with the type `application/json`:
@@ -481,15 +491,17 @@ In Sveltia CMS, those per-collection media folders are displayed prominently for
 
 ### Using DeepL to translate entry fields
 
-Sveltia CMS comes with a handy DeepL integration so that you can translate any text field from another locale without leaving the content editor. To enable the high-quality, quick translation feature:
+Sveltia CMS comes with a handy DeepL integration so that you can translate any text field from another locale without leaving the content editor. To enable the high quality, AI-powered, quick translation feature:
 
 1. Update your configuration file to enable the [i18n support](https://decapcms.org/docs/i18n/) with multiple locales.
 1. Sign up for [DeepL API](https://www.deepl.com/pro-api/) and copy your Authentication Key from DeepL’s Account page.
 1. Open an entry in Sveltia CMS.
-1. Click on the Translation button on the header or each field, right next to the 3-dot menu.
+1. Click on the Translation button on the pane header or each field, right next to the 3-dot menu.
 1. Paste your key when prompted.
 1. The field(s) will be automatically translated.
 
+Note that the Translation button on the pane header only translates empty fields, while in-field Translation buttons override any filled text.
+
 If you have upgraded to DeepL API Pro, provide your new Authentication Key:
 
 1. Click the Account button in the upper right corner, then click Settings.
@@ -497,6 +509,8 @@ If you have upgraded to DeepL API Pro, provide your new Authentication Key:
 1. Paste your key to the DeepL API Authentication Key field.
 1. Close the Settings dialog.
 
+More translation service providers will be added in the future.
+
 ### Localizing entry slugs
 
 In Sveltia CMS, it’s possible to localize entry slugs (filenames) if the i18n structure is `multiple_files` or `multiple_folders`. All you need is the `localize` filter for `slug` template tags:
@@ -538,7 +552,7 @@ With this configuration, an entry is saved with localized filenames, while the d
   translationKey: my-trip-to-new-york
   ```
 
-You can customize the property name and value for a different framework or i18n library by adding the `canonical_slug` option to your top-level or per-collection `i18n` configuration. The example below is for [`@astrolicious/i18n`](https://github.com/astrolicious/i18n), which requires a locale prefix in the value ([discussion](https://github.com/sveltia/sveltia-cms/issues/137)):
+You can customize the property name and value for a different framework or i18n library by adding the `canonical_slug` option to your top-level or per-collection `i18n` configuration. The example below is for [@astrolicious/i18n](https://github.com/astrolicious/i18n), which requires a locale prefix in the value ([discussion](https://github.com/sveltia/sveltia-cms/issues/137)):
 
 ```yaml
 i18n:
@@ -770,7 +784,7 @@ This software is provided “as is” without any express or implied warranty. W
 [^23]: Netlify/Decap CMS [#2](https://github.com/decaporg/decap-cms/issues/2)
 [^24]: Netlify/Decap CMS [#6831](https://github.com/decaporg/decap-cms/issues/6831)
 [^25]: Netlify/Decap CMS [#526](https://github.com/decaporg/decap-cms/issues/526), [#6987](https://github.com/decaporg/decap-cms/issues/6987)
-[^26]: Netlify/Decap CMS [#3285](https://github.com/decaporg/decap-cms/issues/3285)
+[^26]: Netlify/Decap CMS [#3285](https://github.com/decaporg/decap-cms/issues/3285), [#7030](https://github.com/decaporg/decap-cms/issues/7030), [#7067](https://github.com/decaporg/decap-cms/issues/7067)
 [^27]: Netlify/Decap CMS [#3285](https://github.com/decaporg/decap-cms/issues/5617)
 [^28]: Netlify/Decap CMS [#2677](https://github.com/decaporg/decap-cms/pull/2677), [#6836](https://github.com/decaporg/decap-cms/pull/6836)
 [^29]: Netlify/Decap CMS [#4783](https://github.com/decaporg/decap-cms/issues/4783)
@@ -798,7 +812,7 @@ This software is provided “as is” without any express or implied warranty. W
 [^51]: Netlify/Decap CMS [#6731](https://github.com/decaporg/decap-cms/issues/6731)
 [^52]: Netlify/Decap CMS [#7147](https://github.com/decaporg/decap-cms/issues/7147)
 [^53]: Netlify/Decap CMS [#512](https://github.com/decaporg/decap-cms/issues/512), [#5673](https://github.com/decaporg/decap-cms/issues/5673), [#6707](https://github.com/decaporg/decap-cms/issues/6707)
-[^54]: Netlify/Decap CMS [#1347](https://github.com/decaporg/decap-cms/issues/1347), [#4629](https://github.com/decaporg/decap-cms/issues/4629), [#6287](https://github.com/decaporg/decap-cms/issues/6287) — Decap 3.0 updated the Slate editor in an attempt to fix the problems, but the IME issues remain unresolved when using a mobile/tablet browser.
+[^54]: Netlify/Decap CMS [#1347](https://github.com/decaporg/decap-cms/issues/1347), [#4629](https://github.com/decaporg/decap-cms/issues/4629), [#6287](https://github.com/decaporg/decap-cms/issues/6287), [#6826](https://github.com/decaporg/decap-cms/issues/6826) — Decap 3.0 updated the Slate editor in an attempt to fix the problems, but the IME issues remain unresolved when using a mobile/tablet browser.
 [^55]: Netlify/Decap CMS [#4480](https://github.com/decaporg/decap-cms/issues/4480), [#6353](https://github.com/decaporg/decap-cms/issues/6353)
 [^56]: Netlify/Decap CMS [#6515](https://github.com/decaporg/decap-cms/issues/6515)
 [^57]: Netlify/Decap CMS [#328](https://github.com/decaporg/decap-cms/issues/328)
@@ -852,4 +866,5 @@ This software is provided “as is” without any express or implied warranty. W
 [^105]: Netlify/Decap CMS [#5701](https://github.com/decaporg/decap-cms/issues/5701)
 [^106]: Netlify/Decap CMS [#2822](https://github.com/decaporg/decap-cms/issues/2822)
 [^107]: Netlify/Decap CMS [#332](https://github.com/decaporg/decap-cms/issues/332), [#683](https://github.com/decaporg/decap-cms/issues/683), [#999](https://github.com/decaporg/decap-cms/issues/999), [#1456](https://github.com/decaporg/decap-cms/issues/1456), [#4175](https://github.com/decaporg/decap-cms/issues/4175), [#5688](https://github.com/decaporg/decap-cms/issues/5688), [#6828](https://github.com/decaporg/decap-cms/issues/6828), [#6862](https://github.com/decaporg/decap-cms/issues/6862), [#7023](https://github.com/decaporg/decap-cms/issues/7023)
+[^108]: Netlify/Decap CMS [#6829](https://github.com/decaporg/decap-cms/issues/6829)
 [^999]: Netlify/Decap CMS [#5656](https://github.com/decaporg/decap-cms/issues/5656), [#5837](https://github.com/decaporg/decap-cms/issues/5837), [#5972](https://github.com/decaporg/decap-cms/issues/5972), [#6476](https://github.com/decaporg/decap-cms/issues/6476), [#6516](https://github.com/decaporg/decap-cms/issues/6516), [#6930](https://github.com/decaporg/decap-cms/issues/6930), [#6965](https://github.com/decaporg/decap-cms/issues/6965), [#7080](https://github.com/decaporg/decap-cms/issues/7080), [#7105](https://github.com/decaporg/decap-cms/issues/7105), [#7106](https://github.com/decaporg/decap-cms/issues/7106), [#7119](https://github.com/decaporg/decap-cms/issues/7119), [#7176](https://github.com/decaporg/decap-cms/issues/7176), [#7194](https://github.com/decaporg/decap-cms/issues/7194) — These `removeChild` crashes are common in React apps and seem to be caused by a [browser extension](https://github.com/facebook/react/issues/17256) or [Google Translate](https://github.com/facebook/react/issues/11538).