58 lines
2.4 KiB
HTML
58 lines
2.4 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Mastofeed - embeddable Mastodon feeds</title>
|
|
<link rel="stylesheet" href="./stylesheet.css">
|
|
</head>
|
|
<body>
|
|
<br>
|
|
<div>
|
|
<h1>Mastofeed</h1>
|
|
<h4>Embedded Mastodon feeds for blogs etc.</h4>
|
|
<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>
|
|
<br><hr><br>
|
|
<form action="javascript:genUrl()">
|
|
<label>Instance URL:<input required type="text" id="urlin" placeholder="octodon.social"></label><br>
|
|
<label>Username:<input required type="text" id="usernamein" placeholder="fenwick67"></label><br>
|
|
<label>Width(px):<input required type="number" id="width" value="400"></label><br>
|
|
<label>Height(px):<input required type="number" id="height" value="800"></label><br>
|
|
<label>UI scale (percent):<input required type="number" id="size" value="100"></label><br>
|
|
<label>theme:
|
|
<select id="theme">
|
|
<option value="dark">dark</option>
|
|
<option value="light">light</option>
|
|
</select>
|
|
</label><br>
|
|
<label>Show header?<input id="header" type="checkbox" checked></label><br>
|
|
<button value="generate">Generate</button>
|
|
</form>
|
|
<br>
|
|
<br>
|
|
<label>Use this markup in your HTML: <br><textarea id="result" placeholder="result will go here"></textarea></label>
|
|
<br>
|
|
<h3>Live Preview:</h3>
|
|
<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>
|
|
<br>
|
|
</div>
|
|
<script>
|
|
window.genUrl = function genUrl(){
|
|
function val(id){
|
|
return document.getElementById(id).value;
|
|
}
|
|
|
|
var inUrl = 'https://' + val('urlin') + '/users/'+val('usernamein')+'.atom';
|
|
|
|
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());
|
|
|
|
document.getElementById('result').value = '<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts" width="'+val('width')+'" height="'+val('height')+'" src="'+iframeUrl+'"></iframe>';
|
|
|
|
var iframe = document.getElementById('frame');
|
|
iframe.src = iframeUrl;
|
|
iframe.width = val('width');
|
|
iframe.height = val('height');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|