Installation

Providing the CMS Core

Initialize the CMS Context Provider

src/index.tsx

import React from 'react'
import { render } from 'react-dom'

import initializeStarkCMS from '@Core/AppState'
import { Page, Menu, User, Editor, Block } from '@Domain/index'

// Add new services here
const cms = initializeStarkCMS([Block, Menu, Page, User, Editor])

render(
  <React.StrictMode>
    <CMSProvider cms={cms}>
      <App />
    </CMSProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

Terms

In the docs we are using the following terms for the parts of a flow:

• Node: A node is a draggable block that can be connected with other nodes.
• Edge: An edge is a connection between two nodes.
• Handle: A handle is a kind of port of a node that is used to connect nodes. You start a connection at a handle and end it on another one.
• Connection Line: The connection line is the line that gets drawn while you connect two nodes with each other.

Handling Data

tip

Core CMS methods like this .getService() or .getEntity() are available at any time.

Adding data

Adding a Page with Blocks and header and footer Menus while initializing

src/index.tsx

const cms = initializeStarkCMS([Block, Menu, Page, User, Editor])

// Adds Page to CMS containing three also registered blocks
cms.getService('Pages').addEntity({
  title: 'Home',
  id: '1',
  childs: [
    cms.getService('Blocks').addEntity({
      id: '1',
      type: 'Hero1'
    }).id,
    cms.getService('Blocks').addEntity({
      id: '10',
      type: 'Features1'
    }).id,
    cms.getService('Blocks').addEntity({
      id: '2',
      type: 'Footer1'
    }).id
  ]
})

// Service used as a constant
const Menus = cms.getService('Menus')

// Adds Header Menu
Menus.addEntity({
  title: 'Hauptmenü',
  id: 'main',
  items: [
    { target: '', newTab: false, title: 'Home' },
    { target: '', newTab: false, title: 'Studio' },
    { target: '', newTab: false, title: 'Kurse' },
    { target: '', newTab: false, title: 'Kontakt' }
  ]
})

// Adds Footer Menu
Menus.addEntity({
  title: 'Footer',
  id: 'footer',
  items: [
    { target: '', newTab: false, title: 'Impressum' },
    { target: '', newTab: false, title: 'Datenschutz' },
    { target: '', newTab: false, title: 'Anfahrt' },
    { target: '', newTab: false, title: 'Kontakt' }
  ]
})

Getting data

Adding a Page with Blocks and header and footer Menus while initializing.

src/index.tsx

const pageId = '1'

const Pages = cms.getService('Pages')
const Page = Pages.getEntity(pageId)

Updating data

Best Practice

Change the entities attribute via an provided method by itself

Since every Service uses a Storage which basically returns entities as an ES6 Proxy, you will be able to changes the Entity simply by changing the property after .getEntity().

const FooterMenu = cms.getService('Menus').getEntity('footer')

// Changing the Entities attribute will update its value system-wide
FooterMenu.title = 'New Title'

// When the Footer Entity has defined the action it is preferred to use it!
FooterMenu.changeTitle('New Title')

Subscribing data

Unsubscribing is optional

The CMS will unsubscribe from the listener when the component gets unmounted.

Since every Service uses a Storage which basically returns entities as an ES6 Proxy, you will be able to changes the Entity simply by changing the property after .getEntity().

const FooterMenu = cms.getService('Menus').getEntity('footer')

FooterMenu.subscribe()

// Or if needed you can use the unsubscribe method returned.
// Note: before the component unmounts, the unsubscribe method will be called automatically by the cms
const unsubscribeFooter = FooterMenu.subscribe()

Services

Services are a way to bundle different behavior's for any expected use case to be accessed from everywhere in the system.

Creating a Service