From c104f939606018ba1e8101f6084bf0d82413f0b6 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Sat, 18 Jan 2025 22:24:32 +0100
Subject: [PATCH] style: hashtag pills

---
 templates/tag.html     | 28 +++++++++++-----------------
 templates/tags.html    |  8 ++++++++
 templates/threads.html | 29 ++++++++++++++---------------
 3 files changed, 33 insertions(+), 32 deletions(-)
 create mode 100644 templates/tags.html

diff --git a/templates/tag.html b/templates/tag.html
index f6a69b5..f2c212f 100644
--- a/templates/tag.html
+++ b/templates/tag.html
@@ -93,12 +93,11 @@
       }
     }
 
-    .pill,
-    .hashtag {
+    .pill {
       border-radius: 2em;
       background-color: rgba(197, 209, 222, 0.25);
-      margin: 0 0.5em 0.5em 0;
-      padding: 1em;
+      margin-bottom: 0.5em;
+      padding: 0.5em 1em;
       display: inline-block;
       font-size: var(--font-size-sm);
       color: var(--text-color-dark);
@@ -285,8 +284,7 @@
         }
       }
 
-      .pill,
-      .hashtag {
+      .pill {
         background-color: rgba(0, 0, 0, 0.15);
         color: var(--text-color-light-faded);
 
@@ -307,25 +305,20 @@
   </header>
   <main class={{ "thread" if threads|length==1 else "home" }}>
     {% if tags is defined%}
-    <div class="featured-tags">
-      {% for tag in tags %}
-      <a class="pill" href="{{ tag.url }}">
-        <span class="pill-label">{{ tag.statuses_count }}</span>
-        {{ tag.name }}
-      </a>
-      {% endfor %}
-    </div>
+    {% with tags=tags %}
+    {% include "tags.html" %}
+    {% endwith %}
     {% endif %}
     <div class="back">
       <a href="{{url_for('threads.home')}}">Back</a>
     </div>
     {% for thread in threads %}
-    {% with is_tag=tag!=None, thread=thread, parent_id=thread.id, is_thread=threads|length > 1 %}
+    {% with is_tag=tag!=None, thread=thread, parent_id=thread.id, is_thread=threads|length > 1, server=app.server %}
     {% include "card.html" %}
     {% endwith %}
     {% if thread.descendants is defined %}
     {% for descendant in thread.descendants %}
-    {% with is_tag=tag!=None, thread=descendant, parent_id=thread.id %}
+    {% with is_tag=tag!=None, thread=descendant, parent_id=thread.id, server=app.server%}
     {% include "card.html" %}
     {% endwith %}
     {% endfor %}
@@ -348,7 +341,8 @@
     </p>
     <p>Rendered on {{ render_date }} in Europe/Amsterdam</p>
   </footer>
-
+  <script type="module" src="{{ url_for('static', filename='enhance-content.js') }}">
+  </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/templates/tags.html b/templates/tags.html
new file mode 100644
index 0000000..4bf2ea3
--- /dev/null
+++ b/templates/tags.html
@@ -0,0 +1,8 @@
+<div class="featured-tags">
+    {% for tag in tags %}
+    <a class="pill" href="{{url_for('threads.tag', id=tag.name) }}">
+        <span class="pill-label">{{ tag.statuses_count }}</span>
+        {{ tag.name }}
+    </a>
+    {% endfor %}
+</div>
\ No newline at end of file
diff --git a/templates/threads.html b/templates/threads.html
index 077acd4..4fbd317 100644
--- a/templates/threads.html
+++ b/templates/threads.html
@@ -99,12 +99,15 @@
       }
     }
 
-    .pill,
     .hashtag {
+      display: none;
+    }
+
+    .pill {
       border-radius: 2em;
       background-color: rgba(197, 209, 222, 0.25);
-      margin: 0 0.5em 0.5em 0;
-      padding: 1em;
+      margin-bottom: 0.5em;
+      padding: 0.5em 1em;
       display: inline-block;
       font-size: var(--font-size-sm);
       color: var(--text-color-dark);
@@ -292,8 +295,7 @@
         }
       }
 
-      .pill,
-      .hashtag {
+      .pill {
         background-color: rgba(0, 0, 0, 0.15);
         color: var(--text-color-light-faded);
 
@@ -315,25 +317,20 @@
   </header>
   <main class={{ "thread" if threads|length==1 else "home" }}>
     {% if tags is defined%}
-    <div class="featured-tags">
-      {% for tag in tags %}
-      <a class="pill" href="{{url_for('threads.tag', id=tag.name) }}">
-        <span class="pill-label">{{ tag.statuses_count }}</span>
-        #{{ tag.name }}
-      </a>
-      {% endfor %}
-    </div>
+    {% with tags=tags %}
+    {% include "tags.html" %}
+    {% endwith %}
     {% endif %}
     <div class="back">
       <a href="{{url_for('threads.home')}}">Back</a>
     </div>
     {% for thread in threads %}
-    {% with thread=thread, parent_id=thread.id, is_thread=threads|length > 1 %}
+    {% with thread=thread, parent_id=thread.id, is_thread=threads|length > 1, server=app.server %}
     {% include "card.html" %}
     {% endwith %}
     {% if thread.descendants is defined %}
     {% for descendant in thread.descendants %}
-    {% with thread=descendant, parent_id=thread.id %}
+    {% with thread=descendant, parent_id=thread.id, server=app.server %}
     {% include "card.html" %}
     {% endwith %}
     {% endfor %}
@@ -357,6 +354,8 @@
     <p>Rendered on {{ render_date }} in Europe/Amsterdam</p>
   </footer>
 
+  <script type="module" src="{{ url_for('static', filename='enhance-content.js') }}">
+  </script>
 </body>
 
 </html>
\ No newline at end of file