Use Fastify logos by default (#49)

* Use Fastify logos by default

Signed-off-by: Matteo Collina <[email protected]>

* add demo in the README

Signed-off-by: Matteo Collina <[email protected]>

---------

Signed-off-by: Matteo Collina <[email protected]>

Author: mcollina

README.md

@@ -8,6 +8,8 @@ A Fastify plugin for serving [Swagger UI](https://swagger.io/tools/swagger-ui/).
 
 Supports Fastify versions `4.x`.
 
+![Demo](./demo.png)
+
 <a name="install"></a>
 ## Install
 ```
@@ -199,6 +201,7 @@ await fastify.register(require('@fastify/swagger-ui'), {
 You can add custom JavaScript and CSS to the Swagger UI web page by using the theme option.
 
 ##### Example
+
 ```js
 const fastify = require('fastify')()
 
@@ -225,6 +228,32 @@ await fastify.register(require('@fastify/swagger-ui'), {
 })
 ```
 
+You can add custom JavaScript and CSS to the Swagger UI web page by using the theme option.
+
+#### logo
+
+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')
+  },
+  theme: {
+    favicon: [
+      {
+        filename: 'favicon.png',
+        rel: 'icon',
+        sizes: '16x16',
+        type: 'image/png',
+        content: Buffer.from('iVBOR...', 'base64')
+      }
+    ]
+  }
+})
+```
+
 #### Protect your documentation routes
 
 You can protect your documentation by configuring an authentication hook.

demo.png

@@ -1,8 +1,9 @@
 'use strict'
 
 const fp = require('fastify-plugin')
+const { readFile } = require('fs/promises')
 
-function fastifySwaggerUi (fastify, opts, next) {
+async function fastifySwaggerUi (fastify, opts) {
   fastify.decorate('swaggerCSP', require('./static/csp.json'))
 
   fastify.register(require('./lib/routes'), {
@@ -11,10 +12,9 @@ function fastifySwaggerUi (fastify, opts, next) {
     initOAuth: opts.initOAuth || {},
     hooks: opts.uiHooks,
     theme: opts.theme || {},
+    logo: opts.logo || { type: 'image/svg+xml', content: await readFile(require.resolve('./static/logo.svg')) },
     ...opts
   })
-
-  next()
 }
 
 module.exports = fp(fastifySwaggerUi, {

favicon-16x16.png

@@ -3,6 +3,9 @@
 const serialize = require('./serialize')
 
 function swaggerInitializer (opts) {
+  const logoBase64 = Buffer.from(opts.logo.content).toString('base64')
+  const logoData = `data:${opts.logo.type};base64,${logoBase64}`
+
   return `window.onload = function () {
     function resolveUrl(url) {
       const anchor = document.createElement('a')
@@ -28,7 +31,13 @@ function swaggerInitializer (opts) {
     });
 
     const ui = SwaggerUIBundle(resConfig)
-    window.ui = ui
+    const logoData = '${logoData}'
+
+    if (logoData) {
+      const img = document.querySelector('#swagger-ui > section > div.topbar > div > div > a > img')
+      img.src = logoData
+    }
+
     ui.initOAuth(${serialize(opts.initOAuth)})
   }`
 }

favicon-32x32.png

@@ -10,8 +10,6 @@ fse.emptyDirSync(resolve(`./${folderName}`))
 
 // since the original swagger-ui-dist folder contains non UI files
 const filesToCopy = [
-  'favicon-16x16.png',
-  'favicon-32x32.png',
   'index.html',
   'index.css',
   'oauth2-redirect.html',
@@ -28,6 +26,15 @@ filesToCopy.forEach(filename => {
   fse.copySync(`${swaggerUiAssetPath}/${filename}`, resolve(`./static/${filename}`))
 })
 
+const overrides = [
+  'favicon-16x16.png',
+  'favicon-32x32.png',
+  'logo.svg'
+]
+overrides.forEach(filename => {
+  fse.copySync(`./${filename}`, resolve(`./static/${filename}`))
+})
+
 const sha = {
   script: [],
   style: []

index.js

@@ -76,3 +76,19 @@ test('/documentation/static/swagger-initializer.js should have configurable init
   t.equal(res.statusCode, 200)
   t.ok(res.payload.includes('ui.initOAuth({"clientId":"someId"})'))
 })
+
+test('customize 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: { type: 'image/png', content: 'foobar' } })
+
+  const res = await fastify.inject('/documentation/static/swagger-initializer.js')
+  t.equal(res.body.indexOf(Buffer.from('foobar').toString('base64')) > -1, true)
+})

lib/swagger-initializer.js

@@ -53,6 +53,8 @@ declare namespace fastifySwaggerUi {
 
     theme?: FastifySwaggerUiTheme
 
+    logo?: FastifySwaggerUILogo
+
     transformSpecification?: (swaggerObject: Readonly<Record<string, any>>, request: FastifyRequest, reply: FastifyReply) => Record<string, any>
     transformSpecificationClone?: boolean
   }
@@ -63,6 +65,11 @@ declare namespace fastifySwaggerUi {
     favicon: { filename: string; rel: string; type: string; sizes: string; content: string; }[];
   }
 
+  type FastifySwaggerUILogo = {
+    type: string;
+    content: string | Buffer;
+  }
+
   type SupportedHTTPMethods = "get" | "put" | "post" | "delete" | "options" | "head" | "patch" | "trace";
 
   interface PluginsOptions {