From f846d2e8fdb1e4d9fe619e238d33e03bf512ac9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Saquetim?=
 <1108771+megothss@users.noreply.github.com>
Date: Mon, 10 Jun 2024 15:35:08 -0300
Subject: [PATCH] DEV: Extract the contents of the home logo to a component
 (#27157)

This commit extracts the content of the `HomeLogo` to a standalone
component. This enables us to utilize the `home-logo-contents` plugin
outlet to render an alternative version of the logo using the new
component to reuse the rendering logic, but using alternative
properties. For example:

```js
  const logoSmallUrl = settings
  .theme_uploads["theme-alternative-logo-small"];
  const logoUrl = settings.theme_uploads["theme-alternative-logo"];
  const mobileLogoUrl = settings
  .theme_uploads["theme-alternative-logo"];

  api.renderInOutlet("home-logo-contents", <template>
    <HomeLogoContents
      @logoSmallUrl={{logoSmallUrl}}
      @logoUrl={{logoUrl}}
      @minimized={{@outletArgs.minimized}}
      @mobileLogoUrl={{mobileLogoUrl}}
      @showMobileLogo={{@outletArgs.showMobileLogo}}
      @title={{@outletArgs.title}}
    />
  </template>);
``
---
 .../components/header/home-logo-contents.gjs  | 37 ++++++++++++
 .../app/components/header/home-logo.gjs       | 57 ++++++++-----------
 2 files changed, 60 insertions(+), 34 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/header/home-logo-contents.gjs

diff --git a/app/assets/javascripts/discourse/app/components/header/home-logo-contents.gjs b/app/assets/javascripts/discourse/app/components/header/home-logo-contents.gjs
new file mode 100644
index 00000000000..d76f6b402d2
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/header/home-logo-contents.gjs
@@ -0,0 +1,37 @@
+import icon from "discourse-common/helpers/d-icon";
+import Logo from "./logo";
+
+const HomeLogoContents = <template>
+  {{#if @minimized}}
+    {{#if @logoSmallUrl}}
+      <Logo
+        @key="logo-small"
+        @url={{@logoSmallUrl}}
+        @title={{@title}}
+        @darkUrl={{@logoSmallUrlDark}}
+      />
+    {{else}}
+      {{icon "home"}}
+    {{/if}}
+  {{else if @showMobileLogo}}
+    <Logo
+      @key="logo-mobile"
+      @url={{@mobileLogoUrl}}
+      @title={{@title}}
+      @darkUrl={{@mobileLogoUrlDark}}
+    />
+  {{else if @logoUrl}}
+    <Logo
+      @key="logo-big"
+      @url={{@logoUrl}}
+      @title={{@title}}
+      @darkUrl={{@logoUrlDark}}
+    />
+  {{else}}
+    <h1 id="site-text-logo" class="text-logo">
+      {{@title}}
+    </h1>
+  {{/if}}
+</template>;
+
+export default HomeLogoContents;
diff --git a/app/assets/javascripts/discourse/app/components/header/home-logo.gjs b/app/assets/javascripts/discourse/app/components/header/home-logo.gjs
index 2f6b5ec5d91..37404fdb196 100644
--- a/app/assets/javascripts/discourse/app/components/header/home-logo.gjs
+++ b/app/assets/javascripts/discourse/app/components/header/home-logo.gjs
@@ -7,9 +7,8 @@ import PluginOutlet from "discourse/components/plugin-outlet";
 import concatClass from "discourse/helpers/concat-class";
 import { wantsNewWindow } from "discourse/lib/intercept-click";
 import DiscourseURL from "discourse/lib/url";
-import icon from "discourse-common/helpers/d-icon";
 import getURL from "discourse-common/lib/get-url";
-import Logo from "./logo";
+import HomeLogoContents from "./home-logo-contents";
 
 let hrefCallback;
 
@@ -64,6 +63,10 @@ export default class HomeLogo extends Component {
     return this.logoResolver("mobile_logo", { dark: this.darkModeAvailable });
   }
 
+  get title() {
+    return this.siteSettings.title;
+  }
+
   logoResolver(name, opts = {}) {
     // get alternative logos for browser dark dark mode switching
     if (opts.dark) {
@@ -101,42 +104,28 @@ export default class HomeLogo extends Component {
           <PluginOutlet
             @name="home-logo-contents"
             @outletArgs={{hash
-              minimized=@minimized
-              logoUrl=this.logoUrl
               logoSmallUrl=this.logoSmallUrl
+              logoSmallUrlDark=this.logoSmallUrlDark
+              logoUrl=this.logoUrl
+              logoUrlDark=this.logoUrlDark
+              minimized=@minimized
+              mobileLogoUrl=this.mobileLogoUrl
+              mobileLogoUrlDark=this.mobileLogoUrlDark
               showMobileLogo=this.showMobileLogo
+              title=this.title
             }}
           >
-            {{#if @minimized}}
-              {{#if this.logoSmallUrl}}
-                <Logo
-                  @key="logo-small"
-                  @url={{this.logoSmallUrl}}
-                  @title={{this.siteSettings.title}}
-                  @darkUrl={{this.logoSmallUrlDark}}
-                />
-              {{else}}
-                {{icon "home"}}
-              {{/if}}
-            {{else if this.showMobileLogo}}
-              <Logo
-                @key="logo-mobile"
-                @url={{this.mobileLogoUrl}}
-                @title={{this.siteSettings.title}}
-                @darkUrl={{this.mobileLogoUrlDark}}
-              />
-            {{else if this.logoUrl}}
-              <Logo
-                @key="logo-big"
-                @url={{this.logoUrl}}
-                @title={{this.siteSettings.title}}
-                @darkUrl={{this.logoUrlDark}}
-              />
-            {{else}}
-              <h1 id="site-text-logo" class="text-logo">
-                {{this.siteSettings.title}}
-              </h1>
-            {{/if}}
+            <HomeLogoContents
+              @logoSmallUrl={{this.logoSmallUrl}}
+              @logoSmallUrlDark={{this.logoSmallUrlDark}}
+              @logoUrl={{this.logoUrl}}
+              @logoUrlDark={{this.logoUrlDark}}
+              @minimized={{@minimized}}
+              @mobileLogoUrl={{this.mobileLogoUrl}}
+              @mobileLogoUrlDark={{this.mobileLogoUrlDark}}
+              @showMobileLogo={{this.showMobileLogo}}
+              @title={{this.title}}
+            />
           </PluginOutlet>
         </a>
       </div>