Skip to content

🐦 Renders entities from Twitter's API as Ember components

License

Notifications You must be signed in to change notification settings

zestia/ember-twitter-entities

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@zestia/ember-twitter-entities

Ember Observer

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

Important

⚠️ This repo is no longer actively maintained

Installation

ember install @zestia/ember-twitter-entities

Add the following to ~/.npmrc to pull @zestia scoped packages from Github instead of NPM.

@zestia:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<YOUR_GH_TOKEN>

Demo

https://zestia.github.io/ember-twitter-entities

Notes

  • Supported entity types are: hashtags, media, urls, user_mentions, symbols. Basically any entity which has an indices property and occurs in the tweet text. So this excludes polls.

Example

Given the following:

entities: {
  urls: [{
    url: 'https://t.co/emberjs',
    display_url: 'emberjs.com',
    indices: [6, 17]
  }],
  hashtags: [],
  user_mentions: [],
  media: [],
  symbols: []
}
<TwitterEntities @text='visit emberjs.com' @entities={{this.entities}} />

The addon will render:

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

...using the built in components for each entity type.

TwitterEntities

Arguments

@text

Required. The text to parse to find entities within.

@entities

Required. An object of entities that includes information about where each entity appears within the @text.

@Url

Optional. The component that will be used to display a URL entity.

@Hashtag

Optional. The component that will be used to display a hashtag entity.

@UserMention

Optional. The component that will be used to display a user mention entity.

@Media

Optional. The component that will be used to display a media entity.

@Symbol

Optional. The component that will be used to display a symbol entity.

API

entity

Each component receives the entity so it can be displayed however you wish.

HTML in tweets

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

Example
const tweet = 'This tweet contains &lt;br&gt; HTML';
this.text = htmlSafe(tweet);
<TwitterEntities @text={{this.text}} />
Outputs:    This tweet contains <br> HTML
Instead of: This tweet contains &lt;br&gt; HTML