Multiple document fields in one collection

[etmartinkazoo]

Is it possible to have multiple document fields in a collection? I have a blog collection and would like another document field named summary in addition to the one named content. Is there documentation that addresses this? Here is my code.

  blog: {
    label: 'Blog',
    path: 'src/content/blog/*',
    slugField: 'name',
    format: {
      data: 'yaml',
      contentField: 'content',
    },
    schema: {
      name: fields.slug({ name: { label: 'Name' }}),
      publishedOn: fields.date({ label: 'Published On' }),
      draft: fields.checkbox({
        label: 'Draft',
      }),
      content: fields.document({
        label: 'Content',
        formatting: true,
        links: true,
      }),
      summary: fields.document({
        label: 'Summary',
        formatting: true,
        links: true,
      }),
    }
  },

[simonswiss]

Hey!

Yep, this will work out of the box.

Since you set the content field as your contentField, the main file generated will contain that content field in the "body" of the .mdoc file, and the other fields in the frontmatter at the top.

Except for the summary and any other eventual document fields.

For those, Keystatic will create a folder named after the entry slug, and inside there a .mdoc file named after the field:

With your code, if you created a post with a slug of hello-world, the output files would be like so:

src/content/blog/
        hello-world.mdoc
        hello-world/
                summary.moc

I copied and pasted your exact code in a new project created with the Keystatic CLI, and it worked straight away.

The reason the other document field goes into another file is that Markdown/Markdoc/MDX can only have one single content or body field below the frontmatter.

Putting the whole serialized rich text in the frontmatter would be very big/ugly.

Working with Astro content collections

I realise that makes things slightly more complex when working with Astro collections — but Astro does have a convention of prefixing files/assets with an underscore.

Sharing from a discussion with Ben Holmes from the Astro core team:

I’ll also share that we do support colocation with underscore _ directories for relative assets today! This is helpful for referencing image assets and partials from your content. You can also use the index naming to chop this off in the generated slug (ex. blog/post-1/index.md -> blog/post-1).

Here’s an example I could imagine to colocate assets on an existing post, and store a set of Markdoc partials alongside:

src/content/
  blog/
    post-1/
      _assets/
        banner.png
        demo.gif
      _partials/
        demo.mdoc
      index.mdoc

Alternatively, you can use an underscore on the file name itself rather than using nested directories:

src/content/
  blog/
    post-1/
      _banner.png
      _demo.gif
      _demo.mdoc
      index.mdoc

I imagine keystatic could support this approach to allow our existing nested directories feature and use colocated assets. Let me know if there’s more to the story though!

---

TypeScript autocomplete suggestions

PS: Make sure you wrap your whole blog collection definition in a collection() function — it will give you a lot more TypeScript hints as you define your schema:

-  blog: {
+ blog: collection({
    label: 'Blog',
    path: 'src/content/blog/*',
    slugField: 'name',
    format: {
      data: 'yaml',
      contentField: 'content',
    },
    schema: {
      name: fields.slug({ name: { label: 'Name' }}),
      publishedOn: fields.date({ label: 'Published On' }),
      draft: fields.checkbox({
        label: 'Draft',
      }),
      content: fields.document({
        label: 'Content',
        formatting: true,
        links: true,
      }),
      summary: fields.document({
        label: 'Summary',
        formatting: true,
        links: true,
      }),
    }
-  },
+  }),

[etmartinkazoo]

@simonswiss - This is all really helpful and solves my question / problem with this. I am keeping a list of such questions and am planning on a little series called "Adventures with Keystatic" in the hopes of helping people work through a few of these issues. Again, thank you so much.

[ddteeter]

Sorry to resurrect an old thread. I am attempting to do this and can’t to figure it out. With the default folder convention outlined above with content collections, since it doesn’t include any underscores, it seems Astro tries to read the nested mdx files as part of the collection, but fails because they have no front matter and therefore do not validate against the collection schema. Do I have something set up wrong or do the multiple mdx sections not work with content collections?

[simonswiss]

Unfortunately I think that Astro is still not capable of handling more than 1 rich text field per collection. It's pretty close, but I haven't been able to make it work, and have been talking with the Astro quite a bit on this.

