chore: make WelcomeHero extensible (#4039)

framework/core/js/src/forum/components/WelcomeHero.tsx

@@ -2,6 +2,7 @@ import app from '../app';
 import Component from '../../common/Component';
 import Button from '../../common/components/Button';
 import type Mithril from 'mithril';
+import ItemList from '../../common/utils/ItemList';
 
 export interface IWelcomeHeroAttrs {}
 
@@ -24,25 +25,9 @@ export default class WelcomeHero extends Component<IWelcomeHeroAttrs> {
   view(vnode: Mithril.Vnode<IWelcomeHeroAttrs, this>) {
     if (this.isHidden()) return null;
 
-    const slideUp = () => {
-      this.$().slideUp(this.hide.bind(this));
-    };
-
     return (
       <header className="Hero WelcomeHero">
-        <div className="container">
+        <div className="container">{this.viewItems().toArray()}</div>
-          <Button
-            icon="fas fa-times"
-            onclick={slideUp}
-            className="Hero-close Button Button--icon Button--link"
-            aria-label={app.translator.trans('core.forum.welcome_hero.hide')}
-          />
-
-          <div className="containerNarrow">
-            <h1 className="Hero-title">{app.forum.attribute('welcomeTitle')}</h1>
-            <div className="Hero-subtitle">{m.trust(app.forum.attribute('welcomeMessage'))}</div>
-          </div>
-        </div>
       </header>
     );
   }
@@ -66,4 +51,37 @@ export default class WelcomeHero extends Component<IWelcomeHeroAttrs> {
 
     return false;
   }
+
+  viewItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    const slideUp = () => {
+      this.$().slideUp(this.hide.bind(this));
+    };
+
+    items.add(
+      'dismiss-button',
+      <Button
+        icon="fas fa-times"
+        onclick={slideUp}
+        className="Hero-close Button Button--icon Button--link"
+        aria-label={app.translator.trans('core.forum.welcome_hero.hide')}
+      />,
+      100
+    );
+
+    items.add('content', <div className="containerNarrow">{this.contentItems().toArray()}</div>, 80);
+
+    return items;
+  }
+
+  contentItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add('title', <h1 className="Hero-title">{app.forum.attribute('welcomeTitle')}</h1>, 100);
+
+    items.add('subtitle', <div className="Hero-subtitle">{m.trust(app.forum.attribute('welcomeMessage'))}</div>);
+
+    return items;
+  }
 }