feature: href for logo (with optional target="_blank") (#171)

* [Feature] href for logo (with optional target="_blank") * Fix ? to && * Update lib/swagger-initializer.js Co-authored-by: Aras Abbasi <[email protected]> Signed-off-by: Marcin Kondrat <[email protected]> * Update types/index.d.ts Co-authored-by: Aras Abbasi <[email protected]> Signed-off-by: Marcin Kondrat <[email protected]> * docs update * target * fix * fix --------- Signed-off-by: Marcin Kondrat <[email protected]> Co-authored-by: Aras Abbasi <[email protected]>
fastify · Sep 17, 2024 · 3e5850b · 3e5850b
1 parent 3490996
commit 3e5850b
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -244,7 +244,9 @@ It's possible to override the logo displayed in the top bar by specifying:
 await fastify.register(require('@fastify/swagger-ui'), {
   logo: {
     type: 'image/png',
-    content: Buffer.from('iVBOR...', 'base64')
+    content: Buffer.from('iVBOR...', 'base64'),
+    href: '/documentation',
+    target: '_blank'
   },
   theme: {
     favicon: [

diff --git a/lib/swagger-initializer.js b/lib/swagger-initializer.js
@@ -3,8 +3,11 @@
 const serialize = require('./serialize')
 
 function swaggerInitializer (opts) {
-  const logoBase64 = Buffer.from(opts.logo.content).toString('base64')
-  const logoData = `data:${opts.logo.type};base64,${logoBase64}`
+  const hasLogo = opts.logo && opts.logo.content !== undefined
+  const logoBase64 = hasLogo && Buffer.from(opts.logo.content).toString('base64')
+  const logoData = hasLogo && `data:${opts.logo.type};base64,${logoBase64}`
+  const logoHref = hasLogo && opts.logo.href
+  const logoTarget = hasLogo && opts.logo.target
 
   return `window.onload = function () {
     function waitForElement(selector) {
@@ -55,17 +58,22 @@ function swaggerInitializer (opts) {
     });
 
     const ui = SwaggerUIBundle(resConfig)
-    const logoData = '${logoData}'
 
-    if (logoData && resConfig.layout === 'StandaloneLayout') {
+    ${logoData
+? `
+    if (resConfig.layout === 'StandaloneLayout') {
+      // Replace the logo
       waitForElement('#swagger-ui > section > div.topbar > div > div > a').then((link) => {
         const img = document.createElement('img')
         img.height = 40
-        img.src = logoData
+        img.src = '${logoData}'
+        ${logoHref ? `img.href = '${logoHref}'` : 'img.href = resolveUrl(\'/\')'}
+        ${logoTarget ? `img.target = '${logoTarget}'` : ''}
         link.innerHTML = ''
         link.appendChild(img)
       })
-    }
+    }`
+: ''}
 
     ui.initOAuth(${serialize(opts.initOAuth)})
   }`

diff --git a/test/swagger-initializer.test.js b/test/swagger-initializer.test.js
@@ -90,5 +90,54 @@ test('customize logo', async (t) => {
   await fastify.register(fastifySwaggerUi, { logo: { type: 'image/png', content: 'foobar' } })
 
   const res = await fastify.inject('/documentation/static/swagger-initializer.js')
+  t.assert.deepStrictEqual(res.body.includes('// Replace the logo'), true)
   t.assert.deepStrictEqual(res.body.indexOf(Buffer.from('foobar').toString('base64')) > -1, true)
 })
+
+test('customized logo has target', async (t) => {
+  const config = {
+    mode: 'static',
+    specification: {
+      path: './examples/example-static-specification.yaml'
+    }
+  }
+
+  const fastify = Fastify()
+  await fastify.register(fastifySwagger, config)
+  await fastify.register(fastifySwaggerUi, { logo: { type: 'image/png', content: 'foobar', target: '_self' } })
+
+  const res = await fastify.inject('/documentation/static/swagger-initializer.js')
+  t.assert.deepStrictEqual(res.body.includes("img.target = '_self'"), true)
+})
+
+test('customized logo has href', async (t) => {
+  const config = {
+    mode: 'static',
+    specification: {
+      path: './examples/example-static-specification.yaml'
+    }
+  }
+
+  const fastify = Fastify()
+  await fastify.register(fastifySwagger, config)
+  await fastify.register(fastifySwaggerUi, { logo: { type: 'image/png', content: 'foobar', href: 'http://www.example.com' } })
+
+  const res = await fastify.inject('/documentation/static/swagger-initializer.js')
+  t.assert.deepStrictEqual(res.body.includes("img.href = 'http://www.example.com'"), true)
+})
+
+test('no customized logo', async (t) => {
+  const config = {
+    mode: 'static',
+    specification: {
+      path: './examples/example-static-specification.yaml'
+    }
+  }
+
+  const fastify = Fastify()
+  await fastify.register(fastifySwagger, config)
+  await fastify.register(fastifySwaggerUi, { logo: null })
+
+  const res = await fastify.inject('/documentation/static/swagger-initializer.js')
+  t.assert.deepStrictEqual(res.body.includes('// Replace the logo'), false)
+})
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -78,6 +78,8 @@ declare namespace fastifySwaggerUi {
   type FastifySwaggerUILogo = {
     type: string;
     content: string | Buffer;
+    href?: string;
+    target?: '_blank' | '_parent' | '_self' | '_top';
   }
 
   type SupportedHTTPMethods = "get" | "put" | "post" | "delete" | "options" | "head" | "patch" | "trace";