Can Sveltia CMS store data in json format?

[rchrdnsh]

I don't remember if this is the case as I could not find it in the docs, but I don't remember Decap CMS storing in the files in json format...instead it was frontmatter and markdown...

Is it possible is Sveltia CMS to store data as JSON? The user would input content into form fields, but instead of YAML/Frontmatter and markdown the content could be stored as JSON?

Also, can YAML/Frontmatter in sveltia-cms allow for creating and editing nested arrays of objects?

Basically I need to be able to offer the following kind of data structure to a client:

{
    show: {
      vi: `Thời Sự Thế Giới`,
      en: `Morning News`,
    },
    show_id: 1,
    date: `2023-08-09 8:00:00.000+00`,
    title: {
      vi: `Các tiêu đề mới nhất của hôm nay và xa hơn`,
      en: `The Latest headlines of today and beyond`
    },
    image: `/shows/thoi-su-the-gioi-images/2023-08-09-cover.jpg`,
    alt: `Cover image of todays episode of morning news.`,
    video_id: `OpjGwOvtkU8`,
    parts: [
      {
        order: 1,
        title: `Specific Headline One`,
        image: `/shows/thoi-su-the-gioi-images/2023-08-09-cover-part-1.jpg`,
        alt: `Cover image of todays episode of morning news.`,
        video_id: `qs5eoL0E3Ls`
      },
      {
        order: 2,
        title: `Specific Headline Two`,
        image: `/shows/thoi-su-the-gioi-images/2023-08-09-cover-part-2.jpg`,
        alt: `Cover image of todays episode of morning news.`,
        video_id: `3CA2VFVNZh0`
      },
      {
        order: 3,
        title: `Specific Headline Three`,
        image: `/shows/thoi-su-the-gioi-images/2023-08-09-cover-part-3.jpg`,
        alt: `Cover image of todays episode of morning news.`,
        video_id: `FN28ln-pBWg`
      },
      {
        order: 4,
        title: `Specific Headline Four`,
        image: `/shows/thoi-su-the-gioi-images/2023-08-09-cover-part-4.jpg`,
        alt: `Cover image of todays episode of morning news.`,
        video_id: `m5rVUIm3TDk`
      },
    ]
  },

...where I have translations of some of the fields into two languages, and nested arrays of objects for related content that should ideally be associated in this kind of manner together.

So, I guess what I am asking is can Sveltia CMS handle this kind of data structure as is using the schema system and YAML/Frontmatter, or do i need JSON for something like this and can this even be defined in the config file to begin with

Thanks! ありがとう

[kyoshino]

The JSON format is supported in Sveltia CMS for sure! The Object and List widgets can be used to nest the fields. You can also use the built-in internationalization support as well or simply have nested fields for those two languages. Most of my own clients use the i18n support to have both Japanese and English in one single file, like this:

• https://github.com/zero-in-on/zeroinon-web/tree/main/src/lib/data/projects
• https://github.com/zero-in-on/zeroinon-web/blob/main/static/admin/config.yml

A config example if you use the i18n support:

backend:
  name: github
  repo: org/repo
  branch: main

media_folder: static/images
public_folder: /images

i18n:
  structure: single_file
  locales: [en, vi]

collections:
  - name: videos
    label: Videos
    label_singular: video
    create: true
    icon: movie
    folder: src/lib/data/videos/
    media_folder: '/static/images/shows'
    public_folder: '/images/shows'
    slug: '{{uuid_short}}'
    extension: json
    i18n: true
    fields:
      - name: show
        label: Show
        widget: string
        i18n: true
      - name: show_id
        label: Show ID
        widget: number # or `relation` to use an ID from another collection
        value_type: int
        min: 1
        i18n: duplicate
      - name: date
        label: Date
        widget: datetime
        i18n: duplicate
      - name: title
        label: Title
        widget: string
        i18n: true
      - name: image
        label: Image
        widget: image
        i18n: duplicate
      - name: alt
        label: Image Alt
        widget: string
        i18n: duplicate # or `true` to translate the text
      - name: video_id
        label: Video ID
        widget: string # or `relation` to use an ID from another collection
        i18n: duplicate
      - name: parts
        label: Parts
        label_singular: Part
        widget: list
        i18n: duplicate
        fields:
          - name: order
            label: Order
            value_type: int
            min: 1
            i18n: duplicate
          - name: title
            label: Title
            widget: string
            i18n: duplicate # or `true` to translate the text
          - name: image
            label: Image
            widget: image
            i18n: duplicate
          - name: alt
            label: Image Alt
            widget: string
            i18n: duplicate # or `true` to translate the text
          - name: video_id
            label: Video ID
            widget: string # or `relation` to use an ID from another collection
            i18n: duplicate

Or without i18n:

backend:
  name: github
  repo: org/repo
  branch: main

