From e9b4316ae7df6a652bfa5efd68fdda02dcb3311c Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Wed, 2 Jul 2025 15:22:30 +0300 Subject: [PATCH 1/7] Displaying the preferred username and Company Logo --- ...ssembly-configuring-the-global-header.adoc | 8 ++- ...ing-company-logo-in-the-global-header.adoc | 54 ++++++++++++++++++ ...referred-username-in-profile-dropdown.adoc | 56 +++++++++++++++++++ 3 files changed, 117 insertions(+), 1 deletion(-) create mode 100644 modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc create mode 100644 modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index 93badc6698..1d709d991e 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -16,4 +16,10 @@ By default, the {product-short} global header includes the following components: include::modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc[leveloffset=+1] -include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffset=+1] \ No newline at end of file +include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffset=+1] + + +include::modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc[leveloffset=+1] + + +include::modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc[leveloffset=+1] \ No newline at end of file diff --git a/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc b/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc new file mode 100644 index 0000000000..3900d89632 --- /dev/null +++ b/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc @@ -0,0 +1,54 @@ +[id="displaying-company-logo-in-the-global-header.adoc_{context}"] += Displaying company logo in the global header + +You can configure a company logo in the *Global Header* of the {product} ({product-very-short}) to reflect your company's branding. + +The `CompanyLogo` supports strict display constraints to ensure visual consistency: + +* Maximum dimensions: 150px wide, 40px high. +* The logo must retain its original proportions. +* The component layout remains fixed and cannot be moved from its mount point. +* Supports the following props: +** `logo`: Encoded logo image. +** `to`: The redirect path where the logo is clicked. + +.Procedure + +To display a custom company logo in the *Global Header*, update the configuration with a mount point for `CompanyLogo`: + +.Example: Configuring company logo + +[source,yaml,subs="+attributes,+quotes"] +---- +red-hat-developer-hub.backstage-plugin-global-header: + mountPoints: + - mountPoint: global.header/component + importName: CompanyLogo + config: + priority: 200 # <1> + props: + logo: + fullLogo: + to: '/' # <2> +#...Rest of the Global Header Configuration +---- +<1> Specify the position of the company logo in the global header. +<2> The redirect path. The logo should display the custom image or icon. + +To ensure the logo appears in the correct location, configure the Global Header’s `position` value as shown in the example below: + +[source,yaml] +---- +red-hat-developer-hub.backstage-plugin-global-header: + mountPoints: + - mountPoint: application/header + importName: GlobalHeader + config: + position: above-sidebar +---- + +By default, `position` is set to `above-main-content`. + +.Verification +. The logo appears correctly in the Global Header. +. Click the logo to confirm it redirects to the path you defined in `props.to`. diff --git a/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc b/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc new file mode 100644 index 0000000000..f6ad0ee07c --- /dev/null +++ b/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc @@ -0,0 +1,56 @@ +[id="displaying-preferred-username-in-global-header-profile-dropdown_{context}"] += Displaying the preferred username in the profile dropdown + +You can display the preferred username in the global header's profile dropdown by configuring `spec.profile.displayName` in the user entity. When not configured, the application falls back to a `metadata.title`. If neither is configured, it defaults to a user-friendly name generated by the `useProfileInfo` hook. + +.Procedure +.Example when you configure `spec.profile.displayName` + +[source,yaml,subs="+attributes,+quotes"] +---- +apiVersion: backstage.io/v1alpha1 +kind: User +metadata: + name: __ # <1> + title: __ # <2> +spec: + profile: + displayName: __ # <3> + memberOf: [janus-authors] +---- +<1> Required: Specify the unique username (`metadata.name`). +<2> Optional: Specify the preferred title (`metadata.title`). +<3> Optional: Specify the preferred display name (`spec.profile.displayName`). This takes the highest priority. + +.Example when you do not configure `spec.profile.displayname` but configure `metadata.title` + +[source,yaml,subs="+attributes,+quotes"] +---- +apiVersion: backstage.io/v1alpha1 +kind: User +metadata: + name: __ # <1> + title: __ # <2> +spec: + memberOf: [janus-authors] +---- +<1> Required: Specify the unique username (`metadata.name`). +<2> Optional: Specify the preferred title (`metadata.title`). + +.Example when you do not configure the `spec.profile.displayname` and the `title` + +[source,yaml,subs="+attributes,+quotes"] +---- +apiVersion: backstage.io/v1alpha1 +kind: User +metadata: + name: __ # <1> +spec: + memberOf: [janus-authors] +---- +<1> Required: Specify the unique username (`metadata.name`). + +[NOTE] +==== +The application falls back to `metadata.name` when you do not register the user entity. +==== \ No newline at end of file From 2bc3691dac5dd046e71c2f9143b3885098a26932 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Mon, 7 Jul 2025 12:47:43 +0300 Subject: [PATCH 2/7] Displaying the preferred username and Company Logo --- .../proc-displaying-preferred-username-in-profile-dropdown.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc b/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc index f6ad0ee07c..879c257e65 100644 --- a/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc +++ b/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc @@ -37,7 +37,7 @@ spec: <1> Required: Specify the unique username (`metadata.name`). <2> Optional: Specify the preferred title (`metadata.title`). -.Example when you do not configure the `spec.profile.displayname` and the `title` +.Example when you do not configure the `spec.profile.displayname` and the `metadata.title` [source,yaml,subs="+attributes,+quotes"] ---- From 4169455fd180eaa1e5fa659f57377f0c3c5fdf06 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Wed, 6 Aug 2025 16:02:23 +0200 Subject: [PATCH 3/7] Displaying the preferred username and Company Log --- ...ing-company-logo-in-the-global-header.adoc | 107 ++++++++++++------ 1 file changed, 74 insertions(+), 33 deletions(-) diff --git a/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc b/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc index 3900d89632..1572e807e0 100644 --- a/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc +++ b/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc @@ -1,54 +1,95 @@ [id="displaying-company-logo-in-the-global-header.adoc_{context}"] = Displaying company logo in the global header -You can configure a company logo in the *Global Header* of the {product} ({product-very-short}) to reflect your company's branding. +You can configure a company logo in the global header of the {product} ({product-very-short}) to reflect your company's branding. The `CompanyLogo` is now part of the global header by default and offers full control over the theming, navigation behavior, sizing, and fallback options. -The `CompanyLogo` supports strict display constraints to ensure visual consistency: +The `CompanyLogo` ensures strict display constraints to maintain design consistency: -* Maximum dimensions: 150px wide, 40px high. -* The logo must retain its original proportions. -* The component layout remains fixed and cannot be moved from its mount point. -* Supports the following props: -** `logo`: Encoded logo image. -** `to`: The redirect path where the logo is clicked. +* The default maximum dimensions: `150px` wide, `40px` high. +* The logo must retain its original proportions using `object-fit: contain` +* The component keeps its layout fixed and you cannot move it from its mount point. +* The `CompanyLogo` automatically scales the image down if dimensions exceed allowed size. -.Procedure +This component also supports the following props: -To display a custom company logo in the *Global Header*, update the configuration with a mount point for `CompanyLogo`: +* `logo`: The encoded logo image. +* `to`: The redirect path for when users click the logo. +* `width`: Optional width of the logo. +* `height`: Optional height of the logo. -.Example: Configuring company logo +.Procedure +. To display a custom company logo in the global header, update the configuration with a mount point for `CompanyLogo`: ++ +.Example: Configuring company logo ++ [source,yaml,subs="+attributes,+quotes"] ---- -red-hat-developer-hub.backstage-plugin-global-header: - mountPoints: - - mountPoint: global.header/component - importName: CompanyLogo - config: - priority: 200 # <1> - props: - logo: - fullLogo: - to: '/' # <2> -#...Rest of the Global Header Configuration ----- -<1> Specify the position of the company logo in the global header. -<2> The redirect path. The logo should display the custom image or icon. - -To ensure the logo appears in the correct location, configure the Global Header’s `position` value as shown in the example below: - -[source,yaml] ----- +# ...rest of the global header configuration red-hat-developer-hub.backstage-plugin-global-header: mountPoints: - mountPoint: application/header importName: GlobalHeader config: - position: above-sidebar + position: above-main-content # <1> + + - mountPoint: global.header/component + importName: CompanyLogo + config: + priority: 200 + props: + to: '/catalog' # <2> + width: 300 + height: 200 + #logo: 'data:image/png;base64,...' # <3> + logo: + dark: 'data:image/png;base64,...' # <4> + light: 'data:image/png;base64,...' # <5> +---- +<1> Specify the position of the company logo in the global header. By default, the `position` is set to `above-main-content`. Supported values are `above-main-content` and `above-sidebar`. +<2> Define the redirect path for when users click the logo. +<3> Provide a single logo to apply across all themes. +<4> Provide a dark mode logo in the `logo.dark`. +<5> Provide a light mode logo in the `logo.light`. ++ +You can use either a single logo for all themes or theme-specific logos (light and dark). If you define both, theme-specific logos take precedence over the single logo. + +. (Optional) If you do not provide props to the `CompanyLogo` component, the component instead uses values defined under `app.branding` in your `{my-app-config-file}` file. You can configure both the sidebar logo and the `CompanyLogo` fallback as shown in the following configuration: ++ +.Example: Fallback configuration ++ +[source,yaml,subs="+attributes,+quotes"] +---- +app: + branding: + fullLogoWidth: 220 # Fallback width + # fullLogo: "data:image/svg+xml;base64,..." + fullLogo: + light: 'data:image/svg+xml;base64,...' + dark: 'data:image/svg+xml;base64,...' ---- ++ +The `CompanyLogo` uses the following configuration elements to control fallback and sizing behavior: + +* *Logo source priority* +** If you fail to provide a logo through either the `CompanyLogo` props (`logo`, `logo.light`, `logo.dark`) or the `app.branding.fullLogo`, the component displays the default {product-short} theme-specific logo. + +* *Logo width priority* +** If you fail to specify the `width` using the `CompanyLogo` prop (`props.width`) or through the `app.branding.fullLogoWidth` from the `{my-app-config-file}`, the component applies a default width. +** If your configure `width` results in a height greater than the default maximum height, the component automatically scales the logo down. ++ +In some cases, changing only the width might not visibly affect the logo unless you also adjust the height. -By default, `position` is set to `above-main-content`. +* *Logo height priority* +** If you do not specify the `height` using the `CompanyLogo` prop (`props.height`), the component automatically applies a default maximum height. ++ +[NOTE] +==== +If you increase the company logo's height, the global header height also increases, but the image never appears cropped or distorted. +==== .Verification -. The logo appears correctly in the Global Header. +. The logo appears correctly in the global header. . Click the logo to confirm it redirects to the path you defined in `props.to`. +. Toggle between `light` and `dark` themes to ensure the correct logo loads in each. +. (Optional) Temporarily remove the `CompanyLogo` props to test the fallback to `app.branding.fullLogo`. From cfd7edbe71d5f7fad7d65253a0f61b5a45633838 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 8 Aug 2025 15:41:14 +0200 Subject: [PATCH 4/7] Displaying the preferred username and Company Log --- ...ssembly-configuring-the-global-header.adoc | 2 +- ...ing-company-logo-in-the-global-header.adoc | 37 ++++++------ ...eferred-username-in-profile-drop-down.adoc | 56 +++++++++++++++++++ ...referred-username-in-profile-dropdown.adoc | 56 ------------------- 4 files changed, 74 insertions(+), 77 deletions(-) create mode 100644 modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc delete mode 100644 modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index 2da06090b4..33eda1f289 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -20,7 +20,7 @@ include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffse include::modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc[leveloffset=+1] -include::modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc[leveloffset=+1] +include::modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc[leveloffset=+1] include::modules/configuring-the-global-header/con-quicklinks-and-starred-items-in-global-header.adoc[leveloffset=+1] diff --git a/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc b/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc index 1572e807e0..c156bcea51 100644 --- a/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc +++ b/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc @@ -1,14 +1,14 @@ [id="displaying-company-logo-in-the-global-header.adoc_{context}"] = Displaying company logo in the global header -You can configure a company logo in the global header of the {product} ({product-very-short}) to reflect your company's branding. The `CompanyLogo` is now part of the global header by default and offers full control over the theming, navigation behavior, sizing, and fallback options. +You can configure a company logo in the global header of the {product} ({product-very-short}) to reflect your company's branding. `CompanyLogo` is part of the global header by default and offers full control over the theming, navigation behavior, sizing, and fallback options. -The `CompanyLogo` ensures strict display constraints to maintain design consistency: +`CompanyLogo` ensures strict display constraints to maintain design consistency: * The default maximum dimensions: `150px` wide, `40px` high. -* The logo must retain its original proportions using `object-fit: contain` +* The logo must retain its original proportions using `object-fit: contain`. * The component keeps its layout fixed and you cannot move it from its mount point. -* The `CompanyLogo` automatically scales the image down if dimensions exceed allowed size. +* `CompanyLogo` automatically scales the image down if dimensions exceed allowed size. This component also supports the following props: @@ -31,26 +31,23 @@ red-hat-developer-hub.backstage-plugin-global-header: - mountPoint: application/header importName: GlobalHeader config: - position: above-main-content # <1> + # Supported values: `above-main-content` | `above-sidebar` + position: above-main-content - mountPoint: global.header/component importName: CompanyLogo config: priority: 200 props: - to: '/catalog' # <2> + # Path to navigate when users click the logo: + to: '/catalog' width: 300 height: 200 - #logo: 'data:image/png;base64,...' # <3> + #logo: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATQAAACkCAMAAAAuT...' # Single logo for all themes logo: - dark: 'data:image/png;base64,...' # <4> - light: 'data:image/png;base64,...' # <5> + dark: 'data:image/png;base64,...' # Shown in dark theme + light: 'data:image/png;base64,...' # Shown in light theme ---- -<1> Specify the position of the company logo in the global header. By default, the `position` is set to `above-main-content`. Supported values are `above-main-content` and `above-sidebar`. -<2> Define the redirect path for when users click the logo. -<3> Provide a single logo to apply across all themes. -<4> Provide a dark mode logo in the `logo.dark`. -<5> Provide a light mode logo in the `logo.light`. + You can use either a single logo for all themes or theme-specific logos (light and dark). If you define both, theme-specific logos take precedence over the single logo. @@ -69,23 +66,23 @@ app: dark: 'data:image/svg+xml;base64,...' ---- + -The `CompanyLogo` uses the following configuration elements to control fallback and sizing behavior: +`CompanyLogo` uses the following configuration elements to control fallback and sizing behavior: * *Logo source priority* -** If you fail to provide a logo through either the `CompanyLogo` props (`logo`, `logo.light`, `logo.dark`) or the `app.branding.fullLogo`, the component displays the default {product-short} theme-specific logo. +** If you fail to provide a logo through either the `CompanyLogo` props (`logo`, `logo.light`, `logo.dark`) or `app.branding.fullLogo`, the component displays the default {product-short} theme-specific logo. * *Logo width priority* -** If you fail to specify the `width` using the `CompanyLogo` prop (`props.width`) or through the `app.branding.fullLogoWidth` from the `{my-app-config-file}`, the component applies a default width. -** If your configure `width` results in a height greater than the default maximum height, the component automatically scales the logo down. +** If you fail to specify the `width` using the `CompanyLogo` prop (`props.width`) or through the `app.branding.fullLogoWidth` from `{my-app-config-file}`, the component applies a default width. +** If the `width` component that you configure results in a height greater than the default maximum height, the component automatically scales the logo down. + In some cases, changing only the width might not visibly affect the logo unless you also adjust the height. * *Logo height priority* -** If you do not specify the `height` using the `CompanyLogo` prop (`props.height`), the component automatically applies a default maximum height. +** If you do not specify `height` using the `CompanyLogo` prop (`props.height`), the component automatically applies a default maximum height. + [NOTE] ==== -If you increase the company logo's height, the global header height also increases, but the image never appears cropped or distorted. +If you increase the company logo height, the global header height also increases, but the image does not appear cropped or distorted. ==== .Verification diff --git a/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc b/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc new file mode 100644 index 0000000000..630b3a5e4b --- /dev/null +++ b/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc @@ -0,0 +1,56 @@ +[id="displaying-preferred-username-in-global-header-profile-drop-down_{context}"] += Displaying the preferred username in the profile dropdown + +You can display the preferred username in the global header profile drop-down list by configuring `spec.profile.displayName` in the user entity. When not configured, the application falls back to a `metadata.title`. If neither is configured, it defaults to a user-friendly name generated by the `useProfileInfo` hook. + +.Procedure +.Example when you configure `spec.profile.displayName` + +[source,yaml,subs="+attributes,+quotes"] +---- +apiVersion: backstage.io/v1alpha1 +kind: User +metadata: + # Required unique username + name: __ + # Optional preferred title + title: __ +spec: + profile: + # Optional preferred display name (highest priority) + displayName: __ + memberOf: [janus-authors] +---- + +.Example when you do not configure `spec.profile.displayname` but configure `metadata.title` + +[source,yaml,subs="+attributes,+quotes"] +---- +apiVersion: backstage.io/v1alpha1 +kind: User +metadata: + # Required unique username + name: __ + # Optional preferred title + title: __ +spec: + memberOf: [janus-authors] +---- + +.Example when you do not configure the `spec.profile.displayname` and the `metadata.title` + +[source,yaml,subs="+attributes,+quotes"] +---- +apiVersion: backstage.io/v1alpha1 +kind: User +metadata: + # Required unique username + name: __ +spec: + memberOf: [janus-authors] +---- + +[NOTE] +==== +The application falls back to `metadata.name` when you do not register the user entity. +==== \ No newline at end of file diff --git a/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc b/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc deleted file mode 100644 index 879c257e65..0000000000 --- a/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc +++ /dev/null @@ -1,56 +0,0 @@ -[id="displaying-preferred-username-in-global-header-profile-dropdown_{context}"] -= Displaying the preferred username in the profile dropdown - -You can display the preferred username in the global header's profile dropdown by configuring `spec.profile.displayName` in the user entity. When not configured, the application falls back to a `metadata.title`. If neither is configured, it defaults to a user-friendly name generated by the `useProfileInfo` hook. - -.Procedure -.Example when you configure `spec.profile.displayName` - -[source,yaml,subs="+attributes,+quotes"] ----- -apiVersion: backstage.io/v1alpha1 -kind: User -metadata: - name: __ # <1> - title: __ # <2> -spec: - profile: - displayName: __ # <3> - memberOf: [janus-authors] ----- -<1> Required: Specify the unique username (`metadata.name`). -<2> Optional: Specify the preferred title (`metadata.title`). -<3> Optional: Specify the preferred display name (`spec.profile.displayName`). This takes the highest priority. - -.Example when you do not configure `spec.profile.displayname` but configure `metadata.title` - -[source,yaml,subs="+attributes,+quotes"] ----- -apiVersion: backstage.io/v1alpha1 -kind: User -metadata: - name: __ # <1> - title: __ # <2> -spec: - memberOf: [janus-authors] ----- -<1> Required: Specify the unique username (`metadata.name`). -<2> Optional: Specify the preferred title (`metadata.title`). - -.Example when you do not configure the `spec.profile.displayname` and the `metadata.title` - -[source,yaml,subs="+attributes,+quotes"] ----- -apiVersion: backstage.io/v1alpha1 -kind: User -metadata: - name: __ # <1> -spec: - memberOf: [janus-authors] ----- -<1> Required: Specify the unique username (`metadata.name`). - -[NOTE] -==== -The application falls back to `metadata.name` when you do not register the user entity. -==== \ No newline at end of file From 0f408b4fcb0438596a68bcaf8ef78414b4c43bf1 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Tue, 12 Aug 2025 18:12:20 +0200 Subject: [PATCH 5/7] Displaying the preferred username and Company Log --- ...ssembly-configuring-the-global-header.adoc | 4 +- ...ing-company-logo-in-the-global-header.adoc | 92 ------------------- ...oc-enabling-logo-in-the-global-header.adoc | 88 ++++++++++++++++++ .../proc-enabling-logo-in-the-sidebar.adoc | 75 +++++++++++++++ 4 files changed, 166 insertions(+), 93 deletions(-) delete mode 100644 modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc create mode 100644 modules/configuring-the-global-header/proc-enabling-logo-in-the-global-header.adoc create mode 100644 modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index 33eda1f289..706ef9a6fa 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -18,7 +18,9 @@ include::modules/configuring-the-global-header/proc-customize-rhdh-global-header include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffset=+1] -include::modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc[leveloffset=+1] +include::modules/configuring-the-global-header/proc-enabling-logo-in-the-global-header.adoc[leveloffset=+1] + +include::modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc[leveloffset=+1] include::modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc[leveloffset=+1] diff --git a/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc b/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc deleted file mode 100644 index c156bcea51..0000000000 --- a/modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc +++ /dev/null @@ -1,92 +0,0 @@ -[id="displaying-company-logo-in-the-global-header.adoc_{context}"] -= Displaying company logo in the global header - -You can configure a company logo in the global header of the {product} ({product-very-short}) to reflect your company's branding. `CompanyLogo` is part of the global header by default and offers full control over the theming, navigation behavior, sizing, and fallback options. - -`CompanyLogo` ensures strict display constraints to maintain design consistency: - -* The default maximum dimensions: `150px` wide, `40px` high. -* The logo must retain its original proportions using `object-fit: contain`. -* The component keeps its layout fixed and you cannot move it from its mount point. -* `CompanyLogo` automatically scales the image down if dimensions exceed allowed size. - -This component also supports the following props: - -* `logo`: The encoded logo image. -* `to`: The redirect path for when users click the logo. -* `width`: Optional width of the logo. -* `height`: Optional height of the logo. - -.Procedure - -. To display a custom company logo in the global header, update the configuration with a mount point for `CompanyLogo`: -+ -.Example: Configuring company logo -+ -[source,yaml,subs="+attributes,+quotes"] ----- -# ...rest of the global header configuration -red-hat-developer-hub.backstage-plugin-global-header: - mountPoints: - - mountPoint: application/header - importName: GlobalHeader - config: - # Supported values: `above-main-content` | `above-sidebar` - position: above-main-content - - - mountPoint: global.header/component - importName: CompanyLogo - config: - priority: 200 - props: - # Path to navigate when users click the logo: - to: '/catalog' - width: 300 - height: 200 - #logo: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATQAAACkCAMAAAAuT...' # Single logo for all themes - logo: - dark: 'data:image/png;base64,...' # Shown in dark theme - light: 'data:image/png;base64,...' # Shown in light theme ----- -+ -You can use either a single logo for all themes or theme-specific logos (light and dark). If you define both, theme-specific logos take precedence over the single logo. - -. (Optional) If you do not provide props to the `CompanyLogo` component, the component instead uses values defined under `app.branding` in your `{my-app-config-file}` file. You can configure both the sidebar logo and the `CompanyLogo` fallback as shown in the following configuration: -+ -.Example: Fallback configuration -+ -[source,yaml,subs="+attributes,+quotes"] ----- -app: - branding: - fullLogoWidth: 220 # Fallback width - # fullLogo: "data:image/svg+xml;base64,..." - fullLogo: - light: 'data:image/svg+xml;base64,...' - dark: 'data:image/svg+xml;base64,...' ----- -+ -`CompanyLogo` uses the following configuration elements to control fallback and sizing behavior: - -* *Logo source priority* -** If you fail to provide a logo through either the `CompanyLogo` props (`logo`, `logo.light`, `logo.dark`) or `app.branding.fullLogo`, the component displays the default {product-short} theme-specific logo. - -* *Logo width priority* -** If you fail to specify the `width` using the `CompanyLogo` prop (`props.width`) or through the `app.branding.fullLogoWidth` from `{my-app-config-file}`, the component applies a default width. -** If the `width` component that you configure results in a height greater than the default maximum height, the component automatically scales the logo down. -+ -In some cases, changing only the width might not visibly affect the logo unless you also adjust the height. - -* *Logo height priority* -** If you do not specify `height` using the `CompanyLogo` prop (`props.height`), the component automatically applies a default maximum height. -+ -[NOTE] -==== -If you increase the company logo height, the global header height also increases, but the image does not appear cropped or distorted. -==== - -.Verification -. The logo appears correctly in the global header. -. Click the logo to confirm it redirects to the path you defined in `props.to`. -. Toggle between `light` and `dark` themes to ensure the correct logo loads in each. -. (Optional) Temporarily remove the `CompanyLogo` props to test the fallback to `app.branding.fullLogo`. diff --git a/modules/configuring-the-global-header/proc-enabling-logo-in-the-global-header.adoc b/modules/configuring-the-global-header/proc-enabling-logo-in-the-global-header.adoc new file mode 100644 index 0000000000..7728387763 --- /dev/null +++ b/modules/configuring-the-global-header/proc-enabling-logo-in-the-global-header.adoc @@ -0,0 +1,88 @@ +[id="enabling-logo-in-the-global-header.adoc_{context}"] += Enabling logo in the global header + +You can configure a company logo in the global header of the {product} ({product-very-short}) to reflect your company's branding. `CompanyLogo` is part of the global header by default and offers full control over the theming, navigation behavior, sizing, and fallback options. + +`CompanyLogo` ensures strict display constraints to maintain design consistency: + +* The image is never cropped or distorted. +* If the configured width results in a height greater than the allowed maximum (default: 40px), `CompanyLogo` automatically scales the image down. ++ +* In some cases, changing only the width might not visibly affect the logo unless you also adjust the height. + +This component supports the following props, which are provided through configuration: + +* `logo`: The base64 encoded logo image. +* `to`: The redirect path for when users click the logo. +* `width`: Optional width of the logo. +* `height`: Optional height of the logo. + +.Procedure + +. To display a custom company logo in the global header, update the configuration with a mount point for `CompanyLogo`: ++ +.Example: Configuring company logo ++ +[source,yaml,subs="+attributes,+quotes"] +---- +# ...rest of the global header configuration +red-hat-developer-hub.backstage-plugin-global-header: + mountPoints: + - mountPoint: application/header + importName: GlobalHeader + config: + # Supported values: `above-main-content` | `above-sidebar` + position: above-main-content + + - mountPoint: global.header/component + importName: CompanyLogo + config: + priority: 200 + props: + # Path to navigate when users click the logo: + to: '/catalog' + width: 300 + height: 200 + logo: or # Logo can be a base64 string or theme-specific object + # Example 1: Single logo for all themes + # logo: "" + + # Example 2: Theme-specific logos + # logo: + dark: 'data:image/png;base64,...' # Used in dark theme + light: 'data:image/png;base64,...' # Used in light theme +---- + +. (Optional) If you do not provide `logo` props to the `CompanyLogo` component, the component instead uses values defined under `app.branding` in your `{my-app-config-file}` file. You can configure the `CompanyLogo` as shown in the following configuration: ++ +.Example: Fallback configuration ++ +[source,yaml,subs="+attributes,+quotes"] +---- +app: + branding: + fullLogoWidth: 220 # Fallback width + # fullLogo: "data:image/svg+xml;base64,..." + fullLogo: + light: 'data:image/svg+xml;base64,...' + dark: 'data:image/svg+xml;base64,...' +---- ++ +`CompanyLogo` uses the following configuration elements to control fallback and sizing behavior: + +* *Logo source priority* +** The component selects the logo source in the following order: ++ +First, `CompanyLogo` props (logo, logo.light, logo.dark), then, `app.branding.fullLogo`. If you do not provide a logo through either, the component displays the default {product-short} theme-specific logo. + +* *Logo width priority* +** The component applies the first available value from `props.width`, then `app.branding.fullLogoWidth` from `{my-app-config-file}`. If you do not specify the `width` using either, the component applies a default width. + +* *Logo height priority* +** Increasing the logo `height` increases the height of the global header. The component first applies the value from `props.height`. If you do not specify the `height`, the component applies a default height. + +.Verification +. The logo appears correctly in the global header. +. Click the logo to confirm it redirects to the path you defined in `props.to`. +. Toggle between `light` and `dark` themes to ensure the correct logo loads in each. +. (Optional) Temporarily remove the `CompanyLogo` props to test the fallback to `app.branding.fullLogo`. diff --git a/modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc b/modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc new file mode 100644 index 0000000000..fe2596739d --- /dev/null +++ b/modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc @@ -0,0 +1,75 @@ +[id="proc-enabling-logo-in-the-sidebar.adoc_{context}"] += Enabling logo in the sidebar + +You can configure a logo in the sidebar of the {product} ({product-very-short}). + +.Procedure + +. To display the logo in the sidebar, set the value of the `app.sidebar.logo` parameter to `true` as shown in the following example: ++ +.Example: Displaying the logo in only the sidebar ++ +[source,yaml,subs="+attributes,+quotes"] +---- +# ...rest of the global header configuration +app: + sidebar: + logo: true + branding: + fullLogoWidth: 220 + fullLogo: 'data:image/svg+xml;base64,...' + + - mountPoint: global.header/component + importName: CompanyLogo + config: + priority: 200 + props: + # Path to navigate when users click the logo: + to: '/catalog' + width: 300 + height: 200 + logo: or # Logo can be a base64 string or theme-specific object + # Example 1: Single logo for all themes + # logo: "" + + # Example 2: Theme-specific logos + # logo: + dark: 'data:image/png;base64,...' # Used in dark theme + light: 'data:image/png;base64,...' # Used in light theme +---- ++ +To display the logo in only the sidebar, remove the `CompanyLogo` component from the configuration. + +. To display the logo in the sidebar for all themes, update the configuration as shown in the following configuration: ++ +.Example: Configuring sidebar logo for all themes ++ +[source,yaml,subs="+attributes,+quotes"] +---- +app: + sidebar: + logo: true + branding: + fullLogoWidth: 220 + fullLogo: 'data:image/svg+xml;base64,...' +---- + +. For theme-specific logos, you can configure the sidebar logo as shown in the following configuration: ++ +.Example: Theme-specific logos ++ +[source,yaml,subs="+attributes,+quotes"] +---- +app: + sidebar: + logo: true + branding: + fullLogoWidth: 220 + fullLogo: + light: 'data:image/svg+xml;base64,...' + dark: 'data:image/svg+xml;base64,...' +---- + +.Verification +. The logo appears correctly in the sidebar. +. Toggle between `light` and `dark` themes to ensure the correct logo loads in each. \ No newline at end of file From 1108505f725372753dd863c1c8bf19e5d8e6d375 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Mon, 18 Aug 2025 14:09:00 +0200 Subject: [PATCH 6/7] Displaying the preferred username and Company Log --- ...ssembly-configuring-the-global-header.adoc | 2 +- ...onfiguring-logo-in-the-global-header.adoc} | 39 +++++++++++-------- .../proc-enabling-logo-in-the-sidebar.adoc | 29 +++----------- 3 files changed, 28 insertions(+), 42 deletions(-) rename modules/configuring-the-global-header/{proc-enabling-logo-in-the-global-header.adoc => proc-configuring-logo-in-the-global-header.adoc} (69%) diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index 706ef9a6fa..bea26ed891 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -18,7 +18,7 @@ include::modules/configuring-the-global-header/proc-customize-rhdh-global-header include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffset=+1] -include::modules/configuring-the-global-header/proc-enabling-logo-in-the-global-header.adoc[leveloffset=+1] +include::modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc[leveloffset=+1] include::modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc[leveloffset=+1] diff --git a/modules/configuring-the-global-header/proc-enabling-logo-in-the-global-header.adoc b/modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc similarity index 69% rename from modules/configuring-the-global-header/proc-enabling-logo-in-the-global-header.adoc rename to modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc index 7728387763..1030d16cb9 100644 --- a/modules/configuring-the-global-header/proc-enabling-logo-in-the-global-header.adoc +++ b/modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc @@ -1,21 +1,19 @@ -[id="enabling-logo-in-the-global-header.adoc_{context}"] -= Enabling logo in the global header +[id="configuring-logo-in-the-global-header.adoc_{context}"] += Configuring the logo in the global header You can configure a company logo in the global header of the {product} ({product-very-short}) to reflect your company's branding. `CompanyLogo` is part of the global header by default and offers full control over the theming, navigation behavior, sizing, and fallback options. -`CompanyLogo` ensures strict display constraints to maintain design consistency: - -* The image is never cropped or distorted. -* If the configured width results in a height greater than the allowed maximum (default: 40px), `CompanyLogo` automatically scales the image down. -+ -* In some cases, changing only the width might not visibly affect the logo unless you also adjust the height. +[NOTE] +==== +`CompanyLogo` preserves the images aspect ratio and never crops or distorts it. If the configured width results in a height greater than the maximum allowed (default: 40px), the image is automatically scaled down. As a result, adjusting only the width may not visibly change the logo unless the height is also configured. +==== This component supports the following props, which are provided through configuration: * `logo`: The base64 encoded logo image. -* `to`: The redirect path for when users click the logo. -* `width`: Optional width of the logo. -* `height`: Optional height of the logo. +* `to`: The redirect path for when users click the logo is '/catalog'. +* `width`: The logo width is optional and defaults to 150 px. +* `height`: The logo height is optional and defaults to 40px. .Procedure @@ -63,9 +61,14 @@ app: branding: fullLogoWidth: 220 # Fallback width # fullLogo: "data:image/svg+xml;base64,..." - fullLogo: - light: 'data:image/svg+xml;base64,...' - dark: 'data:image/svg+xml;base64,...' + fullLogo: or #fullLogo can be a base64 string or theme-specific object + # Example 1: Single logo for all themes + #fullLogo: "" + + # Example 2: Theme-specific logos + #fullLogo: + dark: 'data:image/png;base64,...' # Used in dark theme + light: 'data:image/png;base64,...' # Used in light theme ---- + `CompanyLogo` uses the following configuration elements to control fallback and sizing behavior: @@ -76,10 +79,12 @@ app: First, `CompanyLogo` props (logo, logo.light, logo.dark), then, `app.branding.fullLogo`. If you do not provide a logo through either, the component displays the default {product-short} theme-specific logo. * *Logo width priority* -** The component applies the first available value from `props.width`, then `app.branding.fullLogoWidth` from `{my-app-config-file}`. If you do not specify the `width` using either, the component applies a default width. +** The component applies the first available value from `props.width`, then `app.branding.fullLogoWidth` from `{my-app-config-file}`. If you do not specify the `width` using either, the component applies a default width (150 px). -* *Logo height priority* -** Increasing the logo `height` increases the height of the global header. The component first applies the value from `props.height`. If you do not specify the `height`, the component applies a default height. +[NOTE] +==== +Increasing the logo `height` increases the height of the global header. The component first applies the value from `props.height`. If you do not specify the `height`, the component applies a default height (40px). +==== .Verification . The logo appears correctly in the global header. diff --git a/modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc b/modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc index fe2596739d..4fc44f4cf1 100644 --- a/modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc +++ b/modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc @@ -7,40 +7,21 @@ You can configure a logo in the sidebar of the {product} ({product-very-short}). . To display the logo in the sidebar, set the value of the `app.sidebar.logo` parameter to `true` as shown in the following example: + -.Example: Displaying the logo in only the sidebar +.Example: Enabling the logo in only the sidebar + [source,yaml,subs="+attributes,+quotes"] ---- -# ...rest of the global header configuration app: sidebar: logo: true - branding: - fullLogoWidth: 220 - fullLogo: 'data:image/svg+xml;base64,...' - - - mountPoint: global.header/component - importName: CompanyLogo - config: - priority: 200 - props: - # Path to navigate when users click the logo: - to: '/catalog' - width: 300 - height: 200 - logo: or # Logo can be a base64 string or theme-specific object - # Example 1: Single logo for all themes - # logo: "" - - # Example 2: Theme-specific logos - # logo: - dark: 'data:image/png;base64,...' # Used in dark theme - light: 'data:image/png;base64,...' # Used in light theme ---- + +[NOTE] +==== To display the logo in only the sidebar, remove the `CompanyLogo` component from the configuration. +==== -. To display the logo in the sidebar for all themes, update the configuration as shown in the following configuration: +. To display the same logo in the sidebar for all themes, update the configuration as shown in the following configuration: + .Example: Configuring sidebar logo for all themes + From 220642d092c8f48626057b207ff1bfbcf4735c22 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Mon, 18 Aug 2025 14:48:06 +0200 Subject: [PATCH 7/7] Displaying the preferred username and Company Log --- ...configuring-logo-in-the-global-header.adoc | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc b/modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc index 1030d16cb9..826c75df59 100644 --- a/modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc +++ b/modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc @@ -3,11 +3,6 @@ You can configure a company logo in the global header of the {product} ({product-very-short}) to reflect your company's branding. `CompanyLogo` is part of the global header by default and offers full control over the theming, navigation behavior, sizing, and fallback options. -[NOTE] -==== -`CompanyLogo` preserves the images aspect ratio and never crops or distorts it. If the configured width results in a height greater than the maximum allowed (default: 40px), the image is automatically scaled down. As a result, adjusting only the width may not visibly change the logo unless the height is also configured. -==== - This component supports the following props, which are provided through configuration: * `logo`: The base64 encoded logo image. @@ -60,15 +55,14 @@ red-hat-developer-hub.backstage-plugin-global-header: app: branding: fullLogoWidth: 220 # Fallback width - # fullLogo: "data:image/svg+xml;base64,..." - fullLogo: or #fullLogo can be a base64 string or theme-specific object - # Example 1: Single logo for all themes - #fullLogo: "" + fullLogo: or #fullLogo can be a base64 string or theme-specific object - # Example 2: Theme-specific logos - #fullLogo: - dark: 'data:image/png;base64,...' # Used in dark theme - light: 'data:image/png;base64,...' # Used in light theme + # Example 1: Single logo for all themes + #fullLogo: " + # Example 2: Theme-specific logos + #fullLogo: + dark: 'data:image/png;base64,...' # Used in dark theme + light: 'data:image/png;base64,...' # Used in light theme ---- + `CompanyLogo` uses the following configuration elements to control fallback and sizing behavior: @@ -83,6 +77,8 @@ First, `CompanyLogo` props (logo, logo.light, logo.dark), then, `app.branding.fu [NOTE] ==== +`CompanyLogo` preserves the images aspect ratio and never crops or distorts it. If the configured width results in a height greater than the maximum allowed (default: 40px), the image is automatically scaled down. As a result, adjusting only the width may not visibly change the logo unless the height is also configured. + Increasing the logo `height` increases the height of the global header. The component first applies the value from `props.height`. If you do not specify the `height`, the component applies a default height (40px). ====