sudovanilla-website/keystatic.config.tsx

import { config, fields, collection } from '@keystatic/core';
import { block, inline, wrapper } from '@keystatic/core/content-components'

export default config({
  ui: {
    brand: {
      name: 'SudoVanilla CMS',
      mark: ({ colorScheme }) => {
        let path = colorScheme === 'dark'
          ? 'https://md.sudovanilla.org/images/sv-logo-4.png'
          : 'https://md.sudovanilla.org/images/SudoVanilla%20Logo%20-%20Purple.svg';

        return <img src={path} height={24} />
      },
    },
    navigation: {
      'blog': ['posts', 'recommended_reading'],
      'documentations': ['docs_minpluto', 'docs_zorn', 'docs_penpot'],
      'others': ['init_privacy']
    },
  },
  storage: {
    kind: 'local',
  },
  collections: {
    posts: collection({
      label: 'Posts',
      slugField: 'url',
      path: 'src/content/posts/*',
      format: { contentField: 'content' },
      entryLayout: 'content',
      schema: {
        title: fields.text({
          label: 'Text',
        }),
        url: fields.slug({ name: { label: 'URL' } }),
        image: fields.url({
          label: 'Image Banner',
          description: 'Image URL'
        }),
        date: fields.date({
          label: 'Event date',
          description: 'The date of the event'
        }),
        content: fields.mdx({
          components: {
            img: block({
              label: 'Image',
              schema: {
                alt: fields.text({ label: 'Alt Text' }),
                src: fields.url({ label: 'Image URL' }),
              }
            }),
          },
          label: 'Content',
          formatting: true,
          dividers: true,
          links: true,
        }),
      },
    }),
    // Init Privacy
    init_privacy: collection({
      label: 'Init Privacy',
      slugField: 'title',
      path: 'src/content/init/*',
      format: { contentField: 'content' },
      entryLayout: 'content',
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        content: fields.mdx({
          components: {
            Image: block({
              label: 'Image',
              schema: {
                Alt: fields.text({ label: 'Alt Text' }),
                Source: fields.url({ label: 'Image URL' }),
              }
            }),
            SoftwareItem: wrapper({
              label: 'Software',
              schema: {
                icon: fields.url({ label: 'Icon URL' }),
                title: fields.text({ label: 'Title' }),
                developer: fields.text({ label: 'Developer Name' }),
                screenshot: fields.url({ label: 'Screenshot' }),
                homepage: fields.url({ label: 'Homepage' }),
                source: fields.url({ label: 'Source Code' }),
                // Featured media
                goto: fields.conditional(
                  // First, define a `select` field with all the available "conditions"
                  fields.select({
                    label: 'Download or View URL',
                    description: "If it's a downloadable software, choose the Download option. If it's a website that is used, then use the View option.",
                    options: [
                      { label: 'Please Select One', value: 'none' },
                      { label: 'Download', value: 'download' },
                      { label: 'View', value: 'view' },
                    ],
                    defaultValue: 'none',
                  }),
                  {
                    none: fields.empty(),
                    download: fields.object({
                      url: fields.url({ label: 'URL' }),
                    }),
                    view: fields.object({
                      url: fields.url({ label: 'URL' }),
                    }),
                  }
                ),
              }
            })
          },
          label: 'Content',
          formatting: true,
          dividers: true,
          links: true,
        }),
      },
    }),
    // Recommended Reading
    recommended_reading: collection({
      label: 'Recommended Reading',
      slugField: 'title',
      path: 'src/content/recommend-reading/*',
      format: { contentField: 'content' },
      entryLayout: 'form',
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        author: fields.text({
          label: 'Author Name',
          description: 'Who wrote it'
        }),
        date: fields.date({
          label: 'Date',
          description: 'The published date'
        }),
        url: fields.url({
          label: 'URL',
          description: 'The external URL to the post'
        }),
        image: fields.url({
          label: 'Image Banner',
          description: 'Image URL'
        }),
        content: fields.mdx({
          label: 'Content (Not Shown)',
          formatting: false,
          dividers: false,
          links: false,
        }),
      },
    }),
    // Documentations
    docs_minpluto: collection({
      label: 'MinPluto',
      slugField: 'title',
      path: 'src/content/minpluto/*',
      format: { contentField: 'content' },
      entryLayout: 'content',
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        software: fields.select({
          label: 'Software',
          options: [
            { label: 'MinPluto', value: 'minpluto' },
          ],
          defaultValue: 'minpluto'
        }),
        content: fields.mdx({
          label: 'Content',
          formatting: true,
          dividers: true,
          links: true,
        }),
      },
    }),
    docs_penpot: collection({
      label: 'Penpot Desktop',
      slugField: 'title',
      path: 'src/content/penpot-desktop/*',
      format: { contentField: 'content' },
      entryLayout: 'content',
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        content: fields.mdx({
          label: 'Content',
          formatting: true,
          dividers: true,
          links: true,
        }),
      },
    }),
    docs_zorn: collection({
      label: 'Zorn Player',
      slugField: 'title',
      path: 'src/content/zorn/*',
      format: { contentField: 'content' },
      entryLayout: 'content',
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        content: fields.mdx({
          label: 'Content',
          formatting: true,
          dividers: true,
          links: true,
        }),
      },
    }),
  },
});