mirror of
https://github.com/svemagie/indiekit-endpoint-activitypub.git
synced 2026-04-02 15:44:58 +02:00
9332421890
Card styling: softer 8px radius, subtle box-shadow elevation, hover enhancement. Action buttons: borderless with color-coded hover states via color-mix(). Typography: tighter line-height (4/3), larger avatars (44px), gallery images (220px). Focus-point cropping: convert Mastodon focus.x/y to CSS object-position. Blurhash placeholders: decode DC component to background-color on images. Confab-Link: http://localhost:8080/sessions/e9d666ac-3c90-4298-9e92-9ac9d142bc06
49 lines
2.6 KiB
Plaintext
49 lines
2.6 KiB
Plaintext
{# Quoted post embed — renders when a post quotes another post #}
|
|
{% if item.quote %}
|
|
<div class="ap-quote-embed">
|
|
<a href="{{ mountPath }}/admin/reader/post?url={{ item.quote.uid | urlencode }}" class="ap-quote-embed__link">
|
|
<header class="ap-quote-embed__author">
|
|
{% if item.quote.author.photo %}
|
|
<img src="{{ item.quote.author.photo }}" alt="" class="ap-quote-embed__avatar" loading="lazy" crossorigin="anonymous">
|
|
{% else %}
|
|
<span class="ap-quote-embed__avatar ap-quote-embed__avatar--default">{{ item.quote.author.name[0] | upper if item.quote.author.name else "?" }}</span>
|
|
{% endif %}
|
|
<div class="ap-quote-embed__author-info">
|
|
<div class="ap-quote-embed__name">{% if item.quote.author.nameHtml %}{{ item.quote.author.nameHtml | safe }}{% else %}{{ item.quote.author.name or "Unknown" }}{% endif %}</div>
|
|
{% if item.quote.author.handle %}
|
|
<div class="ap-quote-embed__handle">{{ item.quote.author.handle }}</div>
|
|
{% endif %}
|
|
</div>
|
|
{% if item.quote.published %}
|
|
<time datetime="{{ item.quote.published }}" class="ap-quote-embed__time" x-data x-relative-time>{{ item.quote.published | date("PPp") }}</time>
|
|
{% endif %}
|
|
</header>
|
|
{% if item.quote.name %}
|
|
<p class="ap-quote-embed__title">{{ item.quote.name }}</p>
|
|
{% endif %}
|
|
{% if item.quote.content and item.quote.content.html %}
|
|
<div class="ap-quote-embed__content">{{ item.quote.content.html | safe }}</div>
|
|
{% endif %}
|
|
{% if item.quote.photo and item.quote.photo.length > 0 %}
|
|
{% set qPhoto = item.quote.photo[0] %}
|
|
{% set qFocusStyle = "" %}
|
|
{% if qPhoto.focus and qPhoto.focus.x != null and qPhoto.focus.y != null %}
|
|
{% set qFpX = ((qPhoto.focus.x + 1) / 2 * 100) %}
|
|
{% set qFpY = ((1 - (qPhoto.focus.y + 1) / 2) * 100) %}
|
|
{% set qFocusStyle = "object-position:" + qFpX + "% " + qFpY + "%;" %}
|
|
{% endif %}
|
|
<div class="ap-quote-embed__media">
|
|
<img src="{{ qPhoto.url if qPhoto.url else qPhoto }}" alt="{{ qPhoto.alt if qPhoto.alt else '' }}" loading="lazy" class="ap-quote-embed__photo"{% if qFocusStyle %} style="{{ qFocusStyle }}"{% endif %}>
|
|
</div>
|
|
{% endif %}
|
|
</a>
|
|
</div>
|
|
{% elif item.quoteUrl %}
|
|
{# Fallback: quote not yet fetched — show as styled link #}
|
|
<div class="ap-quote-embed ap-quote-embed--pending">
|
|
<a href="{{ mountPath }}/admin/reader/post?url={{ item.quoteUrl | urlencode }}" class="ap-quote-embed__link">
|
|
Quoted post: {{ item.quoteUrl }}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|