A git-based editor that lives inside your SvelteKit site.

import { collection, defineConfig, fields, singleton, setting } from '@fermain/frame';

export default defineConfig({
  media: { path: 'static/images', publicPath: '/images' },

  collections: {
    // Structured content with real component previews
    posts: collection({
      label: 'Articles',
      path: 'src/content/posts',
      title: 'title',
      fields: {
        title: fields.text({ label: 'Title' }),
        date: fields.date({ label: 'Date' }),
        cover: fields.image({ label: 'Cover photo' }),
        body: fields.markdown({ label: 'Body' })
      },
      // Renders with your site's actual Svelte component & styles
      components: { view: () => import('./ArticlePreview.svelte') }
    }),

    // Single-instance configurations (e.g. business hours, listing details)
    listing: singleton({
      label: 'Listing details',
      file: 'src/content/listing.json',
      fields: {
        tagline: fields.text({ label: 'Tagline' }),
        rates: fields.number({ label: 'Nightly rate', unit: { before: 'R' } }),
        highlights: fields.list({
          label: 'Highlights',
          item: fields.text({ label: 'Highlight' })
        })
      }
    })
  }
});