personal-website/keystatic.config.ts

import { config, fields, collection } from '@keystatic/core';
import ShowableFigureIcon from './keystatic/content-components/ShowableFigureIcon';
import { mark, wrapper } from '@keystatic/core/content-components';
import ShowableFigureView from './keystatic/content-components/ShowableFigureView';
import FootnoteIcon from 'keystatic/content-components/FootnoteIcon';

export default config({
  ui: {
    brand: { name: 'Filipe Medeiros CMS' },
  },
  storage: {
    kind: 'local',
  },
  collections: {
    library: collection({
      label: 'Library items',
      slugField: 'title',
      path: 'src/content/library/**',
      columns: ['title', 'date'],
      schema: {
        title: fields.slug({
          name: {
            label: 'Title',
            validation: { isRequired: true },
          },
        }),
        subtitle: fields.text({ label: 'Subtitle' }),
        checkedOut: fields.checkbox({ label: 'Checked out?' }),
        link: fields.url({ label: 'Link', validation: { isRequired: true } }),
        description: fields.text({ label: 'Description', multiline: true }),
        date: fields.date({ label: 'Date', validation: { isRequired: true } }),
        mainAuthors: fields.array(fields.text({ label: 'Author' }), {
          label: 'Main author(s)',
          itemLabel: ({ value }) => value,
        }),
      },
    }),
    posts: collection({
      label: 'Blog posts',
      columns: ['title', 'published'],
      entryLayout: 'content',
      slugField: 'slug',
      path: 'src/content/blog/**',
      format: { contentField: 'body' },
      schema: {
        slug: fields.slug({
          name: {
            label: 'Astro slug',
            validation: { isRequired: true },
          },
          slug: {
            generate: (astroSlug) => `pt/${astroSlug}`,
          },
        }),
        title: fields.text({
          label: 'Title',
          validation: { isRequired: true },
        }),
        body: fields.mdx({
          label: 'Body',
          components: {
            ShowableFigure: wrapper({
              label: 'Showable figure',
              ContentView: ShowableFigureView,
              icon: ShowableFigureIcon(),
              schema: {
                image: fields.image({
                  label: 'Image',
                  directory: 'src/assets/images/blog',
                  publicPath: '/src/assets/images/blog/',
                }),
                altText: fields.text({
                  label: 'Alt text',
                  validation: { isRequired: true },
                }),
              },
            }),
            Footnote: mark({
              label: 'Footnote',
              icon: FootnoteIcon(),
              tag: 'sup',
              schema: {},
            }),
          },
        }),
        subtitle: fields.text({ label: 'Subtitle' }),
        summary: fields.text({
          label: 'Summary',
          validation: { isRequired: true },
        }),
        publishDate: fields.date({
          label: 'Publish date',
          validation: { isRequired: true },
        }),
        published: fields.checkbox({ label: 'Published' }),
        linkPreview: fields.object(
          {
            title: fields.text({ label: 'Title' }),
            description: fields.text({ label: 'Description' }),
            image: fields.object(
              {
                image: fields.image({
                  label: 'Image',
                  directory: 'src/assets/images/blog',
                  publicPath: '@assets/images/blog/',
                  validation: { isRequired: true },
                }),
                altText: fields.text({
                  label: 'Alt text',
                  validation: { isRequired: true },
                }),
              },
              { label: 'Image' },
            ),
          },
          { label: 'Link preview' },
        ),
      },
    }),
  },
});