tetratto/crates/app/src/public/html/components.html

{% macro avatar(username, size="24px", selector_type="username") -%}
<img
    title="{{ username }}'s avatar"
    src="/api/v1/auth/profile/{{ username }}/avatar?selector_type={{ selector_type }}"
    alt="@{{ username }}"
    class="avatar shadow"
    style="--size: {{ size }}"
/>
{%- endmacro %} {% macro community_avatar(id, community=false, size="24px") -%}
{% if community %}
<img
    src="/api/v1/communities/{{ id }}/avatar"
    alt="{{ community.title }}"
    class="avatar shadow"
    style="--size: {{ size }}"
/>
{% else %}
<img
    src="/api/v1/communities/{{ id }}/avatar"
    alt="{{ id }}"
    class="avatar shadow"
    style="--size: {{ size }}"
/>
{% endif %} {%- endmacro %} {% macro community_listing_card(community) -%}
<a
    class="card w-full flex items-center gap-4"
    href="/community/{{ community.title }}"
>
    {{ components::community_avatar(id=community.id, community=community,
    size="48px") }}
    <div class="flex flex-col gap-1">
        <h3>{{ community.context.display_name }}</h3>
        <span class="fade"><b>{{ community.member_count }}</b> members</span>
    </div>
</a>
{%- endmacro %} {% macro username(user) -%}
<div style="display: contents">
    {% if user.settings.display_name %} {{ user.settings.display_name }} {% else
    %} {{ user.username }} {% endif %}
</div>
{%- endmacro %} {% macro likes(id, asset_type, likes=0, dislikes=0) -%}
<button
    title="Like"
    class="camo small"
    hook_element="reaction.like"
    onclick="trigger('me::react', [event.target, '{{ id }}', '{{ asset_type }}', true])"
>
    {{ icon "heart" }} {% if likes > 0 %}
    <span>{{ likes }}</span>
    {% endif %}
</button>

<button
    title="Dislike"
    class="camo small"
    hook_element="reaction.dislike"
    onclick="trigger('me::react', [event.target, '{{ id }}', '{{ asset_type }}', false])"
>
    {{ icon "heart-crack" }} {% if dislikes > 0 %}
    <span>{{ dislikes }}</span>
    {% endif %}
</button>
{%- endmacro %} {% macro post(post, owner, secondary=false, community=false,
show_community=true) -%}
<div class="card flex flex-col gap-2 {% if secondary %}secondary{% endif %}">
    <div class="w-full flex gap-2">
        <a href="/user/{{ owner.username }}">
            {{ components::avatar(username=post.owner, size="52px",
            selector_type="id") }}
        </a>

        <div class="flex flex-col w-full gap-1">
            <div class="flex flex-wrap gap-2 items-center">
                <a href="/user/{{ owner.username }}"
                    >{{ components::username(user=owner) }}</a
                >

                <span class="fade date">{{ post.created }}</span>

                {% if show_community %}
                <a href="/api/v1/communities/find/{{ post.community }}">
                    <!-- prettier-ignore -->
                    {% if community %}
                        {{ components::community_avatar(id=post.community,
                        community=community) }}
                    {% else %}
                        {{ components::community_avatar(id=post.community) }}
                    {% endif %}
                </a>
                {% endif %}
            </div>

            <span id="post-content:{{ post.id }}"
                >{{ post.content|markdown|safe }}</span
            >
        </div>
    </div>

    <div class="flex justify-between items-center gap-2 w-full">
        {% if user %}
        <div
            class="flex gap-1 reactions_box"
            hook="check_reactions"
            hook-arg:id="{{ post.id }}"
        >
            {{ components::likes(id=post.id, asset_type="Post",
            likes=post.likes, dislikes=post.dislikes) }}
        </div>
        {% endif %}

        <div class="flex gap-1 buttons_box">
            <a href="/post/{{ post.id }}" class="button camo small">
                {{ icon "message-circle" }}
                <span>{{ post.comment_count }}</span>
            </a>

            <a
                href="/post/{{ post.id }}"
                class="button camo small"
                target="_blank"
            >
                {{ icon "external-link" }}
            </a>

            {% if user %} {% if (user.id == post.owner) or is_helper %}
            <div class="dropdown">
                <button
                    class="camo small"
                    onclick="trigger('atto::hooks::dropdown', [event])"
                    exclude="dropdown"
                >
                    {{ icon "ellipsis" }}
                </button>

                <div class="inner">
                    <button
                        class="red"
                        onclick="trigger('me::remove_post', ['{{ post.id }}'])"
                    >
                        {{ icon "trash" }}
                        <span>{{ text "general:action.delete" }}</span>
                    </button>
                </div>
            </div>
            {% endif %} {% endif %}
        </div>
    </div>
</div>
{%- endmacro %}