CMS

Schemas

Overview

CMS content models are defined in code, in .schema.ts files. They're versioned with the rest of your site, type-checked by TypeScript, and used to generate types for your templates with root-cms generate-types.

Collections

A collection is a group of docs that share a schema, like blog posts or landing pages. To add one, create collections/<Name>.schema.ts:

// @/collections/BlogPosts.schema.ts

import {schema} from '@blinkk/root-cms';

export default schema.collection({
  name: 'BlogPosts',
  description: 'Posts for the blog.',
  url: '/blog/[slug]',
  preview: {
    title: 'title',
    image: 'image',
  },
  fields: [
    schema.string({
      id: 'title',
      label: 'Title',
      translate: true,
    }),
    schema.image({
      id: 'image',
      label: 'Image',
      help: 'Upload a 1600x900 JPG.',
    }),
    schema.richtext({
      id: 'content',
      label: 'Content',
      translate: true,
    }),
  ],
});

The url tells the CMS where each doc is served, for live preview and links.

Reusable schemas

Use schema.define() for content models that are used in more than one place, like page modules. schema.glob() collects every schema that matches a pattern, so adding a template file adds it to the CMS:

// @/templates/TemplateHero/TemplateHero.schema.ts

import {schema} from '@blinkk/root-cms';

export default schema.define({
  name: 'TemplateHero',
  fields: [
    schema.string({id: 'title', translate: true}),
    schema.richtext({id: 'body', translate: true}),
    schema.image({id: 'image'}),
  ],
});

// @/collections/Pages.schema.ts

import {schema} from '@blinkk/root-cms';

export default schema.collection({
  name: 'Pages',
  url: '/[...slug]',
  fields: [
    schema.array({
      id: 'modules',
      label: 'Modules',
      of: schema.oneOf({
        types: schema.glob('/templates/*/*.schema.ts'),
      }),
    }),
  ],
});

Each schema.define() name must be unique across the project.

Field types

Fields include string, richtext, image, file, select, multiselect, boolean, number, date, datetime, reference, object, array and oneOf. For every field and option, see schema in the API reference.