Multiple Files JSON File Structure - Localized File Collections

[CarloBu]

Hello, it's me again, I'm trying add multiple-folders JSON structure to the Sveltia CMS so that the client can easily navigate and change localized navigation links:

Sveltia CMS let me directly define files:

  - label: Navigation
    name: navigation
    create: false
    delete: false
    icon: link
    i18n: true
    format: json
    extension: json
    files:
      - file: 'src/locales/lt/headerData.json'
        label: 'header'
        name: 'headerData'
        fields:
          - label: "Links"
            name: "links"
            widget: "list"
            i18n: duplicate
            fields:
              - label: "Text"
              ...
      - file: 'src/locales/lt/footerData.json'
        label: 'footer'
        name: 'footerData'
        fields:   
          - label: "Links"
          ...
      - file: 'src/locales/lt/shared.json'
        label: 'shared'
        name: 'sharedData'
        fields:   
          - label: "Title"
          ...

This setup works well, and surprisingly, Sveltia CMS functions with a single JSON file for both locales. However, the localization library I use is highly opinionated and uses a multiple-folder JSON file structure. It also doesn't support nested folders, which leads to issues. This is the folder structure of localized json files that I setup.

Would it be possible for you to add Multiple Folders JSON File Structure?

In this case, I would imagine the workflow: provide the file path of json file: i18n: true files:

• file: 'src/locales/lt/headerData.json' With i18n flag present, the Sveltia would look for locale identifiers in the JSON. If it does not find any, it would look for the second locale folder: 'src/locales/en/headerData.json'. Or just use some flag field to trigger the multiple-folder locale json structure,

I hope I explained my idea clearly.

[kyoshino]

It’s an open issue in Netlify/Decap CMS and on my todo list 😎

• https://github.com/decaporg/decap-cms/issues/5280

I was wondering how to solve this without breaking backward compatibility, but it’s probably not hard to do it.

1. Allow developers to use the {{locale}} template tag in the file path file path, e.g. src/locales/{{locale}}/shared.json
2. Sveltia CMS enables multiple files/folders mode only if {{locale}} is used
3. Sveltia CMS will parse and generate files for all the locales while replacing {{locale}}

Let’s see if this works.

[kyoshino]

A workaround is suggested in the Netlify/Decap CMS issue, btw. You can use a folder collection with create: false and delete: false options, create a set of files, then it looks like a file collection.

[CarloBu]

Yes, I was thinking about a solution too that does not break the existing workflow, but your src/locales/{{locale}}/shared.json idea looks more logical and it's an elegant solution. {{locale}} does not break any existing logic. 👍 and it's easy for the developer to follow.

[CarloBu]

Thank you for the workaround tip; it would work for most cases. However, in my situation, the footerData.json and header.json structures are different. :/

Actually, I'm using the same workaround for the Studio Pages YAML file: a folder collection with the create: false and delete: false options. All the page text is stored in single yaml file. It works perfectly for this case. I will do the same for all pages. That way, I can translate an entire page using a single well-defined YAML file, and it will look well-structured for the client.

[kyoshino]

Done in v0.29.0 🚢

[CarloBu]

whoah! Thanks a lot! It was the last barrier to building a functional fully i18n web personal stack. 💯

[CarloBu]

@kyoshino, serious question: how are you so productive with this project? Decap CMS has 500+ contributors, but their last commit was one month ago with a single feature. You added 4 features in the past 2 days.

[kyoshino]

I just want to ship a much better product than Decap CMS 😄 The i18n support is my particular concern since my own clients usually require a multilingual setup. A new client wants to have content in Japanese, English and French.

Not sure what’s happening with Decap. There are even no maintainer responses to new issues and PRs these days. Perhaps some of them have been laid off, or the company has strictly limited their time working on the project 🤔

Most of the contributors are from the Netlify CMS era, btw.

[CarloBu]

Yeah, something strange is happening. There are over 500 open issues, and most of them with bug tags concern me. I think I have tried almost all the CMSs on the market, from closed-source Contentful to open-source Fresh Star Payload CMS. Most of them were overkill for my needs, so I narrowed my search to Git-based CMSs to avoid running a server for the CMS or being at the mercy of corporations that might pull the plug. In my humble opinion, the Keystatic CMS is great option, I liked the keystatic.cloud, but I didn't like the UX; it is too dev-centric with all the Git functions. Pages CMS is great too; I liked the UI a lot, but the i18n is non-existent and it lacks some advance features. After some testing, I thought I would stick with the half-decent Decap until I found your CMS. This is all I need, and the i18n is perfect. In Europe, i18n is a must. I'm glad I found your CMS. 👍

[CarloBu]

@kyoshino, I think I encountered a bug when I try to upload an image with a localized file structure. It doesn't matter whether it is an md, yaml, or json file. The image won't upload when there is a localized file structure, but I can pick the existing image from the "All Asset" though. Additionally, I can't see my local images in the "All Asset" window.

To recreate, run this schema:

collections:
  - label: 'Test'
    name: 'test'
    create: true
    format: json
    extension: json
    i18n: duplicate
    editor:
      preview: false
    files:
      - file: 'src/content/{{locale}}/test.json'
        label: Test Data
        name: testData
        i18n: duplicate
        editor:
          preview: false
        fields:
          - label: Test Image
            name: testImage
            widget: object
            i18n: duplicate
            fields:
              - {label: Image, name: src, widget: image, i18n: duplicate}

https://github.com/sveltia/sveltia-cms/assets/145860771/3f500ef6-c91b-4d79-9f11-fa550e40d2ab

[kyoshino]

Will check.

[kyoshino]

Fixed in v0.29.1 🙇🏼 Two unrelated issues were involved.

[CarloBu]

that was fast! It's now working 👍

[kyoshino]

Yeah, something strange is happening. There are over 500 open issues, and most of them with bug tags concern me.

I was checking the numbers last night. Sveltia CMS has already solved at least 90 (or 120 if you count duplicates) of these Netlify/Decap CMS issues. Will soon reach a milestone 💯

[CarloBu]

That's a crazy number for a single dev, especially considering that I constantly distract you from the 100-number goal :)