Make API docs configurable and add a mini logo as favicon

apiflask · Mar 12, 2021 · 2943794 · 2943794
1 parent ebfc107
commit 2943794
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 8 deletions.
diff --git a/apiflask/app.py b/apiflask/app.py
@@ -40,6 +40,15 @@ class APIFlask(Flask, _OpenAPIMixin):
             'VALIDATION_ERROR_CODE': 400,
             'VALIDATION_ERROR_DESCRIPTION': 'Validation error',
             'UNKNOWN_ERROR_MESSAGE': 'Unknown error',
+            'DOCS_FAVICON': None,
+            'DOCS_USE_GOOGLE_FONT': True,
+            'REDOC_STANDALONE_JS': 'https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js',
+            'SWAGGER_UI_CSS': 'https://cdn.jsdelivr.net/npm/swagger-ui-dist@3/swagger-ui.css',
+            'SWAGGER_UI_BUNDLE_JS': 'https://cdn.jsdelivr.net/npm/swagger-ui-dist@3/swagger-ui-bundle.js',
+            'SWAGGER_UI_STANDALONE_PRESET_JS': 'https://cdn.jsdelivr.net/npm/swagger-ui-dist@3/swagger-ui-standalone-preset.js',
+            'SWAGGER_UI_LAYOUT': 'BaseLayout',
+            'SWAGGER_UI_OAUTH_CONFIG': None,
+            'SWAGGER_UI_CONFIG': None,
         }
     )
 

diff --git a/apiflask/openapi.py b/apiflask/openapi.py
@@ -125,7 +125,13 @@ def __init__(self, title, version, spec_path, docs_path, redoc_path):
         self.redoc_path = redoc_path
 
     def _register_openapi_blueprint(self):
-        bp = Blueprint('openapi', __name__, template_folder='templates')
+        bp = Blueprint(
+            'openapi',
+            __name__,
+            template_folder='templates',
+            static_folder='static',
+            static_url_path='/apiflask'
+        )
 
         if self.spec_path:
             @bp.route(self.spec_path)

diff --git a/apiflask/static/favicon.png b/apiflask/static/favicon.png
diff --git a/apiflask/templates/apiflask/redoc.html b/apiflask/templates/apiflask/redoc.html
@@ -4,16 +4,19 @@
     <title>{{ title }} {{ version }}</title>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    {% if config.DOCS_USE_GOOGLE_FONT %}
     <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
+    {% endif %}
+    <link rel="icon" type="image/png" href="{{ config.DOCS_FAVICON or url_for('openapi.static', filename='favicon.png') }}">
     <style>
         body {
-        margin: 0;
-        padding: 0;
+            margin: 0;
+            padding: 0;
         }
     </style>
 </head>
 <body>
     <redoc spec-url="{{ url_for('openapi.spec') }}"></redoc>
-    <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
+    <script src="{{ config.REDOC_STANDALONE_JS }}"> </script>
 </body>
 </html>
diff --git a/apiflask/templates/apiflask/swagger_ui.html b/apiflask/templates/apiflask/swagger_ui.html
@@ -4,7 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <title>{{ title }} {{ version }}</title>
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@3/swagger-ui.css">
+    <link rel="stylesheet" type="text/css" href="{{ config.SWAGGER_UI_CSS }}">
+    <link rel="icon" type="image/png" href="{{ config.DOCS_FAVICON or url_for('openapi.static', filename='favicon.png') }}">
     <style>
         html {
             box-sizing: border-box;
@@ -28,8 +29,8 @@
 <body>
     <div id="swagger-ui"></div>
 
-    <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@3/swagger-ui-standalone-preset.js"></script>
+    <script src="{{ config.SWAGGER_UI_BUNDLE_JS }}"></script>
+    <script src="{{ config.SWAGGER_UI_STANDALONE_PRESET_JS }}"></script>
     <script>
         window.onload = function () {
             const ui = SwaggerUIBundle({
@@ -43,7 +44,7 @@
                 plugins: [
                     SwaggerUIBundle.plugins.DownloadUrl
                 ],
-                layout: "BaseLayout"
+                layout: "{{ config.SWAGGER_UI_LAYOUT }}"
             })
         }
     </script>