mirror of
https://github.com/svemagie/indiekit-endpoint-activitypub.git
synced 2026-04-02 15:44:58 +02:00
e34d9c124d
Add Alpine.js directive x-relative-time that converts absolute dates to human-friendly relative strings: just now, 5m, 3h, 2d, Mar 3. Updates every 60s for posts less than 24h old. Server-rendered absolute time stays as no-JS fallback and hover tooltip. Applied to item cards, quote embeds, and notification cards. Bump version to 2.5.2. Confab-Link: http://localhost:8080/sessions/e9d666ac-3c90-4298-9e92-9ac9d142bc06
76 lines
3.3 KiB
Plaintext
76 lines
3.3 KiB
Plaintext
{# Notification card partial #}
|
|
|
|
<div class="ap-notification{% if not item.read %} ap-notification--unread{% endif %}">
|
|
{# Dismiss button #}
|
|
<form method="post" action="{{ mountPath }}/admin/reader/notifications/delete" class="ap-notification__dismiss">
|
|
<input type="hidden" name="_csrf" value="{{ csrfToken }}">
|
|
<input type="hidden" name="uid" value="{{ item.uid }}">
|
|
<button type="submit" class="ap-notification__dismiss-btn" title="{{ __('activitypub.notifications.dismiss') }}">×</button>
|
|
</form>
|
|
|
|
{# Actor avatar with type badge #}
|
|
<div class="ap-notification__avatar-wrap">
|
|
{% if item.actorPhoto %}
|
|
<img src="{{ item.actorPhoto }}" alt="{{ item.actorName }}" class="ap-notification__avatar" loading="lazy" crossorigin="anonymous"
|
|
onerror="this.style.display='none';this.nextElementSibling.style.display=''">
|
|
<span class="ap-notification__avatar ap-notification__avatar--default" style="display:none" aria-hidden="true">{{ item.actorName[0] | upper if item.actorName else "?" }}</span>
|
|
{% else %}
|
|
<span class="ap-notification__avatar ap-notification__avatar--default" aria-hidden="true">{{ item.actorName[0] | upper if item.actorName else "?" }}</span>
|
|
{% endif %}
|
|
<span class="ap-notification__type-badge">
|
|
{% if item.type == "like" %}❤{% elif item.type == "boost" %}🔁{% elif item.type == "follow" %}👤{% elif item.type == "reply" %}💬{% elif item.type == "mention" %}@{% endif %}
|
|
</span>
|
|
</div>
|
|
|
|
{# Notification body #}
|
|
<div class="ap-notification__body">
|
|
<span class="ap-notification__actor">
|
|
<a href="{{ item.actorUrl }}">{{ item.actorName }}</a>
|
|
</span>
|
|
|
|
<span class="ap-notification__action">
|
|
{% if item.type == "like" %}
|
|
{{ __("activitypub.notifications.liked") }}
|
|
{% elif item.type == "boost" %}
|
|
{{ __("activitypub.notifications.boostedPost") }}
|
|
{% elif item.type == "follow" %}
|
|
{{ __("activitypub.notifications.followedYou") }}
|
|
{% elif item.type == "reply" %}
|
|
{{ __("activitypub.notifications.repliedTo") }}
|
|
{% elif item.type == "mention" %}
|
|
{{ __("activitypub.notifications.mentionedYou") }}
|
|
{% endif %}
|
|
</span>
|
|
|
|
{% if item.targetUrl %}
|
|
<a href="{{ item.targetUrl }}" class="ap-notification__target">
|
|
{{ item.targetName or item.targetUrl }}
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if item.content and item.content.text %}
|
|
<div class="ap-notification__excerpt">
|
|
{{ item.content.text | truncate(200) }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if item.type == "reply" or item.type == "mention" %}
|
|
<div class="ap-notification__actions">
|
|
<a href="{{ mountPath }}/admin/reader/compose?replyTo={{ item.uid | urlencode }}" class="ap-notification__reply-btn" title="{{ __('activitypub.reader.actions.reply') }}">
|
|
↩ {{ __("activitypub.reader.actions.reply") }}
|
|
</a>
|
|
<a href="{{ mountPath }}/admin/reader/post?url={{ item.uid | urlencode }}" class="ap-notification__thread-btn" title="{{ __('activitypub.reader.post.title') }}">
|
|
💬 {{ __("activitypub.notifications.viewThread") }}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# Timestamp #}
|
|
{% if item.published %}
|
|
<time datetime="{{ item.published }}" class="ap-notification__time" x-data x-relative-time>
|
|
{{ item.published | date("PPp") }}
|
|
</time>
|
|
{% endif %}
|
|
</div>
|