@fastify/swagger-ui - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

index.js

@@ -13,2 +13,3 @@ 'use strict'
     hooks: opts.uiHooks,
+    theme: opts.theme || {},
     ...opts
@@ -15,0 +16,0 @@ })

lib/routes.js

@@ -8,2 +8,3 @@ 'use strict'
 const swaggerInitializer = require('./swagger-initializer')
+const indexHtml = require('./index-html')
 
@@ -79,2 +80,67 @@ // URI prefix to separate static assets for swagger UI
 
+  if (opts.theme) {
+    const themePrefix = `${staticPrefix}/theme`
+    if (opts.theme.css) {
+      for (const cssFile of opts.theme.css) {
+        fastify.route({
+          url: `${themePrefix}/${cssFile.filename}`,
+          method: 'GET',
+          schema: { hide: true },
+          ...hooks,
+          handler: (req, reply) => {
+            reply
+              .header('content-type', 'text/css; charset=UTF-8')
+              .send(cssFile.content)
+          }
+        })
+      }
+    }
+
+    if (opts.theme.js) {
+      for (const jsFile of opts.theme.js) {
+        fastify.route({
+          url: `${themePrefix}/${jsFile.filename}`,
+          method: 'GET',
+          schema: { hide: true },
+          ...hooks,
+          handler: (req, reply) => {
+            reply
+              .header('content-type', 'application/javascript; charset=utf-8')
+              .send(jsFile.content)
+          }
+        })
+      }
+    }
+
+    if (opts.theme.favicon) {
+      for (const favicon of opts.theme.favicon) {
+        fastify.route({
+          url: `${themePrefix}/${favicon.filename}`,
+          method: 'GET',
+          schema: { hide: true },
+          ...hooks,
+          handler: (req, reply) => {
+            reply
+              .header('content-type', favicon.type)
+              .send(favicon.content)
+          }
+        })
+      }
+    }
+  }
+
+  const indexHtmlContent = indexHtml(opts)
+
+  fastify.route({
+    url: `${staticPrefix}/index.html`,
+    method: 'GET',
+    schema: { hide: true },
+    ...hooks,
+    handler: (req, reply) => {
+      reply
+        .header('content-type', 'text/html; charset=utf-8')
+        .send(indexHtmlContent)
+    }
+  })
+
   const swaggerInitializerContent = swaggerInitializer(opts)
@@ -81,0 +147,0 @@

package.json

 {
   "name": "@fastify/swagger-ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Serve Swagger-ui for Fastify",
@@ -56,3 +56,3 @@ "main": "index.js",
     "standard": "^17.0.0",
-    "swagger-ui-dist": "4.15.5",
+    "swagger-ui-dist": "4.16.1",
     "tap": "^16.3.2",
@@ -59,0 +59,0 @@ "tsd": "^0.25.0"

README.md

@@ -113,2 +113,3 @@ # @fastify/swagger-ui
  | uiHooks              | {}               | Additional hooks for the documentation's routes. You can provide the `onRequest` and `preHandler` hooks with the same [route's options](https://www.fastify.io/docs/latest/Routes/#options) interface.|
+ | theme                | {}               | Add custom JavaScript and CSS to the Swagger UI web page |
  | logLevel             | info             | Allow to define route log level.                                                                                          |
@@ -197,2 +198,33 @@
 
+#### theme
+
+You can add custom JavaScript and CSS to the Swagger UI web page by using the theme option.
+
+##### Example
+```js
+const fastify = require('fastify')()
+
+fastify.register(require('@fastify/swagger'))
+
+await fastify.register(require('@fastify/swagger-ui'), {
+  theme: {
+    js: [
+      { filename: 'special.js', content: 'alert("client javascript")' }
+    ],
+    css: [
+      { filename: 'theme.css', content: '* { border: 1px red solid; }' }
+    ],
+    favicon: [
+      {
+        filename: 'favicon.png',
+        rel: 'icon',
+        sizes: '16x16',
+        type: 'image/png',
+        content: Buffer.from('iVBOR...', 'base64')
+      }
+    ]
+  }
+})
+```
+
 <a name="license"></a>
@@ -199,0 +231,0 @@ ## License

types/index.d.ts

@@ -54,2 +54,4 @@ import { FastifyPluginCallback, FastifyReply, FastifyRequest, onRequestHookHandler, preHandlerHookHandler } from 'fastify';
 
+    theme?: FastifySwaggerUiTheme
+
     transformSpecification?: (swaggerObject: Readonly<Record<string, any>>, request: FastifyRequest, reply: FastifyReply) => Record<string, any>
@@ -59,2 +61,8 @@ transformSpecificationClone?: boolean
 
+  type FastifySwaggerUiTheme = {
+    css?: { filename: string; content: string; }[];
+    js?: { filename: string; content: string; }[];
+    favicon: { filename: string; rel: string; type: string; sizes: string; content: string; }[];
+  }
+
   type SupportedHTTPMethods = "get" | "put" | "post" | "delete" | "options" | "head" | "patch" | "trace";
@@ -61,0 +69,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4472533

increased by0.28%

Number of package files

62

increased by5.08%

Lines of code

10458

increased by3.2%

Number of lines in readme file

232

increased by16%

No dependency changes