Get help on Discord

Does Sanity expose its built-in slugify function for import?

5 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.
AI Update

Sanity doesn't officially export its built-in defaultSlugify function for import, but you can easily replicate it in your custom function. According to a community answer, Sanity's default slugification is just a thin wrapper around the speakingurl package.

Here's what the default implementation looks like:

function defaultSlugify(value, type) {
  const maxLength = (type.options && type.options.maxLength) || 200
  const slugifyOpts = {truncate: maxLength, symbols: true}
  return value ? speakingurl(value, slugifyOpts) : ''
}

So if you want to add custom logic while still using Sanity's default behavior, you can install speakingurl and use it in your custom slugify function:

npm install speakingurl

Then in your schema:

import speakingurl from 'speakingurl'

{
  name: 'slug',
  type: 'slug',
  options: {
    source: 'title',
    maxLength: 96,
    slugify: (value, type) => {
      const maxLength = (type.options && type.options.maxLength) || 200
      const slugifyOpts = {truncate: maxLength, symbols: true}
      const slug = value ? speakingurl(value, slugifyOpts) : ''
      
      // Add your custom logic here
      return `/${slug}` // e.g., add a leading slash
    }
  }
}

This gives you the exact same slugification behavior as Sanity's default, with the flexibility to add your own transformations before or after.

Show original thread
5 replies
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()
            }
          }
        }
      ]
    },
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.
🙂
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
Gotcha. I appreciate the help!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?