[Blog]: Improve tags field shape

[melanieseltzer]

When defining tags in the mdx file, I want it to be as simple as typing their full names, like so:

tags:
  - React
  - Next.js
  - React Query

Currently, there's a kebabCase util that does the work of transforming it into a slug for the tag URL.

But this work occurs via the client selectors/components that are consuming the tags, and I would prefer that work be done already at the point of consumption by the component(s).

Contentlayer allows you to define a field and computed field with the same name, so I think this work can be done in the schema, something like this:

export const blogSchema = {
  fields: {
    tags: { type: 'list', required: true, of: { type: 'string' } },
  },
  computedFields: {
    tags: {
      type: 'list',
      resolve: doc => 
        doc.tags._array.map(tag => ({
          displayName: tag, // the tag name as defined in the mdx frontmatter
          slug: kebabCase(tag), // transform it to a slug
        })
      )
    },
  }
}

Ultimately, the array of objects in the computed field is what the component(s) will consume.

I think there might be a typing issue with this: contentlayerdev/contentlayer#398 but I think since it can be fixed on our end by omitting tags from the original type and re-typing it (in src/content/blog/types.ts).