Compare commits
5 Commits
353ed600ef
...
c09470ca9a
Author | SHA1 | Date |
---|---|---|
ideclon | c09470ca9a | |
ideclon | e175c2d12c | |
ideclon | 3a39ccc847 | |
ideclon | 2f29378f99 | |
ideclon | 6fbc2b7e9a |
|
@ -0,0 +1,22 @@
|
|||
# Mastodon Algorithm - Frontend / Client
|
||||
|
||||
This repo contains the frontend for [ideclon's](https://ideclon.uk) Mastodon Algorithm project.
|
||||
|
||||
**This project relies on [AppWrite](https://appwrite.io). You must have an AppWrite instance to run this project**
|
||||
|
||||
# Deploy frontend
|
||||
The frontend currently requires PHP, which is solely used for templating, because I know PHP. I plan to replace it with some templating language which will compile to plan HTML at some point.
|
||||
|
||||
## Connect to Appwrite
|
||||
Navigate to your Appwrite instance's UI. Go to Overview > Integrations. Select the Platforms tab and click "Add Platform". Select "Web App" from the dropdown.
|
||||
|
||||
Enter a name (this can be whatever you want) and enter the URL of the frontend. Click Next, then Skip optional step.
|
||||
|
||||
You'll need to set the following enviroment vars for this project. Alternatively, you could fill in the required variables in `template/footer.php`.
|
||||
|
||||
* `APPWRITE_ENDPOINT`: You can find this at Settings > API Credentials > API Endpoint
|
||||
* `APPWRITE_PROJECT_ID`: You can find this at Settings > API Credentials > Project ID
|
||||
* `APPWRITE_DB_ID`: You'll need this from when you set up the server components
|
||||
|
||||
# Create a user
|
||||
There's currently no way to create a user from the frontend. You'll need to do so from the Appwrite UI at Auth > Create User.
|
|
@ -1,4 +1,6 @@
|
|||
<?php require("template/header.html")?>
|
||||
You are connected to Mastodon as <b><span class='mastodon_user'></span></b> on server <b><span class="mastodon_server"></span></b>
|
||||
|
||||
<br><br><a href="suggestions.php">Go to your suggestions</a>
|
||||
|
||||
<?php $script = 'js/index.js'; require("template/footer.php")?>
|
|
@ -1,3 +1,5 @@
|
|||
import {account, functions, accountDetails} from './setup.js';
|
||||
|
||||
account.getPrefs().then((response) => {
|
||||
if(response.user_token !== undefined) {
|
||||
message_box('info', 'You\'re already conneted! <a href="/">Go home</a>');
|
||||
|
@ -18,7 +20,7 @@ document.getElementById('instance-connect').addEventListener('submit', (event) =
|
|||
|
||||
const server_url = document.getElementById('server-url').value;
|
||||
|
||||
functions.createExecution('servers', '{"action": "register_server", "user_id": "' + accountDetailsPromise['$id'] + '", "server_url": "' + server_url + '"}')
|
||||
functions.createExecution('servers', '{"action": "register_server", "user_id": "' + accountDetails['$id'] + '", "server_url": "' + server_url + '"}')
|
||||
.then((res) => {
|
||||
// console.log(JSON.parse(res.response)['redirect_uri']);
|
||||
window.location.href = JSON.parse(res.response).redirect_uri;
|
||||
|
|
|
@ -49,4 +49,4 @@ export function message_box(type, message) {
|
|||
message_box.style.display = 'block';
|
||||
}
|
||||
|
||||
export { account, databases, functions, accountDetails };
|
||||
export { client, account, databases, functions, accountDetails };
|
|
@ -0,0 +1,43 @@
|
|||
import {client, databases, accountDetails} from "./setup.js";
|
||||
|
||||
document.querySelectorAll('.mastodon_server').forEach((element) => {
|
||||
element.innerHTML = accountDetails.prefs.user_server_uri
|
||||
});
|
||||
|
||||
document.querySelectorAll('.mastodon_user').forEach((element) => {
|
||||
element.innerHTML = JSON.parse(accountDetails.prefs.account_details).acct
|
||||
});
|
||||
|
||||
let suggestions = await databases.listDocuments(APPWRITE_DB_ID, 'suggested', [
|
||||
Appwrite.Query.orderDesc('points')
|
||||
]);
|
||||
|
||||
suggestions = suggestions.documents;
|
||||
|
||||
function display_suggestions(suggestions) {
|
||||
let suggestion_body = '';
|
||||
|
||||
suggestions.forEach(element => {
|
||||
suggestion_body += '<iframe src="' + element.post_link + '/embed" class=\"mastodon-embed\" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><br>';
|
||||
suggestion_body += '<a href="' + element.local_link + '" target="blank">View on your homeserver - ' + element.points + ' points</a><br><br>';
|
||||
});
|
||||
|
||||
if(suggestion_body !== '') {
|
||||
document.getElementById('suggestions').innerHTML = suggestion_body;
|
||||
}
|
||||
}
|
||||
|
||||
display_suggestions(suggestions);
|
||||
|
||||
console.log(suggestions);
|
||||
|
||||
client.subscribe('databases.' + APPWRITE_DB_ID + '.collections.suggested.documents', async (response) => {
|
||||
// suggestions.push(response.payload);
|
||||
let suggestions = await databases.listDocuments(APPWRITE_DB_ID, 'suggested', [
|
||||
Appwrite.Query.orderDesc('points')
|
||||
]);
|
||||
|
||||
suggestions = suggestions.documents;
|
||||
|
||||
display_suggestions(suggestions);
|
||||
});
|
|
@ -5,7 +5,9 @@ if(!isset($_GET['code'])) {
|
|||
require('template/header.html');
|
||||
require('template/footer.php');
|
||||
?>
|
||||
<script>
|
||||
<script type="module">
|
||||
import {functions} from './js/setup.js';
|
||||
|
||||
const urlparams = new URLSearchParams(window.location.search);
|
||||
|
||||
functions.createExecution('servers', '{"action": "redirect_code", "user_id": "' + urlparams.get('user_id') + '", "code": "' + urlparams.get('code') + '"}').then((res) => {
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
<?php require("template/header.html")?>
|
||||
You are connected to Mastodon as <b><span class='mastodon_user'></span></b> on server <b><span class="mastodon_server"></span></b>
|
||||
|
||||
<h4>Your suggestions</h4>
|
||||
<span id="suggestions">You have no suggestions yet</span>
|
||||
|
||||
<?php $script = 'js/suggestions.js'; require("template/footer.php")?>
|
|
@ -5,4 +5,5 @@ const APPWRITE_PROJECT_ID = '<?=getenv('APPWRITE_PROJECT_ID')?>';
|
|||
const APPWRITE_DB_ID = '<?=getenv('APPWRITE_DB_ID')?>';
|
||||
</script>
|
||||
<script type="module" src="js/setup.js"></script>
|
||||
<?=(isset($script))?"<script type='module' src=\"$script\"></script>":''?>
|
||||
<?=(isset($script))?"<script type='module' src=\"$script\"></script>":''?>
|
||||
<script src="https://mastodon.social/embed.js" async="async"></script>
|
Loading…
Reference in New Issue