rss-to-activitypub/public/convert/index.html
2018-10-15 18:57:37 +02:00

89 lines
3.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Convert an RSS feed to ActivityPub</title>
<style>
body {font-family: sans-serif;display: flex;flex-direction: column;min-height: 100vh;max-width: 70%;min-width: 500px;margin: 0 auto;color: #9baec8;background: #313543;text-align: center}
header {margin-top:10px}
.box {background-color: #282c37; border-radius:4px;margin-bottom:10px}
header h1 {color:white}
footer {padding: 10px 0}
a {color: #d9e1e8}
fieldset {border: none;margin: 2.5em 0}
img {max-width: 100px}
li {margin-bottom: 0.2em}
input, button {width: 300px;font-size: 1.2em}
.hint {font-size: 0.8em}
input {box-sizing: border-box;font-size: 1em;color: #ffffff;font-family: inherit;background: #131419;border: 1px solid #0a0b0e;border-radius: 4px;padding: 10px}
input:focus, input:active {border-color: #79bd9a}
button {border: 0;border-radius: 4px;background: #2b90d9;color: #ffffff;text-transform: uppercase;text-align: center;cursor: pointer;padding: 10px 0;font-weight: bold}
#out {border-top: 1px solid #393f4f;color:white}
</style>
</head>
<body>
<header class=box>
<h1>🐘 Convert an RSS feed to ActivityPub</h1>
<p>Put the full RSS feed URL in here, and pick a username for the account that will track the feed.</p>
</header>
<article class=box>
<fieldset>
<p>
<input id="feed" type="text" placeholder="https://example.com/feed.xml" required/>
</p>
<p>
<input id="username" type="text" placeholder="username" required/><br><span class="hint">only letters, digits, and underscore (_) allowed</span>
</p>
<button onclick="submit()">Submit</button>
</fieldset>
<div id="out">
</div>
</article>
<footer class=box>
Created by <a href="https://github.com/dariusk">Darius Kazemi</a> under mit license, see on <a href="https://github.com/dariusk/activtypub-to-rss">GitHub</a>
</footer>
<script>
// https://bots.tinysubversions.com/api/convert/?feed=https://toomuchnotenough.site/feed.xml&username=tmne
function submit() {
let feed = document.querySelector('#feed').value;
let username = document.querySelector('#username').value;
let out = document.querySelector('#out');
fetch(`/api/convert/?feed=${feed}&username=${username}`)
.then(function(response) {
if (response.status !== 200) {
out.innerHTML = `<p>Error: ${JSON.stringify(response.statusText)}</p>`;
return {};
}
return response.json();
})
.then(function(myJson) {
console.log((myJson));
// a feed exists in the database
if (myJson.content) {
// was it a match on feed
if (myJson.feed === feed) {
console.log('feed match!');
out.innerHTML = `<p>This feed already exists! Follow @${myJson.username}@bots.tinysubversions.com.</p>`;
window.location = `/u/${myJson.username}`;
}
// was it a match on username
else if (myJson.username === username) {
console.log('username match!');
out.innerHTML = `<p>This username is already taken for <a href="${myJson.feed}">this feed</a>.</p>`;
}
}
else if (myJson.title) {
out.innerHTML = `<p>Okay! There is now an ActivityPub actor for ${myJson.title}. You should be able to search for it from your ActivityPub client (Mastodon, Pleroma, etc) using this identifier: @${username}@bots.tinysubversions.com. You won't see anything there until the next time the RSS feed updates. You can check out the profile page for this feed at <a href="https://bots.tinysubversions.com/u/${username}/">https://bots.tinysubversions.com/u/${username}</a> too!</p>`;
}
})
.catch(error => {
console.log('!!!',error);
out.innerHTML = `<p>Error: ${error}</p>`;
});
}
</script>
</body>
</html>