Set favicon default url to /favicon.ico and allow to customize it (#713)

* feat: allowing larger default integration for datahub's favicon and ME Revert "feat: allowing larger default integration for datahub's favicon and ME" This reverts commit 4f960614417ab2ba96f84ea482d107d88fe03f7a. feat: remove favicon in datafeeder and datahub * feat: set a customisable favicon for datahub * feat: move icon to theme section
geonetwork · Jan 9, 2024 · ed6fbd6 · ed6fbd6
1 parent 4bca8ed
commit ed6fbd6
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 6 deletions.
diff --git a/apps/datafeeder/project.json b/apps/datafeeder/project.json
@@ -16,7 +16,6 @@
         "tsConfig": "apps/datafeeder/tsconfig.app.json",
         "aot": true,
         "assets": [
-          "apps/datafeeder/src/favicon.ico",
           "apps/datafeeder/src/assets",
           {
             "glob": "*",

diff --git a/apps/datafeeder/src/index.html b/apps/datafeeder/src/index.html
@@ -5,7 +5,6 @@
     <title>Datafeeder</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Permanent+Marker&display=swap"

diff --git a/apps/datahub/project.json b/apps/datahub/project.json
@@ -15,7 +15,6 @@
         "polyfills": "apps/datahub/src/polyfills.ts",
         "tsConfig": "apps/datahub/tsconfig.app.json",
         "assets": [
-          "apps/datahub/src/favicon.ico",
           "apps/datahub/src/assets",
           {
             "glob": "*",

diff --git a/apps/datahub/src/app/app.component.ts b/apps/datahub/src/app/app.component.ts
@@ -1,8 +1,15 @@
-import { Component } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
+import { getThemeConfig } from '@geonetwork-ui/util/app-config'
+import { ThemeService } from '@geonetwork-ui/util/shared'
 
 @Component({
   selector: 'datahub-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  ngOnInit(): void {
+    const favicon = getThemeConfig().FAVICON
+    if (favicon) ThemeService.setFavicon(favicon)
+  }
+}
diff --git a/apps/datahub/src/assets/favicon.ico b/apps/datahub/src/assets/favicon.ico
diff --git a/apps/datahub/src/index.html b/apps/datahub/src/index.html
@@ -5,7 +5,6 @@
     <title>Datahub</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

diff --git a/conf/default.toml b/conf/default.toml
@@ -34,6 +34,7 @@ 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']
 
+
 ### VISUAL THEME
 
 # All parameters are expressed in CSS format, see:
@@ -61,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
@@ -185,6 +185,7 @@ export function loadAppConfig() {
           'fonts_stylesheet_url',
           'thumbnail_placeholder',
           'header_background',
+          'favicon',
         ],
         warnings,
         errors
@@ -204,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
@@ -37,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
@@ -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)
+  }
 }