From 260cc2a0f9cd06adb86737426bbb557d2ce55dd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?benjamin=20melan=C3=A7on?= <ben@agaric.coop>
Date: Thu, 12 Mar 2026 11:45:43 -0400
Subject: [PATCH] Style topics similarly to tags

---
 .../field/field--field-topics.html.twig       | 31 +++++++++++++++++++
 .../templates/layout/node--full.html.twig     |  6 +++-
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 web/themes/custom/agarica/patternlibrary/agaric/templates/field/field--field-topics.html.twig

diff --git a/web/themes/custom/agarica/patternlibrary/agaric/templates/field/field--field-topics.html.twig b/web/themes/custom/agarica/patternlibrary/agaric/templates/field/field--field-topics.html.twig
new file mode 100644
index 0000000..a5166c1
--- /dev/null
+++ b/web/themes/custom/agarica/patternlibrary/agaric/templates/field/field--field-topics.html.twig
@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ */
+#}
+
+<div class="flow_middle">
+  <h3 class="more-about-label subtitle is-mono is-5">Topic{% if items|length > 1 %}s{% endif %}</h3>
+  <p class="more-about-tags">
+  {% for item in items %}
+    {% if loop.length > 1 and loop.index == loop.length %}and {% endif %}
+    {{ item.content }}{% if loop.length > 2 and not loop.last %}, {% endif %}
+  {% endfor %}
+  </p>
+</div>
diff --git a/web/themes/custom/agarica/patternlibrary/agaric/templates/layout/node--full.html.twig b/web/themes/custom/agarica/patternlibrary/agaric/templates/layout/node--full.html.twig
index 76e3512..0390d8d 100644
--- a/web/themes/custom/agarica/patternlibrary/agaric/templates/layout/node--full.html.twig
+++ b/web/themes/custom/agarica/patternlibrary/agaric/templates/layout/node--full.html.twig
@@ -166,6 +166,10 @@
       {% if content.field_tags is not empty %}
         {{ content.field_tags }}
       {% endif %}
+
+      {% if content.field_topics is not empty %}
+        {{ content.field_topics }}
+      {% endif %}
     </div>
     {{content.indieweb_syndication}}
   </div>
@@ -174,7 +178,7 @@
 </article>{# end h-entry article #}
 
 <!-- Unexpected extra content -->
-{{ content|without('field_body_paragraph', 'field_authors', 'field_tags', 'uid', 'created', 'comment', 'indieweb_syndication') }}
+{{ content|without('field_body_paragraph', 'field_authors', 'field_tags', 'field_topics', 'uid', 'created', 'comment', 'indieweb_syndication') }}
 
 {% if content.comment %}
   {{ content.comment }}