From 2e5e8134a9d9f61a7838011f282ee2c86ebe20ce Mon Sep 17 00:00:00 2001
From: fnecas <florian.necas@camptocamp.com>
Date: Mon, 8 Jan 2024 17:43:25 +0100
Subject: [PATCH] feat: move icon to theme section

---
 apps/datahub/src/app/app.component.ts           | 17 ++++-------------
 conf/default.toml                               |  5 +++--
 libs/util/app-config/src/lib/app-config.ts      |  4 ++--
 libs/util/app-config/src/lib/model.ts           |  2 +-
 .../shared/src/lib/services/theme.service.ts    |  9 +++++++++
 5 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/apps/datahub/src/app/app.component.ts b/apps/datahub/src/app/app.component.ts
index b57c1a020..1f69e6ed3 100644
--- a/apps/datahub/src/app/app.component.ts
+++ b/apps/datahub/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core'
-import { getGlobalConfig } from '@geonetwork-ui/util/app-config'
+import { getThemeConfig } from '@geonetwork-ui/util/app-config'
+import { ThemeService } from '@geonetwork-ui/util/shared'
 
 @Component({
   selector: 'datahub-root',
@@ -8,17 +9,7 @@ import { getGlobalConfig } from '@geonetwork-ui/util/app-config'
 })
 export class AppComponent implements OnInit {
   ngOnInit(): void {
-    const favicon = getGlobalConfig().FAVICON
-    if (favicon) this.setFavicon(favicon)
-  }
-
-  private setFavicon(faviconPath: string): void {
-    const link =
-      document.querySelector("link[rel*='icon']") ||
-      document.createElement('link')
-    link['type'] = 'image/x-icon'
-    link['rel'] = 'icon'
-    link['href'] = faviconPath
-    document.getElementsByTagName('head')[0].appendChild(link)
+    const favicon = getThemeConfig().FAVICON
+    if (favicon) ThemeService.setFavicon(favicon)
   }
 }
diff --git a/conf/default.toml b/conf/default.toml
index fcb4a7105..9a744fa76 100644
--- a/conf/default.toml
+++ b/conf/default.toml
@@ -34,8 +34,6 @@ proxy_path = ""
 # More information about the translation can be found in the docs (https://geonetwork.github.io/geonetwork-ui/main/docs/reference/i18n.html)
 # languages = ['en', 'fr', 'de']
 
-# Use it to set custom location for favicon
-# favicon = "assets/favicon.ico"
 
 ### VISUAL THEME
 
@@ -64,6 +62,9 @@ background_color = "#fdfbff"
 # title_font = "'My Custom Title Font', fallback-font-title"
 # fonts_stylesheet_url = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Permanent+Marker&display=swap"
 
+# Use it to set custom location for the favicon; by default, the path `/favicon.ico` will be used
+# favicon = "assets/favicon.ico"
+
 ### SEARCH SETTINGS
 
 # This section contains settings used for fine-tuning the search experience
diff --git a/libs/util/app-config/src/lib/app-config.ts b/libs/util/app-config/src/lib/app-config.ts
index 11fcac668..a01c5ae25 100644
--- a/libs/util/app-config/src/lib/app-config.ts
+++ b/libs/util/app-config/src/lib/app-config.ts
@@ -100,7 +100,6 @@ export function loadAppConfig() {
           'login_url',
           'web_component_embedder_url',
           'languages',
-          'favicon',
         ],
         warnings,
         errors
@@ -127,7 +126,6 @@ export function loadAppConfig() {
               WEB_COMPONENT_EMBEDDER_URL:
                 parsedGlobalSection.web_component_embedder_url,
               LANGUAGES: parsedGlobalSection.languages,
-              FAVICON: parsedGlobalSection.favicon,
             } as GlobalConfig)
 
       const parsedLayersSections = parseMultiConfigSection(
@@ -187,6 +185,7 @@ export function loadAppConfig() {
           'fonts_stylesheet_url',
           'thumbnail_placeholder',
           'header_background',
+          'favicon',
         ],
         warnings,
         errors
@@ -206,6 +205,7 @@ export function loadAppConfig() {
               TITLE_FONT: parsedThemeSection.title_font,
               MAIN_FONT: parsedThemeSection.main_font,
               FONTS_STYLESHEET_URL: parsedThemeSection.fonts_stylesheet_url,
+              FAVICON: parsedThemeSection.favicon,
             } as ThemeConfig)
 
       const parsedSearchSection = parseConfigSection(
diff --git a/libs/util/app-config/src/lib/model.ts b/libs/util/app-config/src/lib/model.ts
index af8416e8c..7eb727939 100644
--- a/libs/util/app-config/src/lib/model.ts
+++ b/libs/util/app-config/src/lib/model.ts
@@ -8,7 +8,6 @@ export interface GlobalConfig {
   LOGIN_URL?: string
   WEB_COMPONENT_EMBEDDER_URL?: string
   LANGUAGES?: string[]
-  FAVICON?: string
 }
 
 export interface LayerConfig {
@@ -38,6 +37,7 @@ export interface ThemeConfig {
   MAIN_FONT?: string
   TITLE_FONT?: string
   FONTS_STYLESHEET_URL?: string
+  FAVICON?: string
 }
 
 export interface SearchPreset {
diff --git a/libs/util/shared/src/lib/services/theme.service.ts b/libs/util/shared/src/lib/services/theme.service.ts
index baeccb44f..e9e2a3daa 100644
--- a/libs/util/shared/src/lib/services/theme.service.ts
+++ b/libs/util/shared/src/lib/services/theme.service.ts
@@ -140,4 +140,13 @@ export class ThemeService {
     }
     return chroma.hsl(hue % 360, saturation, lightness).css()
   }
+
+  static setFavicon(faviconPath: string): void {
+    const link =
+      document.querySelector("link[rel*='icon']") ||
+      document.createElement('link')
+    link['rel'] = 'icon'
+    link['href'] = faviconPath
+    document.getElementsByTagName('head')[0].appendChild(link)
+  }
 }