2017-07-21 14:42:12 +02:00
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2017-04-30 22:46:35 +02:00
< title > Mastofeed - embeddable Mastodon feeds< / title >
2017-07-21 14:42:12 +02:00
< link rel = "stylesheet" href = "./stylesheet.css" >
2017-04-30 20:32:46 +02:00
< / head >
< body >
2017-07-21 14:42:12 +02:00
< br >
< div >
2017-04-30 22:46:35 +02:00
< h1 > Mastofeed< / h1 >
< h4 > Embedded Mastodon feeds for blogs etc.< / h4 >
2017-07-21 14:42:12 +02:00
< a href = "https://github.com/fenwick67/mastofeed" class = "cta button alt" > Fork on Github < img class = "link-logo after" src = "github-logo.svg" alt = "Github Logo" data-reactid = "19" > < / a > < br >
2017-04-30 22:46:35 +02:00
< br > < hr > < br >
< form action = "javascript:genUrl()" >
2017-08-08 22:41:42 +02:00
< label > Instance URL:< input required type = "text" id = "urlin" placeholder = "octodon.social" oninvalid = "this.setCustomValidity('Insert your instance URL. Example: octodon.social')" > < / label > < br >
< label > Username:< input required type = "text" id = "usernamein" placeholder = "fenwick67" oninvalid = "this.setCustomValidity('Insert your username. Example: fenwick67')" > < / label > < br >
< label > Width (px):< input required type = "number" id = "width" value = "400" oninvalid = "this.setCustomValidity('Insert width of generated feed. Default: 400')" > < / label > < br >
< label > Height (px):< input required type = "number" id = "height" value = "800" oninvalid = "this.setCustomValidity('Insert height of generated feed. Default: 800')" > < / label > < br >
< label > UI scale (percent):< input required type = "number" id = "size" value = "100" oninvalid = "this.setCustomValidity('Insert UI scale. Default: 100')" > < / label > < br >
< label > Theme:
2017-04-30 22:46:35 +02:00
< select id = "theme" >
< option value = "dark" > dark< / option >
< option value = "light" > light< / option >
< / select >
< / label > < br >
2017-05-02 05:47:15 +02:00
< label > Show header?< input id = "header" type = "checkbox" checked > < / label > < br >
2017-04-30 22:46:35 +02:00
< button value = "generate" > Generate< / button >
< / form >
2017-04-30 04:54:46 +02:00
< br >
< br >
2017-04-30 22:46:35 +02:00
< label > Use this markup in your HTML: < br > < textarea id = "result" placeholder = "result will go here" > < / textarea > < / label >
2017-04-30 04:54:46 +02:00
< br >
2017-07-21 14:42:12 +02:00
< h3 > Live Preview:< / h3 >
2017-05-02 05:47:15 +02:00
< iframe id = "frame" allowfullscreen sandbox = "allow-top-navigation allow-scripts" width = "400" height = "800" src = "/api/feed?url=https%3A%2F%2Foctodon.social%2Fusers%2Ffenwick67.atom&theme=dark&size=100&header=true" > < / iframe >
2017-07-21 14:42:12 +02:00
< br >
< / div >
2017-04-30 04:54:46 +02:00
< script >
2017-04-30 22:46:35 +02:00
window.genUrl = function genUrl(){
2017-04-30 04:54:46 +02:00
function val(id){
return document.getElementById(id).value;
}
2017-04-30 22:46:35 +02:00
2017-04-30 20:32:46 +02:00
var inUrl = 'https://' + val('urlin') + '/users/'+val('usernamein')+'.atom';
2017-04-30 22:46:35 +02:00
2017-05-02 05:47:15 +02:00
var iframeUrl = window.location.protocol + '//'+ window.location.hostname +((window.location.port & & window.location.port!=80)?(':'+window.location.port):'')
+"/api/feed?url="+encodeURIComponent(inUrl)+"& theme="+val('theme')+'& size='+val('size')
+ "&header="+(document.getElementById('header').checked.toString());
2017-04-30 22:46:35 +02:00
2017-05-02 05:11:29 +02:00
document.getElementById('result').value = '< iframe allowfullscreen sandbox = "allow-top-navigation allow-scripts" width = "'+val('width')+'" height = "'+val('height')+'" src = "'+iframeUrl+'" > < / iframe > ';
2017-04-30 04:54:46 +02:00
var iframe = document.getElementById('frame');
iframe.src = iframeUrl;
iframe.width = val('width');
iframe.height = val('height');
}
< / script >
2017-04-30 20:32:46 +02:00
< / body >
< / html >
