feat: add scalar openapi ui, update swagger version to 5

Signed-off-by: Keming <kemingy94@gmail.com>
0b01001001 · Jan 26, 2024 · 3f950cc · 3f950cc
1 parent bc22adf
commit 3f950cc
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -51,7 +51,7 @@ Check the [examples](examples) folder.
    * falcon: `req.context`
    * starlette: `request.context`
 5. register to the web application `api.register(app)`
-6. check the document at URL location `/apidoc/redoc` or `/apidoc/swagger`
+6. check the document at URL location `/apidoc/redoc` or `/apidoc/swagger` or `/apidoc/scalar`
 
 If the request doesn't pass the validation, it will return a 422 with a JSON error message(ctx, loc, msg, type).
 

diff --git a/pyproject.toml b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "spectree"
-version = "1.2.8"
+version = "1.2.9"
 dynamic = []
 description = "generate OpenAPI document and validate request&response with Python annotations."
 readme = "README.md"

diff --git a/spectree/page.py b/spectree/page.py
@@ -36,37 +36,17 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8">
-        <title>Swagger UI</title>
-        <link rel="stylesheet" type="text/css"
-        href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@4/swagger-ui.css" >
-        <style>
-        html
-        {{
-            box-sizing: border-box;
-            overflow: -moz-scrollbars-vertical;
-            overflow-y: scroll;
-        }}
-
-        *,
-        *:before,
-        *:after
-        {{
-            box-sizing: inherit;
-        }}
-
-        body
-        {{
-            margin:0;
-            background: #fafafa;
-        }}
-        </style>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="SwaggerUI"/>
+        <title>SwaggerUI</title>
+        <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui.css" />
     </head>
 
     <body>
         <div id="swagger-ui"></div>
 
-        <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@4/swagger-ui-bundle.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@4/swagger-ui-standalone-preset.js"></script>
+        <script src="https://unpkg.com/swagger-ui-dist@5.0.0/swagger-ui-bundle.js" crossorigin></script>
+        <script src="https://unpkg.com/swagger-ui-dist@5.0.0/swagger-ui-standalone-preset.js" crossorigin></script>
         <script>
         window.onload = function() {{
         var full = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
@@ -178,4 +158,35 @@
 </script>
 </body>
 </html>""",
+    "scalar": """
+<!doctype html>
+<html>
+  <head>
+    <title>API Reference</title>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1" />
+    <style>
+      body {{
+        margin: 0;
+      }}
+    </style>
+  </head>
+  <body>
+    <script
+      id="api-reference"
+      data-url="{spec_url}">
+    </script>
+    <script>
+      var configuration = {{
+        theme: 'purple',
+      }}
+
+      var apiReference = document.getElementById('api-reference')
+      apiReference.dataset.configuration = JSON.stringify(configuration)
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>
+  </body>
+</html>"""
 }