add misskey to web pages

assets/instance_buttons.js

@@ -3,13 +3,22 @@ import {SLOTS, normalize_known, known_load, known_save} from './known_instances.
 (function instance_buttons(){
 
     const container = document.querySelector('#mastodon_instance_buttons');
-    const button_template = Function('first', 'instance',
-        'return `' + document.querySelector('#instance_button_template').innerHTML + '`;');
-    const another_button_template = Function(
+    const mastodon_button_template = Function('first', 'instance',
+        'return `' + document.querySelector('#mastodon_instance_button_template').innerHTML + '`;');
+    const mastodon_another_button_template = Function(
         'return `' +
-            document.querySelector('#another_instance_button_template').innerHTML + '`;');
-    const top_instances =
-        Function('return JSON.parse(`' + document.querySelector('#top_instances').innerHTML + '`);')();
+            document.querySelector('#mastodon_another_instance_button_template').innerHTML + '`;');
+    const mastodon_top_instances =
+        Function('return JSON.parse(`' + document.querySelector('#mastodon_top_instances').innerHTML + '`);')();
+		
+	const misskey_container = document.querySelector('#misskey_instance_buttons');
+    const misskey_button_template = Function('first', 'instance',
+        'return `' + document.querySelector('#misskey_instance_button_template').innerHTML + '`;');
+    const misskey_another_button_template = Function(
+        'return `' +
+            document.querySelector('#misskey_another_instance_button_template').innerHTML + '`;');
+    const misskey_top_instances =
+        Function('return JSON.parse(`' + document.querySelector('#misskey_top_instances').innerHTML + '`);')();
 
     async function get_known(){
         let known = known_load();
@@ -39,7 +48,7 @@ import {SLOTS, normalize_known, known_load, known_save} from './known_instances.
         known_save(known);
 
         let filtered_top_instances = []
-        for(let instance of top_instances){
+        for(let instance of mastodon_top_instances){
             let found = false;
             for(let k of known){
                 if(k['instance'] == instance['instance']){
@@ -58,13 +67,13 @@ import {SLOTS, normalize_known, known_load, known_save} from './known_instances.
 
         let first = true;
         for(let instance of instances){
-            html += button_template(first, instance['instance'])
+            html += mastodon_button_template(first, instance['instance'])
             first = false;
         }
 
-        html += another_button_template();
+        html += mastodon_another_button_template();
 
-        container.innerHTML = html;
+        mastodon_container.innerHTML = html;
     }
 
     replace_buttons();

templates/about.html

@@ -46,9 +46,35 @@
 </a>
 {% endif %}
 
+</p>
+
+<p id='misskey_instance_buttons'>
+{% for instance in misskey_instances %}
+<a class='btn primary misskey-colored' href="{{ url_for('misskey_login', instance_url=instance) }}">
+{% if loop.first %}
+    {{picture(st, 'misskey', (20,40,80), ('webp', 'png'))}}
+    Log in with
+{% endif %}
+        {{instance}}
+</a>
+{% else %}
+<a class='btn primary misskey-colored' href="{{ url_for('misskey_login') }}">
+    {{picture(st, 'misskey', (20,40,80), ('webp', 'png'))}}
+    Log in with Misskey
+</a>
+{% endfor %}
+
+
+{% if misskey_instances %}
+<a class='btn secondary' href="{{ url_for('misskey_login') }}">
+    Another Misskey instance
+</a>
+{% endif %}
+
 </p>
 </section>
 
+<!-- Mastodon -->
 
 <script type="application/json" id="top_instances">
 [
@@ -61,7 +87,7 @@
 ]
 </script>
 
-<script type="text/html+template" id="instance_button_template">
+<script type="text/html+template" id="mastodon_instance_button_template">
     <a class='btn primary mastodon-colored'
         href="{{ url_for('mastodon_login_step1') }}?instance_url=${encodeURIComponent(instance)}">
         ${ !first? '' : `
@@ -72,12 +98,43 @@
     </a>
 </script>
 
-<script type="text/html+template" id="another_instance_button_template">
+<script type="text/html+template" id="mastodon_another_instance_button_template">
     <a class='btn secondary' href="{{ url_for('mastodon_login_step1') }}">
         Another Mastodon instance
     </a>
 </script>
 
+<!-- Misskey -->
+
+<script type="application/json" id="top_instances_mk">
+[
+{% for instance in misskey_instances %}
+    {"instance": "{{instance}}"}
+    {%- if not loop.last -%}
+    ,
+    {%- endif %}
+{% endfor %}
+]
+</script>
+
+<script type="text/html+template" id="misskey_instance_button_template">
+    <a class='btn primary misskey-colored'
+        href="{{ url_for('misskey_login') }}?instance_url=${encodeURIComponent(instance)}">
+        ${ !first? '' : `
+            {{picture(st, 'misskey', (20,40,80), ('webp', 'png'))}}
+            Log in with
+            `}
+        ${ instance }
+    </a>
+</script>
+
+<script type="text/html+template" id="misskey_another_instance_button_template">
+    <a class='btn secondary' href="{{ url_for('misskey_login') }}">
+        Another Misskey instance
+    </a>
+</script>
+
+
 
 {% endif %}
 
@@ -86,7 +143,7 @@
 <ul>
     <li>Delete your posts when they cross an age threshold.</li>
     <li>Or keep your post count in check, deleting old posts when you go over.</li>
-    <li>Preserve old posts that matter by giving them a favourite.</li>
+    <li>Preserve old posts that matter by giving them a favourite or a reaction (Misskey only).</li>
     <li>Set it and <i>forget</i> it. Forget works continuously in the background.</li>
 </ul>
 </section>

templates/misskey_login.html

@@ -0,0 +1,29 @@
+{% extends 'lib/layout.html' %}
+{% block body %}
+<section>
+    <h2>Log in with Misskey</h2>
+
+{% if generic_error %}
+    <div class='banner error'>Something went wrong while logging in. Try again?</div>
+{% endif %}
+
+{% if address_error %}
+    <div class='banner error'>This doesn't look like a misskey instance url. Try again?</div>
+{% endif %}
+
+    <form method='post'>
+        <label>misskey instance:
+            <input type='text' name='instance_url' list='instances' placeholder='social.example.net'/>
+        </label>
+        <datalist id='instances'>
+            <option value=''>
+            {% for instance in instances %}
+            <option value='{{instance}}'>
+            {% endfor %}
+        </datalist>
+        <input name='confirm' value='Log in' type='submit'/>
+    </form>
+
+</div>
+</section>
+{% endblock %}