60 lines
2.5 KiB
Text
60 lines
2.5 KiB
Text
|
{% if webmentions and webmentions.length > 0 %}
|
||
|
|
<div class="space-y-4">
|
||
|
|
{% for mention in webmentions %}
|
||
|
|
<article class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||
|
|
<div class="flex items-start space-x-3">
|
||
|
|
{% if mention.author.photo %}
|
||
|
|
<img src="{{ mention.author.photo }}" alt="{{ mention.author.name }}" class="w-10 h-10 rounded-full" />
|
||
|
|
{% else %}
|
||
|
|
<div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
|
||
|
|
<span class="text-sm font-medium">{{ mention.author.name | first }}</span>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
<div class="flex-1 min-w-0">
|
||
|
|
<div class="flex items-center space-x-2 text-sm">
|
||
|
|
<a href="{{ mention.author.url }}" class="font-medium hover:text-blue-600" target="_blank" rel="noopener">
|
||
|
|
{{ mention.author.name }}
|
||
|
|
</a>
|
||
|
|
<span class="text-gray-500">
|
||
|
|
{% if mention['wm-property'] == 'like-of' %}
|
||
|
|
liked this
|
||
|
|
{% elif mention['wm-property'] == 'repost-of' %}
|
||
|
|
reposted this
|
||
|
|
{% elif mention['wm-property'] == 'bookmark-of' %}
|
||
|
|
bookmarked this
|
||
|
|
{% elif mention['wm-property'] == 'mention-of' %}
|
||
|
|
mentioned this
|
||
|
|
{% else %}
|
||
|
|
replied
|
||
|
|
{% endif %}
|
||
|
|
</span>
|
||
|
|
<time class="text-gray-500" datetime="{{ mention.published }}">
|
||
|
|
{{ mention.published | readableDate }}
|
||
|
|
</time>
|
||
|
|
</div>
|
||
|
|
{% if mention.content and mention.content.text %}
|
||
|
|
<div class="mt-2 text-gray-700 dark:text-gray-300">
|
||
|
|
{{ mention.content.text | truncate(280) | safe }}
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
<div class="mt-2">
|
||
|
|
<a href="{{ mention.url }}" class="text-sm text-blue-600 hover:text-blue-800" target="_blank" rel="noopener">
|
||
|
|
View original
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
{% else %}
|
||
|
|
<div class="text-center py-8 text-gray-500">
|
||
|
|
<p>No webmentions yet. Be the first to respond!</p>
|
||
|
|
<p class="text-sm mt-2">
|
||
|
|
<a href="https://indieweb.org/Webmention" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800">
|
||
|
|
Learn about webmentions
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|