Adding new schema
@tailor-cms/config
package (located in /config
dir) exports SCHEMAS
property, which contains an array of Schemas available in the system. Currently, schemas are defined using TypeScript
.
Let's dive a bit into Schema definition.
ts
interface Schema {
// Unique identifier of the schema
// Upon creating a Repository, schema id will be stored on the
// Repository entity, forcing the Repository to follow schema rules.
id: string;
// Label for the schema; e.g. Course, Knowledge Base, Textbook
name: string;
// Repository entity metadata configuration
// Ability to specify additional data inputs for repository
// These will be available within Repository Settings page
// e.g. adding file input that enables uploading Repository poster img
meta?: Metadata[];
// Provides repository structure definition as Array of Activity node
// configurations. If you are not familiar with concept of Activity
// please revisit concepts section.
structure: ActivityConfig[];
// Provide configuration for Content Containers which are used within
// this schema
contentContainers: ContentContainerConfig[];
// Ability to specify additional data inputs for any installed element
// Inputs are shown within editor sidebar upon element selection
// For more details see content element metadata configuration
elementMeta?: ElementMetaConfig[];
// Needs to be provided to enable progress tracking via Workflow feature
// Workflows enable authors to set progress for structure items
// See workflow configuration section for more details
workflowId?: string;
}
Here is an example of a minimalistic schema, where the structure is made up of Pages containing Sections. The Repository outline is one level deep, meaning entries cannot be nested or grouped.
js
const SCHEMA = {
id: 'PAGE_COLLECTION',
name: 'Page collection',
structure: [
{
type: 'PAGE',
label: 'Page',
color: '#08A9AD',
contentContainers: ['SECTION'],
},
],
contentContainers: [
{
type: 'SECTION',
templateId: 'DEFAULT',
label: 'Section',
},
],
};
and another one containing a slightly deeper structure with Modules acting as top-level grouping nodes:
js
const SCHEMA = {
id: 'PAGE_COLLECTION',
name: 'Page collection',
structure: [
{
type: 'MODULE',
label: 'Module',
color: '#5187C7',
subLevels: ['PAGE'],
},
{
type: 'PAGE',
label: 'Page',
color: '#08A9AD',
contentContainers: ['SECTION'],
},
],
contentContainers: [
{
type: 'SECTION',
templateId: 'DEFAULT',
label: 'Section',
},
],
};