2024-10-13 21:04:35 +02:00
<!DOCTYPE html>
2018-03-24 19:01:26 +01:00
< html lang = "en" >
2019-11-08 17:46:17 +01:00
2018-03-24 19:01:26 +01:00
< head >
2019-11-08 17:46:17 +01:00
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1" >
< title > Mastofeed - embeddable Mastodon feeds< / title >
< link rel = "stylesheet" href = "./stylesheet.css" >
2018-03-24 19:01:26 +01:00
< / head >
2019-11-08 17:46:17 +01:00
< body >
< br >
< div >
< h1 > Mastofeed< / h1 >
< h4 > Embedded Mastodon feeds for blogs etc.< / h4 >
2024-10-13 21:45:55 +02:00
< div >
< p > < b > New!< / b > Want to opt out? Add #nobot or #noMastofeed to your profile and it won't be shown< / p >
< / div >
< br >
2024-10-13 21:04:35 +02:00
< a href = "https://github.com/fenwick67/mastofeed" class = "cta button alt" > < img
class="link-logo" src="github-logo.svg" alt="Github Logo"> Fork on Github< / a > < br >
2019-11-08 17:46:17 +01:00
< br >
2024-10-13 21:04:35 +02:00
< script type = 'text/javascript' src = 'https://storage.ko-fi.com/cdn/widget/Widget_2.js' > < / script > < script type = 'text/javascript' > kofiwidget2 . init ( 'Support Me on Ko-fi, hosting fees are a bitch' , '#29abe0' , 'M4M014P3UT' ) ; kofiwidget2 . draw ( ) ; < / script >
2019-11-08 17:46:17 +01:00
< hr > < br >
< form action = "javascript:genUrl()" >
2021-12-20 17:50:03 +01:00
< label > Instance URL:< input required type = "text" id = "urlin" placeholder = "mastodon.social"
oninvalid="this.setCustomValidity('Insert your instance URL. Example: mastodon.social')"
2019-11-08 17:46:17 +01:00
oninput="this.setCustomValidity('')">< / label >
< br >
2021-12-20 17:50:03 +01:00
< label > Username:< input required type = "text" id = "usernamein" placeholder = "gargron"
oninvalid="this.setCustomValidity('Insert your username. Example: gargron')"
2019-11-08 17:46:17 +01:00
oninput="this.setCustomValidity('')">< / label >
< br >
< label > Width (px):< input required type = "number" id = "width" value = "400"
oninvalid="this.setCustomValidity('Insert width of generated feed. Default: 400')"
oninput="this.setCustomValidity('')">< / label >
< br >
< label > Height (px):< input required type = "number" id = "height" value = "800"
oninvalid="this.setCustomValidity('Insert height of generated feed. Default: 800')"
oninput="this.setCustomValidity('')">< / label >
< br >
< label > UI Scale (percent):< input required type = "number" id = "size" value = "100"
oninvalid="this.setCustomValidity('Insert UI scale. Default: 100')"
oninput="this.setCustomValidity('')">< / label >
< br >
< label > Theme:
< select id = "theme" >
< option value = "dark" > Dark< / option >
< option value = "light" > Light< / option >
< option value = "auto" > Auto (based on css prefers-color-scheme)< / option >
< / select >
< / label >
< br >
< label > Show Header?< input id = "header" type = "checkbox" checked = "checked" > < / label >
< br >
< label > Hide replies?< input type = "checkbox" id = "hidereplies" checked = "checked" > < / label >
< br >
< label > Hide boosts?< input type = "checkbox" id = "hideboosts" checked = "checked" > < / label >
< br >
< 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 > < br >
< h3 > Live Preview:< / h3 >
< span class = "iframe-contain" >
2024-10-13 21:04:35 +02:00
< iframe id = "frame" allowfullscreen
sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="400"
height="800"
2021-12-20 17:50:03 +01:00
src="/apiv2/feed?userurl=https%3A%2F%2Fmastodon.social%2Fusers%2Fgargron& replies=false& boosts=true">< / iframe >
2019-11-08 17:46:17 +01:00
< / span >
< br >
< / div >
< script >
window.genUrl = function genUrl() {
function val(id) {
return document.getElementById(id).value;
}
2018-03-24 19:01:26 +01:00
2019-11-08 17:46:17 +01:00
var inUrl = 'https://' + val('urlin') + '/users/' + val('usernamein');
2018-03-24 19:01:26 +01:00
2019-11-08 17:46:17 +01:00
var showBoosts = (!document.getElementById('hideboosts').checked).toString();
var showReplies = (!document.getElementById('hidereplies').checked).toString();
var showHeader = document.getElementById('header').checked.toString()
var portStr = (window.location.port & & window.location.port != 80) ? (':' + window.location.port) : ''
2018-03-24 19:01:26 +01:00
2019-11-08 17:46:17 +01:00
var iframeUrl = window.location.protocol + '//' + window.location.hostname + portStr
+ "/apiv2/feed?userurl=" + encodeURIComponent(inUrl) + "& theme=" + val('theme') + '& size=' + val('size')
+ "& header=" + showHeader + '& replies=' + showReplies + '& boosts=' + showBoosts;
2018-03-24 19:01:26 +01:00
2023-01-11 04:56:52 +01:00
document.getElementById('result').value = '< iframe allowfullscreen sandbox = "allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width = "' + val('width') + '" height = "' + val('height') + '" src = "' + iframeUrl + '" > < / iframe > ';
2018-03-24 19:01:26 +01:00
2019-11-08 17:46:17 +01:00
var iframe = document.getElementById('frame');
iframe.src = iframeUrl;
iframe.width = val('width');
iframe.height = val('height');
}
< / script >
2018-03-24 19:01:26 +01:00
< / body >
2019-11-08 17:46:17 +01:00
2024-10-13 21:04:35 +02:00
< / html >
