From 54fbcdedd5375d7680b8330097a4b134cb77f198 Mon Sep 17 00:00:00 2001
From: IanM <16573496+imorland@users.noreply.github.com>
Date: Sun, 29 Sep 2024 12:26:53 +0100
Subject: [PATCH] chore: extensible TagHero (#4041)

---
 .../tags/js/src/forum/components/TagHero.js   | 41 +++++++++++++++----
 1 file changed, 33 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..bec68d37a 100644
--- a/extensions/tags/js/src/forum/components/TagHero.js
+++ b/extensions/tags/js/src/forum/components/TagHero.js
@@ -2,6 +2,7 @@ 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';
 
 export default class TagHero extends Component {
   view() {
@@ -13,15 +14,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}
+   */
+  viewItems() {
+    const items = new ItemList();
+
+    items.add('content', <div className="containerNarrow">{this.contentItems().toArray()}</div>, 80);
+
+    return items;
+  }
+
+  /**
+   * @returns {ItemList}
+   */
+  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;
+  }
 }