add README

README.md

@@ -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.

index.php

@@ -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")?>

js/connect.js

@@ -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;

js/setup.js

@@ -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 };

js/suggestions.js

@@ -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);
+});

redirect.php

@@ -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) => {

suggestions.php

@@ -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")?>

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>