Tweaked the header CSS, started to work on the liked public page

app.py

@@ -118,6 +118,11 @@ def inject_config():
     with_replies_count = DB.outbox.find(
         {"$or": [q, {"type": "Announce", "meta.undo": False}]}
     ).count()
+    liked_count = DB.outbox.count({
+        "meta.deleted": False,
+        "meta.undo": False,
+        "type": ActivityType.LIKE.value,
+    })
     return dict(
         microblogpub_version=VERSION,
         config=config,
@@ -125,6 +130,7 @@ def inject_config():
         followers_count=DB.followers.count(),
         following_count=DB.following.count(),
         notes_count=notes_count,
+        liked_count=liked_count,
         with_replies_count=with_replies_count,
     )
 
@@ -520,8 +526,10 @@ def _build_thread(data, include_children=True):
     root_id = data["meta"].get("thread_root_parent", data["activity"]["object"]["id"])
 
     query = {"$or": [{"meta.thread_root_parent": root_id, "type": "Create"}]}
-    if data['activity']['object'].get('inReplyTo'):
+    if data["activity"]["object"].get("inReplyTo"):
-        query['$or'].append({'activity.object.id': data['activity']['object']['inReplyTo']})
+        query["$or"].append(
+            {"activity.object.id": data["activity"]["object"]["inReplyTo"]}
+        )
 
     # Fetch the root replies, and the children
     replies = (
@@ -1411,7 +1419,18 @@ def tags(tag):
 @app.route("/liked")
 def liked():
     if not is_api_request():
-        abort(404)
+        return render_template(
+            "liked.html",
+            me=ME,
+            liked=DB.outbox.find(
+                {
+                    "type": ActivityType.LIKE.value,
+                    "meta.deleted": False,
+                    "meta.undo": False,
+                }
+            ),
+        )
+
     q = {"meta.deleted": False, "meta.undo": False, "type": ActivityType.LIKE.value}
     return jsonify(
         **activitypub.build_ordered_collection(

sass/base_theme.scss

@@ -51,7 +51,7 @@ a:hover {
 }
 
 #header {
-  margin-bottom: 60px;
+  margin-bottom: 70px;
 
   .title {
     font-size: 1.2em;
@@ -65,7 +65,8 @@ a:hover {
     color: $color;
   }
   .menu {
-    padding: 20px 0 10px 0;
+    clear: both;
+    padding: 0 0 10px 0;
     ul {
       display: inline;
       list-style-type: none;
@@ -226,7 +227,7 @@ form.action-form {
   color: $color-summary;
   font-size: 1.3em;
   margin-top: 10px;
-  margin-bottom: 50px;
+  margin-bottom: 30px;
 }
 .summary a, .summay a:hover {
   color: $color-summary;

static/css/theme.css

@@ -1 +1 @@
-.note-container p:first-child{margin-top:0}html,body{height:100%}body{background-color:#eee;color:#111;display:flex;flex-direction:column}.base-container{flex:1 0 auto}.footer{flex-shrink:0}a,h1,h2,h3,h4,h5,h6{color:#333}a{text-decoration:none}a:hover{text-decoration:underline}.gold{color:#1d781d}#header{margin-bottom:60px}#header .title{font-size:1.2em;padding-right:15px;color:#333}#header .title:hover{text-decoration:none}#header .subtitle-username{color:#111}#header .menu{padding:20px 0 10px 0}#header .menu ul{display:inline;list-style-type:none;padding:0}#header .menu ul li{float:left;padding-right:10px;margin-bottom:10px}#header .menu a{padding:5px 10px}#header .menu a small.badge{background-color:#ddd;color:#555;border-radius:2px;margin-left:5px;padding:3px 5px 0px 5px;font-weight:bold}#header .menu a.selected{background:#1d781d;color:#eee;border-radius:2px}#header .menu a.selected .badge{color:#1d781d;background:#eee}#header .menu a:hover{background:#1d781d;color:#eee;text-decoration:none;border-radius:2px}#header .menu a:hover .badge{color:#1d781d;background:#eee}#container{width:90%;max-width:720px;margin:40px auto}#container #notes{margin-top:20px}.actor-box{display:block;text-decoration:none;margin-bottom:40px}.actor-box .actor-icon{width:120px;border-radius:2px}.actor-box h3{margin:0}.actor-box .actor-inline{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.actor-box-big{display:block;text-decoration:none}.actor-box-big .actor-box-wrapper{margin-bottom:40px}.actor-box-big .actor-box-wrapper .actor-icon{width:120px;border-radius:2px}.actor-box-big .actor-box-wrapper h3{margin:0}.note{display:flex;margin-bottom:70px}.note .l{color:#333}.note .h-card{flex:initial;width:50px}.note .u-photo{width:50px;border-radius:2px}.note .note-wrapper{flex:1;padding-left:15px}.note .bottom-bar{margin-top:10px}.note .img-attachment{max-width:100%;border-radius:2px}.note h3{font-size:1.1em;color:#555}.note strong{font-weight:600}.note .note-container{clear:right;padding:10px 0}.bar-item{background:#ddd;padding:5px;color:#555;margin-right:5px;border-radius:2px}button.bar-item{border:0}form.action-form{display:inline}.perma{font-size:1.25em}.bottom-bar .perma-item{margin-right:5px}.bottom-bar a.bar-item:hover{text-decoration:none}.footer>div{width:90%;max-width:720px;margin:40px auto}.footer a,.footer a:hover,.footer a:visited{text-decoration:underline;color:#111}.summary{color:#111;font-size:1.3em;margin-top:10px;margin-bottom:50px}.summary a,.summay a:hover{color:#111;text-decoration:underline}#followers,#following,#new{margin-top:50px}#admin{margin-top:50px}textarea,input{background:#ddd;padding:10px;color:#555;border:0px;border-radius:2px}input{padding:10px}input[type=submit]{color:#1d781d;text-transform:uppercase}
+.note-container p:first-child{margin-top:0}html,body{height:100%}body{background-color:#eee;color:#111;display:flex;flex-direction:column}.base-container{flex:1 0 auto}.footer{flex-shrink:0}a,h1,h2,h3,h4,h5,h6{color:#333}a{text-decoration:none}a:hover{text-decoration:underline}.gold{color:#1d781d}#header{margin-bottom:70px}#header .title{font-size:1.2em;padding-right:15px;color:#333}#header .title:hover{text-decoration:none}#header .subtitle-username{color:#111}#header .menu{clear:both;padding:0 0 10px 0}#header .menu ul{display:inline;list-style-type:none;padding:0}#header .menu ul li{float:left;padding-right:10px;margin-bottom:10px}#header .menu a{padding:5px 10px}#header .menu a small.badge{background-color:#ddd;color:#555;border-radius:2px;margin-left:5px;padding:3px 5px 0px 5px;font-weight:bold}#header .menu a.selected{background:#1d781d;color:#eee;border-radius:2px}#header .menu a.selected .badge{color:#1d781d;background:#eee}#header .menu a:hover{background:#1d781d;color:#eee;text-decoration:none;border-radius:2px}#header .menu a:hover .badge{color:#1d781d;background:#eee}#container{width:90%;max-width:720px;margin:40px auto}#container #notes{margin-top:20px}.actor-box{display:block;text-decoration:none;margin-bottom:40px}.actor-box .actor-icon{width:120px;border-radius:2px}.actor-box h3{margin:0}.actor-box .actor-inline{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.actor-box-big{display:block;text-decoration:none}.actor-box-big .actor-box-wrapper{margin-bottom:40px}.actor-box-big .actor-box-wrapper .actor-icon{width:120px;border-radius:2px}.actor-box-big .actor-box-wrapper h3{margin:0}.note{display:flex;margin-bottom:70px}.note .l{color:#333}.note .h-card{flex:initial;width:50px}.note .u-photo{width:50px;border-radius:2px}.note .note-wrapper{flex:1;padding-left:15px}.note .bottom-bar{margin-top:10px}.note .img-attachment{max-width:100%;border-radius:2px}.note h3{font-size:1.1em;color:#555}.note strong{font-weight:600}.note .note-container{clear:right;padding:10px 0}.bar-item{background:#ddd;padding:5px;color:#555;margin-right:5px;border-radius:2px}button.bar-item{border:0}form.action-form{display:inline}.perma{font-size:1.25em}.bottom-bar .perma-item{margin-right:5px}.bottom-bar a.bar-item:hover{text-decoration:none}.footer>div{width:90%;max-width:720px;margin:40px auto}.footer a,.footer a:hover,.footer a:visited{text-decoration:underline;color:#111}.summary{color:#111;font-size:1.3em;margin-top:10px;margin-bottom:30px}.summary a,.summay a:hover{color:#111;text-decoration:underline}#followers,#following,#new{margin-top:50px}#admin{margin-top:50px}textarea,input{background:#ddd;padding:10px;color:#555;border:0px;border-radius:2px}input{padding:10px}input[type=submit]{color:#1d781d;text-transform:uppercase}

templates/header.html

@@ -1,17 +1,21 @@
 <div id="header">
 <div class="h-card p-author">
-<data class="u-photo" value="{{ config.ME.icon.url }}">
+<data class="u-photo" value="{{ config.ME.icon.url }}"></data>
 <a href="{{ config.ID }}" class="u-url u-uid no-hover title">
 	<span style="font-size:1.1em;">{{ config.NAME }}</span>
 	<span  style="font-size:0.85em;" class="subtitle-username">@<span class="gold p-name">{{ config.USERNAME }}</span>@<span class="gold">{{ config.DOMAIN }}</span>
+    <small><a style="background:#ddd;padding:5px 8px;margin-top:5px;border-radius:2px;text-decoration:none;" href="/remote_follow">remote follow</a></small>
 	</span>
 </a>
-<data class="p-note" value="{{ config.ME.summary }}">
+<div class="p-note summary">
+{{ config.SUMMARY | safe }}
+</div>
 </div>
 <div class="menu">
 <ul>
 <li><a href="/" {% if request.path == "/" %}class="selected"{% endif %}>notes <small class="badge">{{ notes_count }}</small></a></li>
 <li><a href="/with_replies" {% if request.path == "/with_replies" %}class="selected"{% endif %}>with replies <small class="badge">{{ with_replies_count }}</small></a></li>
+<li><a href="/liked" {% if request.path == "/liked" %}class="selected"{% endif %}>liked <small class="badge">{{ liked_count }}</small></a></li>
 <li><a href="/followers"{% if request.path == "/followers" %} class="selected" {% endif %}>followers <small class="badge">{{ followers_count }}</small></a></li>
 <li><a href="/following"{% if request.path == "/following" %} class="selected" {% endif %}>following <small class="badge">{{ following_count }}</small></a></li>
 <!-- <li><a href="/about"{% if request.path == "/about" %} class="selected" {% endif %}>/about</a></li>
@@ -22,8 +26,6 @@
 <li><a href="/new"{% if request.path == "/new" %} class="selected" {% endif %}>/new</a></li>
 <li><a href="/admin"{% if request.path == "/admin" %} class="selected" {% endif %}>/admin</a></li>
 <li><a href="/logout">/logout</a></li>
-{% else %}
-<li><a href="/remote_follow"{% if request.path == "/remote_follow" %} class="selected" {% endif %}>remote follow</a></li>
 {% endif %}
 </ul>
 </div>

templates/index.html

@@ -16,14 +16,10 @@
 {% endblock %}
 {% block content %}
 <div class="h-feed" id="container">
-<data class="p-name" value="{{config.USERNAME}} notes">
+<data class="p-name" value="{{config.USERNAME}} notes"></data>
 
 {% include "header.html" %}
 
-<div class="summary">
-{{ config.SUMMARY | safe }}
-</div>
-
 <div id="notes">
 	{% for item in outbox_data %}
 

templates/utils.html

@@ -39,7 +39,7 @@
 <div class="h-card p-author">
 <a class="u-url u-uid no-hover" href="{{ actor.url }}"><img class="u-photo" src="{% if not actor.icon %}/static/nopic.png{% else %}{{ actor.icon.url }}{% endif %}">
 </a>
-<data class="p-name" value="{{ actor.name or actor.preferredUsername }}">
+<data class="p-name" value="{{ actor.name or actor.preferredUsername }}"></data>
 </div>
 
 <div class="note-wrapper">