rss-to-activitypub/public/convert/index.html

137 lines
4.6 KiB
HTML
Raw Permalink Normal View History

2018-10-15 07:18:10 +03:00
<!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;
max-width: 800px;
2018-10-15 07:18:10 +03:00
margin: 30px;
}
img {
max-width: 100px;
}
li {
margin-bottom: 0.2em;
}
.account {
}
input {
width: 300px;
font-size: 1.2em;
}
.hint {
font-size: 0.8em;
}
button {
font-size: 1.2em;
}
</style>
</head>
<body>
<h1>Convert an RSS feed to ActivityPub</h1>
<p><em>by <a href="https://friend.camp/@darius">Darius Kazemi</a>, <a href="https://github.com/dariusk/rss-to-activitypub">source code here</a></em></p>
<div id="convert">
<p id="login-confirmed"></p>
2018-10-15 07:18:10 +03:00
<p>Put the full RSS feed URL in here, and pick a username for the account that will track the feed.</p>
<p>
<input id="feed" type="text" placeholder="https://example.com/feed.xml"/>
</p>
<p>
<input id="username" type="text" placeholder="username"/><br><span class="hint">only letters, digits, and underscore (_) allowed</span>
</p>
2019-02-24 08:26:24 +02:00
<p>Reminder: you won't see any posts on the account until the RSS feed updates at least once!</p>
2018-10-15 07:18:10 +03:00
<button onclick="submit()">Submit</button>
<div id="out">
</div>
</div>
<div id="login" hidden=true>
<p>You aren't logged in! <a href="/">Go here to log in.</a></p>
</div>
2018-10-15 07:18:10 +03:00
<script>
function submit() {
2018-11-06 19:45:33 +02:00
let domain = document.domain;
let feed = encodeURIComponent(document.querySelector('#feed').value);
2018-10-15 07:18:10 +03:00
let username = document.querySelector('#username').value;
let out = document.querySelector('#out');
fetch(`/api/convert/?feed=${feed}&username=${username}&token=${access_token}`)
2018-10-15 07:18:10 +03:00
.then(function(response) {
return response.json();
})
.then(function(myJson) {
if (myJson.err) {
out.innerHTML = `<p>Error: ${myJson.err}</p>`;
return {};
}
2018-10-15 07:18:10 +03:00
// a feed exists in the database
if (myJson.content) {
// was it a match on feed
if (myJson.feed === decodeURIComponent(feed)) {
2018-11-06 19:45:33 +02:00
out.innerHTML = `<p>This feed already exists! Follow @${myJson.username}@${domain}.</p>`;
2018-10-15 07:18:10 +03:00
window.location = `/u/${myJson.username}`;
}
// was it a match on username
else if (myJson.username === username) {
out.innerHTML = `<p>This username is already taken for <a href="${myJson.feed}">this feed</a>.</p>`;
}
}
else if (myJson.title) {
2018-11-06 19:45:33 +02:00
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}@${domain}. 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://${domain}/u/${username}/">https://${domain}/u/${username}</a> too!</p>`;
2018-10-15 07:18:10 +03:00
}
})
.catch(error => {
out.innerHTML = `<p>Error: ${error}</p>`;
});
}
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
if (!localStorage.getItem('rss-data')) {
localStorage.setItem('rss-data','{}');
}
let {access_token, domain} = JSON.parse(localStorage.getItem('rss-data'));
// if no access token in storage, no code in url
// hide app, show login prompt
if (!getUrlParameter('code') && !access_token) {
document.getElementById('convert').hidden = true;
document.getElementById('login').hidden = false;
}
// if no access token in storage, code in url
// send the code parameter to the server to get an access token
// store the result in localStorage, reload the page
if (getUrlParameter('code') && !access_token) {
fetch(`/api/request-token/?code=${getUrlParameter('code')}`)
.then((resp) => resp.json())
.then(data => {
localStorage.setItem('rss-data',JSON.stringify(data));
// reload without url parameters
window.location.href = window.location.origin + window.location.pathname;
});
}
// if we have an access token, then we can render our app
if (JSON.parse(localStorage.getItem('rss-data')).access_token) {
let {access_token, domain} = JSON.parse(localStorage.getItem('rss-data'));
document.getElementById('login').hidden = true;
document.getElementById('login-confirmed').innerHTML = `<p>Welcome! You are logged in via your <strong>${domain}</strong> account. <a href="#" onclick="logOut()">Click here</a> to log out.</p>`;
document.getElementById('convert').hidden = false;
}
function logOut() {
localStorage.removeItem('rss-data');
window.location = window.location;
}
</script>
2018-10-15 07:18:10 +03:00
</body>
</html>