What is new in 4.0

First thing first this is how you update. Your existing project.

npm install -S @mediamonks/richmedia-temple-server@4
npm install -S @mediamonks/temple@4

To access the config that is specific for that build use this.

import config from "richmediaconfig";

// So your main would look like
import Banner from "./Banner";
import config from "richmediaconfig";

const banner = new Banner(config);
banner.start();

Config file has new features.

by adding a parent node and linking to a other richmediarc file this richmediarc file will inherit all the data from the other file.

.richmediarc

{
  "name": "hello_moto",
  "parent": "../lib/.richmediarc",
  "settings": {
    "size": {
      "width": 300,
      "height": 600
    }
  },
  "content": {}
}

This way you can create one global config file the other files just have minimum tweaks.

No more restrictions on content node.

.richmediarc

{
  "name": "hello_moto",
  "parent": "../../lib/.richmediarc.globalconfig",
  "content": {
    "text": "Hello moto this is japanese",
    "color": "#FFCC00",
    "img": "./img/1x1_blank.png",
    "json": "./data/text.json",
    "theme": {
      "bg": "#FFCC00",
      "textcolor": "#000000",
    },
    "images": {
      "img1": "./img/img1.png",
      "img2": "./img/img2.png",
      "img3": "./img/img3.png"
    }
  }
}

If something in content links to a file this will be added to webpack so that when you build it will be part of the build.

.richmediarc is accessable in the css file.

You can access all the config variables inside your style sheet.

style.css

.fullscreen {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--content-theme-textcolor);
  background-color: var(--content-color);
  content: var(--content-text);
  width: var(--settings-size-width)px;
  height: var(--settings-size-height)px;
}

You can access these variable by using css variable. See the corelation between the .richmediarc above and the css variable i use in the css file.

Generate multiple banners just with a few .richmediarc files

By having one master config file.

master

.richmediarc.master

{
  "name": "master",
  "settings": {
    "size": {
      "width": 300,
      "height": 600
    }
  },
  "content": {
    "text": "Hello moto this is japanese",
    "color": "#FFCC00",
    "img": "./img/1x1_blank.png",
    "json": "./data/text.json",
    "theme": {
      "bg": "#FFCC00",
      "textcolor": "#000000",
    },
    "images": {
      "img1": "./img/img1.png",
      "img2": "./img/img2.png",
      "img3": "./img/img3.png"
    }
  }
}

300x250

.richmediarc.300x250

{
  "parent": "./.richmediarc.master",
  "settings": {
    "size": {
      "width": 300,
      "height": 250
    }
  }
}

300x250_copy2

.richmediarc.300x250_copy2

{
  "parent": "./.richmediarc.300x250",
  "content": {
    "text": "This is different copy",
  }
}

And then 5 smaller files with just a few changes you can generate