Type

    A type defines fields and presentational settings. Fields hold data that can be edited in the dashboard. Top level types which are used in a Schema need to define both a title and path field.

    import {Config} from 'alinea'
    
    Config.type('Blog', {
      contains: ['BlogPost'],
      fields: {
        title: alinea.text('Title', {width: 0.5}),
        path: alinea.path('Path', {width: 0.5})
      }
    })

    Configuration

    Types should be defined within a Schema.

    contains

    Accept entries of these Types as children. For example a Blog can accept BlogEntry children.

    contains: ['BlogEntry']

    entryUrl

    The url property of entries can be controlled using the entryUrl function in the type options. Urls are computed during generation and this can help to keep them constant if you're using a web framework that does file system routing. The available parameters are path, parentPaths and locale. For example: making sure a doc page always has an url in the form of /doc/$path you can specify entryUrl as the following:

    entryUrl({path}) {
      return `/doc/${path}`
    }

    icon

    An icon can be used to label a type in the sidebar entry tree. Icons are implemented as a React component. You can find icons on Icones or install a package such as react-icons.

    Good to know

    Fields must be unique

    Alinea will throw an error if a field shows up multiple times in the same Type. Having unique fields is important so we can use the field references directly when querying data or in conditional configuration.

    import {Config, Field} from 'alinea'
    
    const textField = Field.text('Text field')
    const MyType = Config.type('My type', {
      fields: {
        fieldA: textField,
        fieldB: textField // This is not allowed
      }
    })
    
    // You can rewrite the above to get unique 
    // references by making textField a function
    const textField = () => Field.text('Text field')
    const MyType = Config.type('My type', {
      fields: {
        fieldA: textField(),
        fieldB: textField() // This is fine
      }
    })