mastofeed-iframe-embed/static/index.html

<html lang="en">
<head>
    <meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1">
		<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" oninvalid="this.setCustomValidity('Insert your instance URL. Example: octodon.social')" oninput="this.setCustomValidity('')"></label><br>
	<label>Username:<input required type="text" id="usernamein" placeholder="fenwick67" oninvalid="this.setCustomValidity('Insert your username. Example: fenwick67')" 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>

	<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="/apiv2/feed?userurl=https%3A%2F%2Foctodon.social%2Fusers%2Ffenwick67&replies=false&boosts=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');

	var showBoosts = (!document.getElementById('hideboosts').checked).toString();
	var showReplies = (!document.getElementById('hidereplies').checked).toString();

	var iframeUrl = window.location.protocol + '//'+ window.location.hostname +((window.location.port && window.location.port!=80)?(':'+window.location.port):'')
	+"/apiv2/feed?userurl="+encodeURIComponent(inUrl)+"&theme="+val('theme')+'&size='+val('size')
	+ "&header="+(document.getElementById('header').checked.toString())+'&replies='+showReplies+'&boosts='+showBoosts;

	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>
allow people to filter out replies and/or boosts 2018-03-24 19:01:26 +01:00			`<html lang="en">`
			`<head>`
			`<meta charset="utf-8">`
			`<meta name="viewport" content="initial-scale=1">`
			`<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" oninvalid="this.setCustomValidity('Insert your instance URL. Example: octodon.social')" oninput="this.setCustomValidity('')"></label><br>`
			`<label>Username:<input required type="text" id="usernamein" placeholder="fenwick67" oninvalid="this.setCustomValidity('Insert your username. Example: fenwick67')" 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>`
add auto color scheme 2019-11-04 23:22:03 +01:00			`<option value="auto">auto (based on css prefers-color-scheme)</option>`
allow people to filter out replies and/or boosts 2018-03-24 19:01:26 +01:00			`</select>`
			`</label><br>`
			`<label>Show Header?<input id="header" type="checkbox" checked="checked"></label><br>`
make the default in the UI be hiding replies and hiding boosts. This is really to reduce latency for users. Boosts take forever to fetch and replies are not something people usually want to see. 2019-08-03 00:37:15 +02:00			`<label>Hide replies?<input type="checkbox" id="hidereplies" checked="checked"></label><br>`
			`<label>Hide boosts?<input type="checkbox" id="hideboosts" checked="checked"></label><br>`
allow people to filter out replies and/or boosts 2018-03-24 19:01:26 +01:00
			`<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>`
make v1 API redirect to the v2 api after parsing parameters 2019-08-02 17:33:15 +02:00			`<iframe id="frame" allowfullscreen sandbox="allow-top-navigation allow-scripts" width="400" height="800" src="/apiv2/feed?userurl=https%3A%2F%2Foctodon.social%2Fusers%2Ffenwick67&replies=false&boosts=true"></iframe>`
allow people to filter out replies and/or boosts 2018-03-24 19:01:26 +01:00			`<br>`
			`</div>`
			`<script>`
			`window.genUrl = function genUrl(){`
			`function val(id){`
			`return document.getElementById(id).value;`
			`}`

make v1 API redirect to the v2 api after parsing parameters 2019-08-02 17:33:15 +02:00			`var inUrl = 'https://' + val('urlin') + '/users/'+val('usernamein');`
allow people to filter out replies and/or boosts 2018-03-24 19:01:26 +01:00
make v1 API redirect to the v2 api after parsing parameters 2019-08-02 17:33:15 +02:00			`var showBoosts = (!document.getElementById('hideboosts').checked).toString();`
			`var showReplies = (!document.getElementById('hidereplies').checked).toString();`
allow people to filter out replies and/or boosts 2018-03-24 19:01:26 +01:00
			`var iframeUrl = window.location.protocol + '//'+ window.location.hostname +((window.location.port && window.location.port!=80)?(':'+window.location.port):'')`
make v1 API redirect to the v2 api after parsing parameters 2019-08-02 17:33:15 +02:00			`+"/apiv2/feed?userurl="+encodeURIComponent(inUrl)+"&theme="+val('theme')+'&size='+val('size')`
allow people to filter out replies and/or boosts 2018-03-24 19:01:26 +01:00			`+ "&header="+(document.getElementById('header').checked.toString())+'&replies='+showReplies+'&boosts='+showBoosts;`

			`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>`