Get some Swagger files like from the tmforum ProductOrder specification.
Create index.html at root level:
<html>
<head>
<script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
<script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-standalone-preset.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist@3/swagger-ui.css" />
<title>TMF622_ProductOrder</title>
</head>
<body>
<div id="swagger-ui"></div>
<script defer>
window.onload = function () {
const ui = SwaggerUIBundle({
urls: [
{
name: "TMF622-ProductOrder-v4.0.0",
url: "TMF622-ProductOrder-v4.0.0.swagger.json",
},
{
name: "Product_Ordering_Management.regular",
url: "Product_Ordering_Management.regular.swagger.json",
},
],
dom_id: "#swagger-ui",
deepLinking: true,
presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
plugins: [SwaggerUIBundle.plugins.DownloadUrl],
layout: "StandaloneLayout",
});
window.ui = ui;
};
</script>
<style>
.swagger-ui .topbar .download-url-wrapper input[type="text"] {
border: 2px solid #77889a;
}
.swagger-ui .topbar .download-url-wrapper .download-url-button {
background: #77889a;
}
.swagger-ui img {
display: none;
}
.swagger-ui .topbar {
background-color: #ededed;
border-bottom: 2px solid #c1c1c1;
}
.swagger-ui .topbar .download-url-wrapper .select-label {
color: #3b4151;
}
</style>
</body>
</html>
Enable Github Pages:
That's all! 😀🎉
Top comments (0)