@sauce-api/visualizer-ui
Version:
A Swagger UI esque visualizer for Sauce API
39 lines (35 loc) • 7.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.visualizerUI = exports.setupVisualizerUI = void 0;
const express_1 = require("express");
const path_1 = require("path");
function setupVisualizerUI(app) {
const basePath = (0, path_1.join)(__dirname, "../ui");
app.use("/visualizer-ui-static", (0, express_1.static)(basePath));
}
exports.setupVisualizerUI = setupVisualizerUI;
function visualizerUI(config) {
const { appName, browserIconUrl } = config;
const configString = JSON.stringify(config);
return `
<html>
<head>
${browserIconUrl ?
"<link rel=\"icon\" href=\"" + browserIconUrl + "\" />" :
"<link rel=\"icon\" href=\"data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8' standalone='no'?%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg width='100%25' height='100%25' viewBox='0 0 1500 1500' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cg transform='matrix(3.00401,0,0,3.00401,0.5,0.5)'%3e%3cg transform='matrix(1.063,0,0,1.13173,-213.211,-97.8227)'%3e%3cellipse cx='435.287' cy='306.897' rx='234.713' ry='220.46' style='fill:rgb(26,24,27);'/%3e%3c/g%3e%3cg id='moon' transform='matrix(11.0287,0,0,11.13,-53.2894,-56.0757)'%3e%3cg transform='matrix(0.0960682,0,0,0.101008,-12.7082,-9.31562)'%3e%3cellipse cx='418.539' cy='364.481' rx='187.035' ry='176.268' style='fill:rgb(226,226,226);'/%3e%3c/g%3e%3cg transform='matrix(1.02933,0,0,0.760833,22.3299,13.3644)'%3e%3cpath d='M21.694,11.624L22.031,13.378L8.702,13.378C7.93,13.378 7.303,12.53 7.303,11.485C7.303,10.475 7.888,9.649 8.702,9.592L21.139,9.592L21.694,11.624Z' style='fill:rgb(189,186,186);'/%3e%3c/g%3e%3cg transform='matrix(0.283655,0,0,0.853623,31.5679,13.9846)'%3e%3cpath d='M27.818,10.17C27.818,9.851 26.816,9.592 25.581,9.592L9.539,9.592C8.305,9.592 7.303,9.851 7.303,10.17C15.621,11.218 13.981,12.061 7.303,12.801C7.303,13.12 8.305,13.378 9.539,13.378L25.581,13.378C26.816,13.378 27.818,13.12 27.818,12.801C21.437,11.876 20.586,10.993 27.818,10.17Z' style='fill:rgb(189,186,186);'/%3e%3c/g%3e%3cg transform='matrix(1.31121,0,0,0.760833,14.3607,17.1989)'%3e%3cpath d='M23.653,11.148L23.719,13.378L8.401,13.378C7.795,13.378 7.303,12.53 7.303,11.485C7.303,10.475 7.763,9.649 8.401,9.592L23.514,9.592L23.653,11.148Z' style='fill:rgb(189,186,186);'/%3e%3c/g%3e%3cg transform='matrix(-0.785023,0,0,0.486268,29.7277,32.0548)'%3e%3cpath d='M22.387,9.592L8.475,9.592C7.828,9.592 7.303,10.441 7.303,11.485C7.303,12.41 7.714,13.18 8.475,13.378L20.749,13.378L21.815,11.099L22.387,9.592Z' style='fill:rgb(189,186,186);'/%3e%3c/g%3e%3cg transform='matrix(-0.262885,0,0,0.321011,23.6781,35.2137)'%3e%3cpath d='M27.818,10.17C27.818,9.851 27.502,9.592 27.113,9.592L8.008,9.592C7.618,9.592 7.303,9.851 7.303,10.17C9.4,10.977 10.38,11.822 7.303,12.801C7.303,13.12 7.618,13.378 8.008,13.378L27.113,13.378C27.502,13.378 27.818,13.12 27.818,12.801C25.421,11.764 26.184,10.938 27.818,10.17Z' style='fill:rgb(189,186,186);'/%3e%3c/g%3e%3cg transform='matrix(-1,0,0,0.486268,36.2592,34.6196)'%3e%3cpath d='M22.199,9.592L8.223,9.592C7.715,9.592 7.303,10.441 7.303,11.485C7.303,12.41 7.626,13.18 8.223,13.378L20.31,13.378L21.462,11.244L22.199,9.592Z' style='fill:rgb(189,186,186);'/%3e%3c/g%3e%3cg transform='matrix(1.05177,0,0,1.24184,24.4342,8.43137)'%3e%3cellipse cx='7.917' cy='19.694' rx='0.951' ry='0.805' style='fill:rgb(189,186,186);'/%3e%3c/g%3e%3cg transform='matrix(2.30045,0,0,2.69353,14.5424,-37.7624)'%3e%3cellipse cx='7.917' cy='19.694' rx='0.951' ry='0.805' style='fill:rgb(189,186,186);'/%3e%3c/g%3e%3cg transform='matrix(3.89871,0,0,4.32036,-12.9816,-66.7027)'%3e%3cellipse cx='7.917' cy='19.694' rx='0.951' ry='0.805' style='fill:rgb(189,186,186);'/%3e%3c/g%3e%3cg transform='matrix(3.89871,0,0,4.32036,7.50991,-45.1795)'%3e%3cpath d='M7.447,20.379C7.156,20.249 6.967,19.99 6.967,19.694C6.967,19.25 7.393,18.889 7.917,18.889C8.294,18.889 8.621,19.075 8.765,19.345C8.406,19.761 7.96,20.113 7.447,20.379Z' style='fill:rgb(189,186,186);'/%3e%3c/g%3e%3cg transform='matrix(0.971485,0.501181,-0.307317,0.584904,18.2373,0.494594)'%3e%3cpath d='M15.913,56.392C11.166,54.921 6.851,49.984 4.441,42.365C0.26,29.148 3.385,12.83 11.416,5.948C12.864,4.708 14.373,3.858 15.913,3.385L15.913,56.392Z' style='fill-opacity:0.53;'/%3e%3c/g%3e%3c/g%3e%3cg id='user-astronaut.svg' transform='matrix(0.558036,0,0,0.558036,125,158.451)'%3e%3cpath d='M64,224L77.5,224C102.2,280.5 158.4,320 224,320C289.6,320 345.8,280.5 370.5,224L384,224C392.8,224 400,216.8 400,208L400,112C400,103.2 392.8,96 384,96L370.5,96C345.8,39.5 289.6,0 224,0C158.4,0 102.2,39.5 77.5,96L64,96C55.2,96 48,103.2 48,112L48,208C48,216.8 55.2,224 64,224ZM104,136C104,113.9 125.5,96 152,96L296,96C322.5,96 344,113.9 344,136L344,160C344,213 301,256 248,256L200,256C147,256 104,213 104,160L104,136ZM176,208L188,172L224,160L188,148L176,112L164,148L128,160L164,172L176,208ZM327.6,321.4C297.7,340.7 262.2,352 224,352C185.8,352 150.3,340.7 120.4,321.4C52.9,328.5 0,385 0,454.4L0,464C0,490.5 21.5,512 48,512L128,512L128,448C128,430.3 142.3,416 160,416L288,416C305.7,416 320,430.3 320,448L320,512L400,512C426.5,512 448,490.5 448,464L448,454.4C448,385 395.1,328.5 327.6,321.4ZM272,448C263.2,448 256,455.2 256,464C256,472.8 263.2,480 272,480C280.8,480 288,472.8 288,464C288,455.2 280.8,448 272,448ZM176,448C167.2,448 160,455.2 160,464L160,512L192,512L192,464C192,455.2 184.8,448 176,448Z' style='fill:rgb(26,24,27);fill-rule:nonzero;'/%3e%3cclipPath id='_clip1'%3e%3cpath d='M64,224L77.5,224C102.2,280.5 158.4,320 224,320C289.6,320 345.8,280.5 370.5,224L384,224C392.8,224 400,216.8 400,208L400,112C400,103.2 392.8,96 384,96L370.5,96C345.8,39.5 289.6,0 224,0C158.4,0 102.2,39.5 77.5,96L64,96C55.2,96 48,103.2 48,112L48,208C48,216.8 55.2,224 64,224ZM104,136C104,113.9 125.5,96 152,96L296,96C322.5,96 344,113.9 344,136L344,160C344,213 301,256 248,256L200,256C147,256 104,213 104,160L104,136ZM176,208L188,172L224,160L188,148L176,112L164,148L128,160L164,172L176,208ZM327.6,321.4C297.7,340.7 262.2,352 224,352C185.8,352 150.3,340.7 120.4,321.4C52.9,328.5 0,385 0,454.4L0,464C0,490.5 21.5,512 48,512L128,512L128,448C128,430.3 142.3,416 160,416L288,416C305.7,416 320,430.3 320,448L320,512L400,512C426.5,512 448,490.5 448,464L448,454.4C448,385 395.1,328.5 327.6,321.4ZM272,448C263.2,448 256,455.2 256,464C256,472.8 263.2,480 272,480C280.8,480 288,472.8 288,464C288,455.2 280.8,448 272,448ZM176,448C167.2,448 160,455.2 160,464L160,512L192,512L192,464C192,455.2 184.8,448 176,448Z' clip-rule='nonzero'/%3e%3c/clipPath%3e%3cg clip-path='url(%23_clip1)'%3e%3cg transform='matrix(1.97942,0,0,1.792,-259.825,-291.112)'%3e%3crect x='195.929' y='224.951' width='48.952' height='53.571' style='fill:rgb(11,160,195);'/%3e%3c/g%3e%3cg transform='matrix(1.24335,0,0,1.792,-96.6945,19.4642)'%3e%3crect x='195.929' y='224.951' width='48.952' height='53.571' style='fill:rgb(7,160,195);'/%3e%3c/g%3e%3cg transform='matrix(1.24335,0,0,1.792,-2.03883,19.4642)'%3e%3crect x='195.929' y='224.951' width='48.952' height='53.571' style='fill:rgb(255,25,26);'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e\" type=\"image/svg+xml\" />"}
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<title>${appName || "Visualizer UI"}</title>
<script type="text/javascript">
window.visualizerConfig = ${configString}
</script>
<script defer="defer" src="/visualizer-ui-static/static/js/main.min.js"></script>
<link href="/visualizer-ui-static/static/css/main.min.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
</body>
</html>`;
}
exports.visualizerUI = visualizerUI;
;