sveltia / sveltia-cms Goto Github PK

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.

Unable to enter the unsplash API key.

After getting the key as instructed by the links, I'm unable to press the 'insert' button.

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:

• http://localhost:1313/admin/#/collections/my-collection

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].

The exact error message is:

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:

• Typography
• Colors
• • Toolbar Color
• • Toolbar Font Color
• Logo
• Spacing
• • Input Field height and border-radius
• • List row height
• • Paragraph Height
• • Line Height
• • Metadata spacing
• • other things I cannot think of at the moment
• Font Size Everywhere

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)

• accessing nested fields
• *-wildcard for lists (also if types)
• save multiple fields of related collection? (not in decapCMS)

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

1. Show user friendly message in UI

## 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

2. Console log a parsing error (if there is?) such as this so there's a clue.

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

• vanishes when a new element is added by the button
• does not get saved correctly

I'm not sure if this is a sveltia-bug, wrong config (not catched) or a problem with YAML-definition

See comments from @0x0m0t0 in #43. Should be an easy fix.

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:

• GraphQL API | GitLab

If no custom instance is available, their hosted https://gitlab.com instance provides the same interfaces and allows GitHub login.

When I login with github, I get stuck on login page and it just leaves the message "Loading Site Data".

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.