136 lines
4.3 KiB
HTML
136 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="initial-scale=1" />
|
|
<title>Fedifeed - embeddable ActivityPub feeds</title>
|
|
<link rel="stylesheet" href="./css/stylesheet.css" />
|
|
<script src="./js/script.js" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
<br />
|
|
<div>
|
|
<h1>Fedifeed</h1>
|
|
<h4>Embedded Mastodon/Pleroma/Misskey feeds for blogs, websites, etc.</h4>
|
|
<a href="https://git.froth.zone/sam/fedifeed" class="cta button alt"
|
|
>Fork on Gitea
|
|
<img class="link-logo after" src="img/gitea-logo.svg" alt="Gitea Logo"
|
|
/></a>
|
|
<br />
|
|
<br />
|
|
<hr />
|
|
<br />
|
|
<form action="javascript:genUrl()">
|
|
<label
|
|
>Instance URL:<input
|
|
required
|
|
type="text"
|
|
id="urlin"
|
|
placeholder="froth.zone"
|
|
oninvalid="this.setCustomValidity('Insert your instance URL. Example: mastodon.social')"
|
|
oninput="this.setCustomValidity('')"
|
|
/></label>
|
|
<br />
|
|
<label
|
|
>Username:<input
|
|
required
|
|
type="text"
|
|
id="usernamein"
|
|
placeholder="sam"
|
|
oninvalid="this.setCustomValidity('Insert your username. Example: gargron')"
|
|
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="auto-auto">
|
|
auto-auto (depends on instance, automatic)
|
|
</option>
|
|
<option value="auto-dark" selected>
|
|
auto-dark (depends on instance, use dark)
|
|
</option>
|
|
<option value="auto-light">
|
|
auto-light (depends on instance, use light)
|
|
</option>
|
|
<option value="masto-dark">masto-dark</option>
|
|
<option value="masto-light">masto-light</option>
|
|
<option value="masto-auto">
|
|
masto-auto (based on css prefers-color-scheme)
|
|
</option>
|
|
<option value="misskey-dark">misskey-dark</option>
|
|
<option value="misskey-light">misskey-light</option>
|
|
<option value="misskey-auto">
|
|
misskey-auto (based on css prefers-color-scheme)
|
|
</option>
|
|
<option value="pleroma">pleroma</option>
|
|
</select>
|
|
</label>
|
|
<br />
|
|
<label
|
|
>Show Header?<input id="header" type="checkbox" checked="checked"
|
|
/></label>
|
|
<br />
|
|
<label>Hide replies?<input type="checkbox" id="hidereplies" /></label>
|
|
<br />
|
|
<label>Hide boosts?<input type="checkbox" id="hideboosts" /></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">
|
|
<iframe
|
|
id="frame"
|
|
title="Powered by Fedifeed"
|
|
allowfullscreen
|
|
sandbox="allow-top-navigation allow-scripts"
|
|
width="400"
|
|
height="800"
|
|
src="/api/v1/feed?user=sam&instance=https%3A%2F%2Ffroth.zone&instance_type=&theme=pleroma&size=100&header=true&replies=true&boosts=true"
|
|
></iframe>
|
|
</span>
|
|
<br />
|
|
</div>
|
|
</body>
|
|
</html>
|