silberengel
/
newsroom
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Highlights

imwald
Nuša Pukšič 1 month ago
parent
5a7ed1f2f8
commit
8e546567f6
3 changed files with 192 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 88
      assets/styles/04-pages/highlights.css
  2. 24
      src/Service/HighlightService.php
  3. 81
      templates/pages/article.html.twig

88
assets/styles/04-pages/highlights.css
Unescape View File

@ -133,6 +133,90 @@
background-color: var(--color-accent-400); background-color: var(--color-accent-400);
} }
/* Sidebar highlights - compact cards */
.highlights-sidebar {
display: flex;
flex-direction: column;
gap: 1rem;
}
.highlight-card-compact {
background: var(--color-bg-light);
padding: var(--spacing-2);
transition: transform 0.2s, box-shadow 0.2s;
}
.highlight-card-compact:hover {
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.highlight-header-compact {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
font-size: 0.85rem;
gap: 0.5rem;
}
.highlight-content-compact {
font-size: 0.95rem;
line-height: 1.4;
color: var(--color-text);
}
.highlight-mark-compact {
background: var(--color-accent-300);
padding: 0.1em 0.2em;
font-weight: 500;
border-radius: 2px;
}
.context-text-compact {
margin-bottom: 0.5rem;
font-style: normal;
color: var(--color-text-mid);
}
.sidebar-section {
margin-bottom: 2rem;
}
.sidebar-heading {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
}
/* Mobile highlights - hidden by default, shown when sidebar is not visible */
.highlights-mobile-section {
display: none;
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid var(--color-border);
}
.highlights-mobile-heading {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--color-text);
}
.highlights-mobile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
/* Show mobile highlights when sidebar is hidden (1200px and below) */
@media (max-width: 1200px) {
.highlights-mobile-section {
display: block;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.highlights-grid { .highlights-grid {
column-count: 1; column-count: 1;
@ -141,6 +225,10 @@
.highlight-card { .highlight-card {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.highlights-mobile-grid {
grid-template-columns: 1fr;
}
} }
@media (min-width: 769px) and (max-width: 1400px) { @media (min-width: 769px) and (max-width: 1400px) {

24
src/Service/HighlightService.php
Unescape View File

@ -77,7 +77,7 @@ class HighlightService
'count' => count($highlights) 'count' => count($highlights)
]); ]);
return array_map(function (Highlight $highlight) { $mappedHighlights = array_map(function (Highlight $highlight) {
return [ return [
'content' => $highlight->getContent(), 'content' => $highlight->getContent(),
'created_at' => $highlight->getCreatedAt(), 'created_at' => $highlight->getCreatedAt(),
@ -85,6 +85,28 @@ class HighlightService
'context' => $highlight->getContext(), 'context' => $highlight->getContext(),
]; ];
}, $highlights); }, $highlights);
// Deduplicate highlights based on content and pubkey
// Keep the most recent highlight for each content+pubkey combination
$deduplicated = [];
$seen = [];
foreach ($mappedHighlights as $highlight) {
$key = md5($highlight['content'] . '|' . $highlight['pubkey']);
if (!isset($seen[$key])) {
$seen[$key] = true;
$deduplicated[] = $highlight;
}
}
$this->logger->info('Deduplicated highlights', [
'coordinate' => $articleCoordinate,
'original_count' => count($mappedHighlights),
'deduplicated_count' => count($deduplicated)
]);
return $deduplicated;
} }
/** /**

81
templates/pages/article.html.twig
Unescape View File

@ -168,10 +168,91 @@
}" /> }" />
<twig:Organisms:Comments current="30023:{{ article.pubkey }}:{{ article.slug|e }}"></twig:Organisms:Comments> <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> </article>
{% endblock %} {% endblock %}
{% block aside %} {% 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>#} {# <h1>Suggestions</h1>#}
{# <twig:Organisms:CardList :list="suggestions" />#} {# <twig:Organisms:CardList :list="suggestions" />#}
{% endblock %} {% endblock %}

Write Preview
Loading…
Cancel
Save