From 28d7747d416bb72fe47967fd06ac1ab3fe9cc56c Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Fri, 26 Apr 2024 21:35:57 +0200
Subject: [PATCH] feat: add meta info per page

---
 README.md              |  4 ++-
 templates/threads.html | 64 +++++++++++++++++++++++++++---------------
 threads.py             |  2 +-
 3 files changed, 45 insertions(+), 25 deletions(-)
diff --git a/README.md b/README.md
index 21312bf..4b304e9 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 # Threads
 
-Show off your favorite public threads!
+Show off your favorite public threads and offer hand-picked, fine-grained, topical subscriptions!
+
+See it [in action](https://ayco.io/threads).
 
 ## Project setup
 
diff --git a/templates/threads.html b/templates/threads.html
index c6b2cd0..5d9ae48 100644
--- a/templates/threads.html
+++ b/templates/threads.html
@@ -4,6 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ app.title }}</title>
+    <meta name="theme-color" content="#3054bf">
+    {% if threads|length == 1 %}
+    <meta name="description" content="{{ threads[0].content }}" />
+    {% else %}
+    <meta name="description" content="{{ app.description  }}" />
+    {% endif %}
+    <meta name="author" content="{{ attribution.owner }}" />
+    <meta property="og:site_name" content="{{ app.title }}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{ app.title }}" />
+    <meta property="og:description" content="{{ app.description }}" />
+
     <link rel="stylesheet" href="https://webcomponent.io/reset.css" />
     <style>
       body {
@@ -13,9 +25,12 @@
         color: #232323;
         padding: 5px;
       }
-      header, footer, main {
+      header, footer {
         padding: 1em;
       }
+      main {
+        padding: 1em 0;
+      }
       header, footer {
         background: linear-gradient(45deg, #3054bf, #416fff);
         color: white;
@@ -151,7 +166,7 @@
   </head>
   <body>
     <header>
-      <nav><a href="/">go home</a></nav>
+      <nav><a href="/">Go home</a></nav>
       <h1>{{ app.title }}</h1>
       <p>{{ app.description }}</p>
     </header>
@@ -237,30 +252,33 @@
                     >
                   </h3>
                   <div class="body">
-                    {{ descendant.content | safe }} {% for media in
-                    descendant.media_attachments%} {% if media.type == 'image'%}
-                    <a href="{{ media.url }}">
-                      <img
+                    {{ descendant.content | safe }}
+                    {% for media in descendant.media_attachments%}
+                      {% if media.type == 'image'%}
+                      <a href="{{ media.url }}">
+                        <img
+                          class="media"
+                          src="{{media.preview_url}}"
+                          alt="{{ media.description or 'media attachment' }}"
+                          title="{{ media.description or 'media attachment' }}"
+                        />
+                      </a>
+                      {% elif media.type == 'gifv' %}
+                      <video
                         class="media"
-                        src="{{media.preview_url}}"
+                        controls
+                        autoplay="autoplay"
+                        muted
+                        loop
                         alt="{{ media.description or 'media attachment' }}"
                         title="{{ media.description or 'media attachment' }}"
-                      />
-                    </a>
-                    {% elif media.type == 'gifv' %}
-                    <video
-                      class="media"
-                      controls
-                      autoplay="autoplay"
-                      muted
-                      loop
-                      alt="{{ media.description or 'media attachment' }}"
-                      title="{{ media.description or 'media attachment' }}"
-                    >
-                      <source src="{{media.url}}" type="video/mp4" />
-                      Your browser does not support the video tag.
-                    </video>
-                    {% endif %} {% endfor %} {% if descendant.card %}
+                      >
+                        <source src="{{media.url}}" type="video/mp4" />
+                        Your browser does not support the video tag.
+                      </video>
+                      {% endif %}
+                    {% endfor %}
+                    {% if descendant.card %}
                     <a href="{{ descendant.card.url }}">
                       <div class="link_card">
                         <small>
diff --git a/threads.py b/threads.py
index faa71d0..53ad5bf 100755
--- a/threads.py
+++ b/threads.py
@@ -86,7 +86,7 @@ def clean_author(account):
 def clean_status(status):
     clean = clean_dict(status, ['id', 'content', 'created_at', 'url', 'media_attachments', 'card'])
     clean['account'] = clean_author(status['account'])
-    clean['content'] = markdown.markdown("<section markdown='block'>"+ clean['content'] +"<section>", extensions=['md_in_html'])
+    clean['content'] = markdown.markdown("<section markdown='block'>"+ clean['content'] +"</section>", extensions=['md_in_html'])
     for emoji in status['emojis']:
         clean['content'] = clean['content'].replace(":" + emoji['shortcode'] + ":", '<img alt="' + emoji['shortcode'] + ' emoji" class="emoji" src="'+emoji['url']+'" />')
     return clean
