♻️(frontend) logo theme customization optional

To not create a breaking change, the logo in the
theme customization is now optional, meaning that
if no logo is provided, the default logo will be used.

We add some documentation about this feature.

src/backend/impress/configuration/theme/default.json

@@ -125,12 +125,5 @@
         }
       }
     }
-  },
-  "header": {
-    "logo": {
-      "src": "/assets/icon-docs.svg",
-      "width": "32px",
-      "alt": "Docs"
-    }
   }
 }

src/frontend/apps/impress/src/core/config/api/useConfig.tsx

@@ -4,7 +4,7 @@ import { Resource } from 'i18next';
 import { APIError, errorCauses, fetchAPI } from '@/api';
 import { Theme } from '@/cunningham/';
 import { FooterType } from '@/features/footer';
-import { HeaderType } from '@/features/header/types';
+import { HeaderType } from '@/features/header';
 import { PostHogConf } from '@/services';
 
 interface ThemeCustomization {

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -23,8 +23,6 @@ export const Header = () => {
 
   const logo = config?.theme_customization?.header?.logo;
 
-  const styleWidth = logo?.width || '32px';
-
   return (
     <Box
       as="header"
@@ -66,18 +64,19 @@ export const Header = () => {
           $height="fit-content"
           $margin={{ top: 'auto' }}
         >
-          {logo?.src && (
-            <Image
-              className="c__image-system-filter"
-              data-testid="header-icon-docs"
-              src={logo.src}
-              alt={logo?.alt || t('Logo')}
-              width={32}
-              height={32}
-              style={{ width: styleWidth, height: 'auto' }}
-              priority
-            />
-          )}
+          <Image
+            className="c__image-system-filter"
+            data-testid="header-icon-docs"
+            src={logo?.src || '/assets/icon-docs.svg'}
+            alt={logo?.alt || t('Docs')}
+            width={0}
+            height={0}
+            style={{
+              width: logo?.width || 32,
+              height: logo?.height || 'auto',
+            }}
+            priority
+          />
           <Title headingLevel="h1" aria-hidden="true" />
         </Box>
       </StyledLink>

src/frontend/apps/impress/src/features/header/index.ts

@@ -1,2 +1,3 @@
 export * from './components/';
 export * from './conf';
+export * from './types';

src/frontend/apps/impress/src/features/header/types.ts

@@ -1,8 +1,8 @@
 export interface HeaderType {
   logo?: {
-    src: string;
+    src?: string;
     width?: string;
+    height?: string;
     alt?: string;
-    withTitle?: boolean;
   };
 }

src/helm/env.d/dev/configuration/theme/demo.json

@@ -133,5 +133,12 @@
         }
       }
     }
+  },
+  "header": {
+    "logo": {
+      "src": "/assets/icon-docs.svg",
+      "width": "32px",
+      "alt": "Notes"
+    }
   }
 }