Skip to content

Commit e4ab384

Browse files
cicdguycicdguy
authored
feat: Slightly updated UI (#8)
High contrast UI with updated dependencies + optimized CDN asset loading.
1 parent c1d6205 commit e4ab384

File tree

7 files changed

+155
-96
lines changed

7 files changed

+155
-96
lines changed

‎.github/workflows/lint.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ jobs:
4747
strategy:
4848
matrix:
4949
go-version:
50-
- 1.23.6
50+
- 1.24.5
5151
steps:
5252
- name: Checkout Repo 🛎
5353
uses: actions/checkout@v4

‎.github/workflows/release.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ jobs:
7676
- name: Setup Go 🐹
7777
uses: actions/setup-go@v5
7878
with:
79-
go-version: 1.23.6
79+
go-version: 1.24.5
8080
cache: true
8181
cache-dependency-path: go.sum
8282

‎.github/workflows/test.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ jobs:
2525
strategy:
2626
matrix:
2727
go-version:
28-
- 1.23.6
28+
- 1.24.5
2929
defaults:
3030
run:
3131
shell: bash
@@ -92,7 +92,7 @@ jobs:
9292
strategy:
9393
matrix:
9494
go-version:
95-
- 1.23.6
95+
- 1.24.5
9696
runs-on: ubuntu-latest
9797
steps:
9898
- name: Checkout Repo 🛎

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
`oasbinder` is a utility which allows you to interact with multiple Swagger (OAS) docs for multiple microservices which can be defined in the [configuration file](#configuration-file).
66

77
Let's assume we have the following service in the configuration file and the user accesses `oasbinder` at <https://oasbinder.example.com> (`proxyAddress`).
8+
89
```yaml
910
services:
1011
- endpoint: /hogwarts
@@ -98,7 +99,7 @@ This project is built with the [Go programming language](https://go.dev/).
9899

99100
### Development Environment
100101

101-
It is recommended to use Go 1.23+ for developing this project.
102+
It is recommended to use Go 1.24+ for developing this project.
102103
This project uses a pre-commit configuration and it is recommended to [install and use pre-commit](https://pre-commit.com/#install) when you are developing this project.
103104

104105
### Common Commands

‎cmd/template.html‎

Lines changed: 104 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,12 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>OAS Binder</title>
7-
<!-- Load the latest Swagger UI code and style -->
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.18.2/swagger-ui-bundle.min.js" integrity="sha512-9tBcCofqWq+PelL6USpUB7OJrCaObfefi9ht9nVZuKt1XP7eHDs7NwVljLSLVtSsErax1Tz3pG3O82eeq546Rg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
9-
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.18.2/swagger-ui-standalone-preset.min.js" integrity="sha512-RYT3vTu8lWSgdoB5zNck/WogIqUb/ap/ivTr6t2LeS+MwqxRQsnSHkHpJRKjnC4T2fH7OMTxxQoC3jh7KGd3HA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
10-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js" integrity="sha512-TPh2Oxlg1zp+kz3nFA0C5vVC6leG/6mm1z9+mA81MI5eaUVqasPLO8Cuk4gMF4gUfP5etR73rgU/8PNMsSesoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
11-
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
12-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.18.2/swagger-ui.min.css" integrity="sha512-xRGj65XGEcpPTE7Cn6ujJWokpXVLxqLxdtNZ/n1w52+76XaCRO7UWKZl9yJHvzpk99A0EP6EW+opPcRwPDxwkA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
7+
<!-- Load styles -->
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.26.2/swagger-ui.min.css" integrity="sha512-FCw+cnh2A20omSXcIdoLnqQrVbcPiyAPEjKlSZdj6uIR++Xx0VIduMmFZhzYm/gf7bqmZ7dzP3+WVn2Gfr5TjQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
139
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.13.1/font/bootstrap-icons.min.css" integrity="sha512-t7Few9xlddEmgd3oKZQahkNI4dS6l80+eGEzFQiqtyVYdvcSG2D3Iub77R20BdotfRPA9caaRkg1tyaJiPmO0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1411

12+
<!-- ===== CUSTOM STYLES ===== -->
1513
<style>
1614
body {
1715
display: flex;
@@ -22,14 +20,19 @@
2220
height: 100vh;
2321
max-width: 30%;
2422
flex: 0 0 400px;
23+
transition: all 0.3s ease;
24+
overflow: hidden;
25+
background-color: #000000 !important;
26+
}
27+
.sidebar-content {
28+
height: 100%;
29+
overflow-y: auto;
30+
padding: 10px;
2531
}
2632
.content {
2733
flex-grow: 1;
2834
padding: 15px;
29-
}
30-
.sidebar img {
31-
max-width: 100%;
32-
margin-bottom: 15px;
35+
transition: all 0.3s ease;
3336
}
3437
.navbar {
3538
position: fixed;
@@ -45,50 +48,111 @@
4548
font-size: 1.5rem;
4649
font-weight: bold;
4750
}
51+
.navbar-brand-container {
52+
display: flex;
53+
align-items: center;
54+
gap: 10px;
55+
padding-left: 15px;
56+
}
57+
.navbar-logo {
58+
height: 30px;
59+
width: auto;
60+
}
4861
.navbar-nav {
4962
flex-grow: 0;
63+
padding-right: 15px;
5064
}
5165
.sidebar-title {
5266
text-align: center;
5367
font-weight: bold;
54-
margin-bottom: 15px;
55-
font-size: 1.25rem;
68+
margin-bottom: 10px;
69+
font-size: 1rem;
70+
transition: all 0.3s ease;
71+
color: white;
72+
}
73+
.service-buttons {
74+
transition: all 0.3s ease;
75+
}
76+
.sidebar .btn {
77+
font-size: 0.8rem;
78+
padding: 0.375rem 0.75rem;
79+
margin-bottom: 0.5rem;
80+
width: 100%;
81+
background-color: #f8f9fa;
82+
border-color: #dee2e6;
83+
color: #495057;
84+
}
85+
.sidebar .btn:hover {
86+
background-color: #e9ecef;
87+
border-color: #adb5bd;
88+
color: #212529;
89+
}
90+
.sidebar .btn-primary {
91+
background-color: #0d6efd;
92+
border-color: #0d6efd;
93+
color: white;
94+
}
95+
.sidebar .btn-primary:hover {
96+
background-color: #0b5ed7;
97+
border-color: #0a58ca;
98+
color: white;
99+
}
100+
.sidebar .nav-item {
101+
margin-bottom: 0.25rem;
56102
}
57103
</style>
58104
</head>
105+
106+
<!-- ===== BODY ===== -->
59107
<body>
60-
<nav class="navbar navbar-expand-lg navbar-light bg-light">
61-
<a class="navbar-brand" href="#">OAS Binder</a>
108+
<!-- ===== NAVBAR ===== -->
109+
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #afddfd;">
110+
<div class="navbar-brand-container">
111+
<img src="https://cdnlogo.com/logos/o/44/openapi-wordmark.svg" alt="OpenAPI" class="navbar-logo">
112+
<a class="navbar-brand" href="#">OAS Binder</a>
113+
</div>
62114
<div class="collapse navbar-collapse" id="navbarNav">
63115
<ul class="navbar-nav ms-auto">
64116
<li class="nav-item">
65-
<button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modal1">⚙</button>
117+
<button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modal1">
118+
<i class="bi bi-gear-fill"></i>
119+
</button>
66120
</li>
67121
<li class="nav-item">
68-
<button class="btn btn-warning ms-2" data-bs-toggle="modal" data-bs-target="#modal2">❓</button>
122+
<button class="btn btn-warning ms-2" data-bs-toggle="modal" data-bs-target="#modal2">
123+
<i class="bi bi-question-circle-fill"></i>
124+
</button>
69125
</li>
70126
</ul>
71127
</div>
72128
</nav>
73-
<div class="sidebar bg-light p-3">
74-
<img src="https://cdnlogo.com/logos/o/44/openapi-wordmark.svg" alt="">
75-
<div class="sidebar-title">Select Service</div>
76-
<ul class="nav flex-column">
77-
{{range .MicroserviceList}}
78-
<li class="nav-item">
79-
<button data-target="{{.Endpoint}}" class="btn {{if .Selected}}btn-primary {{else}} btn-outline-primary{{end}} mb-2">{{.Name}}</button>
80-
</li>
81-
{{end}}
82-
</ul>
129+
130+
<!-- ===== SIDEBAR ===== -->
131+
<div class="sidebar">
132+
<div class="sidebar-content">
133+
<div class="sidebar-title">Select Service</div>
134+
<div class="service-buttons">
135+
<ul class="nav flex-column">
136+
{{range .MicroserviceList}}
137+
<li class="nav-item">
138+
<button data-target="{{.Endpoint}}" class="btn {{if .Selected}}btn-primary {{else}} btn-outline-primary{{end}} mb-2">{{.Name}}</button>
139+
</li>
140+
{{end}}
141+
</ul>
142+
</div>
143+
</div>
83144
</div>
145+
146+
<!-- ===== MAIN CONTENT ===== -->
84147
<div class="content">
85148
<div id="mainContent">
86149
<div class="sidebar-title">{{ .Message }}</div>
87150
<div id="swagger-ui"></div>
88151
</div>
89152
</div>
90153

91-
<!-- Modal structures -->
154+
<!-- ===== MODALS ===== -->
155+
<!-- Configuration Modal -->
92156
<div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="modal1Label" aria-hidden="true">
93157
<div class="modal-dialog" role="document">
94158
<div class="modal-content">
@@ -108,6 +172,7 @@ <h5 class="modal-title" id="modal1Label">OAS Binder configuration</h5>
108172
</div>
109173
</div>
110174

175+
<!-- About Modal -->
111176
<div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="modal2Label" aria-hidden="true">
112177
<div class="modal-dialog" role="document">
113178
<div class="modal-content">
@@ -131,14 +196,17 @@ <h5 class="modal-title" id="modal2Label">About OAS Binder</h5>
131196
</div>
132197
</div>
133198

199+
<!-- ===== JAVASCRIPT ===== -->
134200
<script>
201+
// Service selection functionality
135202
document.querySelectorAll('button[data-target]').forEach(button => {
136203
button.addEventListener('click', function () {
137204
const target = button.getAttribute('data-target');
138205
window.location.href = `${window.location.origin}/${target}`;
139206
});
140207
});
141208

209+
// Swagger UI initialization
142210
window.onload = function() {
143211
if ({{ .DisplaySwaggerUI }}) {
144212
const ui = SwaggerUIBundle({
@@ -155,5 +223,14 @@ <h5 class="modal-title" id="modal2Label">About OAS Binder</h5>
155223
}
156224
}
157225
</script>
226+
227+
<!-- ===== EXTERNAL SCRIPTS ===== -->
228+
<!-- Swagger UI Scripts -->
229+
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.26.2/swagger-ui-bundle.min.js" integrity="sha512-5wwTumuGSEhs2cxv8qTPioOYR5ApZvDzEi8iEJ7ENTOzQ9/qLYh9tWKkMFlrYLpEcnHK+TkqvOLJxKSDGOWrfQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
230+
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.26.2/swagger-ui-standalone-preset.min.js" integrity="sha512-yJlD9FXQ7YaxAKXhviHSt/0KqWDCkLFdCnk0Ti23HXDMEQtHLAAWMHZ+POglC1mx/MOUB//h8kci3U1JYrywpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
231+
232+
<!-- Bootstrap Dependencies -->
233+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js" integrity="sha512-TPh2Oxlg1zp+kz3nFA0C5vVC6leG/6mm1z9+mA81MI5eaUVqasPLO8Cuk4gMF4gUfP5etR73rgU/8PNMsSesoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
234+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
158235
</body>
159236
</html>

‎go.mod‎

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,53 @@
11
module github.com/insightsengineering/oasbinder
22

3-
go 1.23.0
4-
5-
toolchain go1.23.6
3+
go 1.24.5
64

75
require (
86
github.com/jamiealquiza/envy v1.1.0
97
github.com/sirupsen/logrus v1.9.3
108
github.com/spf13/cobra v1.9.1
11-
github.com/spf13/viper v1.19.0
9+
github.com/spf13/viper v1.20.1
1210
go.szostok.io/version v1.2.0
1311
gopkg.in/yaml.v3 v3.0.1
1412
)
1513

1614
require (
17-
dario.cat/mergo v1.0.1 // indirect
15+
dario.cat/mergo v1.0.2 // indirect
1816
github.com/Masterminds/goutils v1.1.1 // indirect
19-
github.com/Masterminds/semver/v3 v3.3.1 // indirect
17+
github.com/Masterminds/semver/v3 v3.4.0 // indirect
2018
github.com/Masterminds/sprig/v3 v3.3.0 // indirect
2119
github.com/araddon/dateparse v0.0.0-20210429162001-6b43995a97de // indirect
2220
github.com/aymanbagabas/go-osc52/v2 v2.0.1 // indirect
2321
github.com/dustin/go-humanize v1.0.1 // indirect
2422
github.com/fatih/color v1.18.0 // indirect
25-
github.com/fsnotify/fsnotify v1.8.0 // indirect
26-
github.com/goccy/go-yaml v1.15.23 // indirect
23+
github.com/fsnotify/fsnotify v1.9.0 // indirect
24+
github.com/go-viper/mapstructure/v2 v2.3.0 // indirect
25+
github.com/goccy/go-yaml v1.18.0 // indirect
2726
github.com/google/uuid v1.6.0 // indirect
2827
github.com/hashicorp/go-version v1.7.0 // indirect
29-
github.com/hashicorp/hcl v1.0.0 // indirect
3028
github.com/hokaccha/go-prettyjson v0.0.0-20211117102719-0474bc63780f // indirect
3129
github.com/huandu/xstrings v1.5.0 // indirect
3230
github.com/inconshreveable/mousetrap v1.1.0 // indirect
3331
github.com/lucasb-eyer/go-colorful v1.2.0 // indirect
34-
github.com/magiconair/properties v1.8.9 // indirect
3532
github.com/mattn/go-colorable v0.1.14 // indirect
3633
github.com/mattn/go-isatty v0.0.20 // indirect
3734
github.com/mattn/go-runewidth v0.0.16 // indirect
3835
github.com/mitchellh/copystructure v1.2.0 // indirect
39-
github.com/mitchellh/mapstructure v1.5.0 // indirect
4036
github.com/mitchellh/reflectwalk v1.0.2 // indirect
41-
github.com/muesli/termenv v0.15.2 // indirect
42-
github.com/pelletier/go-toml/v2 v2.2.3 // indirect
37+
github.com/muesli/termenv v0.16.0 // indirect
38+
github.com/pelletier/go-toml/v2 v2.2.4 // indirect
4339
github.com/rivo/uniseg v0.4.7 // indirect
44-
github.com/sagikazarmark/locafero v0.7.0 // indirect
45-
github.com/sagikazarmark/slog-shim v0.1.0 // indirect
40+
github.com/sagikazarmark/locafero v0.9.0 // indirect
4641
github.com/shopspring/decimal v1.4.0 // indirect
4742
github.com/sourcegraph/conc v0.3.0 // indirect
48-
github.com/spf13/afero v1.12.0 // indirect
49-
github.com/spf13/cast v1.7.1 // indirect
43+
github.com/spf13/afero v1.14.0 // indirect
44+
github.com/spf13/cast v1.9.2 // indirect
5045
github.com/spf13/pflag v1.0.6 // indirect
5146
github.com/subosito/gotenv v1.6.0 // indirect
5247
go.uber.org/multierr v1.11.0 // indirect
53-
golang.org/x/crypto v0.35.0 // indirect
54-
golang.org/x/exp v0.0.0-20250218142911-aa4b98e5adaa // indirect
55-
golang.org/x/sys v0.30.0 // indirect
56-
golang.org/x/text v0.22.0 // indirect
57-
gopkg.in/ini.v1 v1.67.0 // indirect
48+
golang.org/x/crypto v0.40.0 // indirect
49+
golang.org/x/sys v0.34.0 // indirect
50+
golang.org/x/text v0.27.0 // indirect
5851
)
5952

6053
replace github.com/imdario/mergo => github.com/imdario/mergo v0.3.16

0 commit comments

Comments
 (0)