style improvements

.github/workflows/update.yml

@@ -26,7 +26,7 @@ jobs:
           MASTODON_BASE_URL: ${{ secrets.MASTODON_BASE_URL }}
           MASTODON_USERNAME: ${{ secrets.MASTODON_USERNAME }}
         run: |
-          python run.py -n 12 -s SimpleWeighted -t normal
+          python run.py -n 12 -s SimpleWeighted -t lax
       - name: publish
         uses: crazy-max/ghaction-github-pages@v3
         with:

formatters.py

@@ -0,0 +1,50 @@
+def format_post(post, mastodon_base_url) -> dict:
+
+    def format_media(media):
+        formats = {
+            'image': f'<img src={media["url"]} alt={media["description"] if media["description"] != None else ""}></img>',
+            'video': f'<video src={media["url"]} controls width="100%"></video>'
+        }
+        if formats.__contains__(media.type):
+            return formats[media.type]
+        else:
+            return ""
+
+    def format_displayname(display_name, emojis):
+        for emoji in emojis:
+            display_name = display_name.replace(f':{emoji["shortcode"]}:', f'<img alt={emoji["shortcode"]} src="{emoji["url"]}">')
+        return display_name
+
+    account_avatar = post.data['account']['avatar']
+    account_url = post.data['account']['url']
+    display_name = format_displayname(
+        post.data['account']['display_name'],
+        post.data['account']['emojis']
+    )
+    username = post.data['account']['username']
+    content = post.data['content']
+    media = "\n".join([format_media(media) for media in post.data.media_attachments])
+    created_at = post.data['created_at'].strftime('%B %d, %Y at %H:%M')
+    home_link = f'<a href="{post.get_home_url(mastodon_base_url)}" target="_blank">home</a>'
+    original_link = f'<a href="{post.data.url}" target="_blank">original</a>'
+    replies_count = post.data['replies_count']
+    reblogs_count = post.data['reblogs_count']
+    favourites_count = post.data['favourites_count']
+
+    return dict(
+        account_avatar=account_avatar,
+        account_url=account_url,
+        display_name=display_name,
+        username=username,
+        content=content,
+        media=media,
+        created_at=created_at,
+        home_link=home_link,
+        original_link=original_link,
+        replies_count=replies_count,
+        reblogs_count=reblogs_count,
+        favourites_count=favourites_count
+    )
+
+def format_posts(posts, mastodon_base_url):
+    return [format_post(post, mastodon_base_url) for post in posts]

models.py

@@ -21,19 +21,5 @@ def get_score(self, scorer: Scorer) -> float:
         return scorer.score(self)
 
     @property
-    def account(self) -> dict:
-        return self.info.account
-
-    @property
-    def content(self) -> str:
-        return self.info.content
-
-    @property
-    def media(self) -> str:
-        medias = []
-        for media in self.info.media_attachments:
-            if media.type == 'image':
-                medias.append(f'<img src={media.url}></img>')
-            elif media.type == 'gifv':
-                medias.append(f'<video src={media.url} autoplay="true" loop="true"></video>')
-        return '\n'.join(medias)
+    def data(self):
+        return self.info

render/style.css

@@ -0,0 +1,131 @@
+body {
+  background-color: #f9f9f9;
+  color: #3e3d41;
+  text-align: left;
+  display: flex;
+  justify-content: center;
+}
+
+#render-description, #scorer, #threshold {
+  opacity: .7;
+  font-size: .9em;
+}
+
+#render-description span, #scorer span, #threshold span {
+  font-weight: bold;
+}
+
+
+#container {
+  width: 100%;
+  max-width: 900px;
+  flex-direction: column;
+  margin: 10px;
+  line-height: 1.6;
+}
+
+.post {
+  background-color: #fff;
+  padding: 18px 20px;
+  border: 1px solid #E6E3E1;
+  border-radius: 10px;
+  display: flex;
+  flex-start: left;
+  margin: 15px;
+  box-shadow: 0.2px 0.4px 0.8px -10px rgba(0,0,0,0.03), 0.4px 0.9px 2px -10px rgba(0,0,0,0.030), 0.8px 1.8px 3.8px -10px rgba(0,0,0,0.038), 1.3px 3.1px 6.7px -10px rgba(0,0,0,0.045), 2.5px 5.8px 12.5px -10px rgba(0,0,0,0.06), 6px 14px 30px -10px rgba(0,0,0,0.08);
+}
+
+.post a {
+  text-decoration: none;
+}
+
+.avatar {
+  max-width: 64px;
+  min-width: 64px;
+  height: 64px;
+}
+.avatar img {
+  max-width: 100%;
+  border-radius: 50%;
+  border: 1px solid #E6E3E1;
+}
+
+.status {
+  margin-left: 20px;
+}
+
+.user a {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column
+}
+
+.username {
+}
+
+.displayname {
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.displayname img {
+  height: 16px;
+  width: 16px;
+  vertical-align: middle;
+  object-fit: contain;
+}
+
+.content {
+  color: #3e3d41;
+  font-size: 14px;
+  padding: 15px 15px 15px 0px;
+}
+
+.media {
+  padding-bottom: 15px;
+}
+
+.content p {
+  max-width: none;
+  margin: 15px 0px;
+}
+.post a {
+  color: #5d4f84;
+}
+.content a:hover {
+  color: #4d54d1;
+}
+
+.content .invisible {
+  opacity: .7;
+}
+
+.status a:not(.hashtag):not(.mention) span:not(.invisible){
+  font-weight: bold
+}
+
+.home-link, .original-link, a.hashtag, a.mention, .footer .links a {
+  text-decoration: none;
+  opacity: .8;
+  background-color: #e9e9f5;
+  padding: 0 5px;
+  border-radius: 5px;
+}
+
+.media img, .media video {
+  max-width: 100%;
+  max-height: 300px;
+}
+
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  font-size: .8em;
+  opacity: .7;
+}
+
+.footer div {
+  padding-right: 10px;
+}
+

