@sveltia/cms 0.7.1 → 0.8.1
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.
- package/README.md +54 -54
- package/dist/sveltia-cms.js +251 -251
- package/package.json +16 -16
package/README.md
CHANGED
|
@@ -1,77 +1,80 @@
|
|
|
1
1
|
# Sveltia CMS
|
|
2
2
|
|
|
3
|
-
Sveltia CMS is a Git-based lightweight headless CMS under development as a drop-in replacement for [Netlify/Decap CMS](https://decapcms.org/). You can use it with
|
|
3
|
+
Sveltia CMS is a Git-based lightweight headless CMS under active development as a drop-in replacement for [Netlify/Decap CMS](https://decapcms.org/). You can use it with your favourite static site generator like SvelteKit, Eleventy, Next.js and Hugo to manage content as static files in a Git repository. The open source alternative to Netlify/Decap CMS is now in public beta — with more features to come.
|
|
4
4
|
|
|
5
|
-
<br>
|
|
5
|
+
<br>
|
|
6
6
|
|
|
7
|
-
<br>
|
|
7
|
+
<br>
|
|
8
8
|
|
|
9
|
-
<br>
|
|
10
10
|
|
|
11
|
-
<br>
|
|
12
12
|
|
|
13
|
-
<br>
|
|
13
|
+
<br>
|
|
14
14
|
|
|
15
15
|
## Motivation
|
|
16
16
|
|
|
17
|
-
Sveltia CMS was born in November 2022, when the
|
|
17
|
+
Sveltia CMS was born in November 2022, when the progress of Netlify CMS was stalled for more than six months. [@kyoshino](https://github.com/kyoshino)’s clients wanted to replace their Netlify CMS instances without much effort, mainly to get better internationalization support.
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
To achieve radical improvements in UX, performance and i18n, it was decided to build an alternative from the ground up, while ensuring an easy migration path from the other. After proving the concept with a rapid [Svelte](https://svelte.dev/) prototype, development was accelerated to address their primary use cases. The new offering has since been released as open source software to encourage wider adoption.
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
Sveltia CMS is a Git-based lightweight headless CMS, which means:
|
|
21
|
+
Our goal is to make it a viable successor to Netlify CMS, expand the Git-based headless CMS market, empower small businesses and individuals who need a simple yet powerful CMS solution, and showcase the huge potential of the Svelte framework.
|
|
24
22
|
|
|
25
|
-
|
|
26
|
-
- Lightweight: The app is compiled as a single small JavaScript file served over a CDN. There’s no need to sign up for a service or install additional software.
|
|
27
|
-
- Headless: The CMS only takes care of raw data. You can read it and render the final content with your favourite framework.
|
|
23
|
+
## Features
|
|
28
24
|
|
|
29
25
|
Here are some highlights mainly compared to Netlify/Decap CMS:
|
|
30
26
|
|
|
31
27
|
### Compatible with Netlify/Decap CMS
|
|
32
28
|
|
|
33
|
-
- Ready to replace Netlify/Decap CMS _in some casual use case scenarios_ by updating
|
|
29
|
+
- Ready to replace Netlify/Decap CMS _in some casual use case scenarios_ by updating a single line of code.
|
|
34
30
|
- Existing [configuration files](https://decapcms.org/docs/configuration-options/) can be reused as is.
|
|
35
31
|
- Various features are still missing though — [see the compatibility chart below](#compatibility) for details.
|
|
36
32
|
|
|
37
33
|
### Better UX
|
|
38
34
|
|
|
39
|
-
- Created by an [experienced UX engineer](https://github.com/kyoshino) who loves code and design.
|
|
40
|
-
-
|
|
41
|
-
-
|
|
35
|
+
- Created and maintained by an [experienced UX engineer](https://github.com/kyoshino) who loves code and design. You can expect constant UX improvements.
|
|
36
|
+
- Offers a modern, intuitive user interface, including an immersive dark mode[^2], inspired in part by the Netlify CMS v3 prototype[^1].
|
|
37
|
+
- Comes with touch device support. While the UI is not yet optimized for smaller screens, larger tablets like iPad Pro or Pixel Tablet should work well.
|
|
42
38
|
- The screenshots above are worth a thousand words!
|
|
43
39
|
|
|
44
40
|
### Better performance
|
|
45
41
|
|
|
46
|
-
- Built completely from scratch with Svelte
|
|
47
|
-
-
|
|
48
|
-
- Saving entries and
|
|
49
|
-
-
|
|
42
|
+
- 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.
|
|
43
|
+
- Uses the GraphQL API for GitHub to quickly fetch content at once, so that entries and assets can be listed and searched instantly. This avoids the slowness and potential API rate limit violations caused by hundreds of requests with relation widgets[^14].
|
|
44
|
+
- Saving entries and assets is also much faster thanks to the [GraphQL mutation](https://github.blog/changelog/2021-09-13-a-simpler-api-for-authoring-commits/).
|
|
45
|
+
- Caches Git files locally to further speed up startup and reduce bandwidth.
|
|
50
46
|
- Small footprint: less than 300 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).
|
|
51
47
|
|
|
52
48
|
### Better productivity
|
|
53
49
|
|
|
54
|
-
- You can [work on a local Git repository](#work-with-a-local-git-repository) without having to run a proxy server.
|
|
50
|
+
- You can [work on a local Git repository](#work-with-a-local-git-repository) without having to run a proxy server on your machine.
|
|
55
51
|
- You can delete multiple entries and assets at once.
|
|
56
|
-
-
|
|
52
|
+
- Some keyboard shortcuts are available for faster editing. More to come!
|
|
57
53
|
- Create a new entry: `Ctrl+E` (Windows/Linux) / `Command+E` (macOS)
|
|
58
54
|
- Save an entry: `Ctrl+S` (Windows/Linux) / `Command+S` (macOS)
|
|
59
55
|
- Search for entries and assets: `Ctrl+F` (Windows/Linux) / `Command+F` (macOS)
|
|
60
|
-
-
|
|
56
|
+
- Solves various outstanding Netlify/Decap CMS bugs[^11].
|
|
57
|
+
|
|
58
|
+
### Better accessibility
|
|
59
|
+
|
|
60
|
+
- Improved keyboard handling lets you efficiently navigate through UI elements using the Tab, Space, Enter and arrow keys[^17].
|
|
61
|
+
- Comprehensive [WAI-ARIA](https://w3c.github.io/aria/) support empowers users who rely on screen readers such as NVDA or VoiceOver.
|
|
62
|
+
- 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.
|
|
63
|
+
- We’ll continue to test and improve the application to meet [WCAG 2.2](https://w3c.github.io/wcag/guidelines/22/).
|
|
61
64
|
|
|
62
65
|
### Better i18n support
|
|
63
66
|
|
|
64
|
-
-
|
|
65
|
-
- Fields in non-default locales
|
|
66
|
-
- [
|
|
67
|
+
- It’s now easier to switch between locales while editing with just a click on a button instead of a dropdown list.
|
|
68
|
+
- Fields in non-default locales are validated as expected[^13].
|
|
69
|
+
- [Integrates DeepL](#use-deepl-to-translate-entry-fields) to allow translation of text fields from another locale with one click.
|
|
67
70
|
- You can [disable non-default locale content](#disable-non-default-locale-content)[^15].
|
|
68
|
-
- 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
|
|
69
|
-
-
|
|
71
|
+
- 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[^12].
|
|
72
|
+
- Resolves limitations in the Netlify/Decap CMS [list and object widgets](https://decapcms.org/docs/beta-features/#i18n-support) so that changes made with these widgets will be duplicated between locales as expected when using the `i18n: duplicate` field configuration[^7].
|
|
70
73
|
|
|
71
74
|
### Collection enhancements
|
|
72
75
|
|
|
73
76
|
- You can choose a [custom icon for each collection](#use-a-custom-icon-for-a-collection)[^3].
|
|
74
|
-
- A [per-collection media folder](#use-a-custom-media-folder-for-a-collection) will appear
|
|
77
|
+
- A [per-collection media folder](#use-a-custom-media-folder-for-a-collection) will appear next to the entries.
|
|
75
78
|
- String values in YAML files can be quoted with the new `yaml_quote: true` option for a collection, mainly for framework compatibility[^9].
|
|
76
79
|
|
|
77
80
|
### Field enhancements
|
|
@@ -81,9 +84,9 @@ Here are some highlights mainly compared to Netlify/Decap CMS:
|
|
|
81
84
|
- Optional object fields (`widget:object` with `required:false`) can be manually added or removed. If removed, the required subfields will no longer trigger validation errors[^16].
|
|
82
85
|
- You can revert changes to all fields or a specific field.
|
|
83
86
|
|
|
84
|
-
###
|
|
87
|
+
### Asset Library enhancements
|
|
85
88
|
|
|
86
|
-
- An all-new
|
|
89
|
+
- An all-new Asset Library makes it easy to manage all your files, including images and documents.
|
|
87
90
|
- You can sort or filter assets by name or file type and view asset details, including size, dimensions, and a list of entries that use the selected asset.
|
|
88
91
|
- You can upload multiple assets at once, including files in nested folders, by browsing or dragging & dropping them into the media library[^5].
|
|
89
92
|
- You can navigate between the global media folder and a per-collection media folder[^6].
|
|
@@ -95,7 +98,7 @@ While it’s not our goal to recreate all the features found in Netlify/Decap CM
|
|
|
95
98
|
| Feature | Status in Sveltia CMS |
|
|
96
99
|
| --- | --- |
|
|
97
100
|
| Installation | Installing with npm is not supported yet. |
|
|
98
|
-
| UI locales | Only English and Japanese are available at this time. No registration is needed. While the UI locale is automatically selected depending on the browser’s language settings, it can be changed in Settings. (Click on the Account button
|
|
101
|
+
| UI locales | Only English and Japanese are available at this time. No registration is needed. While the UI locale is automatically selected depending on the browser’s language settings, it can be changed in Settings. (Click on the Account button in the top right corner of the CMS.) |
|
|
99
102
|
| Account | Only the [GitHub backend](https://decapcms.org/docs/github-backend/) is available at this time. You can keep using Netlify or a [3rd party OAuth client](https://decapcms.org/docs/external-oauth-clients/) (or [our own](https://github.com/sveltia/sveltia-cms-auth)) to sign in with GitHub, just like Netlify/Decap CMS. The GitLab backend is coming soon. We plan to add the Test backend as well for our demo site, but Azure and Bitbucket are unlikely to be supported, mainly due to the lack of an API method to fetch content in bulk. Later we may implement a performant Git Gateway alternative using GraphQL. |
|
|
100
103
|
| Configuration | Supported. |
|
|
101
104
|
| Media | External media storage services are not supported yet. |
|
|
@@ -150,36 +153,29 @@ While it’s not our goal to recreate all the features found in Netlify/Decap CM
|
|
|
150
153
|
- Downloading an asset in the media library is not implemented yet.
|
|
151
154
|
- [Backend health check](https://www.githubstatus.com/api) is not implemented yet.
|
|
152
155
|
|
|
153
|
-
## Known issues
|
|
154
|
-
|
|
155
|
-
- Accessibility support is limited.
|
|
156
|
-
|
|
157
156
|
## Roadmap
|
|
158
157
|
|
|
158
|
+
- [Svelte 5](https://svelte.dev/blog/runes) migration
|
|
159
159
|
- Further Netlify/Decap CMS compatibility, including Editorial Workflow
|
|
160
|
-
- Further performance optimization, including data caching and [Svelte 5](https://svelte.dev/blog/runes) migration
|
|
161
|
-
- Further UX enhancements
|
|
162
160
|
- Config editor[^10]
|
|
161
|
+
- Mobile support[^18]
|
|
163
162
|
- Documentation
|
|
163
|
+
- Marketing site
|
|
164
164
|
- Demo site
|
|
165
165
|
- Starter templates
|
|
166
166
|
|
|
167
|
-
### Non goals (for now)
|
|
168
|
-
|
|
169
|
-
- Mobile support
|
|
170
|
-
- WYSIWYG editing
|
|
171
|
-
|
|
172
167
|
## Getting started
|
|
173
168
|
|
|
174
169
|
### New users
|
|
175
170
|
|
|
176
|
-
Currently, Sveltia CMS is aimed at existing Netlify/Decap CMS users. If you don’t have it yet, follow [their documentation](https://decapcms.org/docs/add-to-your-site/) to add it to your site first. Then migrate to Sveltia CMS as described below.
|
|
171
|
+
Currently, Sveltia CMS is aimed at existing Netlify/Decap CMS users. If you don’t have it yet, follow [their documentation](https://decapcms.org/docs/add-to-your-site/) to add it to your site and create a configuration file first. Then migrate to Sveltia CMS as described below.
|
|
177
172
|
|
|
178
|
-
As the product evolves, we’ll implement
|
|
173
|
+
As the product evolves, we’ll implement a built-in configuration editor and provide comprehensive documentation to make it easier for everyone to get started with Sveltia CMS.
|
|
179
174
|
|
|
180
|
-
Here are some starter
|
|
175
|
+
Here are some starter kits for popular frameworks created by community members. More to follow!
|
|
181
176
|
|
|
182
|
-
- [Eleventy](https://github.com/danurbanowicz/eleventy-sveltia-cms-starter) by [@danurbanowicz](https://github.com/danurbanowicz)
|
|
177
|
+
- [Eleventy starter template](https://github.com/danurbanowicz/eleventy-sveltia-cms-starter) by [@danurbanowicz](https://github.com/danurbanowicz)
|
|
178
|
+
- [Hugo module](https://github.com/privatemaker/headless-cms) by [@privatemaker](https://github.com/privatemaker)
|
|
183
179
|
|
|
184
180
|
### Migration
|
|
185
181
|
|
|
@@ -202,7 +198,7 @@ You can host your Sveltia CMS-managed site anywhere, such as [Cloudflare Pages](
|
|
|
202
198
|
|
|
203
199
|
### Work with a local Git repository
|
|
204
200
|
|
|
205
|
-
You can use Sveltia CMS with a local Git repository,
|
|
201
|
+
You can use Sveltia CMS with a local Git repository, like the [beta feature](https://decapcms.org/docs/beta-features/#working-with-a-local-git-repository) in Netlify/Decap CMS, 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).
|
|
206
202
|
|
|
207
203
|
1. Launch the local development server for your frontend framework, typically with `npm run dev` or `pnpm dev`.
|
|
208
204
|
1. Visit `http://localhost:[port]/admin/index.html` with Chrome or Edge. The port number varies by framework.
|
|
@@ -256,19 +252,21 @@ In Sveltia CMS, those per-collection media folders are displayed prominently for
|
|
|
256
252
|
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:
|
|
257
253
|
|
|
258
254
|
1. Sign up for [DeepL API](https://www.deepl.com/pro-api/) and copy your Authentication Key from DeepL’s Account page.
|
|
259
|
-
1. Go back to Sveltia CMS, click on the Account button
|
|
255
|
+
1. Go back to Sveltia CMS, click on the Account button in the top right corner, then click Settings.
|
|
260
256
|
1. Paste your key to the DeepL API Authentication Key field, and close the Settings dialog.
|
|
261
257
|
1. Open any entry, and you can now translate all fields or individual fields by selecting Translate from the three-dot menu.
|
|
262
258
|
1. If you have upgraded to DeepL API Pro, provide your new Authentication Key in the same way.
|
|
263
259
|
|
|
264
260
|
### Disable non-default locale content
|
|
265
261
|
|
|
266
|
-
You can now disable
|
|
262
|
+
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.
|
|
263
|
+
|
|
264
|
+
With the following configuration, you can disable the French and/or German translation while writing in English.
|
|
267
265
|
|
|
268
266
|
```diff
|
|
269
267
|
i18n:
|
|
270
268
|
structure: multiple_files
|
|
271
|
-
locales: [en, fr]
|
|
269
|
+
locales: [en, fr, de]
|
|
272
270
|
default_locale: en
|
|
273
271
|
+ save_all_locales: false
|
|
274
272
|
```
|
|
@@ -354,7 +352,7 @@ Want to build a website with Sveltia CMS? [@kyoshino](https://github.com/kyoshin
|
|
|
354
352
|
|
|
355
353
|
## Contributions
|
|
356
354
|
|
|
357
|
-
Sveltia CMS is still in early beta, so we do expect various problems. Please [report any bugs to us](https://github.com/sveltia/sveltia-cms/issues/new). Feel free to submit feature requests as well. Meanwhile, pull requests may not be accepted for the time being due to limited review resources. As we get closer to the 1.0 release, we’ll be welcoming
|
|
355
|
+
Sveltia CMS is still in early beta, so we do expect various problems. Please [report any bugs to us](https://github.com/sveltia/sveltia-cms/issues/new). Feel free to submit feature requests as well. Meanwhile, pull requests may not be accepted for the time being due to limited review resources. As we get closer to the 1.0 release, we’ll be welcoming localizers.
|
|
358
356
|
|
|
359
357
|
## Related Links
|
|
360
358
|
|
|
@@ -380,3 +378,5 @@ This software is provided “as is” without any express or implied warranty. T
|
|
|
380
378
|
[^14]: [Netlify/Decap CMS #4635](https://github.com/decaporg/decap-cms/issues/4635), [Netlify/Decap CMS #5920](https://github.com/decaporg/decap-cms/issues/5920), [Netlify/Decap CMS #6410](https://github.com/decaporg/decap-cms/issues/6410)
|
|
381
379
|
[^15]: [Netlify/Decap CMS #6932](https://github.com/decaporg/decap-cms/issues/6932)
|
|
382
380
|
[^16]: [Netlify/Decap CMS #2103](https://github.com/decaporg/decap-cms/issues/2103)
|
|
381
|
+
[^17]: [Netlify/Decap CMS #1333](https://github.com/decaporg/decap-cms/issues/1333)
|
|
382
|
+
[^18]: [Netlify/Decap CMS #441](https://github.com/decaporg/decap-cms/issues/441)
|