From 81b72b1b015f049bc743d3e05cea01c5d7732b95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Thu, 8 Jan 2026 17:52:01 +0100
Subject: [PATCH] Highlights: toggle long context

---
 .../utility/show_more_controller.js           | 19 +++++++++
 templates/pages/article.html.twig             | 40 +++++++++++++------
 2 files changed, 47 insertions(+), 12 deletions(-)
 create mode 100644 assets/controllers/utility/show_more_controller.js

diff --git a/assets/controllers/utility/show_more_controller.js b/assets/controllers/utility/show_more_controller.js
new file mode 100644
index 0000000..f7510bc
--- /dev/null
+++ b/assets/controllers/utility/show_more_controller.js
@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    static targets = ["preview", "full", "button"];
+
+    toggle(event) {
+        event?.preventDefault?.();
+        if (this.fullTarget.style.display === "none") {
+            this.fullTarget.style.display = "";
+            this.previewTarget.style.display = "none";
+            this.buttonTarget.textContent = "Show less";
+        } else {
+            this.fullTarget.style.display = "none";
+            this.previewTarget.style.display = "";
+            this.buttonTarget.textContent = "Show more";
+        }
+    }
+}
+
diff --git a/templates/pages/article.html.twig b/templates/pages/article.html.twig
index 803c2e1..2c5e396 100644
--- a/templates/pages/article.html.twig
+++ b/templates/pages/article.html.twig
@@ -234,21 +234,37 @@
                                 {{ 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 %}
+
+                        {% 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 %}
-                        </div>
+                        {% else %}
+                            {% set charLimit = 450 %}
+                            {% set content = highlight.content %}
+                            {% if content|length > charLimit %}
+                                <div data-utility--show-more-target="preview">
+                                    {{ content|slice(0, charLimit) ~ '…' }}
+                                </div>
+                                <div data-utility--show-more-target="full" style="display:none;">
+                                    {{ content }}
+                                </div>
+                                <button type="button"
+                                        class="btn btn-link btn-sm p-0 mt-1"
+                                        data-utility--show-more-target="button"
+                                        data-action="utility--show-more#toggle">
+                                    Show more
+                                </button>
+                            {% else %}
+                                <mark class="highlight-mark-compact">{{ content }}</mark>
+                            {% endif %}
+                        {% endif %}
                     </div>
                 {% endfor %}
             </div>