feat: Allow changing favicon paths (#586)

* feat: Allow changing favicon paths * Update README
felixmosh · Jun 17, 2023 · 8661f45 · 8661f45
1 parent 23cc721
commit 8661f45
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -99,6 +99,8 @@ module.exports = {
         basePath,
         uiConfig: '<%- uiConfig %>',
         title: '<%= title %>',
+        favIconDefault: '<%= favIconDefault %>',
+        favIconAlternative: '<%= favIconAlternative %>',
       },
       inject: 'body',
     }),