sveltia / sveltia-cms Goto Github PK
View Code? Open in Web Editor NEWAlternative to Netlify/Decap CMS. Fast, lightweight, Git-based headless CMS. Modern UX, first-class i18n support, open source & free. Made with Svelte.
License: MIT License
Alternative to Netlify/Decap CMS. Fast, lightweight, Git-based headless CMS. Modern UX, first-class i18n support, open source & free. Made with Svelte.
License: MIT License
First of all, thank you for making this. I much prefer using this to Decap CMS.
I have a gallery configured like so in config.yml
:
collections: # A list of collections the CMS should be able to edit
- name: 'myGallery'
label: 'My Gallery'
folder: 'src/routes/myGallery'
create: true
fields:
- { label: 'Title', name: 'title', widget: 'string' }
- { label: 'Publish Date', name: 'date', widget: 'datetime' }
- { label: 'Body', name: 'body', widget: 'markdown' }
- { label: 'Thumbnail', name: 'thumbnail', widget: 'image' }
- label: 'Gallery'
name: 'galleryImages'
widget: 'list'
summary: '{{fields.image}}'
field: { label: Image, name: image, widget: image }
When I go to the UI, pre-existing images don't appear in the gallery, even though they are in the Markdown metadata under galleryImages
. If I re-add the images via Svelta CMS, the images appear in the UI. However, the resulting Markdown is unchanged, and if I reload the post in the UI, the images disappear again.
Just noticed this, and it feels a bit odd, but nothing in the UI seems to be right/control clickable...not sure if that is intentional or not, but...I don't know...feels a bit off to me...
That's all :-)
Due to my last bug finding success- after unsuccessfully fiddling with configs, I decided to open this issue. Hugo is my SSG.
The bug is present with the following configs:
# Path
content/en/collection/
content/english/collection/
# Config
i18n:
structure: multiple_folders
# Path
content.en/my-collection/
# Config
i18n:
structure: single_file
# Path
content/my-collection/file.en.md
# Config
i18n:
structure: multiple_files
My i18n exists themes/my-theme/i18n/
but this should not matter as I understand it, but I did create a i18n/
directory in the root.
The following view works fine:
The bug shows up in the log when clicking on an entry of New
button, or loaded via URL.
I am only testing this with local repo file system access, not Github.
Time to time GitHub API can go down, and make responses with 5xx codes and body like that:
{
"data": null,
"errors":[
{
"message":"Something went wrong while executing your query. This may be the result of a timeout, or it could be a GitHub bug. Please include `DF4A:6E1B:1D670F9:1DAA64D:64E7DC75` when reporting this issue."
}
]
}
It would be nice to show some error modal with "Retry" button to retry the request.
No errors silently ignored :(
Here is the config:
media_folder: "static/uploads/images"
public_folder: "/uploads"
publish_mode: editorial_workflow
collections:
- label: "Pages"
name: "pages"
files:
- label: "Requests"
name: "requests"
file: "src/content/requests.json"
fields:
- { label: "Title", name: "title", widget: "string" }
Seems like the error is coming from here with otherNames
receiving [undefined]
.
sveltia-cms/src/lib/services/utils/files.js
Line 191 in b0285df
I have a few sites on a svelte kit, and they all mostly depend on https://github.com/pngwn/MDsveX
It means that content stored inside repo in files like that:
src/routes/letters/Ivan/+page.svelte.md
src/routes/letters/Piotr/+page.svelte.md
...
src/routes/letters/{slug}/+page.svelte.md
or
src/routes/blog/my-first-post/+page.svelte.md
src/routes/blog/my-second-post/+page.svelte.md
...
src/routes/blog/{slug}/+page.svelte.md
I can't find a way, how to explain which files should be edited in collections config.
Actually I tried
folder: "/src/routes/letters/{{slug}}"
slug: "+page.svelte.md"
but it ignores interpolation.
Or:
folder: "/src/routes/letters/"
slug: "{{slug}}/+page.svelte.md"
but it ignores folder creation...
It there a way to store each file in separate folder?
Also is there some option to store assets in the articles folder?
The filename generated by #9 for an 'svg'-file has the extension .svg+xml
.
While the Mime-Type is image/svg+xml
, this should probably be .svg
Registration of media type image/svg+xml
In any case, should the extension not change when uploading an `.svg´-file
- name: "images"
label: "Images"
label_singular: "Image"
widget: list
fields:
- { name: "img", label: "Image", widget: image}
In this case the uploaded images get saved as "image-1683526164572.png" for example.
In other cases the original file name get's used to save the uploaded file.
As far as I can tell the only relevant difference would be it being a direct descendant of a list.
I ran into another bug. After successfully doing the oauth dance, logging in, seeing request return 200
https://api.github.com/repos/user/my-repo/git/trees/a92c534exxx.......
Sveltia UI updates and says Loading Site Data...
but errors with following:
Uncaught (in promise) TypeError: re(...).findLast is not a function
ry https://example.org/admin/sveltia-cms.js:387
ry https://example.org/admin/sveltia-cms.js:387
xO https://example.org/admin/sveltia-cms.js:401
update https://example.org/admin/sveltia-cms.js:439
update https://example.org/admin/sveltia-cms.js:439
hv https://example.org/admin/sveltia-cms.js:1
He https://example.org/admin/sveltia-cms.js:1
promise callback*db https://example.org/admin/sveltia-cms.js:1
pv https://example.org/admin/sveltia-cms.js:1
ctx https://example.org/admin/sveltia-cms.js:1
fU https://example.org/admin/sveltia-cms.js:452
s https://example.org/admin/sveltia-cms.js:1
De https://example.org/admin/sveltia-cms.js:1
h https://example.org/admin/sveltia-cms.js:439
EA https://example.org/admin/sveltia-cms.js:439
EA https://example.org/admin/sveltia-cms.js:439
ab https://example.org/admin/sveltia-cms.js:1
$/< https://example.org/admin/sveltia-cms.js:1
He https://example.org/admin/sveltia-cms.js:1
promise callback*db https://example.org/admin/sveltia-cms.js:1
pv https://example.org/admin/sveltia-cms.js:1
ctx https://example.org/admin/sveltia-cms.js:1
jA https://example.org/admin/sveltia-cms.js:439
s https://example.org/admin/sveltia-cms.js:1
f4 https://example.org/admin/sveltia-cms.js:217
jA https://example.org/admin/sveltia-cms.js:439
ab https://example.org/admin/sveltia-cms.js:1
$/< https://example.org/admin/sveltia-cms.js:1
He https://example.org/admin/sveltia-cms.js:1
W https://example.org/admin/sveltia-cms.js:1
dU https://example.org/admin/sveltia-cms.js:452
kU https://example.org/admin/sveltia-cms.js:452
ev https://example.org/admin/sveltia-cms.js:1
<anonymous> https://example.org/admin/sveltia-cms.js:452
When switching to decap-cms / netlify-cms.js
I see the following error:
Error loading the CMS configuration
Config Errors:
'collections[1].fields[2].fields[0]' must have required property 'search_fields'
...
Check your config.yml file.
After fixing a few bugs in my config and properly loading the content in Decap, I still see above error in Sveltia.
What is also interesting is the config works fine when using localhost version.
When you use the widget relation
with the option multiple
enabled, the selected elements get displayed in alphabetical order in the CMS-UI (Editor & Preview).
They get saved in the corresponding file correctly sorted by insert-order
When the folder provided in the config.yml doesn't exist/has no matching files inside, this returns empty filelists, which causes the graphql query to be incorrect.
It returns:
"query {\n repository(owner: \"<OWNER>\", name: \"<NAME>\") {\n \n }\n }"
(notice the curly brackets with only whitespace characters inside)
GitHub then returns:
{"errors":[{"message":"Parse error on \"}\" (RCURLY) at [4, 5]","locations":[{"line":4,"column":5}]}]}
Which then causes an Error (Chromium) in the javascript stopping the whole Load process:
caught (in promise) TypeError: Cannot destructure property 'repository' of '(intermediate value)' as it is undefined.
This should either:
- load the CMS with an empty list if folder is empty
- notify the User that folder doesn't exist
I would absolutely love to be able to customize the look and feel of the CMS UI in the following ways:
I would basically love the ability to customize the general look and feel for clients and configure all that in a css file or something...
Please consider this in the near future, thank you ( ありがとう :-)
When loading Sveltia CMS v.0.3.5
from the following path:
https://example.org/my-actual-site/admin/
It returns 404
for the config.yml
as it tries to load from:
https://example.org/admin/
DecapCMS seems to have something like this for its editorial workflow.
Seeing if/when the made changes are deployed or if there was an error would be very beneficial for content editors (and developers).
When "toml" is selected as format (/extension), the "Save" of a new Element, ...
... generates an empty toml-file, if working on the local repo.
... throws an Error in the CMS-UI, if working with github.
In widget: relation
string templates ({{field}}
) only work in display_fields
on not nested fields (+ wildcard).
If it is used with a nested field (e.g. {{sections.*.id}}
) no content is visible in the editor-dropdown-selector
Being able to customize the previews is an amazing feature in Decap. I use it to import my global css so that the content in the preview looks just like the page the content is on!
Any plans to support this feature? Or perhaps I missed it?
For some reason, whenever I try to use my local repo, it doesn't work and I get the error: "sveltia-cms.js:442 Uncaught (in promise) DOMException: A requested file or directory could not be found at the time an operation was processed." in the console... It worked before, but now seemingly out of nowhere, it doesn't anymore.
first noticed:
- name: "subjects"
label: "Subjects"
widget: list
collapsed: true
field: { label: "Subject", name: "subject", widget: string }
but seems to happen for all widget-types
An entry can't be saved, if identifier_field
is set, but not slug
.
identifier_field
should also change the default of slug
https://decapcms.org/docs/configuration-options/#slug:
a different field can be used via identifier_field
Also it can't anymore be saved, if no title
-field exists when no identifier_field
or slug
is set.
I've had a collection set up this way, and it just saved the entries with a random id (chars and numbers).
"{{route}}#{{sections.*.id}}"
still not working.
gets saved with the{{}}
({{/}}#{{about-me}}
)
Originally posted by @frankbits in #19 (comment)
This also breaks how the current data is shown in the sveltia-UI after reopening the saved collection
Would be nice to add some markdown editor for non tech writers.
For example https://github.com/BearToCode/carta-md or something else
My site is configured to use a branch other than main/master. The Git Repository link always takes me back to main/master. Can this be configured to go to the branch specified in config.yml
instead?
If DateTime has for example 20:00
saved, opening the element in the CMS loads DateTime with 08:00
.
The check if the element has been altered and can be saved, does check correctly.
-> opening + save = unwanted change to datetime
When you set a number-widget to 0
while it was previously empty, the save-button des not get activated.
If you change something else too, to activate the save-button, the 0-field does get saved as if it as empty.
Also the field saves an empty string if left empty, even when required: false
This field works in decapCMS:
- { name: "section", label: "Section", widget: relation, collection: "pages", value_field: "sections.*.id", display_fields: ["route", "sections.*.id"], search_fields: ["sections.*.id"] }
in sveltiaCMS nested fields can not be accessed.
DecapCMS-Doc:
value_field
: (required) name of the field from the referenced collection whose value will be stored for the relation. For nested fields, separate each subfield with a.
(e.g.name.first
). For list fields use a wildcard*
to target all list items (e.g. categories.*).
would be nice to have this feature a documented (also not listed as missing in README.md)
*
-wildcard for lists (also if types
)I've noticed that it the media gallery is somewhat able to handle Videos. For example, it shows the video (without a thumbnail) in, but can't play it or provide full information about it in the Sidebar, for example the Length is listed as "-". Is this a partial implementation of Support for Videos that is still coming? Would appreciate it, if it fully worked sometime.
When editing content with preview turned off (nobody wants or uses the preview pane that I know of, including myself)
there is no line length limit, so the editing experience is severely compromised:
for metadata:
for body copy (content, etc...)
a max line length of 60 to 80 characters would be good, or allowing the user to change it as well. Also, the generally typographic settings are not so hot, as line spacing is not good, font size, etc...
My team and the other teams and people I know who use a CMS NEVER use preview mode, as it is basically useless in every possible conceivable way. They all want an interface more like google docs, MS Word, even Notion style:
Add custom svelte components:
Writing without distractions:
Just want to put these ideas in your heads cuz this is something I really need...
I encountered the following issue whereby the config did not show an error (which makes sense) and the UI shows This collection has no entries yet.
My collection settings were:
collections:
- label: "Widgets"
name: "widgets"
folder: "content/widgets/"
extension: "md"
format: "yaml"
The UX bug (as I would call it) is that Sveltia did not return content in the UI nor inform the user as to why there was no content.
I assumed this is because Sveltia tried to parse the entire file as yaml
but since it was a .md + frontmatter
file, Sveltia failed silently. Converting the files .yaml
and updating extension: "yaml"
worked, but incorrect for my SSG.
Changing the value to format: "frontmatter"
makes all the data correctly show, as expected 😄
Suggestions
## Oops
We found content, but were unable to display it.
Please make sure your settings and files are correct:
folder: "content/widgets/"
extension: "md"
format: yaml
Relates to #17 but I think is discreet enough to warrant a separate issue and path to resolution.
- { name: "img", label: "Image", widget: image, allow_multiple: true }
The allow_multiple
-option of the image-widget seems to not be supported.
Or just the media-library does not support multiple-selection, which would make the option in line with the decap-cms-Doc
allow_multiple: (default: true) when set to false, multiple selection will be disabled even if the media library extension supports it
Hello 👋🏻 I'm very excited about sveltia-cms 😄 I tested it a couple months ago with the local Git repository
option and it is all looking wonderfully well done.
However, my deployment still required decap-cms
and I reconfigured my dev environment. Since then I cannot get serving locally working again. I get this error:
My config.yml
file works just fine with the decap npx netlify-cms-proxy-server
so I am sure i'm just misunderstanding something.
Perhaps putting an example config or documenting where sveltia-cms
differs from decap-cms
would be helpful to me and others.
Anyway, thanks for your hard and really polished work here! Looking forward to future releases 😀
On a fairly clean install, I see this:
Minimally reproducible example at https://storied-cassata-937890.netlify.app/admin/ with the config being loaded from https://storied-cassata-937890.netlify.app/admin/config.yml, which includes this:
backend:
name: git-gateway
branch: main
Am I forgetting a config step? It worked with DecapCMS.
Changes to widget: string
with multiple: true
can only be saved if another field was added before.
If another field is edited after, the change to the "string
-multiple
"-field is reverted.
Also while editing, the changes are not visualized in the preview.
if field:
is placed in newLine as - { ... }
its content
I'm not sure if this is a sveltia-bug, wrong config (not catched) or a problem with YAML-definition
Hello, it seems like local development is only enabled in Chrome or Edge.
Not all chromium browsers are supported though, I cannot access the admin panel in Brave.
Would it be possible to include Firefox?
Hey @kyoshino,
this looks like a wonderful project! Thank you for all this work!
To evaluate the tool it would be very helpful if there was a public demo instance/deployment (e.g. on GitHub Pages). It doesn't need to be full functional, but it would be awesome if we could look at the UI/see the Admin interface in an easy way, without cloning it locally.
Best of luck with this project. I will be following very closely and look forward to having a GitLab backend in the future!
Hi!
So, the rich text editor is something that the teams I am working with will need before we can use Sveltia, and I have some thoughts...
What I ultimately want is a rich text editor where I can create custom svelte components that can be used as "blocks" that the content authors and editors are able to use in the composition of their writing. I want to be able to make custom components for them at their request, and/or offer a library for them to pick and choose from to add to their individual editing experience...
I believe Decep CMS uses Slate under the hood, but there are other more modern solutions like Prose Mirror that you might want to (or already are) considering...
I also recently found some interesting svelte based projects as well that might be useful:
tiptap, of course - https://github.com/ueberdosis/tiptap
svelte wrapper for tiptap - https://github.com/andheller/svelte-tiptap
Editable Website - https://github.com/michael/editable-website
Website for Editable Website to check it out - https://editable.website/
Svelte Prosemirror - https://github.com/TeemuKoivisto/svelte-prosemirror
all cool and interesting projects that I am learning more about to help my own understanding of these things.
Anyway, just wanted to share these resources as you work on rich text editing for Sveltia XD
- name: "audio"
label: "Audio"
widget: object
required: false
collapsed: true
fields:
- { name: "src", label: "Source-URL", widget: "string" }
- { name: "url", label: "Webpage-URL", widget: "string" }
- { name: "img", label: "Image", widget: image, required: false }
- { name: "descr", label: "Description", widget: "string", required: false }
src
& url
have to be set.
You should be able to save, if an optional object is empty
I have events, that dependent on their date get displayed as upcoming events, or as "highlights" with additional videos, images, comments.
I would like to easily be able to filter/group for this, to easily edit only future or only past events.
Maybe the filter/group-option could provide "current time/date(day,month,year)"-"template tags", and to compare two/multiple values.
view_filters:
- label: 'upcoming Events'
field: datetime
greater: '{{currentDate}}'
- label: 'Highlights'
field: datetime
lower: '{{currentDate}}'
view_groups:
- label: "upcoming?"
field: datetime
compare: '{{currentDate}}'
I have a Sveltekit static site with Sveltia in a Github repo deployed on Netlify. The deployed version of Sveltia correctly recognizes all posts. However when I run the site in development mode locally and select "Work with local repository", Sveltia only displays the posts that were created using the local version. The posts that were pulled from the Github repo are not shown.
For self-hosted deployments of websites, it sometimes can be useful or required to choose to work with git repositories in GitLab instead of GitHub.
As a Sveltia CMS user, I need to use it with a custom GitLab instance, in order to deploy to our own GitLab Pages environment.
This could extend the availability of Sveltia CMS by large means to wide user groups.
The GitLab GraphQL API is documented in:
If no custom instance is available, their hosted https://gitlab.com instance provides the same interfaces and allows GitHub login.
If you add a new element in al list-widget, the page can't be scrolled until you click somewhere on the page.
I have set the media_folder
setting to a folder within the /src
folder of my Sveltekit site, as I want to use vite-imagetools to transform and optimize all images. This means that the images would not be available through a direct path like they would in /static
, and so their thumbnails don't show up in Sveltia's image library. Thus I would like to see external image urls being allowed for the public_folder
setting. Maybe it would be even better to have a separate option for the path of Sveltia's image thumbnails vs the path written into the markdown files.
I have a widget that with multiple values inside, would it be possible to make "sortable_fields" accept something like "list[0].field" to sort by that field?
OS : Android 13
Browser : Chrome 112.0.5615.135
When I use the local Git repository and open the admin page in Chrome it shows like the image below.
I found this page which shows that there is a "File System Access API" bug on Chrome Android
Thank You🙏
clicking on replace-/add-button for image-widget opens an empty <form>
and blocks the page until it's reloaded.
Of course you also can't add images like this.
I don't know since which version this happens, as I just noticed it.
If we make use of we use Folder Collections Path and Folder Collections Media and Public Folder for content structure setup we have issue with folder deletion.
We got structure like that:
content/article1/index.md
content/article1/image1.jpg
content/article2/index.md
content/article2/image2.jpg
If we are going to delete article1
from sveltia, then content/article1/index.md
removed, but the folder with contents (content/article1/image1.jpg
) still persists. We expect that folder deleted with an article and all related images.
Proposed solution: add flag to delete folder with all content.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.