Node.js flat CMS Tutorial with Enduro.js - Part Two

Second part of a tutorial on how to get started with with Enduro.js, a Node.js flat CMS.

Prologue

In the first part of this tutorial we saw how to configure Enduro.js admin panel to manage a nested structure like meta-tags contents, in this second part we are going to add the configuration for the page's sections.

Let's say that our page has three type of sections, graphically speaking:

  • First type is an full width image with a fancy text and a link, we are calling this section-type cta_type, where cta stands for Call to Action;
  • Second type is made up by a title, a subtitle, and a paragraph, we are calling this section-type textOnly_type;
  • Third type is an image with a text on the right side, we are calling this section-type textWithImage_type.

We would like to provide our client, or whoever is going to manage the site, the possibility of adding, removing and ordering these section-elements within the page, in order to achieve this we are going to structure the page's section as an array of contents, each of them will be one of the three types described above.

Handling array with templatitator

Handling array is pretty simple, but we want to handle array of object made of a certain structure, so we need a little more of configuration, first we are going to declare in the /cms/index.js file which structures are available for the user, in our case the three section-types.


{
  $section_types_hidden: true,
  section_types: {
    cta_type: {
        section_type: 'Image with CTA',

        $image_type: 'image',
        $image_label: 'image',
        image: '',

        $text_label: 'text',
        text: '',

        $link_label: 'url',
        link: '',
    },
    textOnly_type: {
      section_type: 'Text Only',

      $title_label: 'title',
      title: '',

      $subtitle_label: 'title',
      subtitle: '',

      $paragraph_type: 'textarea',
      $paragraph_label: 'paragraph',
      paragraph: '',
    },
    textWithImage_type: {
      section_type: 'Text with Image',

      $image_type: 'image',
      $image_label: 'image',
      image: '',

      $text_type: 'textarea',
      $text_label: 'text',
      text: ''
    }
  }
}

section types config

Here we configured the structure of the three section types we allow, specifying that it should be hidden in the admin, because it is not a direct editable field, but just a kind of support structure. Indeed the next step is to tell the admin that we have an array of those structures:


{
  $sections_templatitator: '@@section_types',
  sections: []
}

templatitator config

The templatitator keyword specify exactly that the array referenced (sections) is made of defined structures, which ones ? Well section_types ones (the @@ is a sort of keyword you need to write in front of the structure name).

Conclusions

If you run your app now you will see three buttons on the section field, one for each type of section, so the user can manage them easily, adding removing and ordering, exactly like we wanted.

You may also like

Node.js flat CMS Tutorial with Enduro.js

A tutorial on how to get started with with Enduro.js, a Node.js flat CMS.

Tags: Node.js CMS

Read more

Frontend pipeline with webpack 2: setting up babel (1 of 2)

An introduction about frontend pipeline in 2017 and how to build one from scratch using webpack 2: setting up babel traspiler.

Tags: webpack 2

Read more

Javascript promises guide: using async await in both frontend and backend

A guide about javascript promises, what they are and how to use them effectively with async await.

Tags: JavaScript ES6 Node.js

Read more
See all