DEV: Update component outlet ordering (discourse#13)

README.md

@@ -16,7 +16,8 @@ Following setting changes are required for this theme to render properly:
 In the options for the `discourse-search-banner` theme component, following changes are required for this theme to render properly:
 
 - `show-on` options needs to be set to **homepage**
-- `plugin-outlet` options needs to be set to **below-site-header**
+- ~~`plugin-outlet` options needs to be set to **below-site-header**~~
+    > As of Oct. 4th, 2022: The outlet will be auto-set by the Mint theme
 - `background image` can be set as per your requirement
 
 ### Discourse Showcased Categories

common/common.scss

@@ -386,3 +386,19 @@ summary.select-kit-header.single-select-header.dropdown-select-box-header {
     border: 1px dashed var(--tertiary);
   }
 }
+
+// Control order of plugin connectors
+.search-banner {
+  display: none;
+}
+
+.showcased-topic-list {
+  display: none;
+}
+
+.mint-component-extensions {
+  .search-banner,
+  .showcased-topic-list {
+    display: block;
+  }
+}

javascripts/discourse/connectors/above-main-container/mint-component-extensions.hbs

@@ -0,0 +1,9 @@
+{{#if searchBannerInstalled}}
+  <div class="search-banner">
+    <SearchBanner />
+  </div>
+{{/if}}
+
+{{#if showcasedCategoriesInstalled}}
+  <TwoTopicList />
+{{/if}}

javascripts/discourse/connectors/above-main-container/mint-component-extensions.js

@@ -0,0 +1,13 @@
+import { getOwner } from "discourse-common/lib/get-owner";
+
+export default {
+  setupComponent(attrs, component) {
+    if (getOwner(this).resolveRegistration("component:two-topic-list")) {
+      component.set("showcasedCategoriesInstalled", true);
+    }
+
+    if (getOwner(this).resolveRegistration("component:search-banner")) {
+      component.set("searchBannerInstalled", true);
+    }
+  },
+};