feat(header): allow the product name to be configured

lib/Listener/BeforeTemplateRenderedListener.php

@@ -34,6 +34,8 @@
 		$this->initialState->provideInitialState('isLoggedIn', $isLoggedIn);
 		$this->initialState->provideInitialState('homeUrl',
 			$this->urlGenerator->linkTo('', 'index.php'));
+		$this->initialState->provideInitialState('productName',
+			$this->config->getSystemValue('ionos_product_name', ''));
 
 		if ($isLoggedIn) {
 			$this->initialState->provideInitialState('displayName',

src/components/HeaderLogo.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 defineProps<{
 	homeUrl: string
+	/**
+	 * Product name to render instead of the baked-in wordmark. When empty or
+	 * absent, the wordmark SVG is used, so existing deployments are unaffected.
+	 */
+	productName?: string
 }>()
 </script>
 
@@ -21,8 +26,10 @@ defineProps<{
 			<path d="M19.0796 25.993C17.3469 25.9921 15.6855 25.3033 14.4603 24.0781C13.2351 22.8529 12.5463 21.1915 12.5454 19.4588V6.5342C12.5454 4.80122 13.2338 3.13922 14.4592 1.91382C15.6846 0.688422 17.3466 0 19.0796 0C20.8126 0 22.4746 0.688422 23.7 1.91382C24.9254 3.13922 25.6138 4.80122 25.6138 6.5342V19.4588C25.6129 21.1915 24.9242 22.8529 23.699 24.0781C22.4738 25.3033 20.8123 25.9921 19.0796 25.993ZM19.0796 3.94577C18.7396 3.94531 18.4028 4.01195 18.0885 4.14186C17.7743 4.27178 17.4887 4.46242 17.2483 4.70287C17.0078 4.94332 16.8172 5.22885 16.6873 5.5431C16.5574 5.85735 16.4907 6.19415 16.4912 6.5342V19.4588C16.4912 20.1453 16.7639 20.8037 17.2493 21.2891C17.7347 21.7745 18.3931 22.0472 19.0796 22.0472C19.7661 22.0472 20.4245 21.7745 20.9099 21.2891C21.3953 20.8037 21.668 20.1453 21.668 19.4588V6.5342C21.659 5.85053 21.3833 5.19741 20.8999 4.71394C20.4164 4.23047 19.7633 3.95485 19.0796 3.94577Z" />
 			<path d="M2.14279 25.9827C1.85889 25.9841 1.57756 25.9288 1.3153 25.8201C1.05305 25.7114 0.815137 25.5514 0.615534 25.3495C0.41593 25.1476 0.25865 24.9079 0.152917 24.6444C0.0471839 24.3809 -0.00487247 24.099 -0.000199355 23.8151V2.11513C0.0099449 1.55105 0.242119 1.01373 0.645944 0.619752C1.04977 0.225777 1.59266 0.00693882 2.15682 0.0107235C2.62925 0.00381055 3.09025 0.156078 3.46562 0.443013C3.84099 0.729947 4.10888 1.13485 4.22616 1.59254C4.24062 1.64213 4.25233 1.69248 4.26123 1.74336V1.83805C4.28131 1.95386 4.2907 2.07126 4.28929 2.18879C4.28929 2.18879 4.28929 23.5836 4.28929 23.8292C4.29115 24.1119 4.23694 24.3922 4.12982 24.6538C4.02269 24.9155 3.86476 25.1533 3.66516 25.3536C3.46556 25.5538 3.22825 25.7125 2.96695 25.8205C2.70564 25.9285 2.42553 25.9836 2.14279 25.9827Z" />
 		</svg>
-		<!-- Product wordmark -->
+		<!-- Product wordmark: the SVG is the default; an explicit product name wins -->
+		<span v-if="productName" class="header-logo__product-name">{{ productName }}</span>
 		<svg
+			v-else
 			class="header-logo__product"
 			width="127"
 			height="17"
@@ -54,6 +61,14 @@ defineProps<{
 	flex-shrink: 0;
 	padding: 0 24px;
 
+	&__product-name {
+		display: block;
+		font-size: 1.25rem;
+		font-weight: 600;
+		white-space: nowrap;
+		color: light-dark(var(--ion-color-primary), var(--ion-color-cool-grey-c1));
+	}
+
 	&__ionos,
 	&__product {
 		display: block;

src/main.ts

@@ -50,6 +50,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
 	makeApp(HeaderLogo, {
 		homeUrl: loadState('simplenavigation', 'homeUrl', '/'),
+		productName: loadState('simplenavigation', 'productName', ''),
 	}).mount('#simplenavigation-logo')
 
 	// Mount webmail link + our UserMenu only for authenticated users