Shopify + Sanity: Read about the investment and partnership –>
Skip to content
Share your own snippet

Easy peasy URL Slug

By Roboto Studio

Quickly and easily validate your slug without having to work out the regex syntax

Basic Slug Example

export default {
  title: "Basic Usage",
  name: "basicUsage",
  type: "document",
  fields: [
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        //Change to schema title to automatically populate
        source: "title",
        slugify: (input) =>
          input
            .toLowerCase()
            //Remove spaces
            .replace(/\s+/g, "-")
            //Remove special characters
            .replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, ""),
        validation: (Rule) => Rule.required(),
      },
    },
  ],
};

Example using Sanity Plugin Better Slug

import SlugInput from "sanity-plugin-better-slug";

export default {
  title: "Sanity Plugin Better Slug Usage",
  name: "betterSlugUsage",
  type: "document",
  fields: [
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      inputComponent: SlugInput, //Reference the SlugInput
      options: {
        //Change to schema title to automatically populate
        source: "name",
        //Use your URL
        basePath: "https://example.org",
        maxLength: 30,
        slugify: (input) =>
          input.toLowerCase()
          .replace(/\s+/g, "-").slice(0, 200),
          //Remove special characters
          .replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, ""),
        validation: (Rule) => Rule.required(),
      },
    },
  ],
};

A very bare bones way of ensuring your slugs are without spaces and special characters. It's also a very UX friendly way of handling this from a client side.

Contributor

Other schemas by author