Hopefully one day!

[ddteeter]

That's a bummer! Hopefully one day, indeed!

In the interim, is there any way to get Keystatic to emit the non-primary rich text field files starting with an underscore (_), so Astro will ignore them? Thinking maybe I could combine that with just some more specific loading with Astro.glob() to work around the content loading, for now, while maintaining the benefit Keystatic is providing?

[tordans]

I got it to work with mutliple mdx fields. However, I am having trouble with the Astro ZOD validations via defineCollection.
Does anyone have an idea?

My Keystatic Setup

export const keystaticHomepageConfig = singleton({
  entryLayout: 'form',
  label: 'Homepage',
  // format: { contentField: 'body' }, // in this case, we want separate files
  path: 'src/content/homepage/',
  schema: {
    title: fields.text({ label: 'Titel', validation: { isRequired: true } }),
    bodyBeforeQuotes: fields.mdx({
      label: 'Inhalte oberhalb der Zitate',
      components: {
        Quotes: keystaticQuoteConfig,
        Button: keystaticButtonConfig,
      },
      options: {
        image: {
          directory: 'src/content/homepage',
          publicPath: '../../content/homepage',
        },
      },
    }),
    bodyAfterQuotes: fields.mdx({
      label: 'Inhalt unterhalb der Zitate',
      components: {
        Quotes: keystaticQuoteConfig,
        Button: keystaticButtonConfig,
      },
      options: {
        image: {
          directory: 'src/content/homepage',
          publicPath: '../../content/homepage',
        },
      },
    }),
  },
})

Which creates a file structure like this… where index.yaml is only title: SomeTitle and the mdx files have no frontmatter.

My Astro ZOD definition – this is the part that I have issues with:

export const astroHomepageDefinition = defineCollection({
  type: 'content',
  schema: () =>
    z.object({
      title: z.string(),
    }),
})

My /index.astro page

…
const homepageData = await getEntry('homepage', 'index')
const homepageBeforeQuotes = await getEntry('homepage', 'bodybeforequotes')
const homepageAfterQuotes = await getEntry('homepage', 'bodyafterquotes')

const { Content: ContentBeforeQuotes } = await homepageBeforeQuotes.render()
const { Content: ContentAfterQuotes } = await homepageAfterQuotes.render()
---

<Layout>
  <HomepageHero />
  <Section prose>
    <pre>{JSON.stringify(homepageData, undefined, 2)}</pre>
    <pre>{JSON.stringify(homepageBeforeQuotes, undefined, 2)}</pre>
    <pre>{JSON.stringify(homepageAfterQuotes, undefined, 2)}</pre>
    <ContentBeforeQuotes components={{ Button }} />
    <h1>TODO QUOTES</h1>
    <ContentAfterQuotes components={{ Button }} />
…

The issue is…

The ZOD validation is applied to all three getEntry calls and thus raises the error

homepage → bodyBeforeQuotes.mdx frontmatter does not match collection schema.
title: Required

My work around is, to change my ZOD validation… – But with this I look strictness that I don't want to loose.

export const astroHomepageDefinition = defineCollection({
  type: 'content',
  schema: () =>
    z.object({
-      title: z.string(),
+      title: z.string().optional(),
    }),
})

Any ideas on what is going on? Maybe some search terms I could use to look for solutions…?

[tordans]

Update: This might not actually work as well as I initially thought: I am getting this error when running npx astro sync

% npx astro sync
16:17:29 [ERROR] [types] [MixedContentDataCollectionError] "homepage" contains a mix of content and data entries. All entries must be of the same type.
  Hint:
    Store data entries in a new collection separate from your content collection.
  Error reference:
    https://docs.astro.build/en/reference/errors/mixed-content-data-collection-error/
  Stack trace:
    at /Users/…/frm-7-landingpage/src/content/homepage/index.yaml
    [...] See full stack trace in the browser, or rerun with --verbose.

[tordans]

Update2: I can confirm, that the setup above does not work for Astro. The error goes away when I move the title back into with the content like format: { contentField: 'bodyBeforeQuotes' },.

So it is still possible to have two mdx fields but mixing them with data type structures is a bit messy.