2.2.13 • Published 6 years ago
ember-twitter-entities v2.2.13
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 <br> HTML