├── favicon.ico ├── img ├── left.png └── right.png ├── README.md ├── embed.html ├── index.html ├── css ├── embed.css └── stylesheet.css └── js └── fetch.js /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fossasia/fossasia-webfeeds/gh-pages/favicon.ico -------------------------------------------------------------------------------- /img/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fossasia/fossasia-webfeeds/gh-pages/img/left.png -------------------------------------------------------------------------------- /img/right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fossasia/fossasia-webfeeds/gh-pages/img/right.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FOSSASIA Webfeeds 2 | 3 | This is a feeder of the official FOSSASIA blog for static websites. 4 | 5 | The `index.html` file has a designed version that can be used as a standalone site. The `embed.html` version is designed to be embedded into websites. For example, one can make an iframe and display it on his or her site. -------------------------------------------------------------------------------- /embed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | FOSSASIA Webfeeds 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | FOSSASIA Webfeeds 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

FOSSASIA Blog RSS Fetcher

15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /css/embed.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Open Sans', Calibri, sans-serif; 5 | background-color: transparent; 6 | height:100%; 7 | } 8 | 9 | a { 10 | color: #000; 11 | } 12 | 13 | #result { 14 | width: 100%; 15 | height: 100%; 16 | max-height: 100%; 17 | margin: 0 auto; 18 | background-color: rgba(0, 0, 0, 0.1); 19 | overflow-y: auto; 20 | overflow-x: hidden; 21 | } 22 | 23 | .post { 24 | display: none; 25 | padding: 20px; 26 | position: relative; 27 | height: 100%; 28 | } 29 | 30 | .post.active { 31 | display: block; 32 | } 33 | 34 | .post > h3 { 35 | font-size: 1em; 36 | } 37 | 38 | .links { 39 | display: flex; 40 | list-style-type: none; 41 | justify-content: flex-start; 42 | padding-left: 0; 43 | } 44 | 45 | .links li { 46 | display: inline-block; 47 | margin-right: 15px; 48 | background-color: #2D728F; 49 | border-radius: 3px; 50 | padding: 5px 10px; 51 | } 52 | 53 | .links li a { 54 | color: #fff; 55 | } 56 | 57 | .post img { 58 | display: block; 59 | width:30%; 60 | height: 30%; 61 | margin: 10px; 62 | } 63 | 64 | .post .link { 65 | padding: 30px 0; 66 | } -------------------------------------------------------------------------------- /css/stylesheet.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Open Sans', Calibri, sans-serif; 5 | background-color: #AB3428; 6 | } 7 | 8 | h1 { 9 | width: 80%; 10 | text-align: center; 11 | background-color: #F49E4C; 12 | margin: 30px auto 20px; 13 | box-sizing: border-box; 14 | padding: 10px; 15 | display: block; 16 | box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); 17 | } 18 | 19 | a { 20 | color: #2D728F; 21 | text-decoration: none; 22 | } 23 | 24 | #result { 25 | width: 80%; 26 | height: 500px; 27 | margin: 20px auto; 28 | background-color: #F5EE9E; 29 | box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); 30 | overflow: auto; 31 | } 32 | 33 | button { 34 | display: block; 35 | border: none; 36 | background-color: #fff; 37 | position: absolute; 38 | height: 150px; 39 | width: 75px; 40 | top: 50%; 41 | margin-top: -75px; 42 | cursor: pointer; 43 | background-repeat: no-repeat; 44 | } 45 | 46 | button#back { 47 | left: 0; 48 | border-radius: 0 75px 75px 0; 49 | background-position: left; 50 | background-image: url(../img/left.png); 51 | 52 | } 53 | 54 | button#forward { 55 | right: 0; 56 | border-radius: 75px 0 0 75px; 57 | background-position: right; 58 | background-image: url(../img/right.png); 59 | } 60 | 61 | .post { 62 | display: none; 63 | padding: 20px; 64 | } 65 | 66 | .post.active { 67 | display: block; 68 | } 69 | 70 | .post > h3 { 71 | font-size: 1em; 72 | } 73 | 74 | .links { 75 | display: flex; 76 | list-style-type: none; 77 | justify-content: flex-start; 78 | padding-left: 0; 79 | } 80 | 81 | .links li { 82 | display: inline-block; 83 | margin-right: 15px; 84 | background-color: #2D728F; 85 | border-radius: 3px; 86 | padding: 5px 10px; 87 | } 88 | 89 | .links li a { 90 | color: #fff; 91 | } 92 | 93 | .post img { 94 | display: block; 95 | width:30%; 96 | height: 30%; 97 | margin: 10px; 98 | } -------------------------------------------------------------------------------- /js/fetch.js: -------------------------------------------------------------------------------- 1 | var Feed = { 2 | currentID: 0, 3 | number: 0, 4 | resultDiv: '', 5 | switchNext: '', 6 | switchPrevious: '' 7 | }; 8 | 9 | $(document).ready(function() { 10 | 11 | (function loadRSS() { 12 | //due to the no access control origin header policy, an external service must be used to convert XML to JSON so we can fetch the JSON using JSONP; see http://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options/ 13 | var yql = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D'http%3A%2F%2Fblog.fossasia.org%2Frss.xml'&format=json&callback="; 14 | $.getJSON(yql, function(data) { 15 | //get the posts 16 | var posts = data.query.results.item; 17 | Feed.number = posts.length; 18 | //for each post, store the post in a div 19 | for(index in posts) { 20 | //first append the url to the img tag so the images and sources without a link already load correctly 21 | posts[index].description = posts[index].description.replace(/(src)="(?!http|\/\/)/gi, 'src="http://blog.fossasia.org'); 22 | //do the same thing with links (i.e. for tags) 23 | posts[index].description = posts[index].description.replace(/(href)="(?!http|\/\/)/gi, 'href="http://blog.fossasia.org'); 24 | 25 | var date = new Date(posts[index].pubDate); 26 | //write data to a div 27 | $('#result').append("

"+posts[index].title+"

\ 28 |

By "+posts[index].creator+"

\ 29 | "+date.toDateString()+" \ 30 |
"+posts[index].description+"
\ 31 |
See more at FOSSASIA
\ 32 |
"); 33 | if(index == 0) { 34 | $('.post').addClass('active'); 35 | } 36 | } 37 | 38 | }, "jsonp"); 39 | 40 | })(); 41 | 42 | //define object 43 | 44 | Feed.resultDiv = document.getElementById('result'); 45 | 46 | Feed.switchNext = function() { 47 | //check to see if it's the last one 48 | if(this.currentID != this.number - 1) { 49 | this.currentID += 1; 50 | document.getElementsByClassName('post')[this.currentID-1].className = "post"; 51 | document.getElementsByClassName('post')[this.currentID].className = "post active"; 52 | } else { 53 | this.currentID = 0; 54 | document.getElementsByClassName('post')[this.number - 1].className = "post"; 55 | document.getElementsByClassName('post')[this.currentID].className = "post active"; 56 | } 57 | } 58 | 59 | Feed.switchPrevious = function() { 60 | if(this.currentID != 0) { 61 | this.currentID -= 1; 62 | document.getElementsByClassName('post')[this.currentID+1].className = "post"; 63 | document.getElementsByClassName('post')[this.currentID].className = "post active"; 64 | } else { 65 | this.currentID = this.number - 1; 66 | document.getElementsByClassName('post')[0].className = "post"; 67 | document.getElementsByClassName('post')[this.currentID].className = "post active"; 68 | } 69 | } 70 | 71 | }); 72 | 73 | setInterval(function() {Feed.switchNext();}, 10000); 74 | --------------------------------------------------------------------------------