support objects in frontmatter

[konstantinmuenster]

Even though it might be tricky, it would be great to support objects in frontmatter.

I have a few files that have the following frontmatter shape:

---
title: 3 Tips To Write Better Code As A Beginner Frontend Developer
category: 'Engineering'
cover:
  src: '/images/posts/3-tips-to-write-better-code-as-junior-developer/alex-kotliarskyi-ourQHRTE2IM-unsplash.jpg'
  alt: 'A person sitting in front of a laptop'
  caption: 'Photo by <a href="https://unsplash.com/@frantic">Alex Kotliarskyi</a> on Unsplash'
publishedAt: '2023/04/04'
---

The cover property gets resolved to [object Object] though.

[petyosi]

Thank you for the feedback. I will give this further thought. Question - do you have some sort of a schema for the frontmatter? I am thinking about letting the developer specify that so that the proper editors are displayed.

[konstantinmuenster]

Yes, I use contentlayer to define a schema for my frontmatter. In case of the blog post, it looks like this:

const Image = defineNestedType(() => ({
  name: 'Image',
  fields: {
    src: { type: 'string', required: true },
    alt: { type: 'string', required: true },
    caption: { type: 'markdown' },
  },
}));

const Externals = defineNestedType(() => ({
  name: 'Externals',
  fields: {
    medium: { type: 'string' },
  },
}));

const Categories = ['Engineering', 'Product', 'Careers'] as const;

const POSTS_DIR_NAME = 'posts';

export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `./${POSTS_DIR_NAME}/*.mdx`,
  contentType: 'mdx',
  fields: {
    title: { type: 'string', required: true },
    publishedAt: { type: 'date', required: true },
    summary: { type: 'string' },
    cover: { type: 'nested', of: Image },
    externals: { type: 'nested', of: Externals },
    category: { type: 'enum', options: Categories },
    tags: { type: 'list', of: { type: 'string' } },
  },

A similar schema for the editor sounds cool as it would also allow me to create new documents with prepopulated keys for the frontmatter.

[dave-db]

Could we add support for booleans as well, as checkboxes? The props editor for custom components would also benefit from this.