From 8661f453832b7363f3837c48593c71efae78a3ca Mon Sep 17 00:00:00 2001
From: "Mr. Goferito" <goferito@gmail.com>
Date: Sat, 17 Jun 2023 16:19:37 +0200
Subject: [PATCH] feat: Allow changing favicon paths (#586)

* feat: Allow changing favicon paths

* Update README
---
 README.md                               | 20 +++++++++++++++-----
 packages/api/src/handlers/entryPoint.ts |  8 +++++++-
 packages/api/src/index.ts               |  4 ++++
 packages/api/typings/app.ts             |  6 ++++++
 packages/ui/src/index.ejs               |  4 ++--
 packages/ui/webpack.config.js           |  2 ++
 6 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 4f3d1acc..92a7ed74 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ const app = express();
 app.use('/admin/queues', serverAdapter.getRouter());
 
 // other configurations of your server
-  
+
 app.listen(3000, () => {
   console.log('Running on 3000...');
   console.log('For the UI, open http://localhost:3000/admin/queues');
@@ -106,12 +106,14 @@ For more advanced usages check the `examples` folder, currently it contains:
 7. [With Nest.js server using the express adapter](https://github.com/felixmosh/bull-board/tree/master/examples/with-nestjs) (Thanx to @lodi-g)
 
 ### Board options
-1. `uiConfig.boardTitle` (default: `empty`)
-The Board title
+1. `uiConfig.boardTitle` (default: `Bull Dashboard`)
+The Board and page titles
 2. `uiConfig.boardLogo` (default: `empty`) `{ path: string; width?: number | string; height?: number | string }`
 An object that allows you to specify a different logo
 3. `uiConfig.miscLinks` (default: `empty`) `Array< { text: string; url: string }>`
 An array of misc link that you can add to the dashboard, such as logout link.
+4. uiConfig.favIcon (default: `{ default: 'static/images/logo.svg', alternative: 'static/favicon-32x32.png', }`) `{ default: string; alternative: 'string' }`
+An object that allows you to specify the default and alternative favicons.
 
 ```js
 const QueueMQ = require('bullmq');
@@ -126,8 +128,16 @@ createBullBoard({
   options: {
     uiConfig: {
       boardTitle: 'My BOARD',
-      boardLogo: {path: 'https://cdn.my-domain.com/logo.png', width: '100px', height: 200},
+      boardLogo: {
+        path: 'https://cdn.my-domain.com/logo.png',
+        width: '100px',
+        height: 200,
+      },
       miscLinks: [{text: 'Logout', url: '/logout'}],
+      favIcon: {
+        default: 'static/images/logo.svg',
+        alternative: 'static/favicon-32x32.png',
+      },
     },
   },
 });
@@ -224,7 +234,7 @@ createBullBoard({
   queues: [
     new BullAdapter(someQueue),
   ],
-  serverAdapter 
+  serverAdapter
 })
 
 // ... express server configuration
diff --git a/packages/api/src/handlers/entryPoint.ts b/packages/api/src/handlers/entryPoint.ts
index 7ee8a399..9220c9f1 100644
--- a/packages/api/src/handlers/entryPoint.ts
+++ b/packages/api/src/handlers/entryPoint.ts
@@ -11,6 +11,12 @@ export function entryPoint(params: {
 
   return {
     name: 'index.ejs',
-    params: { basePath, uiConfig, title: params.uiConfig.boardTitle as string },
+    params: {
+      basePath,
+      uiConfig,
+      title: params.uiConfig.boardTitle as string,
+      favIconDefault: params.uiConfig.favIcon?.default as string,
+      favIconAlternative: params.uiConfig.favIcon?.alternative as string,
+    },
   };
 }
diff --git a/packages/api/src/index.ts b/packages/api/src/index.ts
index e575d266..14eb6c3d 100644
--- a/packages/api/src/index.ts
+++ b/packages/api/src/index.ts
@@ -24,6 +24,10 @@ export function createBullBoard({
     .setStaticPath('/static', path.join(uiBasePath, 'dist/static'))
     .setUIConfig({
       boardTitle: 'Bull Dashboard',
+      favIcon: {
+        default: 'static/images/logo.svg',
+        alternative: 'static/favicon-32x32.png',
+      },
       ...options.uiConfig,
     })
     .setEntryRoute(appRoutes.entryPoint)
diff --git a/packages/api/typings/app.ts b/packages/api/typings/app.ts
index ea56881c..2c451008 100644
--- a/packages/api/typings/app.ts
+++ b/packages/api/typings/app.ts
@@ -181,4 +181,10 @@ export type UIConfig = Partial<{
   boardTitle: string;
   boardLogo: { path: string; width?: number | string; height?: number | string };
   miscLinks: Array<IMiscLink>;
+  favIcon: FavIcon;
 }>;
+
+export type FavIcon = {
+  default: string;
+  alternative: string;
+};
diff --git a/packages/ui/src/index.ejs b/packages/ui/src/index.ejs
index 837c0696..cb24437f 100644
--- a/packages/ui/src/index.ejs
+++ b/packages/ui/src/index.ejs
@@ -6,8 +6,8 @@
     <meta name="robots" content="noindex" />
     <base href="<%= basePath %>" />
     <title><%= title %></title>
-    <link rel="alternate icon" type="image/png" href="static/favicon-32x32.png">
-    <link rel="icon" type="image/svg+xml" id="fav-logo" href="static/images/logo.svg">
+    <link rel="alternate icon" type="image/png" href="<%= favIconAlternative %>">
+    <link rel="icon" type="image/svg+xml" id="fav-logo" href="<%= favIconDefault %>">
     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap" rel="stylesheet">
 </head>
 <body>
diff --git a/packages/ui/webpack.config.js b/packages/ui/webpack.config.js
index 84c0c31e..3eb0b667 100644
--- a/packages/ui/webpack.config.js
+++ b/packages/ui/webpack.config.js
@@ -99,6 +99,8 @@ module.exports = {
         basePath,
         uiConfig: '<%- uiConfig %>',
         title: '<%= title %>',
+        favIconDefault: '<%= favIconDefault %>',
+        favIconAlternative: '<%= favIconAlternative %>',
       },
       inject: 'body',
     }),