Skip to content

Commit dc7d705

Browse files
shockeyshockey
authored
fix: provide svg assets through React app instead of relying on HTML (#4429)
* fix: provide svg assets through React app instead of relying on HTML * fix stylistic inconsistencies in HTML assets
1 parent 14473dd commit dc7d705

File tree

5 files changed

+139
-158
lines changed

5 files changed

+139
-158
lines changed

‎dev-helpers/index.html‎

Lines changed: 35 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -16,89 +16,57 @@
1616
overflow: -moz-scrollbars-vertical;
1717
overflow-y: scroll;
1818
}
19+
1920
*,
2021
*:before,
2122
*:after
2223
{
2324
box-sizing: inherit;
2425
}
25-
body {
26+
27+
body
28+
{
2629
margin:0;
2730
background: #fafafa;
2831
}
2932
</style>
3033
</head>
3134

3235
<body>
36+
<div id="swagger-ui"></div>
3337

34-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
35-
<defs>
36-
<symbol viewBox="0 0 20 20" id="unlocked">
37-
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
38-
</symbol>
39-
40-
<symbol viewBox="0 0 20 20" id="locked">
41-
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"/>
42-
</symbol>
43-
44-
<symbol viewBox="0 0 20 20" id="close">
45-
<path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z"/>
46-
</symbol>
47-
48-
<symbol viewBox="0 0 20 20" id="large-arrow">
49-
<path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"/>
50-
</symbol>
51-
52-
<symbol viewBox="0 0 20 20" id="large-arrow-down">
53-
<path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"/>
54-
</symbol>
38+
<script src="./swagger-ui-bundle.js"> </script>
39+
<script src="./swagger-ui-standalone-preset.js"> </script>
40+
<script>
41+
window.onload = function() {
42+
window["SwaggerUIBundle"] = window["swagger-ui-bundle"]
43+
window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"]
44+
// Build a system
45+
const ui = SwaggerUIBundle({
46+
url: "http://petstore.swagger.io/v2/swagger.json",
47+
dom_id: '#swagger-ui',
48+
presets: [
49+
SwaggerUIBundle.presets.apis,
50+
SwaggerUIStandalonePreset
51+
],
52+
plugins: [
53+
SwaggerUIBundle.plugins.DownloadUrl
54+
],
55+
layout: "StandaloneLayout"
56+
})
5557

58+
window.ui = ui
5659

57-
<symbol viewBox="0 0 24 24" id="jump-to">
58-
<path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z"/>
59-
</symbol>
60-
61-
<symbol viewBox="0 0 24 24" id="expand">
62-
<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
63-
</symbol>
64-
65-
</defs>
66-
</svg>
67-
68-
<div id="swagger-ui"></div>
69-
70-
<script src="./swagger-ui-bundle.js"> </script>
71-
<script src="./swagger-ui-standalone-preset.js"> </script>
72-
<script>
73-
window.onload = function() {
74-
window["SwaggerUIBundle"] = window["swagger-ui-bundle"]
75-
window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"]
76-
// Build a system
77-
const ui = SwaggerUIBundle({
78-
url: "http://petstore.swagger.io/v2/swagger.json",
79-
dom_id: '#swagger-ui',
80-
presets: [
81-
SwaggerUIBundle.presets.apis,
82-
SwaggerUIStandalonePreset
83-
],
84-
plugins: [
85-
SwaggerUIBundle.plugins.DownloadUrl
86-
],
87-
layout: "StandaloneLayout"
88-
})
89-
90-
window.ui = ui
91-
92-
ui.initOAuth({
93-
clientId: "your-client-id",
94-
clientSecret: "your-client-secret-if-required",
95-
realm: "your-realms",
96-
appName: "your-app-name",
97-
scopeSeparator: " ",
98-
additionalQueryStringParams: {}
99-
})
100-
}
101-
</script>
60+
ui.initOAuth({
61+
clientId: "your-client-id",
62+
clientSecret: "your-client-secret-if-required",
63+
realm: "your-realms",
64+
appName: "your-app-name",
65+
scopeSeparator: " ",
66+
additionalQueryStringParams: {}
67+
})
68+
}
69+
</script>
10270
</body>
10371

10472
</html>

‎dist/index.html‎

Lines changed: 56 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,61 @@
11
<!-- HTML for static distribution bundle build -->
22
<!DOCTYPE html>
33
<html lang="en">
4-
<head>
5-
<meta charset="UTF-8">
6-
<title>Swagger UI</title>
7-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:300,600|Titillium+Web:400,600,700" rel="stylesheet">
8-
<link rel="stylesheet" type="text/css" href="./swagger-ui.css" >
9-
<link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
10-
<link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
11-
<style>
12-
html
13-
{
14-
box-sizing: border-box;
15-
overflow: -moz-scrollbars-vertical;
16-
overflow-y: scroll;
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Swagger UI</title>
7+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:300,600|Titillium+Web:400,600,700" rel="stylesheet">
8+
<link rel="stylesheet" type="text/css" href="./swagger-ui.css" >
9+
<link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
10+
<link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
11+
<style>
12+
html
13+
{
14+
box-sizing: border-box;
15+
overflow: -moz-scrollbars-vertical;
16+
overflow-y: scroll;
17+
}
18+
19+
*,
20+
*:before,
21+
*:after
22+
{
23+
box-sizing: inherit;
24+
}
25+
26+
body
27+
{
28+
margin:0;
29+
background: #fafafa;
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
<div id="swagger-ui"></div>
36+
37+
<script src="./swagger-ui-bundle.js"> </script>
38+
<script src="./swagger-ui-standalone-preset.js"> </script>
39+
<script>
40+
window.onload = function() {
41+
42+
// Build a system
43+
const ui = SwaggerUIBundle({
44+
url: "http://petstore.swagger.io/v2/swagger.json",
45+
dom_id: '#swagger-ui',
46+
deepLinking: true,
47+
presets: [
48+
SwaggerUIBundle.presets.apis,
49+
SwaggerUIStandalonePreset
50+
],
51+
plugins: [
52+
SwaggerUIBundle.plugins.DownloadUrl
53+
],
54+
layout: "StandaloneLayout"
55+
})
56+
57+
window.ui = ui
1758
}
18-
*,
19-
*:before,
20-
*:after
21-
{
22-
box-sizing: inherit;
23-
}
24-
25-
body {
26-
margin:0;
27-
background: #fafafa;
28-
}
29-
</style>
30-
</head>
31-
32-
<body>
33-
34-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
35-
<defs>
36-
<symbol viewBox="0 0 20 20" id="unlocked">
37-
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
38-
</symbol>
39-
40-
<symbol viewBox="0 0 20 20" id="locked">
41-
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"/>
42-
</symbol>
43-
44-
<symbol viewBox="0 0 20 20" id="close">
45-
<path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z"/>
46-
</symbol>
47-
48-
<symbol viewBox="0 0 20 20" id="large-arrow">
49-
<path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"/>
50-
</symbol>
51-
52-
<symbol viewBox="0 0 20 20" id="large-arrow-down">
53-
<path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"/>
54-
</symbol>
55-
56-
57-
<symbol viewBox="0 0 24 24" id="jump-to">
58-
<path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z"/>
59-
</symbol>
60-
61-
<symbol viewBox="0 0 24 24" id="expand">
62-
<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
63-
</symbol>
64-
65-
</defs>
66-
</svg>
67-
68-
<div id="swagger-ui"></div>
69-
70-
<script src="./swagger-ui-bundle.js"> </script>
71-
<script src="./swagger-ui-standalone-preset.js"> </script>
72-
<script>
73-
window.onload = function() {
74-
75-
// Build a system
76-
const ui = SwaggerUIBundle({
77-
url: "http://petstore.swagger.io/v2/swagger.json",
78-
dom_id: '#swagger-ui',
79-
deepLinking: true,
80-
presets: [
81-
SwaggerUIBundle.presets.apis,
82-
SwaggerUIStandalonePreset
83-
],
84-
plugins: [
85-
SwaggerUIBundle.plugins.DownloadUrl
86-
],
87-
layout: "StandaloneLayout"
88-
})
89-
90-
window.ui = ui
91-
}
92-
</script>
93-
</body>
94-
59+
</script>
60+
</body>
9561
</html>

‎src/core/components/layouts/base.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export default class BaseLayout extends React.Component {
3939
let schemes = specSelectors.schemes()
4040
let servers = specSelectors.servers()
4141

42+
let SvgAssets = getComponent("SvgAssets")
4243
let Info = getComponent("info")
4344
let Operations = getComponent("operations", true)
4445
let Models = getComponent("Models", true)
@@ -78,6 +79,7 @@ export default class BaseLayout extends React.Component {
7879
return (
7980

8081
<div className='swagger-ui'>
82+
<SvgAssets />
8183
<div>
8284
<Errors/>
8385
<Row className="information-container">

‎src/core/components/svg-assets.jsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react"
2+
const SvgAssets = () =>
3+
<div>
4+
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" style={{
5+
position: "absolute",
6+
width: 0,
7+
height: 0
8+
}}>
9+
<defs>
10+
<symbol viewBox="0 0 20 20" id="unlocked">
11+
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
12+
</symbol>
13+
14+
<symbol viewBox="0 0 20 20" id="locked">
15+
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"/>
16+
</symbol>
17+
18+
<symbol viewBox="0 0 20 20" id="close">
19+
<path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z"/>
20+
</symbol>
21+
22+
<symbol viewBox="0 0 20 20" id="large-arrow">
23+
<path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"/>
24+
</symbol>
25+
26+
<symbol viewBox="0 0 20 20" id="large-arrow-down">
27+
<path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"/>
28+
</symbol>
29+
30+
31+
<symbol viewBox="0 0 24 24" id="jump-to">
32+
<path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z"/>
33+
</symbol>
34+
35+
<symbol viewBox="0 0 24 24" id="expand">
36+
<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
37+
</symbol>
38+
39+
</defs>
40+
</svg>
41+
</div>
42+
43+
export default SvgAssets

‎src/core/presets/base.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ import Property from "core/components/property"
6767
import TryItOutButton from "core/components/try-it-out-button"
6868
import VersionStamp from "core/components/version-stamp"
6969
import DeepLink from "core/components/deep-link"
70+
import SvgAssets from "core/components/svg-assets"
7071

7172
import Markdown from "core/components/providers/markdown"
7273

@@ -130,7 +131,8 @@ export default function() {
130131
OperationContainer,
131132
DeepLink,
132133
InfoUrl,
133-
InfoBasePath
134+
InfoBasePath,
135+
SvgAssets
134136
}
135137
}
136138

0 commit comments

Comments
 (0)