Issue with Astro and Sveltia CMS: Relation Fields Not Resolving Correctly for Multi-language Setup

[yacosta738]

Hi @kyoshino,
I’m having an issue with Astro and Sveltia CMS. I’m migrating from the old Netlify CMS to Sveltia CMS because it offers improvements over DecapCMS for managing multi-language content.

The Problem:
My website is multilingual, and collections are correctly stored in language-specific folders (e.g., en for English content and es for Spanish content). However, when I try to relate collections in Sveltia CMS, it links them incorrectly.

For example, the author relation is saved as author: yuniel-acosta, but Astro expects the relation to be en/yuniel-acosta for English content or es/yuniel-acosta for Spanish content.

What I Tried:
I attempted using value_field: '{{locale}}/{{slug}}', but this results in author: /yuniel-acosta instead of the expected en/yuniel-acosta or es/yuniel-acosta.

CMS Configuration (config.yml):

local_backend: true

logo_url: /logo.svg

backend:
  name: 'github'
  repo: yacosta738/yacosta738.github.io
  branch: main
  base_url: https://yunielacosta.com
  automatic_deployments: false
  accept_roles:
    - admin
    - editor

slug:
  encoding: 'ascii'
  clean_accents: true
  sanitize_replacement: '-'

publish_mode: editorial_workflow

media_folder: 'public/images'
public_folder: '/images'

i18n:
  structure: 'multiple_folders'
  locales: ['en', 'es']
  default_locale: 'en'
  canonical_slug:
    key: defaultLocaleVersion
    value: 'en/{{slug}}'

Astro Configuration (config.ts):

import { glob } from 'astro/loaders';
import { defineCollection, reference, z } from 'astro:content';

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.date(),
    cover: z.string(),
    author: reference('authors'),
    tags: z.array(reference('tags')),
    categories: z.array(reference('categories')),
    isExternalLink: z.boolean().default(false),
    link: z.string().optional(),
    draft: z.boolean(),
  }),
});

const authors = defineCollection({
  loader: glob({ pattern: '**/[^_]*.json', base: './authors' }),
  schema: z.object({
    name: z.string(),
    image: z.string(),
    rol: z.string(),
    bio: z.string(),
    email: z.string(),
    social: z.array(
      z.object({
        name: z.string(),
        url: z.string(),
        icon: z.string(),
      })
    ),
  }),
});

export const collections = {
  blog: blogCollection,
  authors,
};

Example Branch

Any ideas on how to fix the relation field so that it correctly includes the locale (en/ or es/)? I appreciate any help!

[kyoshino]

The {{locale}} tag cannot be used in the value_field, which is locale-neutral. You can simply use {{slug}} instead.

But I think Sveltia CMS is not using the canonical_slug i18n option properly. Will fix the issue and test with your repo.

[kyoshino]

I’ve fixed the Sveltia bug in v0.53.4, but I think you still need to fix some stuff on your site:

• The canonical_slug i18n option works only when the slug contains the localize filter. Currently you only have it on the posts collection.
• Since the canonical_slug i18n value is value: 'en/{{slug}}', the value will always be prefixed with en/ even in Spanish entries. I guess you need to replace it with es/ (or remove it?) manually in your code.

I’m not familiar with Astro, so unfortunately I cannot help the implementation details.

[yacosta738]

Hi @kyoshino,

I’m still experiencing the same issue. I need the relation between collections to use a custom slug that includes the locale.

For example, in this image, when I select a tag, category, or author, the editor saves the slug without the locale (en/{{slug}} or es/{{slug}}).

Could you please advise on how to configure this correctly?

Thank you!

[kyoshino]

Sorry, I wasn’t clear. The preview is fine, but you need to add slug to your collections and save all the entries to include the canonical slug (defaultLocaleVersion). And in Spanish entries, es/ would be replaced to with en/.

So something like this: yacosta738/yacosta738.github.io@refactor/migration-netlify-cms-to-slveltia-cms-issue...kyoshino:yacosta738.github.io:sveltia-canonical-slug