fix(middleware): custom favicon (#4716)

.changeset/cuddly-camels-relax.md

@@ -0,0 +1,5 @@
+---
+'@verdaccio/middleware': patch
+---
+
+fix(middleware): custom favicon

packages/middleware/src/middlewares/web/render-web.ts

@@ -37,7 +37,15 @@ export function renderWebMiddleware(config, tokenMiddleware, pluginOptions) {
   // any match within the static is routed to the file system
   router.get('/-/static/*', function (req, res, next) {
     const filename = req.params[0];
-    const file = `${staticPath}/${filename}`;
+    let file = `${staticPath}/${filename}`;
+    if (filename === 'favicon.ico' && config?.web?.favicon) {
+      file = config?.web?.favicon;
+      if (isURLhasValidProtocol(file)) {
+        debug('redirect to favicon %s', file);
+        req.url = file;
+        return next();
+      }
+    }
     debug('render static file %o', file);
     res.sendFile(file, sendFileCallback(next));
   });

packages/middleware/src/middlewares/web/utils/renderHTML.ts

@@ -65,6 +65,7 @@ export default function renderHTML(
   const title = config?.web?.title ?? WEB_TITLE;
   const login = hasLogin(config);
   const scope = config?.web?.scope ?? '';
+  const favicon = resolveLogo(config?.web?.favicon, config?.url_prefix, requestOptions);
   const logo = resolveLogo(config?.web?.logo, config?.url_prefix, requestOptions);
   const logoDark = resolveLogo(config?.web?.logoDark, config?.url_prefix, requestOptions);
   const pkgManagers = config?.web?.pkgManagers ?? ['yarn', 'pnpm', 'npm'];
@@ -114,6 +115,7 @@ export default function renderHTML(
     version,
     logo,
     logoDark,
+    favicon,
     flags,
     login,
     pkgManagers,

packages/middleware/test/config/file-logo.yaml

@@ -15,6 +15,7 @@ web:
   primary_color: '#ffffff'
   logo: './test/config/dark-logo.png'
   logoDark: './test/config/dark-logo.png'
+  favicon: './test/config/favicon.ico'
   html_cache: false
 
 url_prefix: /prefix

packages/middleware/test/config/http-logo.yaml

@@ -0,0 +1,26 @@
+web:
+  title: verdaccio web
+  login: true
+  scope: '@scope'
+  pkgManagers:
+    - pnpm
+    - yarn
+  showInfo: true
+  showSettings: true
+  showSearch: true
+  showFooter: true
+  showThemeSwitch: true
+  showDownloadTarball: true
+  showRaw: true
+  primary_color: '#ffffff'
+  logo: https://raw.githubusercontent.com/verdaccio/verdaccio/master/assets/svg/logo-small.svg
+  logoDark: https://raw.githubusercontent.com/verdaccio/verdaccio/master/assets/svg/logo-blackwhite.svg
+  favicon: https://raw.githubusercontent.com/verdaccio/verdaccio/master/website/static/img/favicon/favicon.ico
+  html_cache: false
+
+url_prefix: /prefix
+
+log: { type: stdout, format: pretty, level: trace }
+
+flags:
+  changePassword: true

packages/middleware/test/config/no-logo.yaml

@@ -14,6 +14,7 @@ web:
   showRaw: true
   primary_color: '#ffffff'
   logo:
+  favicon:
   html_cache: false
 
 url_prefix: /prefix

packages/middleware/test/render.spec.ts

@@ -86,6 +86,21 @@ describe('test web server', () => {
         expect(__VERDACCIO_BASENAME_UI_OPTIONS.logoDark).toMatch('/prefix/-/static/dark-logo.png');
       });
 
+      test('should render favicon as file', async () => {
+        const {
+          window: { __VERDACCIO_BASENAME_UI_OPTIONS },
+        } = await render('file-logo.yaml');
+        expect(__VERDACCIO_BASENAME_UI_OPTIONS.favicon).toMatch('/prefix/-/static/favicon.ico');
+      });
+
+      test('should render logo and favicon as URL', async () => {
+        const {
+          window: { __VERDACCIO_BASENAME_UI_OPTIONS },
+        } = await render('http-logo.yaml');
+        expect(__VERDACCIO_BASENAME_UI_OPTIONS.logo).toMatch(/https:.*logo-small.svg/i);
+        expect(__VERDACCIO_BASENAME_UI_OPTIONS.favicon).toMatch(/https:.*favicon.ico/i);
+      });
+
       test('should not render logo as absolute file is wrong', async () => {
         const {
           window: { __VERDACCIO_BASENAME_UI_OPTIONS },
@@ -98,6 +113,7 @@ describe('test web server', () => {
           window: { __VERDACCIO_BASENAME_UI_OPTIONS },
         } = await render('no-logo.yaml');
         expect(__VERDACCIO_BASENAME_UI_OPTIONS.logo).toEqual('');
+        expect(__VERDACCIO_BASENAME_UI_OPTIONS.favicon).toEqual('');
       });
 
       test.todo('should default title');