♻️(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.

Author: AntoLC

docs/theming.md

@@ -32,6 +32,24 @@ Then, set the `FRONTEND_CSS_URL` environment variable to the URL of your custom
 
 ----
 
+# **Your logo** 📝
+
+You can add your own logo in the header from the theme customization file.
+
+### Settings 🔧
+
+```shellscript
+THEME_CUSTOMIZATION_FILE_PATH=<path>
+```
+
+### Example of JSON
+
+You can activate it with the `header.logo` configuration: https://github.com/suitenumerique/docs/blob/main/src/helm/env.d/dev/configuration/theme/demo.json
+
+This configuration is optional. If not set, the default logo will be used.
+
+----
+
 # **Footer Configuration** 📝
 
 The footer is configurable from the theme customization file.

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"
+    }
   }
 }