What is the BMS?

A graph database of content


Think of it as a knowledge constellation made of blocks. A paragraph, an FAQ, a Blog, a documentation, privacy policies or just an image. Each block can connect and synchronize to any data source (Twitter, LinkedIn, Instagram, Airtable, your database) and display it anywhere on the web.



Blocks are ubiquitous data atoms, they will power the web and be a new standard. A new kind of web components.

How are blocks structured?

Each block necessarily has these 4 basic information:

• A unique ID (_id)
• type, which defines which block we are dealing with (type)
• If it is a block project or not (isProject)
• Its membership, i.e. to which project and workspace it is attached (projectIds & workspaceId)

Then, all the properties that actually define a block can be found in these three structures:

Data

• paragraph

  JSON

  { "text": "Content" }
  

• section

  JSON

  { "text": "Title" }
  

• article

  JSON

  { "text": "Title" }
  

• list

  JSON

  {
    "items": ["Item 1", "Item 2"],
    "style": "orderer" // ordered | unordered
  }
  

• header

  JSON

  {
    "text": "Content",
    "level": 1 // 1 | 2 | 3 | 4
  }
  

• embed

  JSON

  {
    "service": "youtube", // youtube | vimeo
    "source": "https://youtu.be/XqZsoesa55w" // URL
  }
  

• file

  JSON

  {
    "file": {
      "id": "e61d2e90-e4e4-4677-be0a-9bdf36ee18a2",
      "url": "https://media.tenor.com/JEuupMZB5HwAAAAC/michael-scott-flip.gif" // URL
    }
  }
  

• table

  JSON

  {
    "content": [
      ["Header 1", "Header 2"],
      ["Item 1", "Item 2"]
    ],
    "withHeadings": true
  }
  

Preferences

{
    "autoDetectDarkMode": true,
    "contactForm": true,
    "contactFormEmail": "[email protected]", // Email
    "defaultToDarkMode": true,
    "displayDarkMode": true,
    "displayLogo": true,
    "displaySearchBar": true,
    "displaySections": true,
    "displayTitle": true,
    "fontFamilyName": "Roboto",
    "shortListAccordeon": true,
    "defaultLanguage": "en",
    "displayLanguageSelector": true
}

Colors

{
  "darkModeBgColor": "#fff",
  "darkModeFontColor": "#fff",
  "fontColor": "#fff",
  "mainBgColor": "#fff",
  "secondaryFontColor": "#fff",
  "cardColor": "#fff",
}

Last but not least, Block Tree!

We must not forget that blocks are structured as a tree of blocks and therefore each block can contain other blocks and so on.

If you want to loop over blocks to render them you have to go through this tree recursively.

An example with our implementation of walkGraph function in Typescript

const walkGraph = <T>(graph: T, cb: (node: T, parent?: T) => void, field = 'blocks', parent?: T): void => {
  cb(graph, parent)
  for (const block of (graph as any)[field] ?? []) {
    walkGraph(block, cb, field, graph)
  }
}