How I implemented slugs on Sanity - a TypeScript code sample

The lack of human-readable slugs on Sanity had bothered me for a while and I finally got around to fixing them last Sunday. The old, slugless URL structure probably wasn't doing me any favors in terms of SEO and user experience. I'm hoping the new format can give Sanity a much needed SEO boost. Plus, I can finally tell which post is which in Google Search Console and Vercel Analytics.

The Result

Before

https://www.sanity.media/p/64c375049f5d6b05859f10c6

After

https://www.sanity.media/p/64c375049f5d6b05859f10c6-delicious-post-workout-milkshake-recipe

Isn't this much clearer?

The Code

When writing the code I had the following goals in mind:

  • The slugs should have no consecutive or trailing hyphens
  • They should handle multiple writing systems (Cyrillic, Latin diacritics, Mandarin, etc.)
  • Sanity doesn't have post titles so, when possible, the first line of text should be used for the slug
  • If no slug can be computed, it should default to just using the post id
  • The slugs should not be excessively long
  • The code should be at least somewhat efficient since this functionality will be used a lot

It turns out that handling all of these cases is more complicated than it looks on the surface so I ended up using the github-slugger package.

The snippet below includes my entire Mongoose schema file, scroll down to the pre-save hook for the slug generation function.

import { slug } from "github-slugger";
import { Schema } from "mongoose";

import { RegularPostSchema } from "@/types";
import { MAX_POST_LENGTH, MIN_POST_LENGTH } from "@/utils";

import { PostReference, Tags, UserReference } from "./shared";

const regularPostSchema = new Schema<RegularPostSchema>(
  {
    content: {
      type: String,
      required: true,
      minlength: MIN_POST_LENGTH,
      maxlength: MAX_POST_LENGTH,
    },
    parentPost: PostReference,
    parentPostAuthor: UserReference,
    parentPostSlug: String,
    username: {
      type: String,
      required: true,
    },
    userId: UserReference,
    upvotes: {
      type: [UserReference],
      index: true,
    },
    downvotes: {
      type: [UserReference],
      index: true,
    },
    score: {
      type: Number,
      index: true,
      default: 0,
    },
    commentCount: {
      type: Number,
      index: true,
      default: 0,
    },
    tags: { ...Tags, index: true },
    createdAt: {
      type: Date,
      index: true,
    },
    slug: {
      type: String,
      unique: true,
    },
    isPinned: Boolean,
  },
  {
    timestamps: true,
    toJSON: {
      transform: (_doc, ret) => {
        ret.createdAt = ret.createdAt.toISOString();
        ret.updatedAt = ret.updatedAt.toISOString();
        ret.postId = ret._id.toString();

        if (ret.parentPost) {
          ret.parentPostId = ret.parentPost.toString();
          delete ret.parentPost;
        }

        delete ret.upvotes;
        delete ret.downvotes;
        delete ret._id;
        delete ret.__v;
      },
      virtuals: true,
    },
    virtuals: {
      upvoteCount: {
        get(): number {
          // @ts-ignore
          return this.upvotes.length;
        },
      },
      downvoteCount: {
        get(): number {
          // @ts-ignore
          return this.downvotes.length;
        },
      },
    },
  },
);

const MAX_SLUG_LENGTH = 50;
const MAX_WORDS_IN_SLUG = 10;

const getFirstLineOfText = (text: string) => {
  return text.split("\n")[0];
};

const generateSlug = (text: string) => {
  const cleanedContent = text
    .substring(0, MAX_SLUG_LENGTH * 3)
    .replace(/\s+/g, " ");

  const words = slug(cleanedContent)
    .replace(/^(-)+/, "")
    .replace(/-{2,}/g, "-")
    .replace(/-+$/, "")
    .split("-");

  let finalSlug = "";
  for (let i = 0; i < Math.min(words.length, MAX_WORDS_IN_SLUG); i++) {
    const nextSlug = finalSlug ? `${finalSlug}-${words[i]}` : words[i];
    if (nextSlug.length <= MAX_SLUG_LENGTH) {
      finalSlug = nextSlug;
    } else {
      break;
    }
  }

  return finalSlug;
};

regularPostSchema.pre("save", function (next) {
  const slugFromFirstLine = generateSlug(getFirstLineOfText(this.content));

  const finalSlug =
    slugFromFirstLine.length === 0
      ? generateSlug(this.content)
      : slugFromFirstLine;

  this.slug = finalSlug === "" ? `${this._id}` : `${this._id}-${finalSlug}`;

  next();
});

export { regularPostSchema };

If you made it this far, please consider upvoting or leaving a comment πŸš€

1 comment

Other posts you might like

How to implement AI vector search and related posts with pgvector

At the end of this tutorial, you should be able to set up your own vector search with text embeddings in a Next.js app. This is a tutorial that mostly consists of coding samples taken directly from the Sanity codebase.

You can see the results right here on Sanity. The related posts section underneath each post is generated with pgvector. So is the search.

The stack I used:

  • Open AI's text-embedding-ada-002 model
  • Next.js
  • Prisma
  • PostgreSQL

Start by setting up the Prisma client:

This step is needed to get Prisma to cooperate with Next.js.

// Setting up prisma
programmingpgvectoraibuilding in publicsql
reply

How I struggled to fix votes on Sanity

Ever since I implemented upvotes a few months ago, I had been struggling with user upvotes/downvotes request occasionly timing out. The bug persisted for a few months and the few times I tried to debug it, I had no success. Is it the database schema? Nope, I use similar schemas for other collections and they work fine. An inefficient MongoDB query? Same thing. No indexing? I indexed the DB even though there are barely any votes in the collection. An issue with Vercel cold start? Also not it, everything within the norm.

