You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
258 lines
12 KiB
258 lines
12 KiB
{% extends 'layout.html.twig' %} |
|
|
|
{% block ogtags %} |
|
<meta property="og:title" content="{{ article.title }}"> |
|
<meta property="og:type" content="article"> |
|
<meta property="og:url" content="{{ canonical }}"> |
|
{% if article.image %} |
|
<meta property="og:image" content="{{ article.image }}"> |
|
{% endif %} |
|
<meta property="og:description" content="{{ article.summary|striptags|u.truncate(159,'…')|e }}"> |
|
<meta property="og:site_name" content="Newsroom"> |
|
{% endblock %} |
|
|
|
{% block body %} |
|
{% if magazine is defined %} |
|
<twig:Organisms:MagazineHero :mag="mag" :magazine="magazine" /> |
|
{% endif %} |
|
|
|
<article class="w-container" data-controller="highlights-toggle"> |
|
<div class="article-actions"> |
|
<div data-controller="share-dropdown" class="dropdown share-dropdown" style="display:inline-block;position:relative;"> |
|
<button data-share-dropdown-target="button" |
|
class="btn btn-secondary" |
|
id="shareBtn" |
|
type="button" |
|
aria-haspopup="true" |
|
aria-expanded="false" |
|
data-action="click->share-dropdown#toggle"> |
|
Share |
|
</button> |
|
<div data-share-dropdown-target="menu" |
|
class="dropdown-menu" |
|
id="shareDropdown" |
|
style="display:none;position:absolute;z-index:1000;min-width:200px;"> |
|
<button class="dropdown-item" |
|
type="button" |
|
data-action="click->share-dropdown#copy" |
|
data-copy="{{ canonical|e('js') }}"> |
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="vertical-align:middle;"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h6m0 0v6m0-6L10 19l-7-7" /> |
|
</svg> |
|
Newsroom Link |
|
</button> |
|
<button class="dropdown-item" |
|
type="button" |
|
data-action="click->share-dropdown#copy" |
|
data-copy="{{ article|naddrEncode }}"> |
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="vertical-align:middle;"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0A9 9 0 11 3 12a9 9 0 0118 0z" /> |
|
</svg> |
|
Naddr |
|
</button> |
|
</div> |
|
</div> |
|
{% if canEdit %} |
|
<a class="btn btn-primary" href="{{ path('editor-edit-slug', {'slug': article.slug}) }}">Edit article</a> |
|
{% endif %} |
|
|
|
{% if app.user %} |
|
<twig:ReadingListDropdown coordinate="30023:{{ article.pubkey }}:{{ article.slug }}" /> |
|
{% endif %} |
|
|
|
{# Zap Button with split payment support #} |
|
{% set zapSplits = article.advancedMetadata.zapSplits|default([]) %} |
|
{% if zapSplits|length > 0 %} |
|
<twig:Molecules:ZapButton |
|
recipientPubkey="{{ article.pubkey }}" |
|
recipientLud16="{{ author.lud16 is iterable ? author.lud16|first : author.lud16 }}" |
|
:zapSplits="zapSplits" /> |
|
|
|
{# Display split payment indicator #} |
|
{% if zapSplits|length > 0 %} |
|
<small class="text-muted ms-2"> |
|
<em>(Split between {{ zapSplits|length + 1 }} recipients)</em> |
|
</small> |
|
{% endif %} |
|
{% endif %} |
|
|
|
{# Highlights toggle button #} |
|
{% if highlights is defined and highlights|length > 0 %} |
|
<button data-highlights-toggle-target="button" |
|
data-action="click->highlights-toggle#toggle" |
|
class="btn btn-secondary" |
|
type="button" |
|
aria-pressed="false" |
|
title="Toggle highlights"> |
|
Highlights ({{ highlights|length }}) |
|
</button> |
|
{% endif %} |
|
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
<div class="card-header"> |
|
<h1 class="card-title">{{ article.title }}</h1> |
|
</div> |
|
{% if author %} |
|
<div class="byline"> |
|
<span> |
|
{{ 'text.byline'|trans }} <a href="{{ path('author-redirect', {'pubkey': article.pubkey}) }}"> |
|
<twig:Atoms:NameOrNpub :author="author" :npub="npub" /> |
|
</a> |
|
</span> |
|
<span> |
|
{% if article.publishedAt is not null %} |
|
<small>{{ article.publishedAt|date('F j, Y') }}</small> |
|
{% else %} |
|
<small> |
|
{# <twig:ux:icon name="heroicons:pencil" class="icon" /> #} |
|
{{ article.createdAt|date('F j, Y') }}</small> |
|
{% endif %} |
|
</span> |
|
</div> |
|
{% endif %} |
|
</div> |
|
<div class="card-body"> |
|
<div class="lede"> |
|
{{ article.summary }} |
|
</div> |
|
|
|
{% if article.image %} |
|
<div class="article__image"> |
|
<img src="{{ article.image }}" alt="{{ article.title }}"> |
|
</div> |
|
{% endif %} |
|
|
|
<div class="article-main" |
|
{% if highlights is defined and highlights|length > 0 %} |
|
data-highlights="{{ highlights|json_encode|e('html_attr') }}" |
|
{% endif %}> |
|
{{ content|raw }} |
|
</div> |
|
|
|
{% if article.topics|length > 0 %} |
|
<hr class="divider" /> |
|
<div class="tags"> |
|
{% for tag in article.topics %} |
|
<a href="{{ path('forum_tag', {'tag': tag|url_encode}) }}" class="tag">#{{ tag }}</a> |
|
{% endfor %} |
|
</div> |
|
{% endif %} |
|
|
|
</div> |
|
|
|
{% if is_granted('ROLE_ADMIN') %} |
|
<pre> |
|
{{ article.raw|json_encode(constant('JSON_PRETTY_PRINT')) }} |
|
</pre> |
|
{% endif %} |
|
|
|
<twig:Organisms:CommentForm |
|
:publish_url="path('comment_publish')" |
|
:csrf_token="csrf_token('comment_publish')" |
|
:root_context="{ |
|
tag: 'A', |
|
value: '30023:' ~ article.pubkey ~ ':' ~ article.slug, |
|
relay: null, |
|
pubkey: article.pubkey, |
|
kind: 30023 |
|
}" |
|
:parent_context="{ |
|
tag: 'a', |
|
value: '30023:' ~ article.pubkey ~ ':' ~ article.slug, |
|
relay: null, |
|
pubkey: article.pubkey, |
|
kind: 30023 |
|
}" /> |
|
|
|
<twig:Organisms:Comments current="30023:{{ article.pubkey }}:{{ article.slug|e }}"></twig:Organisms:Comments> |
|
|
|
{# Mobile highlights - shown after comments on narrow screens #} |
|
{% if highlights is defined and highlights|length > 0 %} |
|
<div class="highlights-mobile-section"> |
|
<h3 class="highlights-mobile-heading">Highlights ({{ highlights|length }})</h3> |
|
<div class="highlights-mobile-grid"> |
|
{% for highlight in highlights %} |
|
<div class="highlight-card-compact"> |
|
<div class="highlight-header-compact"> |
|
{% if highlight.pubkey %} |
|
<twig:Molecules:UserFromNpub |
|
ident="{{ highlight.pubkey }}" |
|
:compact="true" |
|
/> |
|
{% else %} |
|
<span class="text-muted">Anonymous</span> |
|
{% endif %} |
|
<small class="text-muted ms-auto"> |
|
{{ highlight.created_at|date('M j') }} |
|
</small> |
|
</div> |
|
<div class="highlight-content-compact"> |
|
{% if highlight.context %} |
|
{% set htmlContext = highlight.context|markdown_to_html %} |
|
{% if highlight.content in highlight.context %} |
|
{% set wrapper = '<mark class="highlight-mark-compact">' ~ highlight.content ~ '</mark>' %} |
|
{% set rendered = htmlContext|replace({ (highlight.content): wrapper }) %} |
|
{{ rendered|raw }} |
|
{% else %} |
|
<div class="context-text-compact">{{ htmlContext|raw }}</div> |
|
<mark class="highlight-mark-compact">{{ highlight.content }}</mark> |
|
{% endif %} |
|
{% else %} |
|
<mark class="highlight-mark-compact">{{ highlight.content }}</mark> |
|
{% endif %} |
|
</div> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
</div> |
|
{% endif %} |
|
</article> |
|
{% endblock %} |
|
|
|
{% block aside %} |
|
{% if highlights is defined and highlights|length > 0 %} |
|
<div class="sidebar-section"> |
|
<h3 class="sidebar-heading">Highlights ({{ highlights|length }})</h3> |
|
<div class="highlights-sidebar"> |
|
{% for highlight in highlights %} |
|
<div class="highlight-card-compact"> |
|
<div class="highlight-header-compact"> |
|
{% if highlight.pubkey %} |
|
<twig:Molecules:UserFromNpub |
|
ident="{{ highlight.pubkey }}" |
|
:compact="true" |
|
/> |
|
{% else %} |
|
<span class="text-muted">Anonymous</span> |
|
{% endif %} |
|
<small class="text-muted ms-auto"> |
|
{{ highlight.created_at|date('M j') }} |
|
</small> |
|
</div> |
|
<div class="highlight-content-compact"> |
|
{% if highlight.context %} |
|
{% set htmlContext = highlight.context|markdown_to_html %} |
|
{% if highlight.content in highlight.context %} |
|
{% set wrapper = '<mark class="highlight-mark-compact">' ~ highlight.content ~ '</mark>' %} |
|
{% set rendered = htmlContext|replace({ (highlight.content): wrapper }) %} |
|
{{ rendered|raw }} |
|
{% else %} |
|
<div class="context-text-compact">{{ htmlContext|raw }}</div> |
|
<mark class="highlight-mark-compact">{{ highlight.content }}</mark> |
|
{% endif %} |
|
{% else %} |
|
<mark class="highlight-mark-compact">{{ highlight.content }}</mark> |
|
{% endif %} |
|
</div> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
</div> |
|
{% endif %} |
|
|
|
{# <h1>Suggestions</h1>#} |
|
{# <twig:Organisms:CardList :list="suggestions" />#} |
|
{% endblock %}
|
|
|