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

[yacosta738]

Thank you very much for your help, your solution worked perfectly. I need to solve some issues with the slug in Spanish articles but this solve my first issue. Thanks again!

[yacosta738]

Hi @kyoshino Is it possible for relationships between collections in Sveltia CMS to use a slug that matches the entry’s path, similar to how Astro handles content organization?

Astro collection documentation: https://docs.astro.build/en/guides/content-collections/

[yacosta738]

Hi @kyoshino, thanks for your response. The issue is that Astro resolves relationships based on the entry’s path, whereas Sveltia does not.

For example, if I have a post related to an author, Astro expects the entry in the path blog/en/post-title.md to have a field like author: en/author-name, and its Spanish version to have author: es/author-name. This way, Astro can determine the relationship based on the path.

However, Sveltia only adds author: author-name, without considering the language or content structure. The same applies to tags and categories.

Here’s an example of an entry in Sveltia:

---
title: test
description: test
date: 2025-02-23T01:10:00
lastModified: 2025-02-23T01:09:00
author: john-doe
cover: /src/assets/images/photo-1601987077677-5346c0c57d3f.avif
tags:
  - ai
  - test
category: test
draft: true
---
Some text here

Additionally, I have created a multilingual template because I couldn’t find one that uses Astro with related collections and multilingual support while using Sveltia or Decap as a CMS. The repository is https://github.com/yacosta738/astro-cms, in case you’re interested in testing it out.

Thanks again!

[kyoshino]

Sorry I’m late here again. Basically the value_field option for the Relation widget should be a single field, otherwise it cannot resolve relations. But accepting a locale prefix like {{locale}}/{{slug}} might be possible. Will figure out.

[yacosta738]

Perfect! It would be great if it worked, and that way it would create an Astro template with Sveltia supporting multiple languages.

[kyoshino]

Added the locale prefix support to v0.61.0.

[yacosta738]

Hey @kyoshino,

Just tested the solution using value_field: '{{locale}}/{{slug}}', and it works perfectly! Thanks for implementing this.

I’ll leave the template Astro + Sveltia CMS as an example of how to use Sveltia CMS with Astro and multilingual support. Hopefully, it can help others looking for a similar setup.

Thanks again for your help!

[kyoshino]

I have added your template to the README. Thanks! 🙌🏼