Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Discussion on customizing Sanity's slugify function with default behavior

9 replies
Last updated: Apr 22, 2020
Does Sanity expose its built-in 
slugify
function for import? I'm running some additional logic inside a custom 
slugify
function for a slug field, but I'd like to ultimately use Sanity's out of the box function within my custom one.
Apr 21, 2020, 3:26 PM
Hi User, is this example helpful for you? It’s not an import but it goes in the same direction.
{
      name: 'nested',
      type: 'object',
      fields: [
        {
          name: 'slugWithSlugify',
          type: 'slug',
          title: 'Custom slugify function',
          description: 'This is a slug field that should update according to current title',
          options: {
            source: 'title',
            maxLength: 96,
            slugify: (value, type) => {
              return encodeURI(`${type.name}_${value}`).toLocaleLowerCase()
            }
          }
        }
      ]
    },
Apr 21, 2020, 5:43 PM
Hi User, is this example helpful for you? It’s not an import but it goes in the same direction.
{
      name: 'nested',
      type: 'object',
      fields: [
        {
          name: 'slugWithSlugify',
          type: 'slug',
          title: 'Custom slugify function',
          description: 'This is a slug field that should update according to current title',
          options: {
            source: 'title',
            maxLength: 96,
            slugify: (value, type) => {
              return encodeURI(`${type.name}_${value}`).toLocaleLowerCase()
            }
          }
        }
      ]
    },
Apr 21, 2020, 5:43 PM
Interesting...Thanks for chiming in! However, what I'm after is Sanity's default behavior (i.e. when no custom 
slugify
is written) exposed as a function.
A simplified version of what I'm wanting to accomplish is construct the slug the same way Sanity normally would by default, but then add a slash to the beginning.

I've already written my own slugifier function that mimics Sanity's as closely as I could get it to...Just thought it'd be nice if the default slugify logic could be reused.
🙂
Apr 21, 2020, 6:02 PM
Agreed and understood 🙂 I don’t think there’s an available part that you can implement for this specifically. However, the 
defaultSlugify
function is basically just this:
function defaultSlugify(value, type) {
  const maxLength = (type.options && type.options.maxLength) || 200
  const slugifyOpts = {truncate: maxLength, symbols: true}
  return value ? speakingurl(value, slugifyOpts) : ''
}
In other words, you could also make use of the 
speakingurl
package: https://www.npmjs.com/package/speakingurl
Apr 21, 2020, 6:21 PM
Agreed and understood 🙂 I don’t think there’s an available part that you can implement for this specifically. However, the 
defaultSlugify
function is basically just this:
function defaultSlugify(value, type) {
  const maxLength = (type.options && type.options.maxLength) || 200
  const slugifyOpts = {truncate: maxLength, symbols: true}
  return value ? speakingurl(value, slugifyOpts) : ''
}
In other words, you could also make use of the 
speakingurl
package: https://www.npmjs.com/package/speakingurl
Apr 21, 2020, 6:21 PM
Gotcha. I appreciate the help!
Apr 21, 2020, 6:22 PM
Agreed and understood 🙂 I don’t think there’s an available part that you can implement for this specifically. However, the 
defaultSlugify
function is basically just this:
function defaultSlugify(value, type) {
  const maxLength = (type.options && type.options.maxLength) || 200
  const slugifyOpts = {truncate: maxLength, symbols: true}
  return value ? speakingurl(value, slugifyOpts) : ''
}
In other words, you could also make use of the 
speakingurl
package: https://www.npmjs.com/package/speakingurl
Apr 21, 2020, 6:21 PM
Agreed and understood 🙂 I don’t think there’s an available part that you can implement for this specifically. However, the 
defaultSlugify
function is basically just this:
function defaultSlugify(value, type) {
  const maxLength = (type.options && type.options.maxLength) || 200
  const slugifyOpts = {truncate: maxLength, symbols: true}
  return value ? speakingurl(value, slugifyOpts) : ''
}
In other words, you could also make use of the 
speakingurl
package: https://www.npmjs.com/package/speakingurl
Apr 21, 2020, 6:21 PM
Apr 22, 2020, 12:09 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?