ember-twitter-entities

ember-twitter-entities

       

This Ember CLI addon parses Twitter Entities from the Twitter API and renders a them as Ember Components.

Installation

ember install ember-twitter-entities

Notes

This addon requires the Babel Polyfill to correctly handle emojis.

Example usage

Given the following:

entities: {
  urls: [{
    url: 'https://t.co/emberjs',
    display_url: 'emberjs.com',
    indices: [6, 17]
  }],
  hashtags: [],
  user_mentions: [],
  media: []
}

{{twitter-entities text="visit emberjs.com" entities=entities}}

The addon will render:

visit <a href="http://t.co/emberjs">emberjs.com</a>

Customising

If you want to display twitter entities differently to the defaults, simply extend the component and provide a different template:

// components/twitter-entity/media/component.js

import Component from 'ember-twitter-entities/components/twitter-entity/media';
import layout from './template';

export default Component.extend({ layout });

{{! components/twitter-entity/media/template.hbs }}

<img src={{entity.media_url_https}} width={{entity.sizes.thumb.w}} height={{entity.sizes.thumb.h}}>

Alternatively, you can customise the component on a per-instance basis.

{{twitter-entities text=tweet entities=entities
  url-component='tweet-url'
  hashtag-component='hash-tag'
  user-mention-component='user-mention'
  media-component='x-gallery/image'

You can even pass in a component

{{twitter-entities text=text entities=entities
  url-component=(component 'my-component' target='_blank')

HTML in tweets

If the tweet you are rendering is already encoded, flag it as html-safe to prevent double encoding.

const tweet = 'This tweet contains <br> HTML';
this.set('text', htmlSafe(tweet));

{{twitter-entities text=text}}

Outputs:    This tweet contains <br> HTML
Instead of: This tweet contains &lt;br&gt; HTML