Contentful Mirror

Contentful Module for the Magic Mirror. It provides a view environment for Contentful entries.

Contentful

Contentful provides a content infrastructure for digital teams to power content in websites, apps, and devices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for structured content, powerful management and delivery APIs, and a customizable web app that enable developers and content creators to ship digital products faster.

Installation

1. Navigate into your MagicMirror's modules folder and execute: git clone https://github.com/contentful/contentful_mirror. A new folder will appear, navigate into it.
2. Execute npm install to install the dependencies.

Using the module

To use this module, add it to the modules array in the config/config.js file:

modules: [
  {
    module: 'contentful_mirror',
    position: 'top_center',  // This can be any of the regions. Best results in top_center.
    config: {
      // See 'Configuration options' for more information.
    }
  }
]

Configuration options

The following properties can be configured:

Option	Description
maximumContentLength	Maximum Length for a field. Truncates after this point. Possible values: any int Default value: 1000
updateInterval	Speed of change between entries. Possible values: any int (in miliseconds) Default value: 10000
fadeSpeed	Speed of animation. Possible values: any int (in miliseconds) Default value: 4000
displayText	Text displayed while loading. Possible values: any string Default value: Loading...
contentful	Contentful configuration Possible values: object Default value: Described below

Contentful Configuration Section

• Defaults:

  contentful: {
    space: "cfexampleapi",
    accessToken: "b4c0n73n7fu1",
    preview: false,
    query: {
      'content_type': 'cat'
    },
    template: "<h4>{{name}}</h4>\n" +
              "<img src='{{image.fields.file.url}}' />\n" +
              "<p class='xsmall normal'>Has {{lives}} lives.</p>\n"
  }

Option	Description
space	Contentful Space ID. Possible values: any string Default value: cfexampleapi
accessToken	Production (or Preview) Access Token. Use Preview Token if preview is enabled Possible values: any string Default value: b4c0n73n7fu1
preview	Enables Preview API. Possible values: boolean Default value: false
query	Contentful CDA Query for Entries endpoint. Content Type is advised to be always sent for templates to work. Possible values: any object Default value: {'content_type': 'cat'}
template	HTML Template to display content in the mirror. Possible values: any string Default value: Described below

Templates

This module uses a very simple template engine. It basically fetches anything between a pair of braces e.g. {{foo}}, and sends it as a message to the entry.fields object. You can chain as many messages as you want, and the engine will send them to the result.

For example:

If I have the following entry

{
  "fields": {
    "foo": "bar",
    "baz": {
      "fields": {
        "nyan": "cat"
      }
    },
    "bar": [1, 2, 3]
  }
}

I could use inside my template {{baz.fields.nyan}} and it will render cat. Notice that past the first level of the entry, if there is a nested entry, you are required to explicitly send the fields message.

The tool already does 1 level of link resolution, so if you have linked content, you can display it with this tool.

The templates can also handle array indexes, so if you could do {{bar[1]}} and will render 2.

Link resolution does not work for arrays.

Dependencies

• contentful (installed by npm install)

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/contentful/contentful_mirror. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The gem is available as open source under the terms of the MIT License.