first commit
This commit is contained in:
commit
5a212bffde
|
|
@ -0,0 +1,163 @@
|
|||
# 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.
|
||||
|
||||
|
||||
 
|
||||
|
||||
|
||||
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
|
||||
|
|
@ -0,0 +1 @@
|
|||
function getAtom(){window.XMLHttpRequest?xmlhttp=new XMLHttpRequest:xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"),xmlhttp.open("GET",url,!0),xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState===XMLHttpRequest.DONE)try{(xmlhttp.status=200)&&updateWidget(xmlhttp.responseXML)}catch(t){}},xmlhttp.send()}function updateWidget(t){"hubzilla"==servertype?userinfo=t.getElementsByTagNameNS("http://purl.org/zot","owner")[0]:userinfo=t.getElementsByTagName("author")[0];try{if("hubzilla"==servertype)for(var e=userinfo.getElementsByTagName("link"),a=0;a<e.length;a++)"avatar"==e[a].getAttribute("rel")&&(img=e[a].getAttribute("href"));else img=t.getElementsByTagName("logo")[0].firstChild.data}catch(t){img=""}try{profile=userinfo.getElementsByTagName("uri")[0].firstChild.data}catch(t){profile=""}try{displayname=userinfo.getElementsByTagNameNS("http://portablecontacts.net/spec/1.0","displayName")[0].firstChild.data}catch(t){displayname=""}content='<div id="federation_widget"><header>',""!=img&&(content+='<a target= "_blank" href="'+profile+'"><img src="'+img+'" title="Avatar"/></a>'),content+=' <p><a target= "_blank" href="'+profile+'">'+displayname+"</a></p></header>";for(var r=t.getElementsByTagName("entry"),n=max-1,l=0;l<r.length;l++){try{var i="",s="",o="",m="";if("group"==type){s=r[l].getElementsByTagName("author")[0].getElementsByTagNameNS("http://portablecontacts.net/spec/1.0","displayName")[0].firstChild.data;var g=r[l].getElementsByTagName("link");for(a=0;a<g.length;a++)if("avatar"==g[a].getAttribute("rel"))o=g[a].getAttribute("href");i='<span class="groupmember"><a class="tooltip" target= "_blank" href="'+(m=r[l].getElementsByTagName("uri")[0].firstChild.data)+'"><img style="max-width:50px;" alt="Profile" align="left" src="'+o+'" />'+s+" <span>"+m+"</span> </a> </span>"}}catch(t){i="",o="",m=""}try{var p=r[l].getElementsByTagName("content")[0].firstChild.data}catch(t){p=""}try{var d="";d=new Date(r[l].getElementsByTagName("updated")[0].firstChild.data).toLocaleString(),d='<span class="tooltip">⌛<span>'+posttime_label+" "+d+"</span> </span>"}catch(t){d=""}content+="<article>"+i+d+"<br />"+p+"</article>",n<r.length&&l==n&&(l=r.length)}content+="<footer></footer></div>",document.getElementById(tag).innerHTML=content}"diaspora"==servertype?url=domain+"/public/"+user+".atom":"mastodon"==servertype?url=domain+"/@"+user+".atom":url=domain+"/feed/"+user,window.onload=getAtom;
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
/* This program is free software. It comes without any warranty, to
|
||||
* the extent permitted by applicable law. You can redistribute it
|
||||
* and/or modify it under the terms of the Do What The Fuck You Want
|
||||
* To Public License, Version 2, as published by Sam Hocevar. See
|
||||
* http://sam.zoy.org/wtfpl/COPYING for more details. */
|
||||
|
||||
var loadForm = document.getElementById('loadForm');
|
||||
loadForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
loadConfig();
|
||||
}, true);
|
||||
|
||||
// Change variables here.
|
||||
var type = 'user'; // could be 'group' to follow a group
|
||||
var servertype ='friendica';
|
||||
var user = 'marco';
|
||||
var max = 5;
|
||||
var tag = 'federation-widget';
|
||||
var domain = 'https://freunde.ma-nic.de';
|
||||
var posttime_label = 'Post time:';
|
||||
|
||||
// Other variables
|
||||
if (servertype=='diaspora'){
|
||||
url = domain+'/public/'+user+'.atom'
|
||||
}
|
||||
else if (servertype=='mastodon'){
|
||||
url = domain+'/@'+user+'.atom'
|
||||
}
|
||||
else {
|
||||
url = domain+'/feed/'+user;
|
||||
}
|
||||
|
||||
function loadConfig()
|
||||
{
|
||||
domain = document.getElementById('profile_domain').value;
|
||||
servertype = document.getElementById('server_type').value;
|
||||
user = document.getElementById('profile_name').value;
|
||||
profile_type = document.getElementById('profile_type');
|
||||
type = profile_type.options[profile_type.selectedIndex].value;
|
||||
if (servertype=='diaspora'){
|
||||
url = domain+'/public/'+user+'.atom'
|
||||
}
|
||||
else if (servertype=='mastodon'){
|
||||
url = domain+'/@'+user+'.atom'
|
||||
}
|
||||
else {
|
||||
url = domain+'/feed/'+user;
|
||||
}
|
||||
getAtom();
|
||||
}
|
||||
|
||||
function getAtom()
|
||||
{
|
||||
if (window.XMLHttpRequest)
|
||||
{// code for IE7+, Firefox, Chrome, Opera, Safari
|
||||
xmlhttp=new XMLHttpRequest();
|
||||
}
|
||||
else
|
||||
{// code for IE6, IE5
|
||||
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
xmlhttp.open("GET",url,true);
|
||||
xmlhttp.onreadystatechange = function() {
|
||||
if(xmlhttp.readyState === XMLHttpRequest.DONE) {
|
||||
try{if (xmlhttp.status=200){updateWidget(xmlhttp.responseXML)}}
|
||||
catch (e){}
|
||||
}
|
||||
}
|
||||
xmlhttp.send();
|
||||
}
|
||||
|
||||
function updateWidget(xmlDoc){;
|
||||
|
||||
if (servertype=='hubzilla'){
|
||||
userinfo=xmlDoc.getElementsByTagNameNS('http://purl.org/zot','owner')[0];
|
||||
} else{
|
||||
userinfo=xmlDoc.getElementsByTagName('author')[0];
|
||||
}
|
||||
|
||||
try {
|
||||
if (servertype=='hubzilla'){
|
||||
var imagelinks=userinfo.getElementsByTagName('link');
|
||||
for (var i=0;i< imagelinks.length;i++) {
|
||||
if (imagelinks[i].getAttribute('rel')=='avatar'){
|
||||
img=imagelinks[i].getAttribute('href')
|
||||
};
|
||||
}
|
||||
} else{
|
||||
img = xmlDoc.getElementsByTagName('logo')[0].firstChild.data;
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
img = '';
|
||||
}
|
||||
|
||||
try {
|
||||
profile = userinfo.getElementsByTagName('uri')[0].firstChild.data;
|
||||
}
|
||||
catch (e) {
|
||||
profile = '';
|
||||
}
|
||||
|
||||
try {
|
||||
displayname = userinfo.getElementsByTagNameNS('http://portablecontacts.net/spec/1.0','displayName')[0].firstChild.data
|
||||
}
|
||||
catch (e) {
|
||||
displayname = '';
|
||||
}
|
||||
|
||||
//Header
|
||||
content = '<div id="federation_widget"><header>';
|
||||
if (img != '') {
|
||||
content += '<a target= "_blank" href="'+profile + '"><img src="'+img+'" title="Avatar"/></a>';
|
||||
}
|
||||
content += ' <p><a target= "_blank" href="'+profile + '">'+displayname+ '</a></p></header>';
|
||||
|
||||
//Statuses in Array
|
||||
var items = xmlDoc.getElementsByTagName('entry');
|
||||
var max_item = max - 1
|
||||
|
||||
//Read item from array
|
||||
for (var n=0; n < items.length; n++) {
|
||||
try {//Images, names and link for Group member
|
||||
var item_groupmember="",item_groupmember_screen_name="",item_groupmember_name="", item_groupmember_image="",item_groupmember_link="";
|
||||
if (type=='group'){
|
||||
var item_groupmember_screen_name = items[n].getElementsByTagName('author')[0].getElementsByTagNameNS('http://portablecontacts.net/spec/1.0','displayName')[0].firstChild.data;
|
||||
var authorlinks=items[n].getElementsByTagName('link');
|
||||
for (var i=0;i< authorlinks.length;i++) {
|
||||
if (authorlinks[i].getAttribute('rel')=='avatar'){
|
||||
var item_groupmember_image=authorlinks[i].getAttribute('href')
|
||||
};
|
||||
}
|
||||
|
||||
var item_groupmember_link = items[n].getElementsByTagName('uri')[0].firstChild.data;
|
||||
var item_groupmember = '<span class=\"groupmember\"><a class=\"tooltip\" target= \"_blank\" href=\"' + item_groupmember_link + '\"><img style=\"max-width:50px;\" alt=\"Profile\" align=\"left\" src="' + item_groupmember_image + '\" />' + item_groupmember_screen_name + ' <span>' + item_groupmember_link +'</span> </a> </span>';
|
||||
};
|
||||
}
|
||||
catch (e) {
|
||||
var item_groupmember='',item_groupmember_name='',item_groupmember_image='',item_groupmember_link='';
|
||||
}
|
||||
|
||||
try {//Get Status Html
|
||||
var item_content = items[n].getElementsByTagName('content')[0].firstChild.data;
|
||||
}
|
||||
catch (e) {
|
||||
var item_content = '';
|
||||
}
|
||||
|
||||
|
||||
try {//Get Create Time from status
|
||||
var item_time = '';
|
||||
item_time = new Date( items[n].getElementsByTagName('updated')[0].firstChild.data).toLocaleString();
|
||||
item_time= "<span class=\"tooltip\">⌛\;<span>" + posttime_label + " " + item_time +"</span> </span>";
|
||||
}
|
||||
catch (e) {
|
||||
var item_time = '';
|
||||
}
|
||||
|
||||
//Build status string and add to timeline
|
||||
content += '<article>'+item_groupmember+item_time+"<br />" +item_content+'</article>'
|
||||
|
||||
|
||||
if ((max_item < items.length) && (n==max_item))
|
||||
{
|
||||
n = items.length;
|
||||
}
|
||||
}
|
||||
|
||||
content += '<footer></footer></div>';
|
||||
document.getElementById(tag).innerHTML = content;
|
||||
}
|
||||
|
||||
window.onload = getAtom;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Federation Widget</title>
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Federation Widget</h1>
|
||||
<p>The Federation widget parses the Atom output of your account. It shows the timeline from the personal or forum account on your personal blog or website. It works only if <a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing" title="CORS at Wikipedia">CORS</a> is enabled on the server. Friendica and Hubzilla accounts are currently supported. You have to give the type of the account as the XML is different for the services (hooray for standards!). <br />
|
||||
It makes most sense for static website generators like Pelican. You only have to include the Javascript file, the CSS part and a placeholder in your website template.</p>
|
||||
<p>You can test the output with this file.</p>
|
||||
<hr />
|
||||
<form id="loadForm">
|
||||
<p>
|
||||
<label for="profile_domain">URL : </label> <input type="text" id="profile_domain" value="https://freunde.ma-nic.de">
|
||||
</p>
|
||||
<p>
|
||||
<label for="server_type">Server Type : </label> <input type="text" id="server_type" value="friendica">
|
||||
</p>
|
||||
<p>
|
||||
<label for="profile_type">Type : </label>
|
||||
<select name="profile_type" form="loadForm" id="profile_type">
|
||||
<option value="user">User</option>
|
||||
<option value="group">Group</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="profile_name">Name : </label> <input type="text" id="profile_name" value="marco">
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="(re)Load">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div id="federation-widget">
|
||||
<p>Timeline activity...</p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="./federation-widget.max.js">
|
||||
var type = 'user'; // could be 'group' to follow a group
|
||||
var servertype = 'friendica';
|
||||
var user = 'marco';
|
||||
var max = 5;
|
||||
var tag = 'federation-widget';
|
||||
</script>
|
||||
|
||||
<hr/>
|
||||
<p>Get the code at <a href="http://github.com/lubuwest/federation-widget" title="Find federation-widget sources on Github">Federation Widget at Github</a></p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Federation Widget</title>
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var type = 'user'; // could be 'group' to follow a group
|
||||
var user = 'fdroidorg';
|
||||
var max = 5;
|
||||
var tag = 'federation-widget';
|
||||
var domain = 'https://mastodon.technology';
|
||||
var servertype = 'mastodon'
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1> Federation Widget</h1>
|
||||
|
||||
<div id="federation-widget">
|
||||
<p>Timeline activity...</p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="./federation-widget.js">
|
||||
</script>
|
||||
|
||||
<hr/>
|
||||
<p>Get the sources of the Federation widget at <a href="http://github.com/lubuwest/federation-widget" title="Find Fedetation widget sources on Github">Federation widget on Github</a></p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
body, html {
|
||||
background-color: #999999;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0em;
|
||||
padding: 1em 3%;
|
||||
background-color: #999999;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 1em;
|
||||
color: #112233;
|
||||
background-color: #ffffff;
|
||||
font-family: Georgia, Palatina, serif;
|
||||
box-shadow: 1px 1px 12px #000000;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
Loading…
Reference in New Issue