run.py

@@ -13,6 +13,7 @@
 from api import fetch_posts_and_boosts
 from scorers import get_scorers
 from thresholds import get_threshold_from_name, get_thresholds
+from formatters import format_posts
 
 if TYPE_CHECKING:
     from scorers import Scorer
@@ -48,8 +49,12 @@ def run(
     posts, boosts = fetch_posts_and_boosts(hours, mst, mastodon_username)
 
     # 2. Score them, and return those that meet our threshold
-    threshold_posts = threshold.posts_meeting_criteria(posts, scorer)
-    threshold_boosts = threshold.posts_meeting_criteria(boosts, scorer)
+    threshold_posts = format_posts(
+        threshold.posts_meeting_criteria(posts, scorer),
+        mastodon_base_url)
+    threshold_boosts = format_posts(
+        threshold.posts_meeting_criteria(boosts, scorer),
+        mastodon_base_url)
 
     # 3. Build the digest
     render_digest(

templates/digest.html.jinja

@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     {% include "style.html.jinja" %}
-    <!-- <script src="https://static-cdn.mastodon.social/embed.js" async="async"></script> -->
   </head>
   <body>
     <div id="container">

templates/posts.html.jinja

@@ -1,15 +1,50 @@
 {% for post in posts %}
+
 <div class="post">
-    <a class="home-link" href="{{ post.get_home_url(mastodon_base_url) }}" target="_blank">Home Link</a>
-    <span class="link-divider"> | </span>
-    <a class="original-link" href="{{ post.url }}" target="_blank">Original Link</a>
-    <br />
-    <div class="toot">
-      <div class="avatar"><a target="_blank" href="{{ post.account['url'] }}"><img src="{{ post.account['avatar'] }}"></a></div>
+
+  <div class="avatar">
+    <a target="_blank" href="{{ post['account_url'] }}">
+      <img src="{{ post['account_avatar'] }}">
+    </a>
+  </div>
+
+  <div class="status">  
+    <div class="user">
+      <a target="_blank" href="{{ post['account_url'] }}">
+	<span class="displayname">{{ post['display_name'] }}</span>
+	<span class="username">@{{ post['username'] }}</span>
+      </a>
+    </div>
+
+    <div class="status_content">
       <div class="content">
-	<div class="user"><a target="_blank" href="{{ post.account['url'] }}"><span class="displayname">{{ post.account['display_name'] }}</span><span class="username">@{{ post.account['username'] }}</span></a></div>
-	<div class="status">{{ post.content }}{{ post.media }}</div>
+	{{ post['content'] }}
+      </div>
+     {% if post['media'] %}
+      <div class="media">
+	{{ post['media'] }}
+      </div>
+     {% endif %}
+    </div>
+
+    <div class="footer">
+
+      <div class="date">{{ post['created_at']}} UTC</div>
+
+      <div class="links">
+	{{ post['home_link'] }}
+	{{ post['original_link'] }}
+      </div>
+
+      <div class="reactions">
+	<span>⥄ {{post['replies_count']}}</span>
+	<span>◌ {{post['reblogs_count']}}</span>
+	<span>★ {{post['favourites_count']}}</span>
       </div>
+
     </div>
+
+  </div>
 </div>
+
 {% endfor %}