feat(tags): improve extensibility of TagHero (#4198)

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="container">{this.viewItems().toArray()}</div>
-          <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>
       </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;
+  }
 }