UI: add followers and following pages

for #274, #264

app.py

@@ -23,7 +23,7 @@ app.json.compact = False
 app.url_map.converters['regex'] = flask_util.RegexConverter
 app.after_request(flask_util.default_modern_headers)
 app.register_error_handler(Exception, flask_util.handle_exception)
-if appengine_info.DEBUG:
+if appengine_info.LOCAL:
     flask_gae_static.init_app(app)
 
 # don't redirect API requests with blank path elements

index.yaml

@@ -18,3 +18,17 @@ indexes:
   - name: status
   - name: updated
     direction: desc
+
+- kind: Follower
+  properties:
+  - name: dest
+  - name: status
+  - name: updated
+    direction: desc
+
+- kind: Follower
+  properties:
+  - name: src
+  - name: status
+  - name: updated
+    direction: desc

pages.py

@@ -2,6 +2,7 @@
 import calendar
 import datetime
 from itertools import islice
+import re
 import urllib.parse
 
 from flask import render_template, request
@@ -51,6 +52,56 @@ def user(domain):
     )
 
 
+@app.get(f'/user/<regex("{common.DOMAIN_RE}"):domain>/followers')
+def followers(domain):
+    if not MagicKey.get_by_id(domain):
+      return render_template('user_not_found.html', domain=domain), 404
+
+    query = Follower.query(
+        Follower.status == 'active',
+        Follower.dest == domain,
+    ).order(-Follower.updated)
+    followers, before, after = fetch_page(query, Follower)
+
+    follower_links = [
+      util.pretty_link(
+        f.src,
+        text=re.sub(r'^https?://(.+)/(users/|@)(.+)$', r'@\3@\1', f.src),
+      ) for f in followers
+    ]
+
+    return render_template(
+        'followers.html',
+        util=util,
+        **locals()
+    )
+
+
+@app.get(f'/user/<regex("{common.DOMAIN_RE}"):domain>/following')
+def following(domain):
+    if not MagicKey.get_by_id(domain):
+      return render_template('user_not_found.html', domain=domain), 404
+
+    query = Follower.query(
+        Follower.status == 'active',
+        Follower.src == domain,
+    ).order(-Follower.updated)
+    followers, before, after = fetch_page(query, Follower)
+
+    follower_links = [
+      util.pretty_link(
+        f.src,
+        text=re.sub(r'^https?://(.+)/(users/|@)(.+)$', r'@\3@\1', f.dest),
+      ) for f in followers
+    ]
+
+    return render_template(
+        'following.html',
+        util=util,
+        **locals()
+    )
+
+
 @app.get('/recent')
 @app.get('/responses')  # deprecated
 def recent():

templates/_followers.html

@@ -0,0 +1,11 @@
+<br>
+
+<div class="row">
+{% for link in follower_links %}
+  <div class="col-sm-3">{{ link|safe }}</div>
+{% else %}
+  <div class="col-sm-3">None</div>
+{% endfor %}
+</div>
+
+{% include "paging.html" %}

templates/base.html

@@ -34,9 +34,9 @@
 <div id="header" class="col-xs-7">
 <p class="big">
 Got an <a href="https://indieweb.org/">IndieWeb</a> site?
-Want to interact with <a href="https://joinmastodon.org/">Mastodon</a>, <a href="https://project.hubzilla.org/">Hubzilla</a>,
+Want to interact with <a href="https://joinmastodon.org/">Mastodon</a>
 and the rest of the <a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>?
-<a id="title" href="/">Bridgy Fed</a> is for you.
+<a id="title" href="/" style="white-space: nowrap">Bridgy Fed</a> is for you.
 </p></div>
 </div>
 

templates/followers.html

@@ -5,13 +5,9 @@
 {% block content %}
 
 <h2 class="row">
-  <a href="https://{{ domain }}/">🌐 {{ domain }}</a>
+  <a href="https://{{ domain }}/">🌐 {{ domain }}</a>'s followers:
 </h2>
-<h3 class="row">
-  <a href="/user/{{ domain }}/followers">{{ followers }} follower{% if followers != '1' %}s{% endif %}</a>
-  <!-- | <a href="/user/{{ domain }}/following">{{ following }} following</a> -->
-</h3>
 
-{% include "responses.html" %}
+{% include "_followers.html" %}
 
 {% endblock %}

templates/following.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% block title %}{{ domain }}'s following - Bridgy Fed{% endblock %}
+
+{% block content %}
+
+<h2 class="row">
+  <a href="https://{{ domain }}/">🌐 {{ domain }}</a> is following:
+</h2>
+
+{% include "_followers.html" %}
+
+{% endblock %}

templates/paging.html

@@ -0,0 +1,13 @@
+<div class="row">
+<div class="col-sm-3">
+  {% if after %}
+    <a href="?after={{ after }}#responses">&larr; Newer</a>
+  {% endif %}
+</div>
+
+<div class="col-sm-3 col-sm-offset-6">
+  {% if before %}
+    <a href="?before={{ before }}#responses">Older &rarr;</a>
+  {% endif %}
+</div>
+</div>

templates/responses.html

@@ -20,16 +20,4 @@
 {% endfor %}
 <!-- </table> -->
 
-<div class="row">
-<div class="col-sm-3">
-  {% if after %}
-    <a href="?after={{ after }}#responses">&larr; Newer</a>
-  {% endif %}
-</div>
-
-<div class="col-sm-3 col-sm-offset-6">
-  {% if before %}
-    <a href="?before={{ before }}#responses">Older &rarr;</a>
-  {% endif %}
-</div>
-</div>
+{% include "paging.html" %}

templates/user.html

@@ -4,13 +4,17 @@
 
 {% block content %}
 
-<h2 class="row">
-  <a href="https://{{ domain }}/">🌐 {{ domain }}</a>
-</h2>
-<h3 class="row">
-  <a href="/user/{{ domain }}/followers">{{ followers }} follower{% if followers != '1' %}s{% endif %}</a>
-  <!-- | <a href="/user/{{ domain }}/following">{{ following }} following</a> -->
-</h3>
+<div class="row">
+  <h2 style="display: inline">
+    <a href="https://{{ domain }}/">🌐 {{ domain }}</a>
+  </h2>
+  <h3 style="display: inline">
+    | <a href="/user/{{ domain }}/followers">{{ followers }} follower{% if followers != '1' %}s{% endif %}</a>
+    | <a href="/user/{{ domain }}/following">following {{ following }}</a>
+  </h3>
+</div>
+
+<h3 class="row">Recent activity</h3>
 
 {% include "responses.html" %}