update to swagger-ui 4.5.0 (#34)

* update to swagger-ui 4.5.0 * better html.
completecoding · Feb 17, 2022 · 2f808c7 · 2f808c7
1 parent 023f746
commit 2f808c7
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -29,7 +29,7 @@ You can also run `sls generate-swagger` if you want to generate the swagger file
 
 ## Config Options
 
-```
+```yaml
 custom:
     autoswagger:
         generateSwaggerOnDeploy?: true | false
@@ -111,7 +111,7 @@ When you create a `POST` or `PUT` endpoint, you expect to receive a specific str
 
 You can do that by adding a `bodyType` to the http event:
 
-```
+```js
 http: {
     path: 'hello',
     method: 'post',
@@ -124,7 +124,7 @@ http: {
 
 If you want to specify the query string parameters on an endpoint you can do this by adding an object of `queryStringParameters` to the event (original I know). This has two required properties of `required` and `type` as well as an optional `description`.
 
-```
+```js
 http: {
     path: 'goodbye',
     method: 'get',
@@ -148,7 +148,7 @@ http: {
 
 If you use multi-value query string parameters (array), then you must specify that your `type` is `array` and specify your data type (string or integer) in `arrayItemsType`
 
-```
+```js
 http: {
     path: 'goodbye',
     method: 'get',
@@ -176,7 +176,7 @@ Works the same way as `queryStringParameters`, but for headers.
 
 To use it, just define it under `headerParameters`:
 
-```
+```js
 http: {
     path: 'goodbye',
     method: 'get',
@@ -198,7 +198,7 @@ http: {
 
 You can exclude some endpoints from the swagger generation by adding `exclude` to the http event:
 
-```
+```js
 http: {
     path: 'hello',
     method: 'post',

diff --git a/src/resources/swagger-html.py b/src/resources/swagger-html.py
@@ -1,28 +1,31 @@
 swagger_ui = """<!DOCTYPE html>
-<html>
-<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/swagger-ui.css">
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>SwaggerUI</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/swagger-ui.css"
+    />
 
-<head>
-    <div id="swagger-ui"></div>
-    <script src="https://unpkg.com/[email protected]/swagger-ui-bundle.js"></script>
-    <script src="https://unpkg.com/[email protected]/swagger-ui-standalone-preset.js"></script>
-    <script>
-       window.onload = function() {
-           const ui = SwaggerUIBundle({
-              url: window.location.href + ".json",
-              dom_id: '#swagger-ui',
-              presets: [
-                SwaggerUIBundle.presets.apis,
-                SwaggerUIStandalonePreset
-                ],
-              layout: "StandaloneLayout"
-           })
-           window.ui = ui;
-       }
+    <script src="https://unpkg.com/[email protected]/swagger-ui-bundle.js"></script>
+    <script src="https://unpkg.com/[email protected]/swagger-ui-standalone-preset.js"></script>
+    <script defer>
+      window.onload = () => {
+        const ui = SwaggerUIBundle({
+          url: window.location.href + '.json',
+          dom_id: '#swagger-ui',
+          presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
+          layout: 'StandaloneLayout',
+        });
+        window.ui = ui;
+      };
     </script>
-</head>
-
-<body></body>
+  </head>
+  <body>
+    <div id="swagger-ui"></div>
+  </body>
 </html>
 """
 

diff --git a/src/resources/swagger-html.ts b/src/resources/swagger-html.ts
@@ -3,34 +3,38 @@ exports.handler = async () => {
     statusCode: 200,
     body: swaggerUI,
     headers: {
-      "content-type": "text/html",
+      'content-type': 'text/html',
     },
-  }
-}
+  };
+};
 
 const swaggerUI = `<!DOCTYPE html>
-<html>
-<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/swagger-ui.css">
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>SwaggerUI</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/swagger-ui.css"
+    />
 
-<head>
-    <div id="swagger-ui"></div>
-    <script src="https://unpkg.com/[email protected]/swagger-ui-bundle.js"></script>
-    <script src="https://unpkg.com/[email protected]/swagger-ui-standalone-preset.js"></script>
-    <script>
-       window.onload = function() {
-           const ui = SwaggerUIBundle({
-              url: window.location.href + ".json",
-              dom_id: '#swagger-ui',
-              presets: [
-                SwaggerUIBundle.presets.apis,
-                SwaggerUIStandalonePreset
-              ],
-              layout: "StandaloneLayout"
-           })
-           window.ui = ui;
-       }
+    <script src="https://unpkg.com/[email protected]/swagger-ui-bundle.js"></script>
+    <script src="https://unpkg.com/[email protected]/swagger-ui-standalone-preset.js"></script>
+    <script defer>
+      window.onload = () => {
+        const ui = SwaggerUIBundle({
+          url: window.location.href + '.json',
+          dom_id: '#swagger-ui',
+          presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
+          layout: 'StandaloneLayout',
+        });
+        window.ui = ui;
+      };
     </script>
-</head>
-
-<body></body>
-</html>`
+  </head>
+  <body>
+    <div id="swagger-ui"></div>
+  </body>
+</html>
+`;