Replace static Swagger-ui distribution with unpkg version (#1604)

google · Jul 12, 2023 · 92674f8 · 92674f8
1 parent be2a0ff
commit 92674f8
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 167 deletions.
diff --git a/assets/scss/_swagger.scss b/assets/scss/_swagger.scss
@@ -0,0 +1,3 @@
+.swagger-ui .info .title small pre {
+   background: #7d8492;
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -34,6 +34,8 @@
 @import "taxonomy";
 @import "drawio";
 @import "shortcodes";
+@import "swagger";
+
 
 @if $td-enable-google-fonts {
   @import url($web-font-path);

diff --git a/layouts/shortcodes/swaggerui.html b/layouts/shortcodes/swaggerui.html
@@ -1,10 +1,10 @@
 {{ $original := .Get "src" }}
-<div id="ohpen_swagger_ui"></div>
+<div id="docsy_swagger_ui"></div>
 <script>
   window.onload = function () {
     const ui = SwaggerUIBundle({
       url: {{ $original | relURL }},
-      dom_id: '#ohpen_swagger_ui',
+      dom_id: '#docsy_swagger_ui',
       presets: [
         SwaggerUIBundle.presets.apis,
         SwaggerUIStandalonePreset

diff --git a/layouts/swagger/baseof.html b/layouts/swagger/baseof.html
@@ -3,7 +3,7 @@
   <head>
     {{ partial "head.html" . }}
     <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
-    <link rel="stylesheet" type="text/css" href="{{ "css/swagger-ui.css" | relURL }}">
+    <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5.1.0/swagger-ui.css" integrity="sha384-4cTBOIJxihgy9mISVlGqdBZkd66byHFwoLscqza6swXPIp5qiLBwuzuJD9cMjYOw" crossorigin="anonymous">
   </head>
   <body class="td-{{ .Kind }}">
     <header>
@@ -22,8 +22,8 @@
           </aside>
           <main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
             {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
-            <script src="{{ "js/swagger-ui-bundle.js" | relURL }}"></script>
-            <script src="{{ "js/swagger-ui-standalone-preset.js" | relURL }}"></script>
+            <script src="https://unpkg.com/swagger-ui-dist@5.1.0/swagger-ui-bundle.js" integrity="sha384-TBW5qg/G561aZRk4jvscdaB7BEDK/9wpe/jS8vyKzK/ls+nJfWQw0W4cobLRYkWk" crossorigin="anonymous"></script>
+            <script src="https://unpkg.com/swagger-ui-dist@5.1.0/swagger-ui-standalone-preset.js" integrity="sha384-cftHzufgeQ3yLXAwNPSMCBSqPUkItABWOchc20veg7pQ1sDu0FQSp0Grfx/BfhN7" crossorigin="anonymous"></script>
             {{ block "main" . }}{{ end }}
           </main>
         </div>

diff --git a/static/css/swagger-ui.css b/static/css/swagger-ui.css
diff --git a/static/js/swagger-ui-bundle.js b/static/js/swagger-ui-bundle.js
diff --git a/static/js/swagger-ui-standalone-preset.js b/static/js/swagger-ui-standalone-preset.js
diff --git a/userguide/content/en/docs/adding-content/shortcodes/index.md b/userguide/content/en/docs/adding-content/shortcodes/index.md
@@ -248,7 +248,7 @@ resources:
 
 ### swaggerui
 
-The `swaggerui` shortcode can be placed anywhere inside a page with the [`swagger` layout](https://github.com/google/docsy/tree/main/layouts/swagger); it renders [Swagger UI](https://swagger.io/tools/swagger-ui/) using any OpenAPI YAML or JSON file as source. This file can be hosted anywhere you like, for example in your site's root [`/static` folder](/docs/adding-content/content/#adding-static-content).
+You can place the `swaggerui` shortcode anywhere inside a page with the [`swagger` layout](https://github.com/google/docsy/tree/main/layouts/swagger); it renders [Swagger UI](https://swagger.io/tools/swagger-ui/) using any OpenAPI YAML or JSON file as source. This file can be hosted anywhere you like, for example in your site's root [`/static` folder](/docs/adding-content/content/#adding-static-content).
 
 {{< tabpane >}}
 {{< tab header="Front matter:" disabled=true />}}
@@ -284,7 +284,7 @@ description: Reference for the Pet Store API
 {{< /tab >}}
 {{< /tabpane >}}
 
-You can customize Swagger UI's look and feel by overriding Swagger's CSS or by editing and compiling a [Swagger UI dist](https://github.com/swagger-api/swagger-ui) yourself and replace `themes/docsy/static/css/swagger-ui.css`.
+You can customize Swagger UI's look and feel by overriding Swagger's CSS in `themes/docsy/assets/scss/_swagger.scss`.
 
 ### redoc