@sveltia/cms 0.19.10 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +34 -25
  2. package/dist/sveltia-cms.js +283 -251
  3. package/package.json +3 -3
package/README.md CHANGED
@@ -42,7 +42,7 @@ We are working hard to create a **much better alternative to Netlify CMS** and D
42
42
  ### Better performance
43
43
 
44
44
  - Built completely from scratch with Svelte instead of forking React-based Netlify/Decap CMS. The app starts fast and stays fast. The compiled code is vanilla JavaScript — you can use it with almost any framework.
45
- - Small footprint: The bundle size is less than 350 KB when minified and gzipped, compared to 1.5 MB of Netlify/Decap CMS. And [no virtual DOM overhead](https://svelte.dev/blog/virtual-dom-is-pure-overhead).
45
+ - Small footprint: The bundle size is less than 400 KB when minified and gzipped, compared to 1.5 MB of Netlify/Decap CMS. And [no virtual DOM overhead](https://svelte.dev/blog/virtual-dom-is-pure-overhead).
46
46
  - Uses the GraphQL API for GitHub and GitLab to quickly fetch content at once, so that entries and assets can be listed and searched instantly[^32]. It also avoids the slowness and potential API rate limit violations caused by hundreds of requests with Relation widgets[^14].
47
47
  - Saving entries and assets to GitHub is also much faster thanks to the [GraphQL mutation](https://github.blog/changelog/2021-09-13-a-simpler-api-for-authoring-commits/).
48
48
  - A list of repository files is cached locally for faster startup and bandwidth savings.
@@ -51,7 +51,7 @@ We are working hard to create a **much better alternative to Netlify CMS** and D
51
51
 
52
52
  ### Better productivity
53
53
 
54
- - You can [work with a local Git repository](#work-with-a-local-git-repository) without any configuration or proxy server[^26].
54
+ - You can [work with a local Git repository](#working-with-a-local-git-repository) without any configuration or proxy server[^26].
55
55
  - In addition to a streamlined workflow, it offers great performance because files are loaded natively through the browser rather than using an ad hoc API.
56
56
  - It also allows you to bypass the 30 MB file size limit[^51].
57
57
  - The `logo_url` defined in the configuration will be used[^49].
@@ -78,7 +78,7 @@ We are working hard to create a **much better alternative to Netlify CMS** and D
78
78
  ### Better security
79
79
 
80
80
  - Avoids high/critical severity vulnerabilities through constant dependency updates and frequent releases[^34].
81
- - We have documented how to [set up a Content Security Policy](#set-up-content-security-policy) for the CMS.
81
+ - We have documented how to [set up a Content Security Policy](#setting-up-content-security-policy) for the CMS.
82
82
  - The `unsafe-eval` or `unsafe-inline` keywords are not needed in the `script-src` CSP directive[^33].
83
83
  - The `same-origin` referrer policy is automatically set with a `<meta>` tag.
84
84
 
@@ -86,26 +86,27 @@ We are working hard to create a **much better alternative to Netlify CMS** and D
86
86
 
87
87
  - 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.
88
88
  - 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`[^27].
89
- - You can [disable automatic deployments](#disable-automatic-deployments) by default or on demand to save costs and resources associated with CI/CD and to publish multiple changes at once[^24].
89
+ - 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].
90
90
 
91
91
  ### Better i18n support
92
92
 
93
93
  - You can easily switch between locales while editing with just a click on a button instead of a dropdown list.
94
94
  - Fields in non-default locales are validated as expected[^13].
95
95
  - Boolean, DateTime, List and Number fields in the entry preview are displayed in a localized format.
96
- - [Integrates DeepL](#use-deepl-to-translate-entry-fields) to allow translation of text fields from another locale with one click.
97
- - You can [disable non-default locale content](#disable-non-default-locale-content)[^15].
98
- - You can [use a random UUID for an entry slug](#use-a-random-id-for-an-entry-slug), which is a good option for locales that write in non-Latin characters.
96
+ - [Integrates DeepL](#using-deepl-to-translate-entry-fields) to allow translation of text fields from another locale with one click.
97
+ - You can [disable non-default locale content](#disabling-non-default-locale-content)[^15].
98
+ - You can [use a random UUID for an entry slug](#using-a-random-id-for-an-entry-slug), which is a good option for locales that write in non-Latin characters.
99
99
  - Resolves the [limitations in the List and Object widgets](https://decapcms.org/docs/i18n/#limitations) so that changes made with these widgets will be duplicated between locales as expected when using the `i18n: duplicate` field configuration[^7].
100
100
  - [Entry-relative media folders](https://decapcms.org/docs/collection-folder/#media-and-public-folder) can be used in conjunction with the `multiple_folders` i18n structure[^21].
101
101
  - Boolean fields are updated in real time between locales like other widgets to avoid confusion[^35].
102
102
 
103
103
  ### Better collections
104
104
 
105
- - You can choose a [custom icon for each collection](#use-a-custom-icon-for-a-collection)[^3].
106
- - Assets stored in a [per-collection media folder](#use-a-custom-media-folder-for-a-collection) can be displayed next to the entries.
105
+ - You can choose a [custom icon for each collection](#using-a-custom-icon-for-a-collection)[^3].
106
+ - Assets stored in a [per-collection media folder](#using-a-custom-media-folder-for-a-collection) can be displayed next to the entries.
107
107
  - Entry slug template tags support [filter transformations](https://decapcms.org/docs/summary-strings/) just like summary string template tags[^29].
108
108
  - You can set the maximum number of characters for an entry slug with the new `slug_length` collection option[^25].
109
+ - Single quotes in a slug will be replaced with `sanitize_replacement` (default: hyphen) rather than being removed[^52].
109
110
 
110
111
  ### Better content editing
111
112
 
@@ -140,20 +141,22 @@ We are working hard to create a **much better alternative to Netlify CMS** and D
140
141
  - String
141
142
  - Supports the `type` property that accepts `url` or `email` as a value, which will validate the value as a URL or email.
142
143
  - Supports the `prefix` and `suffix` string properties, which automatically prepend and/or append the developer-defined value to the user-input value.
144
+ - Markdown
145
+ - The rich text editor is built with [Lexical](https://github.com/facebook/lexical) instead of [Slate](https://github.com/ianstormtaylor/slate), which solves several problems found in Netlify/Decap CMS, including fatal application crashes[^53].
143
146
  - Boolean, Number and String
144
147
  - Supports the `before_input` and `after_input` string properties, which allow developers to display custom labels before and/or after the input UI[^28]. Markdown is supported in the value.
145
148
  - List and Object
146
149
  - The `summary` is displayed correctly when it refers to a Relation field[^36].
147
150
  - File and Image
148
151
  - Provides a reimagined all-in-one asset selection dialog for File and Image fields.
149
- - [Collection-specific assets](#use-a-custom-media-folder-for-a-collection) are listed for easy selection, while all assets are displayed in a separate tab[^19].
152
+ - [Collection-specific assets](#using-a-custom-media-folder-for-a-collection) are listed for easy selection, while all assets are displayed in a separate tab[^19].
150
153
  - A new asset can be uploaded by dragging & dropping it into the dialog[^20].
151
154
  - A URL can also be entered in the dialog.
152
155
  - Integration with Pexels, Pixabay and Unsplash makes it easy to select and insert a free stock photo[^8].
153
156
  - String, Text and Markdown
154
157
  - A required field containing only spaces or line breaks will result in a validation error, as if no characters were entered.
155
158
  - New widgets
156
- - In addition to [generating UUIDs for entry slugs](#use-a-random-id-for-an-entry-slug), Sveltia CMS also supports the proposed `uuid` widget with the following properties[^12]:
159
+ - In addition to [generating UUIDs for entry slugs](#using-a-random-id-for-an-entry-slug), Sveltia CMS also supports the proposed `uuid` widget with the following properties[^12]:
157
160
  - `prefix`: A string to be prepended to the value. Default: an empty string.
158
161
  - `use_b32_encoding`: Whether to encode the value with Base32. Default: `false`.
159
162
  - `read_only`: Whether to make the field read-only. Default: `true`.
@@ -164,7 +167,7 @@ We are working hard to create a **much better alternative to Netlify CMS** and D
164
167
  - A completely new Asset Library, built separately from the image selection dialog, makes it easy to manage all of your files, including images, videos and documents.
165
168
  - Navigate between the global media folder and per-collection media folders[^6].
166
169
  - Preview image, audio, video, text and PDF files.
167
- - Check your site’s [CSP](#set-up-content-security-policy) if the preview doesn’t work.
170
+ - Check your site’s [CSP](#setting-up-content-security-policy) if the preview doesn’t work.
168
171
  - Copy the public URL, file path, text data or image data of a selected asset to clipboard.
169
172
  - The file path starts with `/` as expected[^48].
170
173
  - Edit plaintext assets, including SVG images.
@@ -202,7 +205,7 @@ While it’s not our goal to recreate all the features found in Netlify/Decap CM
202
205
  | DateTime | The `date_format` and `time_format` options with Moment.js tokens are not supported yet. Note: Decap CMS 3.1 has replaced Moment.js with [Day.js](https://day.js.org/); we’ll follow the change soon. |
203
206
  | File/Image | Field-specific media folders and media library options are not supported yet other than `media_library.config.max_file_size` for the default media library. |
204
207
  | Map | Not supported yet. |
205
- | Markdown | It’s a plain text editor at this time. A rich text editor is coming soon. We will not support Remark plugins. |
208
+ | Markdown | Editor components are not supported yet. Remark plugins will not be supported. |
206
209
 
207
210
  ### Other features
208
211
 
@@ -266,15 +269,19 @@ From Decap CMS:
266
269
 
267
270
  That’s it! You can open `https://[hostname]/admin/` as before to start editing. There is even no authentication process if you’ve already been signed in with GitHub or GitLab on Netlify/Decap CMS because Sveltia CMS uses your auth token stored in the browser. Simple enough!
268
271
 
269
- That said, we strongly recommend testing your new Sveltia CMS instance first on your local machine. [See below](#work-with-a-local-git-repository) for how.
272
+ That said, we strongly recommend testing your new Sveltia CMS instance first on your local machine. [See below](#working-with-a-local-git-repository) for how.
273
+
274
+ ### Updates
275
+
276
+ Updating Sveltia CMS is transparent, unless you include a specific version in the `<script>` source URL. Whenever you (re)load the CMS, the latest version will be served via [UNPKG](https://unpkg.com/). The CMS also periodically checks for updates and notifies you when a new version is available. After the product reaches GA, you could use a semantic version range (`^1.0.0`) like Netlify/Decap CMS.
270
277
 
271
278
  ## Tips & tricks
272
279
 
273
- ### Move your site from Netlify to another hosting service
280
+ ### Moving your site from Netlify to another hosting service
274
281
 
275
282
  You can host your Sveltia CMS-managed site anywhere, such as [Cloudflare Pages](https://pages.cloudflare.com/) or [GitHub Pages](https://pages.github.com/). But moving away from Netlify means you can no longer sign in with GitHub or GitLab via Netlify. Instead, you can use [our own OAuth client](https://github.com/sveltia/sveltia-cms-auth), which can be easily deployed to Cloudflare Workers, or [any other 3rd party client](https://decapcms.org/docs/external-oauth-clients/) made for Netlify/Decap CMS.
276
283
 
277
- ### Work with a local Git repository
284
+ ### Working with a local Git repository
278
285
 
279
286
  You can use Sveltia CMS with a local Git repository like [Netlify/Decap CMS](https://decapcms.org/docs/working-with-a-local-git-repository/), but Sveltia CMS has simplified the workflow by removing the need for additional configuration (the `local_backend` property) and proxy server, thanks to the [File System Access API](https://developer.chrome.com/articles/file-system-access/) available in [some modern browsers](https://developer.mozilla.org/en-US/docs/web/api/window/showopenfilepicker#browser_compatibility).
280
287
 
@@ -291,7 +298,7 @@ You can use Sveltia CMS with a local Git repository like [Netlify/Decap CMS](htt
291
298
 
292
299
  Remember that the local repository support doesn’t do any Git operation. You have to fetch, pull, commit and push all changes manually with a Git client. Also, at this point, you have to reload the CMS to see the latest content after retrieving remote updates (this will be unnecessary once browsers support the proposed `FileSystemObserver` API).
293
300
 
294
- ### Use a custom icon for a collection
301
+ ### Using a custom icon for a collection
295
302
 
296
303
  You can have an icon for each collection for easy identification in the collection list.
297
304
 
@@ -310,7 +317,7 @@ You can have an icon for each collection for easy identification in the collecti
310
317
  folder: data/tags/
311
318
  ```
312
319
 
313
- ### Use a custom media folder for a collection
320
+ ### Using a custom media folder for a collection
314
321
 
315
322
  This is actually not new in Sveltia CMS but rather an _undocumented_ feature in Netlify/Decap CMS[^4]. You can specify media and public folders for each collection that override the [global media folder](https://decapcms.org/docs/configuration-options/#media-and-public-folders). Well, it’s [documented](https://decapcms.org/docs/collection-folder/#media-and-public-folder), but that’s probably not what you want.
316
323
 
@@ -331,7 +338,7 @@ Rather, if you’d like to add all the media files for a collection in one singl
331
338
 
332
339
  In Sveltia CMS, those per-collection media folders are displayed prominently for easier asset management.
333
340
 
334
- ### Use DeepL to translate entry fields
341
+ ### Using DeepL to translate entry fields
335
342
 
336
343
  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:
337
344
 
@@ -342,7 +349,7 @@ Sveltia CMS comes with a handy DeepL integration so that you can translate any t
342
349
  1. Open any entry, and you can now translate all fields or individual fields by selecting Translate from the three-dot menu.
343
350
  1. If you have upgraded to DeepL API Pro, provide your new Authentication Key in the same way.
344
351
 
345
- ### Disable non-default locale content
352
+ ### Disabling non-default locale content
346
353
 
347
354
  You can now disable output of content in selected non-default locales by adding the `save_all_locales` property to the top-level or per-collection `i18n` configuration. Then you’ll find “Disable (locale name)” in the three-dot menu in the top right corner of the content editor. This is useful if the translation isn’t ready yet, but you want to publish the default locale content first.
348
355
 
@@ -356,7 +363,7 @@ With the following configuration, you can disable the French and/or German trans
356
363
  + save_all_locales: false
357
364
  ```
358
365
 
359
- ### Use a random ID for an entry slug
366
+ ### Using a random ID for an entry slug
360
367
 
361
368
  By default, the [slug for a new entry file](https://decapcms.org/docs/configuration-options/#slug) will be generated based on the entry’s `title` field. Or, you can specify the collection’s `slug` option to use the file creation date or other fields. While the behaviour is generally acceptable and SEO-friendly, it’s not useful if the title might change later or if it contains non-Latin characters like Chinese. In Sveltia CMS, you can easily generate a random [UUID](https://developer.mozilla.org/en-US/docs/Glossary/UUID) for a slug without a custom widget!
362
369
 
@@ -370,7 +377,7 @@ It’s simple — just specify `{{uuid}}` (full UUID v4), `{{uuid_short}}` (last
370
377
  + slug: '{{uuid_short}}'
371
378
  ```
372
379
 
373
- ### Disable automatic deployments
380
+ ### Disabling automatic deployments
374
381
 
375
382
  You may already have a CI/CD tool set up on your Git repository to automatically deploy changes to production. Occasionally, you make a lot of changes to your content to quickly reach the CI/CD provider’s (free) build limits, or you just don’t want to see builds triggered for every single small change.
376
383
 
@@ -409,7 +416,7 @@ If the `automatic_deployments` property is defined, you can manually trigger a d
409
416
  1. Enter the deploy hook URL for your provider, e.g. [Netlify](https://docs.netlify.com/configure-builds/build-hooks/) or [Cloudflare Pages](https://developers.cloudflare.com/pages/platform/deploy-hooks/).
410
417
  1. Configure the CSP if necessary. See below.
411
418
 
412
- ### Set up Content Security Policy
419
+ ### Setting up Content Security Policy
413
420
 
414
421
  If your site adopts Content Security Policy (CSP), use the following policy for Sveltia CMS, or some features may not work.
415
422
 
@@ -459,7 +466,7 @@ And combine the following policies depending on your Git backend and enabled int
459
466
  connect-src https://api.deepl.com;
460
467
  ```
461
468
 
462
- If you choose to [disable automatic deployments](#disable-automatic-deployments) and have configured a webhook URL, you may need to add the origin to the `connect-src` directive. For example,
469
+ If you choose to [disable automatic deployments](#disabling-automatic-deployments) and have configured a webhook URL, you may need to add the origin to the `connect-src` directive. For example,
463
470
 
464
471
  - Netlify:
465
472
  ```csp
@@ -476,7 +483,7 @@ If you have image field(s) and expect that images will be inserted as URLs, you
476
483
  img-src 'self' blob: data: https://*;
477
484
  ```
478
485
 
479
- ### Self-host the CMS
486
+ ### Self-hosting the CMS
480
487
 
481
488
  Sveltia CMS is open source for sure! You can host it on your server rather than loading it from UNPKG, though it’s not recommended due to missing bug fixes. Simply copy the latest [`sveltia-cms.js`](https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js) file from the CDN, or build it yourself:
482
489
 
@@ -560,3 +567,5 @@ This software is provided “as is” without any express or implied warranty. W
560
567
  [^49]: Netlify/Decap CMS [#5752](https://github.com/decaporg/decap-cms/issues/5752)
561
568
  [^50]: Netlify/Decap CMS [#4646](https://github.com/decaporg/decap-cms/issues/4646)
562
569
  [^51]: Netlify/Decap CMS [#6731](https://github.com/decaporg/decap-cms/issues/6731)
570
+ [^52]: Netlify/Decap CMS [#7147](https://github.com/decaporg/decap-cms/issues/7147)
571
+ [^53]: Netlify/Decap CMS [#5673](https://github.com/decaporg/decap-cms/issues/5673), [#6482](https://github.com/decaporg/decap-cms/issues/6482), [#6707](https://github.com/decaporg/decap-cms/issues/6707), [#6999](https://github.com/decaporg/decap-cms/issues/6999), [#7047](https://github.com/decaporg/decap-cms/issues/7047), [#7123](https://github.com/decaporg/decap-cms/issues/7123), [#7152](https://github.com/decaporg/decap-cms/issues/7152)