swagger-api · tim-lai · Mar 23, 2022 · May 21, 2021 · Mar 15, 2022 · Mar 17, 2022
diff --git a/dev-helpers/dev-helper-initializer.js b/dev-helpers/dev-helper-initializer.js
@@ -0,0 +1,30 @@
+window.onload = function() {
+  window["SwaggerUIBundle"] = window["swagger-ui-bundle"]
+  window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"]
+  // Build a system
+  const ui = SwaggerUIBundle({
+    url: "https://petstore.swagger.io/v2/swagger.json",
+    dom_id: '#swagger-ui',
+    presets: [
+      SwaggerUIBundle.presets.apis,
+      SwaggerUIStandalonePreset
+    ],
+    plugins: [
+      SwaggerUIBundle.plugins.DownloadUrl
+    ],
+    layout: "StandaloneLayout"
+  })
+
+  window.ui = ui
+
+  ui.initOAuth({
+    clientId: "your-client-id",
+    clientSecret: "your-client-secret-if-required",
+    realm: "your-realms",
+    appName: "your-app-name",
+    scopeSeparator: " ",
+    scopes: "openid profile email phone address",
+    additionalQueryStringParams: {},
+    usePkceWithAuthorizationCodeGrant: false
+  })
+}
diff --git a/dev-helpers/index.html b/dev-helpers/index.html
@@ -5,65 +5,17 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Swagger UI</title>
+  <link rel="stylesheet" type="text/css" href="style.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>
 </head>
 
 <body>
   <div id="swagger-ui"></div>
 
-  <script>
-    window.onload = function() {
-      window["SwaggerUIBundle"] = window["swagger-ui-bundle"]
-      window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"]
-      // Build a system
-      const ui = SwaggerUIBundle({
-        url: "https://petstore.swagger.io/v2/swagger.json",
-        dom_id: '#swagger-ui',
-        presets: [
-          SwaggerUIBundle.presets.apis,
-          SwaggerUIStandalonePreset
-        ],
-        plugins: [
-          SwaggerUIBundle.plugins.DownloadUrl
-        ],
-        layout: "StandaloneLayout"
-      })
-
-      window.ui = ui
+  <script src="dev-helper-initializer.js"></script>
 
-      ui.initOAuth({
-        clientId: "your-client-id",
-        clientSecret: "your-client-secret-if-required",
-        realm: "your-realms",
-        appName: "your-app-name",
-        scopeSeparator: " ",
-        scopes: "openid profile email phone address",
-        additionalQueryStringParams: {},
-        useBasicAuthenticationWithAccessCodeGrant: false,
-        usePkceWithAuthorizationCodeGrant: false
-      })
-    }
-  </script>
 </body>
 
 </html>
