Skip to content

Commit a171f57

Browse files
marle3003marle3003
committed
fix(webui): fix heading hierarchy and set max-width for normal text
1 parent 014ec37 commit a171f57

File tree

6 files changed

+96
-92
lines changed

6 files changed

+96
-92
lines changed

‎webui/src/assets/home.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
}
1616
.home h3 {
1717
line-height: 1.6;
18-
font-size: 1.5rem;
18+
font-size: 1.3rem;
1919
}
2020
.home .hero-title {
2121
margin-top: 5rem;
@@ -208,4 +208,9 @@ section.feature button {
208208

209209
.home img:not(.no-dialog) {
210210
cursor: pointer;
211+
}
212+
213+
.home .text {
214+
max-width: 750px;
215+
margin-inline: auto;
211216
}

‎webui/src/views/Home.vue‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,6 @@ function showImage(evt: MouseEvent) {
103103
</div>
104104
</section>
105105

106-
<!-- How Mokapi Fits -->
107106
<section class="py-5">
108107
<div class="container">
109108
<div class="row align-items-center">
@@ -135,32 +134,32 @@ function showImage(evt: MouseEvent) {
135134
<section class="py-5">
136135
<div class="container text-center">
137136

138-
<h2 class="h4 mb-3">Why Teams Use Mokapi</h2>
139-
<p class="lead fst-italic mb-4">
137+
<h2 class="mb-3">Why Teams Use Mokapi</h2>
138+
<p class="lead fst-italic mb-4 text">
140139
Mokapi helps teams move faster by removing external dependencies from development and testing.
141140
</p>
142141

143142
<div class="row g-4 mt-4">
144143
<div class="col-md-4">
145144
<span class="bi bi-rocket-takeoff display-5 mb-3 d-block icon"></span>
146-
<h3 class="h5">Develop Without Waiting</h3>
147-
<p class="text-muted">
145+
<h3>Develop Without Waiting</h3>
146+
<p>
148147
Mock HTTP APIs, Kafka topics, LDAP directories, or mail servers
149148
so development never blocks on missing or unstable systems.
150149
</p>
151150
</div>
152151
<div class="col-md-4">
153152
<span class="bi bi-check2-square display-5 mb-3 d-block icon"></span>
154-
<h3 class="h5">Test Real Workflows</h3>
155-
<p class="text-muted">
153+
<h3>Test Real Workflows</h3>
154+
<p>
156155
Simulate realistic system behavior across protocols
157156
and validate integrations with confidence.
158157
</p>
159158
</div>
160159
<div class="col-md-4">
161160
<span class="bi bi-gear display-5 mb-3 d-block icon"></span>
162-
<h3 class="h5">Automate Everywhere</h3>
163-
<p class="text-muted">
161+
<h3>Automate Everywhere</h3>
162+
<p>
164163
Run Mokapi locally, in CI pipelines, or test environments
165164
to automate API testing and speed up feedback loops.
166165
</p>
@@ -175,31 +174,31 @@ function showImage(evt: MouseEvent) {
175174
<p class="lead mb-3">
176175
Mokapi helps teams move quickly without sacrificing confidence or stability.
177176
</p>
178-
<p class="lead mb-0">
177+
<p class="mb-0 text">
179178
By mocking and simulating APIs across protocols, you can automate tests,
180179
reduce flaky integrations, and deliver reliable software — even when
181180
external systems are unavailable or evolving.
182181
</p>
183182
</div>
184183
</section>
185184

186-
<section class="py-5">
185+
<section class="py-5 text-center">
187186
<div class="container">
188187

189-
<h2 class="text-center mb-3">Mock More Than Just HTTP</h2>
190-
<p class="lead fst-italic text-center mb-4">
188+
<h2 class="mb-3">Mock More Than Just HTTP</h2>
189+
<p class="lead mb-4 text">
191190
Mokapi supports multiple protocols, allowing you to test complete systems —
192191
not just individual REST endpoints.
193192
</p>
194193

195-
<div class="row g-4">
194+
<div class="row g-4 text-start">
196195

197196
<div class="col-sm-3">
198197
<div class="card h-100 shadow-sm border-0 accented">
199198
<div class="card-inner">
200199
<router-link :to="{path: '/http'}" class="d-flex flex-column h-100">
201200
<div class="card-body d-flex flex-column">
202-
<h5 class="card-title fw-bold mb-3">Mock REST APIs</h5>
201+
<h3 class="card-title mt-0 mb-3">Mock REST APIs</h3>
203202
<p class="card-text">
204203
Simulate REST endpoints to develop and test clients
205204
without waiting for real backend services.
@@ -219,7 +218,7 @@ function showImage(evt: MouseEvent) {
219218
<div class="card-inner">
220219
<router-link :to="{path: '/kafka'}" class="d-flex flex-column h-100">
221220
<div class="card-body d-flex flex-column">
222-
<h5 class="card-title fw-bold mb-3">Simulate Kafka Events</h5>
221+
<h3 class="card-title mt-0 mb-3">Simulate Kafka Events</h3>
223222
<p class="card-text">
224223
Mock Kafka topics and message streams to test
225224
event-driven systems and service interactions.
@@ -238,7 +237,7 @@ function showImage(evt: MouseEvent) {
238237
<div class="card-inner">
239238
<router-link :to="{path: '/ldap'}" class="d-flex flex-column h-100">
240239
<div class="card-body d-flex flex-column">
241-
<h5 class="card-title fw-bold mb-3">Mock LDAP Services</h5>
240+
<h3 class="card-title mt-0 mb-3">Mock LDAP Services</h3>
242241
<p class="card-text">
243242
Simulate directory and authentication services
244243
to test user access, roles, and permissions safely.
@@ -257,7 +256,7 @@ function showImage(evt: MouseEvent) {
257256
<div class="card-inner">
258257
<router-link :to="{path: '/mail'}" class="d-flex flex-column h-100">
259258
<div class="card-body d-flex flex-column">
260-
<h5 class="card-title fw-bold mb-3">SMTP Email Testing</h5>
259+
<h3 class="card-title mt-0 mb-3">SMTP Email Testing</h3>
261260
<p class="card-text">
262261
Test email workflows by simulating SMTP and IMAP servers
263262
without sending real messages.
@@ -278,12 +277,12 @@ function showImage(evt: MouseEvent) {
278277
<section class="py-5 text-center">
279278
<div class="container">
280279
<h2 class="mb-3">Built for Reliable Development and Testing</h2>
281-
<p class="lead mb-3">
280+
<p class="lead mb-3 text">
282281
Mocking APIs across protocols is only the beginning.
283282
Mokapi is designed to help teams prevent bugs, reduce external dependencies,
284283
and create stable development and test environments.
285284
</p>
286-
<p class="lead mb-0">
285+
<p class="mb-0 text">
287286
This is made possible through powerful core features —
288287
including JavaScript-based logic, configuration patching,
289288
observability, and realistic data generation.
@@ -295,7 +294,7 @@ function showImage(evt: MouseEvent) {
295294
<div class="container">
296295

297296
<h2 class="mb-3">Core Features</h2>
298-
<p class="lead fst-italic">
297+
<p class="lead text">
299298
Powerful capabilities that make Mokapi flexible, controllable, and reliable in any environment.
300299
</p>
301300

@@ -432,7 +431,7 @@ function showImage(evt: MouseEvent) {
432431
<section class="py-5">
433432
<div class="container">
434433
<h2 class="mb-3">Use Cases & Tutorials</h2>
435-
<p class="lead fst-italic text-center">
434+
<p class="lead text-center text">
436435
Explore practical ways to mock APIs and services across protocols. Mokapi fits seamlessly in local development, CI pipelines, or cloud environments.
437436
</p>
438437

@@ -514,7 +513,7 @@ function showImage(evt: MouseEvent) {
514513
<div class="container">
515514
<div class="row">
516515
<h2 class="mb-3">See Mokapi in Action</h2>
517-
<p class="lead fst-italic mb-4 text-center">Explore how easily you can mock APIs and generate realistic data for testing—no backend required.</p>
516+
<p class="lead mb-4 text-center text">Explore how easily you can mock APIs and generate realistic data for testing</p>
518517
</div>
519518

520519
<div class="d-flex content align-items-start align-items-stretch">

‎webui/src/views/Http.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ function getConsoleContent() {
106106
<section class="py-5 text-center">
107107
<div class="container">
108108
<h2>Why Mock HTTP and REST APIs?</h2>
109-
<p class="lead mb-0">
109+
<p class="lead mb-0 text">
110110
Modern applications depend on many external services.
111111
Mokapi lets you mock HTTP and OpenAPI-based APIs so development
112112
and testing are never blocked by missing or unstable backends.
@@ -120,18 +120,18 @@ function getConsoleContent() {
120120
<div class="row g-4 mt-4">
121121
<div class="col-md-4">
122122
<span class="bi bi-diagram-3 display-5 mb-3 d-block icon"></span>
123-
<h3 class="h5">Mock APIs with OpenAPI</h3>
123+
<h3>Mock APIs with OpenAPI</h3>
124124
<p>Instantly spin up REST API mocks from OpenAPI specifications with validation and auto-generated responses.</p>
125125
</div>
126126
<div class="col-md-4">
127127
<span class="bi bi-lightning-charge display-5 mb-3 d-block icon"></span>
128-
<h3 class="h5">Dynamic Responses with Scripts</h3>
128+
<h3>Dynamic Responses with Scripts</h3>
129129
<p>Use Mokapi Scripts to simulate logic, conditional flows, or edge cases without coding a backend.</p>
130130
</div>
131131
<div class="col-md-4">
132132
<span class="bi bi-git display-5 mb-3 d-block icon"></span>
133-
<h3 class="h5">CI/CD Ready</h3>
134-
<p>Integrate API mocks directly into your pipelines—speed up tests, reduce flakiness, and keep development moving.</p>
133+
<h3>CI/CD Ready</h3>
134+
<p>Integrate API mocks directly into your pipelines to accelerate testing, reduce instability, and drive development forward.</p>
135135
</div>
136136
</div>
137137
</div>
@@ -140,7 +140,7 @@ function getConsoleContent() {
140140
<section class="py-5">
141141
<div class="container">
142142
<h2>Explore Mokapi Features</h2>
143-
<p class="lead fst-italic text-center mb-4">
143+
<p class="lead text-center mb-4 text">
144144
Advanced capabilities that help you scale, automate, and debug HTTP API testing.
145145
</p>
146146
<div class="row row-cols-1 row-cols-md-2 g-4">
@@ -200,7 +200,7 @@ function getConsoleContent() {
200200
<div class="container text-center mb-5">
201201
<div class="row">
202202
<h2>See Mokapi in Action</h2>
203-
<p class="lead mb-4">Go beyond static mocks—customize, debug, and explore your APIs with powerful built-in tools.</p>
203+
<p class="lead mb-4 text">Go beyond static mocks—customize, debug, and explore your APIs with powerful built-in tools.</p>
204204
</div>
205205

206206
<div class="row pb-4 pb-lg-5 mb-lg-5 mt-3">
@@ -239,7 +239,7 @@ function getConsoleContent() {
239239
<div class="container">
240240
<div class="row text-center mb-4">
241241
<h2>Quick Demo</h2>
242-
<p class="lead mb-0">
242+
<p class="lead mb-0 text">
243243
Spin up a fully working HTTP mock from an OpenAPI spec with a single command.
244244
</p>
245245
</div>

‎webui/src/views/Kafka.vue‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function showImage(evt: MouseEvent) {
7777
Kafka-based systems are difficult to test reliably.
7878
</p>
7979

80-
<p>
80+
<p class="text">
8181
Real Kafka clusters are heavy, slow to spin up, and hard to control in tests.
8282
Mokapi removes this complexity by simulating Kafka behavior without brokers,
8383
Zookeeper, or infrastructure setup.
@@ -91,17 +91,17 @@ function showImage(evt: MouseEvent) {
9191

9292
<div class="row g-4 mt-4">
9393
<div class="col-md-4">
94-
<h3 class="h5">1. Define Topics</h3>
94+
<h3>1. Define Topics</h3>
9595
<p>Describe topics and message schemas using AsyncAPI.</p>
9696
</div>
9797

9898
<div class="col-md-4">
99-
<h3 class="h5">2. Run Mokapi</h3>
99+
<h3>2. Run Mokapi</h3>
100100
<p>Start Mokapi locally or in CI to simulate Kafka producers and consumers.</p>
101101
</div>
102102

103103
<div class="col-md-4">
104-
<h3 class="h5">3. Test & Observe</h3>
104+
<h3>3. Test & Observe</h3>
105105
<p>Validate messages and inspect traffic in real time.</p>
106106
</div>
107107
</div>
@@ -115,7 +115,7 @@ function showImage(evt: MouseEvent) {
115115
<div class="row g-4 mt-4">
116116
<div class="col-md-4">
117117
<span class="bi bi-kanban display-5 mb-3 d-block icon"></span>
118-
<h3 class="h5">AsyncAPI-Based Topics</h3>
118+
<h3>AsyncAPI-Based Topics</h3>
119119
<p>
120120
Define Kafka topics and payloads declaratively using AsyncAPI,
121121
ensuring your mocks stay aligned with production contracts.
@@ -124,7 +124,7 @@ function showImage(evt: MouseEvent) {
124124

125125
<div class="col-md-4">
126126
<span class="bi bi-shield-check display-5 mb-3 d-block icon"></span>
127-
<h3 class="h5">Message Validation</h3>
127+
<h3>Message Validation</h3>
128128
<p>
129129
Catch invalid messages early by validating payloads against JSON Schema
130130
or Avro before they reach real consumers.
@@ -133,7 +133,7 @@ function showImage(evt: MouseEvent) {
133133

134134
<div class="col-md-4">
135135
<span class="bi bi-git display-5 mb-3 d-block icon"></span>
136-
<h3 class="h5">CI-Friendly Testing</h3>
136+
<h3>CI-Friendly Testing</h3>
137137
<p>
138138
Replace fragile Kafka test setups with fast, deterministic simulations
139139
in your CI/CD pipelines.
@@ -152,7 +152,7 @@ function showImage(evt: MouseEvent) {
152152
<div class="col">
153153
<div class="card h-100 shadow-sm border-0">
154154
<div class="card-body">
155-
<h3 class="h5">Test Microservices</h3>
155+
<h3>Test Microservices</h3>
156156
<p>
157157
Simulate incoming Kafka events to verify how services react to
158158
different message types and edge cases.
@@ -169,7 +169,7 @@ function showImage(evt: MouseEvent) {
169169
<div class="col">
170170
<div class="card h-100 shadow-sm border-0">
171171
<div class="card-body">
172-
<h3 class="h5">Validate Producers</h3>
172+
<h3>Validate Producers</h3>
173173
<p>
174174
Ensure producer applications emit valid messages before they reach
175175
downstream consumers.
@@ -186,7 +186,7 @@ function showImage(evt: MouseEvent) {
186186
<div class="col">
187187
<div class="card h-100 shadow-sm border-0">
188188
<div class="card-body">
189-
<h3 class="h5">Simulate Workflows</h3>
189+
<h3>Simulate Workflows</h3>
190190
<p>
191191
Mock complex message flows across multiple topics to test
192192
end-to-end event-driven systems.
@@ -207,7 +207,7 @@ function showImage(evt: MouseEvent) {
207207
<section class="py-5">
208208
<div class="container text-center">
209209
<h2>Inspect Kafka Traffic in Real Time</h2>
210-
<p class="lead">
210+
<p class="lead text">
211211
Visualize topics, messages, and consumer activity using Mokapi’s dashboard.
212212
</p>
213213

@@ -222,7 +222,7 @@ function showImage(evt: MouseEvent) {
222222
<section class="py-5 text-center">
223223
<div class="container">
224224
<h2>Test Kafka Without Running Kafka</h2>
225-
<p class="lead">
225+
<p class="lead text">
226226
Mock topics, validate events, and test distributed systems faster.
227227
</p>
228228

0 commit comments

Comments
 (0)