media_folder: static/images
public_folder: /images

collections:
  - name: videos
    label: Videos
    label_singular: video
    create: true
    icon: movie
    folder: src/lib/data/videos/
    media_folder: '/static/images/shows'
    public_folder: '/images/shows'
    slug: '{{uuid_short}}'
    identifier_field: '{{fields.title.en}}' # This actually doesn’t work; a bug in Sveltia CMS
    extension: json
    fields:
      - name: show
        label: Show
        widget: object
        fields:
          - name: vi
            label: Vietnamese
            widget: string
          - name: en
            label: English
            widget: string
      - name: show_id
        label: Show ID
        widget: number # or `relation` to use an ID from another collection
        value_type: int
        min: 1
      - name: date
        label: Date
        widget: datetime
      - name: title
        label: Title
        widget: object
        fields:
          - name: vi
            label: Vietnamese
            widget: string
          - name: en
            label: English
            widget: string
      - name: image
        label: Image
        widget: image
      - name: alt
        label: Image Alt
        widget: string
      - name: video_id
        label: Video ID
        widget: string # or `relation` to use an ID from another collection
      - name: parts
        label: Parts
        label_singular: Part
        widget: list
        fields:
          - name: order
            label: Order
            value_type: int
            min: 1
          - name: title
            label: Title
            widget: string
          - name: image
            label: Image
            widget: image
          - name: alt
            label: Image Alt
            widget: string
          - name: video_id
            label: Video ID
            widget: string # or `relation` to use an ID from another collection

Note: Sveltia CMS offers a handy DeepL Translator integration, but unfortunately Vietnamese is not yet supported by DeepL. Maybe I could add support for Google Cloud Translation as an alternative service that supports Vietnamese.

[rchrdnsh]

that would be amazing :-)

in any case, gonna try all this out and see what I can do with it, thank you :-)

[rchrdnsh]

hmmmm...I notice many repeated keys when you separate by language...that seems so unintuitive to me, what am i missing?

It makes more sense in my head to put the translations in a nested object, as I demonstrated:

  {
    name: {
      vi: `Thời Sự Thế Giới`,
      en: `Morning News`
    },
    description: {
      vi: `Luôn Cập Nhật với Chương Trình Tin Tức Buổi Sáng Trực Tiếp của LSTV- Thông Tin Hàng Ngày về Tin Tức Hoa Kỳ và Toàn Cầu, Thị Trường Tài Chính và Dự Báo Thời Tiết.`,
      en: `Stay Informed with Our Live Morning News Program - Daily Updates on US and Global News, Financial Markets and weather reports.`
    },
    title_card: `/shows/thoi-su-the-gioi-title-card.svg`,
    days: [1,2,3,4,5],
    time: `8am`,
    duration: `60 Minutes`,
    image: `/shows/thoi-su-the-gioi.jpg`,
    alt: `description of the thing.`
  },

...but you are not doing that, and I am curious if there are advantages to that approach? With my approach I am able to add a language switcher to the UI of an app and when the user changes the language the words fade out and the new words fade in, but nothing else changes, like images and such...

but maybe there are downsides to my approach, so you approach it differently?

I am all ears, as I am new to i18n myself, and just trying to understand it better.

In any case, thank you :-)

[kyoshino]

The data structure is totally up to you!

Yes, using the i18n support introduces duplicate fields under locale keys, which is useful if you want to translate all or most of the page content. My clients’ SvelteKit sites usually use the locale URL param to read/switch the localized content.

If only a few fields would be translated (in other words, if your client is not going to translate the image alt fields), the i18n support isn’t necessary; you can simply nest the hardcoded locale fields with List and Object widgets, like my second example. 🙂

[rchrdnsh]

I made a convertToSlug function for Vietnamese titles recently:

import unorm from 'unorm';

export function convertToSlug(text) {
  const normalizedText = unorm.nfd(text) // Normalize to handle diacritics
    .replace(/[\u0300-\u036f]/g, ''); // Remove diacritics

  const convertedText = normalizedText
    .replace(/Đ/g, 'D') // Convert Đ to D (uppercase)
    .replace(/đ/g, 'd') // Convert đ to d (lowercase)
    .toLowerCase()
    .replace(/[^\w\s-]/g, '') // Remove all non-alphanumeric characters except hyphens and spaces
    .replace(/\s+/g, '-') // Replace multiple spaces with a single hyphens
    .replace(/^-+|-+$/g, ''); // Trim leading and trailing hyphens

  return convertedText;
}

...maybe that helps something like this maybe?

identifier_field: '{{fields.title.en}}' # This actually doesn’t work; a bug in Sveltia CMS

[kyoshino]

The identifier_field issue is probably unrelated. I’ll check and fix the Sveltia CMS implementation anyway.