From 12fc3aeec24bdd393d317c9e2412febb958ca73c Mon Sep 17 00:00:00 2001
From: Davide Iadeluca <146922689+DavideIadeluca@users.noreply.github.com>
Date: Sat, 22 Feb 2025 10:49:44 +0100
Subject: [PATCH] feat(tags): improve extensibility of `TagHero` (#4198)

---
 .../tags/js/src/forum/components/TagHero.js   | 42 +++++++++++++++----
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/extensions/tags/js/src/forum/components/TagHero.js b/extensions/tags/js/src/forum/components/TagHero.js
index ded8150ab..5e77ad302 100644
--- a/extensions/tags/js/src/forum/components/TagHero.js
+++ b/extensions/tags/js/src/forum/components/TagHero.js
@@ -2,6 +2,8 @@ import Component from 'flarum/common/Component';
 import textContrastClass from 'flarum/common/helpers/textContrastClass';
 import tagIcon from '../../common/helpers/tagIcon';
 import classList from 'flarum/common/utils/classList';
+import ItemList from 'flarum/common/utils/ItemList';
+import Mithril from 'mithril';
 
 export default class TagHero extends Component {
   view() {
@@ -13,15 +15,39 @@ export default class TagHero extends Component {
         className={classList('Hero', 'TagHero', { 'TagHero--colored': color, [textContrastClass(color)]: color })}
         style={color ? { '--hero-bg': color } : undefined}
       >
-        <div className="container">
-          <div className="containerNarrow">
-            <h1 className="Hero-title">
-              {tag.icon() && tagIcon(tag, {}, { useColor: false })} {tag.name()}
-            </h1>
-            <div className="Hero-subtitle">{tag.description()}</div>
-          </div>
-        </div>
+        <div className="container">{this.viewItems().toArray()}</div>
       </header>
     );
   }
+
+  /**
+   * @returns {ItemList<Mithril.Children>}
+   */
+  viewItems() {
+    const items = new ItemList();
+
+    items.add('content', <div className="containerNarrow">{this.contentItems().toArray()}</div>, 80);
+
+    return items;
+  }
+
+  /**
+   * @returns {ItemList<Mithril.Children>}
+   */
+  contentItems() {
+    const items = new ItemList();
+    const tag = this.attrs.model;
+
+    items.add(
+      'tag-title',
+      <h1 className="Hero-title">
+        {tag.icon() && tagIcon(tag, {}, { useColor: false })} {tag.name()}
+      </h1>,
+      100
+    );
+
+    items.add('tag-subtitle', <div className="Hero-subtitle">{tag.description()}</div>, 90);
+
+    return items;
+  }
 }