FEATURE: add outlet above-main-container & additional settings (#17)

Adds settings for above-main-container outlet, to work with site's with sidebar.

And setting to show alongside category banners, which allows further customization if wanted to hide category banners for instance.

common/common.scss

@@ -1,3 +1,7 @@
+#main-outlet .tag-banner-container {
+  margin-bottom: 1em;
+}
+
 .tag-title-header {
   display: flex;
   text-align: center;

javascripts/discourse/components/discourse-tag-banners.hbs

@@ -6,19 +6,24 @@
       {{did-update this.getTagInfo this.shouldRender}}
       {{will-destroy this.resetTag}}
     >
-      {{#if this.categoryBannerPresence.isPresent}}
-        <DiscourseTagBannersTextOnly
+      {{#if
+        (or
+          (not this.categoryBannerPresence.isPresent)
+          (theme-setting "show_with_category_banners")
+        )
+      }}
+        <DiscourseTagBannersPresentation
           @formattedTagName={{this.formattedTagName}}
           @formattedAdditionalTagNames={{this.formattedAdditionalTagNames}}
+          @isIntersection={{this.isIntersection}}
           @tag={{this.tag}}
+          @additionalClass={{this.additionalClass}}
         />
       {{else}}
-        <DiscourseTagBannersPresentation
+        <DiscourseTagBannersTextOnly
           @formattedTagName={{this.formattedTagName}}
           @formattedAdditionalTagNames={{this.formattedAdditionalTagNames}}
-          @isIntersection={{this.isIntersection}}
           @tag={{this.tag}}
-          @additionalClass={{this.additionalClass}}
         />
       {{/if}}
     </div>

javascripts/discourse/connectors/above-main-container/tag-header-widget.hbs

@@ -0,0 +1,10 @@
+{{#if (theme-setting "show_above_main_container")}}
+  {{#if
+    (or
+      (not this.categoryBannerPresence.isPresent)
+      (theme-setting "show_with_category_banners")
+    )
+  }}
+    <DiscourseTagBanners />
+  {{/if}}
+{{/if}}

javascripts/discourse/connectors/above-main-container/tag-header-widget.js

@@ -0,0 +1,16 @@
+import Component from "@ember/component";
+import { tracked } from "@glimmer/tracking";
+import { getOwner } from "@ember/application";
+
+export default class extends Component {
+  @tracked categoryBannerPresence = null;
+
+  constructor() {
+    super(...arguments);
+
+    // this prevents a failure if the category banner component is not installed
+    this.categoryBannerPresence = getOwner(this).lookup(
+      "service:categoryBannerPresence"
+    );
+  }
+}

javascripts/discourse/connectors/above-site-header/tag-header-widget.hbs

@@ -1,5 +1,10 @@
 {{#if (theme-setting "show_above_site_header")}}
-  {{#unless this.categoryBannerPresence.isPresent}}
+  {{#if
+    (or
+      (not this.categoryBannerPresence.isPresent)
+      (theme-setting "show_with_category_banners")
+    )
+  }}
     <DiscourseTagBanners />
-  {{/unless}}
+  {{/if}}
 {{/if}}

javascripts/discourse/connectors/below-site-header/tag-header-widget.hbs

@@ -1,5 +1,10 @@
 {{#if (theme-setting "show_below_site_header")}}
-  {{#unless this.categoryBannerPresence.isPresent}}
+  {{#if
+    (or
+      (not this.categoryBannerPresence.isPresent)
+      (theme-setting "show_with_category_banners")
+    )
+  }}
     <DiscourseTagBanners />
-  {{/unless}}
+  {{/if}}
 {{/if}}

javascripts/discourse/connectors/category-banners-after-title/category-banner-tag-connector.hbs

@@ -1 +1,3 @@
-<DiscourseTagBanners />
+{{#if (not (theme-setting "show_with_category_banners"))}}
+  <DiscourseTagBanners />
+{{/if}}

settings.yml

@@ -16,6 +16,11 @@ show_below_site_header:
   type: bool
   description: "Display the banner in the below site header connector."
 
+show_above_main_container:
+  default: false
+  type: bool
+  description: "Display the banner in the above main container connector, for sites with the sidebar enabled."
+
 remove_tag_hyphen:
   default: false
   type: bool
@@ -30,3 +35,8 @@ hide_tag_icon:
   default: false
   type: bool
   description: "Hide the tag icon when used along with category banners"
+
+show_with_category_banners:
+  default: false
+  type: bool
+  description: "Show full banner alongside category banners"