Last Friday the rest of the app was finally ready and I wanted to start inviting some users, so I gave up and decided to pay $20/month for Vercel Pro to increase the timeout from 10 to 60 seconds and worry about the bug another day. And then I checked the logs on Vercel Pro...

Unhandled error: MongooseError: Operation `userVotes.findOne()` buffering timed out after 10000ms
    at Timeout.<anonymous> (/var/task/sanity_client/node_modules/mongoose/lib/drivers/node-mongodb-native/collection.js:175:23)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7)

Because Mongoose timeout is 10000ms and Vercel's timeout is also 10000ms but this includes the cold start time, this error never popped up on my free plan....

sanityprogrammingvercelmongodbbuilding in public
reply

How I built a chat app using Streams API, Next.JS, Redis and Vercel

Last week I added a chat feature to Sanity. In this article, I'll guide through how I built it using Streams API, Next.js, Redis and Vercel.

Sanity chat

Before we start, a quick disclaimer: there are much better ways to build a chat application, for example by using WebSockets. Vercel unfortunately doesn't support WebSockets and I didn't want to spin a dedicated server, which is why I used Streams API. Using Streams API the way I use it here is most likely not the best use of resources but it works and is a good enough solution for my small scale use. If you're on the same boat, keep reading.

If the chat takes off, I'll have to move it to a dedicated Socket.io server, a serverless WebSocket on AWS, or something similar to reduce costs.

Storing messages in Redis

I use the KV (Redis) database from Vercel to store the last 100 messages. Here is the code used to send and read messages.

import { MAX_CHAT_MESSAGE_LENGTH } from "@/utils";

const MAX_MESSAGES = 100;

export const addChatMessage = async ({
programmingvercelstreams apibackendnext.jsreactredisjavascript
reply

How I fixed @aws-crypto build error

I've been getting the following error when building my Next.js app:

Failed to compile.

./node_modules/.pnpm/@aws-crypto+sha256-js@5.2.0/node_modules/@aws-crypto/sha256-js/build/module/index.js + 12 modules Cannot get final name for export 'fromUtf8' of ./node_modules/.pnpm/@smithy+util-utf8@2.0.2/node_modules/@smithy/util-utf8/dist-es/index.js

I narrowed the source down to the following piece of code:

import { createServerRunner } from "@aws-amplify/adapter-nextjs";
import { AWS_AMPLIFY_CONFIG } from "./utils";
import { cookies } from "next/headers";
import { getCurrentUser } from "aws-amplify/auth/server";

export const { runWithAmplifyServerContext } = createServerRunner({
  config: AWS_AMPLIFY_CONFIG,
});
awsnext.js@aws-cryptoamplifyprogramming
reply

Feature announcement - image upload

You can now add images to your Sanity posts πŸ“· Important caveat: For now, you need to save your post as a draft first to be able to access this feature.

Here is a picture of a couple of boars I took outside of my house yesterday. Plenty of boars here in Gdynia, I see them almost every day πŸ—

building in publicgdyniaboarswildlifeanimals
reply

Feature announcement πŸŽ‰

You can now tag your posts! This will make it easier for your content to be discovered, both on Sanity and in search engines - a much-needed SEO boost. You can add up to 5 tags per post and the length limit is 35 characters.

feature announcementsanitytagsseosanity tips
reply

Why I started Sanity Media

If you have watched The Social Dilemma, read Stolen Focus or Hooked you probably already know that present-day social media is designed to be addictive. The more time you spend online, the more money social media companies make.

You may also be aware of how social media algorithms can inadvertently create echo chambers, where people are only exposed to views they already agree with. This leads to increased polarization and political extremism.

I’m trying to build a service that's more down to earth. A place where you can log in, read some news or stories that interest you, and then forget about it until the next day. No infinite scrolls, no constant streams of notifications, and no incentive to keep checking the site throughout the day. While it might be a hard task to remove echo chambers altogether, I hope can at least limit them.

How Sanity works

Here are the main features in a nutshell:

  • All posts created on a given day are published simultaneously at midnight UTC time.
  • You can only make a single post a day - make it count.
  • No infinite scrolling - the number of posts you’ll see is limited.
  • You can upvote and downvote posts - but there’s a combined limit of ten a day.
  • The algorithms are simple. For example, everyone s...
reply

Is there a secure way to use Redis with Vercel?

I spent a couple of hours yesterday trying to find a way to use Redis with Sanity, which currently runs on Vercel. According to Redis docs on security, it is not a good idea to expose a Redis instance directly to the internet:

Redis is designed to be accessed by trusted clients inside trusted environments. This means that usually it is not a good idea to expose the Redis instance directly to the internet or, in general, to an environment where untrusted clients can directly access the Redis TCP port or UNIX socket.

I wanted to use Digital Ocean's trusted sources to restrict the incoming connections to those coming from my Vercel server but looks like that won't be possible because of Vercel's use of dynamic IP addresses. According to Vercel docs:

To ensure your Vercel deployment is able to access the external resource, you should allow connections from all IP addresses. Typically this can be achieved by entering an IP address of (0.0.0.0).

While allowing connections from all IP addresses may be a concern, relying on IP allowlisting for security is generally ineffective and can lead to poor security practices.

To properly secure your database, we recommend using a randomly generated password, stored as an environment variable, at least 32 characters in length, and to rotate this password on a regular basi...

1 comment
feedback