Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gobengo/personalized-feed-stub
An example of a personalized News Feed powered by Livefyre
https://github.com/gobengo/personalized-feed-stub
Last synced: 25 days ago
JSON representation
An example of a personalized News Feed powered by Livefyre
- Host: GitHub
- URL: https://github.com/gobengo/personalized-feed-stub
- Owner: gobengo
- License: mit
- Created: 2014-06-25T21:14:17.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2014-09-29T22:38:37.000Z (about 10 years ago)
- Last Synced: 2024-10-03T15:30:24.431Z (about 1 month ago)
- Language: JavaScript
- Size: 383 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Livefyre Personalized Application Stub
A stub of a Livefyre-powered Web Component that renders a personalized feed of social activities based on topics you follow in Livefyre.
To use this, you must do three things:
1. Construct a PersonalizedNewsFeed object by using the constructor exported from this module.
2. Implement the `.renderActivity` method, which will be passed each [activitystrea.ms]() Activity sent down from Livefyre's API. It should return an HTMLElement that renders the Activity (or falsy to skip).
3. After completing a Livefyre Single Sign On integration, pass the currently logged-in user's token to the `.setToken` method.
## Importing
You are free to fork this library or host it somewhere of your choosing. If that sounds tedious, you can also use [Livefyre.js](https://github.com/Livefyre/Livefyre.js) to import a pinned version. The below examples will use this method.
## Example
```html
// pinning to major version 0. You can be more specific if you like
// e.g. personalized-feed-stub#0.0.0-pre.0
Livefyre.require(['personalized-feed-stub#0'], function (PersonalizedNewsFeed) {
// 1. Construct a PersonalizedNewsFeed
var feed = new PersonalizedNewsFeed({
el: document.getElementById('element-the-feed-should-be-in')
});
// 2. Implement .renderActivity
feed.renderActivity = function (activity) {
// nerd-mode implementation
// this will show the raw JSON of each activity
var el = document.createElement('pre');
el.appendChild(
document.createTextNode(
JSON.stringify(activity, null, ' ')));
return el;
};
// 3. Call .setToken whenever a user logs into your auth system
// bring your own `auth`
auth.on('login.livefyre', function (user) {
var token = user.get('token');
feed.setToken(token);
});
});
```
See [index.html](./index.html) in this repo for a more elaborate implementation of `.renderActivity` that renders Livefyre Collection metadata whenever an activity whose `object.objectType === 'collection'` streams by. [index.css](./index.css) styles these CustomActivityElements.
## API
This package exports a constructor that takes the following options
* el - optional - An existing HTMLElement to render in
* environment - 'production' (default), 'uat', or 'qa' - The Livefyre Environment to connect to.
Example:
```javascript
var myFeed = new PersonalizedNewsFeed({
el: document.getElementById('my-element'),
environment: 'uat'
});
```
## Advanced Features
In the above example, we passed `PersonalizedNewsFeed` an element to render in.
```html
```
By adding children to your container element (and sometimes some corresponding styles) you can unlock some extra features.
### Show More Button
Add an element with a `data-show-more` attribute, and whenever that element is clicked, the PersonalizedNewsFeed will fetch more activities from the server, render them, and append them to the list.
Other than the `data-show-more` attribute, you can add whatever other attributes or classes you desire.
```html
Show More
```
### Custom Activity List
You may similarly want more HTML control over the list that contains each rendered activity. If the element you pass to the `PersonalizedNewsFeed` constructor has a child whose `role` attribute is `list`, rendered activities will be rendered in that element. Otherwise, a list element will be created and appended to the feed for you.
```html
Show More
```
### Loading Screen
PersonalizedNewsFeed will add a `data-loading` attribute to its HTMLElement upon construction, and will remove it once the initial activities have been fetched, rendered, and appended to the feed element.
You can use this attribute to show a loading screen until there are activities to show off to the user.
```html
Your personalized news feed is loading...
Show More
.custom-activity-feed[data-loading] > *:not([role="progressbar"]),
.custom-activity-feed > [role="progressbar"] {
display: none;
}
.custom-activity-feed[data-loading] > [role="progressbar"] {
display: block;
}
```