decaporg / decaporg/decap-cms

i18n: localized "slug" field value cannot be used as a folder collection item's filename

Open
#6,600 1 comment 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

**Describe the bug**
The ability to specify a collection item's filename via a "slug" field, described in the docs [here](https://www.netlifycms.org/docs/configuration-options/#slug), does not work as expected with i18n enabled: the filename will always be the default locale's slug field value.

For example, if the following page is saved:
![image](https://user-images.githubusercontent.com/56127752/202876307-fd4aaa47-2c97-4d8a-be5d-643022587cbc.png)

The filename of both locales will be `en-lorem.md`:
![image](https://user-images.githubusercontent.com/56127752/202876434-62d628c1-d318-49be-996c-a3446df46dcc.png)

This bug particularly affects projects using web frameworks which employ file-based routing (e.g. Astro, Next.js), as there may not be any viable workarounds without resorting to hardcoding the desired paths via server redirects, etc.

**To Reproduce**
(See example config added below)
1. Add a folder collection with `i18n` option enabled.
2. Add a `slug` field to the collection and reference the field in the collection's `slug` option: `slug: {{fields.slug}}`.
3. Add top-level config for i18n with 2 locales, e.g. `en` & `pt`.
4. Open the control panel, create a new page with distinct slug field values for each locale, e.g. `en-lorem`, `pt-lorem`.
5. Publish the page.
6. Check the saved filenames for the page.

**Expected behavior**
The values specified in the `slug` fields should be used as the filenames for their respective locales. E.g. for `en`, the filename should be `en-lorem` (working as expected), **for `pt`, the filename should be `pt-lorem`** (not working as expected).

**Applicable Versions:**
- Netlify CMS version: 2.10.192

**CMS configuration**
```
backend:
name: git-gateway
branch: master

media_folder: "public/uploads"
public_folder: "/uploads"

editor:
preview: false # we're going to hide the preview editor

i18n:
structure: multiple_folders
locales: [en, pt]
default_locale: en

slug:
encoding: "ascii"
clean_accents: true

collections:
- label: "Pages"
name: "pages"
folder: "/src/pages"
create: true
i18n: true
slug: "{{fields.slug}}"
fields:
- {
label: "Layout",
name: "layout",
widget: "hidden",
default: "/src/layouts/netlify_cms.astro",
i18n: duplicate,
}
- { label: "Title", name: "title", widget: "string", i18n: true }
- {
label: Slug,
name: slug,
widget: string,
hint: "N.B. slug must be different for each locale",
pattern:
[
"^[a-z0-9-]+$",
"The slug must contain only lower case letters, numbers and hyphens",
],
i18n: true,
}
- {
label: "Body",
name: "body",
widget: "text",
required: false,
i18n: true,
}
- {
label: "Publish Date",
name: "date",
widget: "datetime",
i18n: duplicate,
}
- {
label: "Featured Image",
name: "thumbnail",
widget: "image",
required: false,
i18n: duplicate,
}

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.