# Federation widget

## About

This is a javascript widget that shows the public timeline of an account in the Federation (Diaspora, Friendica, Hubzilla) and Mastodon. Currently onlytested with Friendica.

This works for a user or a group. It is loosely based on the [ELI widget](https://github.com/blankoworld/eli) for GNU Social.


![User Timeline](federation-user.png)   ![Group Timeline](federation_group.png)


The server has to support [Cross-Origin Resource Sharing](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing). The .htaccess file in the server directory should include the following code for this:

```
    Access-Control-Allow-Origin: *
    Access-Control-Allow-Methods: GET
   
```

## License

This program is licensed under the [WTF Public License](http://sam.zoy.org/wtfpl/COPYING 'Read more about the WTF Public License').

## Installation

Just:

  * copy the federation-widget.js in your website directory
  * add this code in your page:

```html
    <div id="federation-widget">
      <p>Timeline activity...</p>
    </div>
```

Then add this code **at the end of your page before the `</body>` tag**:

```html
    <script type="text/javascript" src="./federation-widget.js">
      var type = 'user'; // could be 'group' to follow a group
      var user = 'nickname';
      var max = 5;
      var tag = 'federation-widget';
      var domain = 'myGNUSocialDomain.tld';
      var servertype='friendica'; // could be hubzilla, diaspora or mastodon
    </script>
```

Adapt domain, user, and servertype content to your account in the Federation. For an example: **https://forum.friendi.ca**.

In order Federation widget to be more beautiful, add this in your CSS file or in **`</style>` tag**:

```css

#federation_widget {
font-size: 0.7em;
margin-top: 20px;
height: 350px;
width: 230px;
padding: 0;
border-radius: 5px;
background-color: #FcFcFc;
overflow-y: auto;
}

#federation_widget header {
padding-bottom: 8px;
text-align: left;
font-size: 1.5em;
border-bottom: 3px solid #EEEEEE;
background-color: #FcFcFc;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

#federation_widget header a {
text-decoration: none;	
color:black
}

#federation_widget header img {
margin: 5px;
background-color: #ffffff;
border-radius: 5px;
float: left;
max-width: 50px;
}

#federation_widget header p {
margin: 0px;
line-height: 60px;
}

#federation_widget article {
display: block;
margin-bottom: 5px;
padding: 5px;
border-bottom: thin solid #eeeeee;
overflow: hidden; /* For too long link: hide but enable click on it */
}

#federation_widget article img {
margin: 5px;
max-width: 230px;
}

#federation_widget article p {
margin-top: 0px;
}

.groupmember img {
border-radius: 5px;
}

.tooltip {position: relative;}
.tooltip span {display: none;}
.tooltip:hover span {
display: block;
position: absolute;
left: 0; top: 10%;
margin: 20px 0 0;
width: 200px;
font-size: 0.7em;
color: #4D4D4C;
border: thin solid #eeeeee;
padding: 4px;
background: white;
}


```

An example is available on **minimal.html** page. You can also see a more complete version on **index.html** page.

## Configuration

You probably want to change these variables:

  * type: Add here **user** OR **group** if you want to follow a user OR a group
  * user: Add here the nickname of the user (or the group) you want to follow
  * max: Add here the number of statuses you want to display. By default StatusNet seems to only give 20 statuses.
  * tag: The name of the tag we should change to display all statuses. In the previous example, the div with ID equal to *content* would be changed. But you can add another ID.
  * domain: The URL of your server Instance.
  * servertype: type of server (friendica, hubzilla, diaspora, mastodon)
  * posttime_label: Change the label name that appears when you have the time the entry was posted.

## Read code

**federation-widget.js** is a minimal version of Federation Widget. To have a more readable version, with more options, you can open **federation-widget.max.js** file.

### Howto minify federation-widget.max.js

  * Go to http://javascript-minifier.com/
  * Copy/paste the content of federation-widget.max.js
  * Delete the license, the first lines ```var loadForm``` and the loadConfig() function
  * Click on **Minify**
  * Copy the result into eli.js file

## Contact

You can contact me at the given address: olivier+eli [AT] dossmann [DOT] net