feat: add Bluesky thread template component

2026-04-20 16:41:18 +02:00
parent 0d72b9293d
commit 5c8c0015eb
1 changed files with 71 additions and 0 deletions
@@ -0,0 +1,71 @@
+{# Bluesky Thread Component #}
+{# Fetches and displays replies from the syndicated Bluesky post via the AT Protocol public API #}
+{# Only renders when the post has a bsky.app syndication URL #}
+
+{% set bskySyndUrl = "" %}
+{% if syndication %}
+  {% for url in syndication %}
+    {% if "bsky.app" in url %}
+      {% set bskySyndUrl = url %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{% if bskySyndUrl %}
+<div x-data="bskyThread('{{ bskySyndUrl }}')" class="mt-8">
+  <template x-if="!loading && replies.length > 0">
+    <section class="bluesky-thread pt-8 border-t border-surface-200 dark:border-surface-700">
+      <h2 class="text-lg font-semibold text-surface-700 dark:text-surface-300 mb-6 flex items-center gap-2">
+        <svg class="w-5 h-5 text-[#0085ff] flex-shrink-0" viewBox="0 0 568 501" fill="currentColor" aria-hidden="true">
+          <path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/>
+        </svg>
+        Bluesky Thread (<span x-text="replies.length"></span>)
+      </h2>
+      <ul class="space-y-3">
+        <template x-for="reply in replies" :key="reply.uri">
+          <li class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm"
+              :class="reply.depth > 0 ? 'ml-4 sm:ml-8' : ''">
+            <div class="flex gap-3">
+              <a :href="reply.author.url" target="_blank" rel="noopener" class="flex-shrink-0">
+                <img :src="reply.author.avatar || '/images/default-avatar.svg'"
+                     :alt="reply.author.name"
+                     class="w-10 h-10 rounded-full"
+                     loading="lazy">
+              </a>
+              <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-2 mb-1 flex-wrap">
+                  <a :href="reply.author.url"
+                     class="font-semibold text-surface-900 dark:text-surface-100 hover:underline text-sm"
+                     target="_blank" rel="noopener"
+                     x-text="reply.author.name"></a>
+                  <span class="text-xs text-surface-500 dark:text-surface-400"
+                        x-text="'@' + reply.author.handle"></span>
+                  <a :href="reply.url"
+                     class="text-xs text-surface-500 dark:text-surface-400 hover:underline ml-auto"
+                     target="_blank" rel="noopener">
+                    <time :datetime="reply.published" x-text="formatDate(reply.published)"></time>
+                  </a>
+                </div>
+                <p class="text-surface-700 dark:text-surface-300 text-sm whitespace-pre-wrap break-words"
+                   x-text="reply.text"></p>
+                <div x-show="reply.likeCount > 0"
+                     class="mt-1.5 text-xs text-surface-400 dark:text-surface-500 flex items-center gap-1">
+                  <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+                  </svg>
+                  <span x-text="reply.likeCount"></span>
+                </div>
+              </div>
+            </div>
+          </li>
+        </template>
+      </ul>
+      <p class="mt-4 text-xs text-surface-400 dark:text-surface-500">
+        <a :href="'{{ bskySyndUrl }}'" class="hover:underline" target="_blank" rel="noopener">
+          Vollständigen Thread auf Bluesky ansehen
+        </a>
+      </p>
+    </section>
+  </template>
+</div>
+{% endif %}