Netlify-cms: Custom paths for deploy preview links not working as expected

[keenanpayne]

Describe the bug
First, I'm not sure if this is a bug or if this is intended. Perhaps I'm doing something that is unintended for the deploy preview links feature.

I'm using a combination of Eleventy and Netlify CMS to create a content management solution. I have a collection of content that allows for a custom permalinks page-by-page. This field is required, so it will always be filled out.

However, I'm noticing that I cannot get deploy preview links to work nicely with this field. When I type a value into the permalinks field that contains a forward slash (/) indicating the insertion of a directory, the deploy preview link is not formatted correctly.

Here is the configuration for this specific collection inside of config.yml:

  ##
  ## @collection: Landing pages
  ## @description:
  ##
  - name: "landing"
    label: "Landing pages"
    label_singular: "Landing page"
    folder: "src/landings"
    create: true
    extension: md
    slug: "{{slug}}"
    preview_path: "{{permalink}}" 
    fields:
      - name: layout
        widget: hidden
        default: "layouts/landing.html"
      - label: Title
        name: title
        widget: string
        default: Hello World
      - label: Permalink (e.g. "my-landing/" or "landings/my-page/", don't forget the trailing slash!)
        name: permalink
        widget: string
        default: "my-page/"

Note: I have tried both preview_path: "{{permalink}}" and preview_path: "{{fields.permalink}}" and they have yielded the same result.

Here's an example of how I might use this permalink field inside of Netlify CMS:

Here is what the deploy preview link that is generated looks like _(sans my full Netlify hosting URL)_: landings-landing-page-deploy-preview-links. What I would expect is to receive a preview link that looks like: landings/landing-page-deploy-preview-links.

The problem is that any forward slash in my permalink field gets turned into a dash, which is what's used inside of the preview link.

Here is what the full markdown file looks like:

---
layout: layouts/landing.html
title: Landing page deploy preview links
permalink: landings/landing-page-deploy-preview-links/
heading:
  headline: Landing page deploy preview links
  option: short
landingContent:
  content: TEst content
---

Applicable Versions:

• Netlify CMS version: 2.10.49
• Eleventy version: 0.11.0
• Git provider: GitHub
• OS: macOS Catalina, 10.15.6
• Browser version: Brave v 1.13.82
• Node.JS version: 14.3.0

CMS configuration
Use my full config.yml file here: https://pastebin.com/FgxQgKxy

[erezrokah]

Thank you for reporting this issue @keenanpayne, this is intended as template variables are sanitised:
https://github.com/netlify/netlify-cms/blob/89848e034451baed52fb8911d3778a2f469462f8/packages/netlify-cms-core/src/lib/formatters.ts#L176

You could try:

  - name: "landing"
    label: "Landing pages"
    label_singular: "Landing page"
    folder: "src/landings"
    create: true
    extension: md
    slug: "{{slug}}"
    preview_path: "landings/{{permalink}}" 
    fields:
      - name: layout
        widget: hidden
        default: "layouts/landing.html"
      - label: Title
        name: title
        widget: string
        default: Hello World
      - label: Permalink (e.g. "my-landing/" or "my-page/", don't forget the trailing slash!)
        name: permalink
        widget: string
        default: "my-page/"

Or

  - name: "landing"
    label: "Landing pages"
    label_singular: "Landing page"
    folder: "src/landings"
    create: true
    extension: md
    slug: "{{slug}}"
    preview_path: "{{category}}/{{sub_category}}" 
    fields:
      - name: layout
        widget: hidden
        default: "layouts/landing.html"
      - label: Title
        name: title
        widget: string
        default: Hello World
      - label: Permalink (e.g. "my-landing/" or "my-page/", don't forget the trailing slash!)
        name: permalink
        widget: string
        default: "my-page/"

[keenanpayne]

@erezrokah Wonderful, thank you so much for clarifying, providing a link to where these strings are sanitized in the source code, as well as two examples of how I might approach a workaround. I really appreciate it.

I'll close this out 👍🏻