diff --git a/dev-helpers/style.css b/dev-helpers/style.css
@@ -0,0 +1,19 @@
+html
+{
+  box-sizing: border-box;
+  overflow: -moz-scrollbars-vertical;
+  overflow-y: scroll;
+}
+
+*,
+*:before,
+*:after
+{
+  box-sizing: inherit;
+}
+
+body
+{
+  margin:0;
+  background: #fafafa;
+}
diff --git a/dist/index.css b/dist/index.css
@@ -0,0 +1,16 @@
+html {
+    box-sizing: border-box;
+    overflow: -moz-scrollbars-vertical;
+    overflow-y: scroll;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+body {
+    margin: 0;
+    background: #fafafa;
+}
diff --git a/dist/index.html b/dist/index.html
@@ -5,56 +5,15 @@
     <meta charset="UTF-8">
     <title>Swagger UI</title>
     <link rel="stylesheet" type="text/css" href="./swagger-ui.css" />
+    <link rel="stylesheet" type="text/css" href="index.css" />
     <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
     <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
-    <style>
-      html
-      {
-        box-sizing: border-box;
-        overflow: -moz-scrollbars-vertical;
-        overflow-y: scroll;
-      }
-
-      *,
-      *:before,
-      *:after
-      {
-        box-sizing: inherit;
-      }
-
-      body
-      {
-        margin:0;
-        background: #fafafa;
-      }
-    </style>
   </head>
 
   <body>
     <div id="swagger-ui"></div>
-
     <script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
     <script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
-    <script>
-    window.onload = function() {
-      // Begin Swagger UI call region
-      const ui = SwaggerUIBundle({
-        url: "https://petstore.swagger.io/v2/swagger.json",
-        dom_id: '#swagger-ui',
-        deepLinking: true,
-        presets: [
-          SwaggerUIBundle.presets.apis,
-          SwaggerUIStandalonePreset
-        ],
-        plugins: [
-          SwaggerUIBundle.plugins.DownloadUrl
-        ],
-        layout: "StandaloneLayout"
-      });
-      // End Swagger UI call region
-
-      window.ui = ui;
-    };
-  </script>
+    <script src="./swagger-initializer.js" charset="UTF-8"> </script>
   </body>
 </html>
diff --git a/dist/swagger-initializer.js b/dist/swagger-initializer.js
@@ -0,0 +1,20 @@
+window.onload = function() {
+  //<editor-fold desc="Changeable Configuration Block">
+
+  // the following lines will be replaced by docker/configurator, when it runs in a docker-container
+  window.ui = SwaggerUIBundle({
+    url: "https://petstore.swagger.io/v2/swagger.json",
+    dom_id: '#swagger-ui',
+    deepLinking: true,
+    presets: [
+      SwaggerUIBundle.presets.apis,
+      SwaggerUIStandalonePreset
+    ],
+    plugins: [
+      SwaggerUIBundle.plugins.DownloadUrl
+    ],
+    layout: "StandaloneLayout"
+  });
+
+  //</editor-fold>
+};
diff --git a/docker/configurator/index.js b/docker/configurator/index.js
@@ -1,12 +1,16 @@
+/*
+ * Replace static code with configured data based on environment-variables.
+ * This code should be called BEFORE the webserver serve the api-documentation.
+ */
 const fs = require("fs")
 const path = require("path")
 
 const translator = require("./translator")
 const oauthBlockBuilder = require("./oauth")
 const indent = require("./helpers").indent
 
-const START_MARKER = "// Begin Swagger UI call region"
-const END_MARKER = "// End Swagger UI call region"
+const START_MARKER = "//<editor-fold desc=\"Changeable Configuration Block\">"
+const END_MARKER = "//</editor-fold>"
 
 const targetPath = path.normalize(process.cwd() + "/" + process.argv[2])
 
@@ -22,12 +26,12 @@ const afterEndMarkerContent = originalHtmlContent.slice(
 
 if (startMarkerIndex < 0 || endMarkerIndex < 0) {
   console.error("ERROR: Swagger UI was unable to inject Docker configuration data!")
-  console.error("!      This can happen when you provide custom HTML to Swagger UI.")
+  console.error("!      This can happen when you provide custom HTML/JavaScript to Swagger UI.")
   console.error("!  ")
-  console.error("!      In order to solve this, add the `Begin Swagger UI call region`")
-  console.error("!      and `End Swagger UI call region` markers to your HTML.")
+  console.error(`!      In order to solve this, add the "${START_MARKER}"`)
+  console.error(`!      and "${END_MARKER}" markers to your JavaScript.`)
   console.error("!      See the repository for an example:")
-  console.error("!      https://github.com/swagger-api/swagger-ui/blob/02758b8125dbf38763cfd5d4f91c7c803e9bd0ad/dist/index.html#L40-L54")
+  console.error("!      https://github.com/swagger-api/swagger-ui/blob/8c946a02e73ef877d73b7635de27924418ba50f3/dist/swagger-initializer.js#L2-L19")
   console.error("!  ")
   console.error("!      If you're seeing this message and aren't using custom HTML,")
   console.error("!      this message may be a bug. Please file an issue:")
@@ -39,10 +43,9 @@ fs.writeFileSync(
   targetPath,
   `${beforeStartMarkerContent}
       ${START_MARKER}
-      const ui = SwaggerUIBundle({
-        ${indent(translator(process.env, { injectBaseConfig: true }), 8, 2)}
+      window.ui = SwaggerUIBundle({
+        ${indent(translator(process.env, {injectBaseConfig: true}), 8, 2)}
       })
-
       ${indent(oauthBlockBuilder(process.env), 6, 2)}
       ${END_MARKER}
 ${afterEndMarkerContent}`

diff --git a/docker/run.sh b/docker/run.sh
@@ -3,36 +3,19 @@
 set -e
 BASE_URL=${BASE_URL:-/}
 NGINX_ROOT=/usr/share/nginx/html
-INDEX_FILE=$NGINX_ROOT/index.html
+INITIALIZER_SCRIPT=$NGINX_ROOT/swagger-initializer.js
 NGINX_CONF=/etc/nginx/nginx.conf
 
-node /usr/share/nginx/configurator $INDEX_FILE
+node /usr/share/nginx/configurator $INITIALIZER_SCRIPT
 
-replace_in_index () {
-  if [ "$1" != "**None**" ]; then
-    sed -i "s|/\*||g" $INDEX_FILE
-    sed -i "s|\*/||g" $INDEX_FILE
-    sed -i "s|$1|$2|g" $INDEX_FILE
-  fi
-}
-
-replace_or_delete_in_index () {
-  if [ -z "$2" ]; then
-    sed -i "/$1/d" $INDEX_FILE
-  else
-    replace_in_index $1 $2
-  fi
-}
 
 if [[ "${BASE_URL}" != "/" ]]; then
   sed -i "s|location / {|location $BASE_URL {|g" $NGINX_CONF
 fi
 
-replace_in_index myApiKeyXXXX123456789 $API_KEY
-
 if [ "$SWAGGER_JSON_URL" ]; then
-  sed -i "s|https://petstore.swagger.io/v2/swagger.json|$SWAGGER_JSON_URL|g" $INDEX_FILE
-  sed -i "s|http://example.com/api|$SWAGGER_JSON_URL|g" $INDEX_FILE
+  sed -i "s|https://petstore.swagger.io/v2/swagger.json|$SWAGGER_JSON_URL|g" $INITIALIZER_SCRIPT
+  sed -i "s|http://example.com/api|$SWAGGER_JSON_URL|g" $INITIALIZER_SCRIPT
 fi
 
 if [[ -f "$SWAGGER_JSON" ]]; then
@@ -52,8 +35,8 @@ if [[ -f "$SWAGGER_JSON" ]]; then
   fi
   sed -i "s|#SWAGGER_ROOT|root $SWAGGER_ROOT/;|g" $NGINX_CONF
 
-  sed -i "s|https://petstore.swagger.io/v2/swagger.json|$REL_PATH|g" $INDEX_FILE
-  sed -i "s|http://example.com/api|$REL_PATH|g" $INDEX_FILE
+  sed -i "s|https://petstore.swagger.io/v2/swagger.json|$REL_PATH|g" $INITIALIZER_SCRIPT
+  sed -i "s|http://example.com/api|$REL_PATH|g" $INITIALIZER_SCRIPT
 fi
 
 # replace the PORT that nginx listens on if PORT is supplied