mirror of
https://git.joinplu.me/Plume/Plume.git
synced 2024-12-24 11:00:34 +00:00
a64c4912cf
All the backend/federation code was already, I just added the UI 🤷♀️ Fixes #253
109 lines
4.3 KiB
Text
109 lines
4.3 KiB
Text
{% macro post_card(article) %}
|
|
<div class="card">
|
|
{% if article.cover %}
|
|
<div class="cover" style="background-image: url('{{ article.cover.url }}')"></div>
|
|
{% endif %}
|
|
<h3><a href="{{ article.url }}">{{ article.post.title }}</a></h3>
|
|
<main>
|
|
<p>
|
|
{% if article.post.subtitle | length > 0 %}
|
|
{{ article.post.subtitle }}
|
|
{% else %}
|
|
{{ article.post.content | safe | striptags | truncate(length=200) }}
|
|
{% endif %}
|
|
</p>
|
|
</main>
|
|
<p class="author">
|
|
{{ "By {{ link_1 }}{{ link_2 }}{{ link_3 }}{{ name | escape }}{{ link_4 }}" | _(
|
|
link_1='<a href="/@/',
|
|
link_2=article.author.fqn,
|
|
link_3='/">',
|
|
name=article.author.name,
|
|
link_4="</a>")
|
|
}}
|
|
{% if article.post.published %}⋅ {{ article.date | date(format="%B %e") }}{% endif %}
|
|
⋅ <a href="/~/{{ article.blog.fqn }}/">{{ article.blog.title }}</a>
|
|
{% if not article.post.published %}⋅ {{ "Draft" | _ }}{% endif %}
|
|
</p>
|
|
</div>
|
|
{% endmacro post_card %}
|
|
{% macro input(name, label, errors, form, type="text", props="", optional=false, default='', details=' ') %}
|
|
<label for="{{ name }}">
|
|
{{ label | _ }}
|
|
{% if optional %}
|
|
<small>{{ "Optional" | _ }}</small>
|
|
{% endif %}
|
|
<small>{{ details | _ }}</small>
|
|
</label>
|
|
{% if errors is defined and errors[name] %}
|
|
{% for err in errors[name] %}
|
|
<p class="error">{{ err.message | default(value="Unknown error") | _ }}</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% set default = default[name] | default(value="") %}
|
|
<input type="{{ type }}" id="{{ name }}" name="{{ name }}" value="{{ form[name] | default(value=default) }}" {{ props | safe }}/>
|
|
{% endmacro input %}
|
|
{% macro paginate(page, total, previous="Previous page", next="Next page") %}
|
|
<div class="pagination">
|
|
{% if page != 1 %}
|
|
<a href="?page={{ page - 1 }}">{{ previous | _ }}</a>
|
|
{% endif %}
|
|
{% if page < total %}
|
|
<a href="?page={{ page + 1 }}">{{ next | _ }}</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|
|
{% macro comment(comm) %}
|
|
<div class="comment" id="comment-{{ comm.id }}">
|
|
<a class="author" href="/@/{{ comm.author.fqn }}/">
|
|
{{ macros::avatar(user=comm.author, pad=true) }}
|
|
<span class="display-name">{{ comm.author.name }}</span>
|
|
<small>@{{ comm.author.fqn }}</small>
|
|
</a>
|
|
<div class="text">
|
|
{% if comm.sensitive %}
|
|
<details>
|
|
<summary>{{ comm.spoiler_text }}</summary>
|
|
{% endif %}
|
|
{{ comm.content | safe }}
|
|
{% if comm.sensitive %}
|
|
</details>
|
|
{% endif %}
|
|
</div>
|
|
<a class="button icon icon-message-circle" href="?responding_to={{ comm.id }}">{{ "Respond" | _ }}</a>
|
|
{% for res in comm.responses %}
|
|
{{ self::comment(comm=res) }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endmacro %}
|
|
{% macro tabs(links, titles, selected) %}
|
|
<div class="tabs">
|
|
{% for link in links %}
|
|
{% set idx = loop.index0 %}
|
|
<a href="{{ link }}" {% if loop.index == selected %}class="selected"{% endif %}>{{ titles[idx] | _ }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endmacro %}
|
|
{% macro feather(name) %}
|
|
<svg class="feather">
|
|
<use xlink:href="/static/images/feather-sprite.svg#{{ name }}"/>
|
|
</svg>
|
|
{% endmacro %}
|
|
{% macro home_feed(title, link, articles) %}
|
|
{% if articles | length > 0 %}
|
|
<h2>{{ title | _ }} — <a href="{{ link }}">{{ "View all" | _ }}</a></h2>
|
|
<div class="cards spaced">
|
|
{% for article in articles %}
|
|
{{ macros::post_card(article=article) }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
{% macro avatar(user, size="small", pad=true) %}
|
|
<div
|
|
class="avatar {{ size }} {% if pad %}padded{% endif %}"
|
|
style="background-image: url('{{ user.avatar }}');"
|
|
title="{{ "{{ name }}'s avatar" | _(name=user.name) }}"
|
|
aria-label="{{ "{{ name }}'s avatar" | _(name=user.name) }}"
|
|
></div>
|
|
{% endmacro %}
|