Roboto Studio
We build blazing fast websites & webapps 🔥
Roboto is located at Nottingham, United Kingdom
Quickly and easily validate your slug without having to work out the regex syntax
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(),
},
},
],
};
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.
We build blazing fast websites & webapps 🔥
Internal/External link based on the conditional field example with Next.js component starters
Go to Internal/External Next.js Link