Mosaic HTML in the WhiteCollar

The pocket key mosaicHTML lets us append HTML to any article extracted with the whitecollar, without creating a stand-alone widget.

Use it for tables, or to add an element that doesn't get extracted otherwise.

Like Whitecollar selectors, MosaicHTML can receive a function returning a string or a string directly:

  mosaicHtml: node.querySelector('.extra'),
  mosaicHtml: 'Amazing',
}

The content of the attribute is wrapped in a div with the mrf-article__mosaicHtml class.

Position

By default, the content of mosaicHTML is injected between the article headline and its summary or excerpt. You can configure it with the mosaicHtmlPosition attribute. Its possible values are:

• before
• subtitle
• author
• title
• date
• image
• excerpt

mosaicHTML is inserted right after the element specified in mosaicHtmlPosition.

Example:

{
  selector: '#most_popular_stories ul li',
  extractors: {
    title: 'a',
    uri: 'a',
    author: '.grey',
    pocket: function (node) {
      const num = node.querySelector('.grey');
      return {
        mosaicHtml: num && num.innerText,
        mosaicHtmlPosition:'title',
        balcon: {
          name: 'popular'
        }
      }
    }
  }
}

WARNING

Do not use the outerHTML of a node as value for mosaicHTML. It makes Marfeel vulnerable to external HTML, and can break complete pages.