Back to Sanity

The CMS... I don't really know if I'd go as far as calling it a CMS.. The "post editor" is a much better name for it. Anyway. The post editor I built was simple, but it utilised a really nice library called TipTap to build a rich text editor. However, that also meant I needed to integrate every feature I wanted. That's cool if it's part of a product I'm building, but for someone like me who just wanted to write...? I kept tweaking my TipTap editor code more than writing actual content, so removing it was just a distraction I wanted to get rid of. Sanity is more akin to a silver bullet here, because I can still tinker with it, but it's a lot less distracting, which is just what I need.

Moving away from TipTap

Moving away was really simple. One reason is that I'd already done the migration the other way around previously, but Sanity's setup is also very simple. All you need is to define your document type schema, and you're up and running in minutes. The fact that I already had a project with a dataset set up, made it even quicker. Getting a really good editor experience simply by writing a little bit of JS means is heaps more productive for me than needing to code the entire thing myself.

Sanity schema

Sanity's schema definition is really nice, and the DX is also really good when you're using their `defineType` and `defineField` helper functions.

The schema I'm using for posts on this site is simple, but includes some nice functionality around validation and slug-generation which is nice!

const Post = defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  icon: DocumentIcon,
  fields: [
    defineField({
      name: 'title',
      type: 'string',
    }),
    defineField({
      name: 'date',
      type: 'datetime',
      title: 'Published date',
    }),
    defineField({
      name: 'slug',
      type: 'slug',
      options: {
        source: 'title',
      },
      validation(rule) {
        return rule.required().error('Slug is required');
      },
    }),
    defineField({
      name: 'preamble',
      description: 'This is used in post listings',
      type: 'array',
      of: [
        {
          type: 'block',
        },
      ],
    }),
    defineField({
      name: 'body',
      type: 'array',
      of: [{ type: 'block' }, { type: 'image' }, { type: 'code' }],
    }),
  ],
});

I won't go into all the details around this schema, but there are a few things to note; a slug is a built-in type in Sanity, and thus making it generate a slug based on the title is as easy as specifying the name of the field in the `options` hash of the slug field definition. The same thing goes for validation; it's a simple `validation` function that gets passed a `rule` object that has a bunch of methods on it for validation, including custom ones.

Next steps

My next steps now is to set up webhooks in Sanity that post to my backend whenever a post is updated. My backend will then issue a Cloudfront invalidation of the URL in the cache. I'm caching the content for a good while right now, and if I ever make an update to any of my posts, I'll need to clear that item from the cache. I'm also caching the front page, so that will need to be cleared as well. It's a simple enough thing to do, it's just a matter of reaching a number of posts on this website to make it worth spending time on. I can always issue an invalidation from the CLI, which works for now.