From 3ba18380d6dec7e0b17a4221789dc37309605716 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Sun, 26 May 2024 10:44:55 +0200
Subject: [PATCH] refactor: extract to card.html template

---
 templates/card.html    |  75 +++++++++++++++++
 templates/mock.html    |   3 +
 templates/threads.html | 183 +++--------------------------------------
 3 files changed, 89 insertions(+), 172 deletions(-)
 create mode 100644 templates/card.html
 create mode 100644 templates/mock.html

diff --git a/templates/card.html b/templates/card.html
new file mode 100644
index 0000000..78fb786
--- /dev/null
+++ b/templates/card.html
@@ -0,0 +1,75 @@
+
+        <article class="card">
+          <div class="card_avatar">
+            {% if thread.account.avatar is defined %}
+            <img class="avatar" src="{{ thread.account.avatar }}"
+              alt="avatar of {{ thread.account.display_name }}"
+              title="avatar of {{ thread.account.display_name }}" />
+            {% endif %}
+          </div>
+
+          <div class="card_content" id="{{ thread.id }}">
+            <div class="heading">
+              <h2 class="author" rel="author">
+                {{thread.account.display_name | safe}}
+              </h2>
+
+              <div class="right_menu">
+                <a href="{{ thread.url }}" title="{{ thread.created_at }}">
+                  <relative-time datetime="{{ thread.created_at }}" precision="day">{{ thread.created_at }}</relative-time>
+                </a>
+                <span>&middot;</span>
+                <a href="{{ url_for('threads.thread', id=thread['id']) + '#' + thread['id'] }}">Anchor</a>
+              </div>
+            </div>
+
+            <div class="body">
+              {{thread.content | safe}}
+              {% if thread.descendants is defined %}
+                {% for media in thread.media_attachments %}
+                  {% if media.type == 'image'%}
+                    <a href="{{ media.url }}">
+                      <img
+                        class="media"
+                        width="{{ media.meta.small.width }}"
+                        height="{{ media.meta.small.height }}"
+                        src="{{media.preview_url}}"
+                        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 %}
+              {% endif %}
+                {% if thread.media_attachments|length <= 0 and thread.card %}
+                  <a href="{{ thread.card.url }}">
+                    <div class="link_card">
+                      <small>
+                        {{ thread.card.provider_name or
+                        thread.card.provider_url }}
+                      </small>
+                      <strong>{{ thread.card.title }}</strong>
+                      <small>{{thread.card.description}}</small>
+                    </div>
+                  </a>
+                {% endif %}
+
+            </div>
+           {% if is_thread %}
+              <a href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread</a>
+           {% endif %}
+          </article>
+
diff --git a/templates/mock.html b/templates/mock.html
new file mode 100644
index 0000000..6b3be45
--- /dev/null
+++ b/templates/mock.html
@@ -0,0 +1,3 @@
+<article>
+  hey {{ data }}
+</article>
diff --git a/templates/threads.html b/templates/threads.html
index 2d3dcda..b930aeb 100644
--- a/templates/threads.html
+++ b/templates/threads.html
@@ -74,7 +74,7 @@
       }
 
       main.thread {
-        & li:not(:last-of-type) .card_avatar::after {
+        & .card:not(:last-of-type) .card_avatar::after {
           content: " ";
           display: block;
           height: 100%;
@@ -91,13 +91,6 @@
         width: 50px;
       }
 
-      ul {
-        list-style: none;
-        padding-left: 0;
-        display: grid;
-        gap: 1em;
-      }
-
       .card {
         grid-template-columns: 55px auto;
         display: grid;
@@ -188,13 +181,6 @@
 
         }
 
-        & .action {
-          color: var(--color-link);
-          margin: 1em 0;
-          cursor: pointer;
-          margin-top: 1em;
-        }
-
         & .link_card {
           color: var(--text-color-dark-faded);
           text-decoration: underline;
@@ -220,7 +206,7 @@
         }
 
         main.thread {
-          & li:not(:last-of-type) .card_avatar::after {
+          & .card:not(:last-of-type) .card_avatar::after {
             border-right: 2px solid rgba(197, 209, 222, 0.15);
           }
         }
@@ -266,165 +252,18 @@
       <div class="back">
         <a href="{{url_for('threads.home')}}">Back</a>
       </div>
-
-      <ul>
         {% for thread in threads %}
-        <li class="card">
-          <div class="card_avatar">
-            {% if thread.account.avatar is defined %}
-            <img class="avatar" src="{{ thread.account.avatar }}"
-              alt="avatar of {{ thread.account.display_name }}"
-              title="avatar of {{ thread.account.display_name }}" />
-            {% endif %}
-          </div>
-
-          <div class="card_content" id="{{ thread.id }}">
-            <div class="heading">
-              <h2 class="author" rel="author">
-                {{thread.account.display_name | safe}}
-              </h2>
-
-              <div class="right_menu">
-                <a href="{{ thread.url }}" title="{{ thread.created_at }}">
-                  <relative-time datetime="{{ thread.created_at }}" precision="day">{{ thread.created_at }}</relative-time>
-                </a>
-                <span>&middot;</span>
-                <a href="{{ url_for('threads.thread', id=thread['id']) + '#' + thread['id'] }}">Anchor</a>
-              </div>
-            </div>
-
-            <div class="body">
-              {{thread.content | safe}}
-              {% if thread.descendants is defined %}
-                {% for media in thread.media_attachments %}
-                  {% if media.type == 'image'%}
-                    <a href="{{ media.url }}">
-                      <img
-                        class="media"
-                        width="{{ media.meta.small.width }}"
-                        height="{{ media.meta.small.height }}"
-                        src="{{media.preview_url}}"
-                        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 %}
-              {% endif %}
-                {% if thread.media_attachments|length <= 0 and thread.card %}
-                  <a href="{{ thread.card.url }}">
-                    <div class="link_card">
-                      <small>
-                        {{ thread.card.provider_name or
-                        thread.card.provider_url }}
-                      </small>
-                      <strong>{{ thread.card.title }}</strong>
-                      <small>{{thread.card.description}}</small>
-                    </div>
-                  </a>
-                {% endif %}
-
-            </div>
-
-            {% if thread.descendants is defined %}
-            </li>
-              {% for descendant in thread.descendants %}
-              <li class="card descendant">
-                <div class="card_avatar">
-                  {% if descendant.account.avatar is defined %}
-                  <img class="avatar" src="{{ descendant.account.avatar }}"
-                    alt="avatar of {{ descendant.account.display_name }}"
-                    title="avatar of {{ descendant.account.display_name }}" />
-                  {% endif %}
-                </div>
-
-                <div class="card_content" id="{{ descendant.id }}">
-                  <div class="heading">
-                    <h2 class="author" rel="author">
-                      {{descendant.account.display_name | safe}}
-                    </h2>
-
-                    <div class="right_menu">
-                      <a href="{{ descendant.url }}" title="{{ descendant.created_at }}">
-                        <relative-time datetime="{{ descendant.created_at }}" precision="day">{{ descendant.created_at }}</relative-time>
-                      </a>
-                      <span>&middot;</span>
-                      <a href="{{ url_for('threads.thread', id=thread['id']) + '#' + descendant['id'] }}">Anchor</a>
-                    </div>
-                  </div>
-
-                  <div class="body">
-                    {{ descendant.content | safe }}
-                    {% for media in descendant.media_attachments %}
-                      {% if media.type == 'image'%}
-                      <a href="{{ media.url }}">
-                        <img
-                          class="media"
-                          width="{{ media.meta.small.width }}"
-                          height="{{ media.meta.small.height }}"
-                          src="{{ media.preview_url}} "
-                          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.media_attachments|length <= 0 and descendant.card %}
-                      <a href="{{ descendant.card.url }}">
-                        <div class="link_card">
-                          <small>
-                            {{ descendant.card.provider_name or
-                            descendant.card.provider_url }}
-                          </small>
-                          <strong>{{ descendant.card.title }}</strong>
-                          <small>{{descendant.card.description}}</small>
-                        </div>
-                      </a>
-                    {% endif %}
-                  </div>
-                </div>
-              </li>
-
+          {% with thread=thread, is_thread=threads|length > 1 %}
+            {% include "card.html" %}
+          {% endwith %}
+          {% if thread.descendants is defined %}
+            {% for descendant in thread.descendants %}
+              {% with thread=descendant %}
+                {% include "card.html" %}
+              {% endwith %}
             {% endfor %}
-
-            {% else %}
-            <a
-              class="action"
-              href="{{ url_for('threads.thread', id=thread.id) }}"
-              >Read full thread</a
-            >
-            </li>
-            {% endif %}
-          </div>
-        </li>
+          {% endif %}
         {% endfor %}
-      </ul>
       <a href="#top">Top</a>
     </main>
     <footer>