Make sluggification visible, customizable, and fail-safe

[erquhart]

Default sluggification is simplistic, relying on a title field and performing no inference whatsoever.

With no field named "title", entries currently fail to save.

The ideal fix is to simply make slugs editable in the editor UI.

Considerations:

• Slug editing can be switched off through config
• If slug editing is switched off, each collection config must be validated on CMS load to ensure a slug can be derived
• Prepopulate with the same best guess or configured slug template result that we currently use
• Only valid characters may be entered in the slug field
• Slugs and filenames are not always the same, so it should be possible to provide them separately somehow (see comment below for example)

[erezrokah]

Something crossed my mind. With netlify you can create a _redirects file in root. May be complicated. But if Netlify CMS could manage a file like that. Then changing the slug wouldnt be a problem with already shared links. Just a crazy thought.

Not crazy at all, but I don't think this should be done by a content management system as it's very specific to how the site is built and deployed. Perhaps a Netlify Build Plugin.

[karllhughes]

@hanneskuettner's solution looks great, but I'm guessing it's not implemented yet? When I tried it, I got this error in my editor:

No control for widget 'slug'.

Is this widget something I need to register separately?

[jmayergit]

To further @hanneskuettner's example above,

widget

// index.html

<script>
  var SlugControl = createClass({
    getInitialState: function () {
      return { touched: false }
    },

    handleChange: function (e) {
      this.props.onChange(e.target.value)
      !this.state.touched && this.state.touched = true
    },

    render: function () {
      return h('input', {
        id: this.props.forID,
        className: this.props.classNameWrapper,
        type: 'text',
        value: this.state.touched ? this.props.value : this.props.entry.get('slug'),
        onChange: this.handleChange,
      })
    },
  })

  var SlugPreview = createClass({
    render: function () {
      return null // or show a preview
    },
  })

  var schema = {
    properties: {},
  }

  CMS.registerWidget('slug', SlugControl, SlugPreview, schema)
</script>

config

// config.yml

    slug: '{{fields.slug}}'
    fields:
      - { label: 'slug', name: 'slug', widget: slug, hint: 'slug' }

comparison with hanneskuettner's implementation

• Have a slug value field with a custom slug widget (that's basically a string widget) that can be used for the entry slug with fields.slug 🙆
• The value in slug is automatically updated and correctly slugified according to the slug pattern and the root slug configuration 🙅
• Once an entry is saved the slug is no longer updated when the dependent fields are updated 🙅
• The user can manually update the slug but receives a warning that this might break existing URLs since it is a slug field 🙅

➕ works with previously created entries

Notes

• With the above implementation slugs are not automatically generated for new entries.
• In hanneskuettner's (slug: 'custom-slug-{{title}}') example I'm not sure if field template tags can be referenced in fields themselves.
• The slug can be configured using the slug template or a schema property

  
  // config.yml

... slug: 'my-slug-template-{{fields.slug}}' fields:

• { label: 'slug', name: 'slug', widget: slug, hint: 'slug', mySchemaProperty: 'my-schema-property' }

// index.html

...

  handleChange: function (e) {
    // use the schema property in your handler function
    // this.props.field.get('mySchemaProperty')
  }, 

...

var schema = {
  properties: {
    mySchemaProperty: { type: 'string' },
  },
}

[timtorres]

Something crossed my mind. With netlify you can create a _redirects file in root. May be complicated. But if Netlify CMS could manage a file like that. Then changing the slug wouldnt be a problem with already shared links. Just a crazy thought.

Not crazy at all, but I don't think this should be done by a content management system as it's very specific to how the site is built and deployed. Perhaps a Netlify Build Plugin.

Shopify does this behind the scenes pretty nicely. It edits a redirects file, adding a new entry every time a slug is changed. There's at least one 3rd party app that extends this by adding a redirects management UI. Scans for broken links or something like that and lets you manage multiple aliases for a single url.

But I do agree with you that the CMS itself should remain divorced from that in order to support different setups.

[erezrokah]

Shopify does this behind the scenes pretty nicely. It edits a redirects file, adding a new entry every time a slug is changed. There's at least one 3rd party app that extends this by adding a redirects management UI. Scans for broken links or something like that and lets you manage multiple aliases for a single url.

I think https://github.com/sw-yx/netlify-plugin-no-more-404 is supposed to do some of that, but seeking maintainers.

[ryangittings]

Any update on this? It's a constant issue for editors for me that they can't go and control slugs of their blog posts for example.

[martinjagodic]

Not really, this is a complex feature and so far we haven't gotten to it. The best way to start would be a pull request :)