Skip to content

Commit 855d117

Browse files
marle3003marle3003
committed
doc: update start page
fix: scope CSS in DocsView.vue
1 parent b078347 commit 855d117

2 files changed

Lines changed: 84 additions & 72 deletions

File tree

‎webui/src/views/DocsView.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ function isLast(breadcrumb: DocEntry[], index: number) {
188188
</div>
189189
</template>
190190

191-
<style>
191+
<style scoped>
192192
main.has-sidebar {
193193
display: grid;
194194
grid-template-columns: 290px auto;

‎webui/src/views/Home.vue‎

Lines changed: 83 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -117,11 +117,28 @@ function showImage(evt: MouseEvent) {
117117
</div>
118118
</section>
119119

120+
<section class="py-5 quick-start-section">
121+
<div class="container">
122+
<div class="row justify-content-center">
123+
<div class="col-12 col-lg-10">
124+
<div class="text-center">
125+
<h2 class="mb-3">Try Mokapi in a Second</h2>
126+
<div class="d-flex justify-content-center flex-wrap">
127+
<pre class="quick-start-code"><code>npx mokapi https://petstore31.swagger.io/api/v31/openapi.json</code></pre>
128+
</div>
129+
<p class="text-muted mb-0 quick-start-desc">
130+
Instantly mock Swagger's Petstore API and start testing
131+
</p>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
</section>
137+
120138
<section class="py-5">
121139
<div class="container">
122140
<div class="row align-items-center">
123141

124-
<!-- Image column -->
125142
<div class="col-12 col-lg-6 d-flex justify-content-center">
126143
<img
127144
src="/mokapi-using-as-proxy.png"
@@ -130,7 +147,6 @@ function showImage(evt: MouseEvent) {
130147
/>
131148
</div>
132149

133-
<!-- Text column -->
134150
<div class="col-12 col-lg-6 text-center text-lg-start mb-4 mb-lg-0">
135151
<h2 class="mb-3">Mock and Simulate APIs Across Protocols</h2>
136152
<p class="lead">
@@ -150,7 +166,7 @@ function showImage(evt: MouseEvent) {
150166

151167
<h2 class="mb-3">Why Teams Use Mokapi</h2>
152168
<p class="lead fst-italic mb-4 text">
153-
Mokapi helps teams move faster by removing external dependencies from development and testing.
169+
Stop waiting for backends. Stop fighting flaky external APIs. Start shipping with confidence.
154170
</p>
155171

156172
<div class="row g-4 mt-4">
@@ -159,49 +175,35 @@ function showImage(evt: MouseEvent) {
159175
<h3>Develop Without Waiting</h3>
160176
<p>
161177
Mock HTTP APIs, Kafka topics, LDAP directories, or mail servers
162-
so development never blocks on missing or unstable systems.
178+
so development never blocks on missing or unstable backends.
163179
</p>
164180
</div>
165181
<div class="col-md-4">
166182
<span class="bi bi-check2-square display-5 mb-3 d-block icon"></span>
167183
<h3>Test Real Workflows</h3>
168184
<p>
169-
Simulate realistic system behavior across protocols
170-
and validate integrations with confidence.
185+
Simulate edge cases, error conditions, and complex scenarios
186+
that are hard or impossible to trigger with live systems.
171187
</p>
172188
</div>
173189
<div class="col-md-4">
174190
<span class="bi bi-gear display-5 mb-3 d-block icon"></span>
175-
<h3>Automate Everywhere</h3>
191+
<h3>Ship With Confidence</h3>
176192
<p>
177-
Run Mokapi locally, in CI pipelines, or test environments
178-
to automate API testing and speed up feedback loops.
193+
Validate API contracts automatically in CI/CD pipelines,
194+
catching breaking changes before they reach production.
179195
</p>
180196
</div>
181197
</div>
182198
</div>
183199
</section>
184200

185-
<section class="py-5 text-center">
186-
<div class="container">
187-
<h2 class="mb-3">Build Better Software, Faster</h2>
188-
<p class="lead mb-3">
189-
Mokapi helps teams move quickly without sacrificing confidence or stability.
190-
</p>
191-
<p class="mb-0 text">
192-
By mocking and simulating APIs across protocols, you can automate tests,
193-
reduce flaky integrations, and deliver reliable software — even when
194-
external systems are unavailable or evolving.
195-
</p>
196-
</div>
197-
</section>
198-
199201
<section class="py-5 text-center">
200202
<div class="container">
201203

202204
<h2 class="mb-3">Mock More Than Just HTTP</h2>
203205
<p class="lead mb-4 text">
204-
Mokapi supports multiple protocols, allowing you to test complete systems —
206+
Mokapi supports multiple protocols, allowing you to test complete systems,
205207
not just individual REST endpoints.
206208
</p>
207209

@@ -288,22 +290,6 @@ function showImage(evt: MouseEvent) {
288290
</div>
289291
</section>
290292

291-
<section class="py-5 text-center">
292-
<div class="container">
293-
<h2 class="mb-3">Built for Reliable Development and Testing</h2>
294-
<p class="lead mb-3 text">
295-
Mocking APIs across protocols is only the beginning.
296-
Mokapi is designed to help teams prevent bugs, reduce external dependencies,
297-
and create stable development and test environments.
298-
</p>
299-
<p class="mb-0 text">
300-
This is made possible through powerful core features —
301-
including JavaScript-based logic, configuration patching,
302-
observability, and realistic data generation.
303-
</p>
304-
</div>
305-
</section>
306-
307293
<section class="py-5 text-center feature">
308294
<div class="container">
309295

@@ -326,70 +312,69 @@ function showImage(evt: MouseEvent) {
326312
without changing your API specifications.
327313
</p>
328314
<router-link :to="{ path: '/docs/javascript-api/overview' }" class="btn btn-outline-primary btn-sm mt-3 mb-3">
329-
Explore JavaScript Mocking
315+
Explore JavaScript API
330316
</router-link>
331317
</div>
332318
<div class="col-12 col-lg-6 order-lg-1 d-flex justify-content-center">
333319
<img src="/control-mock-api-everything.png" alt="JavaScript code showing how to mock an API realistically" />
334320
</div>
335321
</div>
336322

337-
<!-- Run Mocks Anywhere -->
323+
<!-- Generate Realistic Test Data -->
338324
<div class="row pb-5 align-items-center">
339325
<div class="col-12 col-lg-6 order-lg-1 text-lg-start text-center">
340-
<h3>Run Mocks Anywhere</h3>
326+
<h3>Generate Realistic Test Data</h3>
341327
<p>
342-
Run Mokapi in any environment—local development, Docker, cloud, or CI pipelines. Test APIs seamlessly, wherever your services are deployed.
328+
Create dynamic, lifelike data for your mocks. Simulate users, transactions, messages, and more to improve testing accuracy.
343329
</p>
344330
<p class="fst-italic">
345-
Ensure consistent testing across local development, CI pipelines, and cloud environments.
331+
Produce realistic data to catch bugs early and test edge cases that rarely occur in production.
346332
</p>
347-
<router-link :to="{ path: '/docs/get-started/running' }" class="btn btn-outline-primary btn-sm">
348-
Learn How to Run Mokapi
333+
<router-link :to="{ path: '/docs/get-started/test-data' }" class="btn btn-outline-primary btn-sm mt-3 mb-3">
334+
Learn about Fake Data
349335
</router-link>
350336
</div>
351337
<div class="col-12 col-lg-6 order-lg-2 d-flex justify-content-center">
352-
<img src="/run-mock-api-anywhere.png" alt="Log output starting Mokapi in a Docker image." />
338+
<img src="/mock-realistic-test-data.png" alt="Mokapi Faker decision tree for generating realistic random data." />
353339
</div>
354340
</div>
355341

356-
357-
<!-- Mocks as Code -->
342+
<!-- Run Mocks Anywhere -->
358343
<div class="row pb-5 align-items-center">
359344
<div class="col-12 col-lg-6 order-lg-2 text-lg-start text-center">
360-
<h3>Define Mocks as Code</h3>
345+
<h3>Run Mocks Anywhere</h3>
361346
<p>
362-
Manage all API mocks, configurations, and behaviors as code. Track changes, simplify audits, and ensure consistency across environments.
347+
Run Mokapi in any environment: local development, Docker, cloud, or CI pipelines. Test APIs seamlessly, wherever your services are deployed.
363348
</p>
364349
<p class="fst-italic">
365-
Version-controlled mocks reduce errors, simplify audits, and make collaboration easier.
350+
Ensure consistent testing across local development, CI pipelines, and cloud environments.
366351
</p>
367-
<router-link :to="{ path: '/docs/configuration/overview' }" class="btn btn-outline-primary btn-sm mt-3 mb-3">
368-
Learn More
352+
<router-link :to="{ path: '/docs/get-started/running' }" class="btn btn-outline-primary btn-sm">
353+
Deployment Options
369354
</router-link>
370355
</div>
371356
<div class="col-12 col-lg-6 order-lg-1 d-flex justify-content-center">
372-
<img src="/mock-api-everything-as-code.png" alt="OpenAPI spec and scripts to generate mock data." />
357+
<img src="/run-mock-api-anywhere.png" alt="Log output starting Mokapi in a Docker image." />
373358
</div>
374359
</div>
375360

376361

377-
<!-- Generate Realistic Test Data -->
362+
<!-- Mocks as Code -->
378363
<div class="row pb-5 align-items-center">
379364
<div class="col-12 col-lg-6 order-lg-1 text-lg-start text-center">
380-
<h3>Generate Realistic Test Data</h3>
365+
<h3>Define Mocks as Code</h3>
381366
<p>
382-
Create dynamic, lifelike data for your mocks. Simulate users, transactions, messages, and more to improve testing accuracy.
367+
Manage all API mocks, configurations, and behaviors as code. Track changes, simplify audits, and ensure consistency across environments.
383368
</p>
384369
<p class="fst-italic">
385-
Produce lifelike data to catch bugs early and test edge cases that rarely occur in production.
370+
Version-controlled mocks reduce errors, simplify audits, and make collaboration easier.
386371
</p>
387-
<router-link :to="{ path: '/docs/get-started/test-data' }" class="btn btn-outline-primary btn-sm mt-3 mb-3">
388-
Explore Fake Data Features
372+
<router-link :to="{ path: '/docs/configuration/overview' }" class="btn btn-outline-primary btn-sm mt-3 mb-3">
373+
Configuration Guide
389374
</router-link>
390375
</div>
391376
<div class="col-12 col-lg-6 order-lg-2 d-flex justify-content-center">
392-
<img src="/mock-realistic-test-data.png" alt="Mokapi Faker decision tree for generating realistic random data." />
377+
<img src="/mock-api-everything-as-code.png" alt="OpenAPI spec and scripts to generate mock data." />
393378
</div>
394379
</div>
395380

@@ -471,7 +456,7 @@ function showImage(evt: MouseEvent) {
471456
<h3 class="card-title">
472457
<span class="icon me-2 bi-lightning"></span>Simulate Kafka Topics with AsyncAPI
473458
</h3>
474-
<p>Test Kafka producers and consumers by mocking topics according to your AsyncAPI spec. Ensure reliable message generation and integration without a live Kafka cluster.</p>
459+
<p>Test Kafka producers and consumers by mocking topics according to your AsyncAPI spec. Ensure reliable message generation without a live Kafka cluster.</p>
475460
<a href="resources/tutorials/get-started-with-kafka" class="btn btn-outline-primary btn-sm mt-auto align-self-start">Start Tutorial</a>
476461
</div>
477462
</div>
@@ -484,7 +469,7 @@ function showImage(evt: MouseEvent) {
484469
<h3 class="card-title">
485470
<span class="icon me-2 bi-person-check"></span>Mock LDAP Authentication
486471
</h3>
487-
<p>Step-by-step guide to mock LDAP login using Mokapi and Node.js. Test authentication flows without a real server.</p>
472+
<p>Step-by-step guide to mock LDAP login using Mokapi and Node.js. Test authentication flows without a real directory server.</p>
488473
<a href="resources/tutorials/mock-ldap-authentication-in-node" class="btn btn-outline-primary btn-sm mt-auto align-self-start">Start Tutorial</a>
489474
</div>
490475
</div>
@@ -503,18 +488,28 @@ function showImage(evt: MouseEvent) {
503488
</div>
504489
</div>
505490

506-
</div>
507-
508-
<!-- Enforce API Contracts -->
509-
<div class="row justify-content-center g-4 mt-1">
491+
<!-- Enforce API Contracts -->
510492
<div class="col-md-6 col-lg-6">
511493
<div class="card h-100 shadow-sm border-0">
512494
<div class="card-body d-flex flex-column">
513495
<h3 class="card-title">
514496
<span class="icon me-2 bi-shield-check"></span>Enforce API Contracts
515497
</h3>
516-
<p>Validate HTTP requests and responses against OpenAPI specs to catch API issues early in development or testing.</p>
517-
<a href="/resources/blogs/guard-your-api-contracts" class="btn btn-outline-primary btn-sm mt-auto align-self-start">Read Blog</a>
498+
<p>Validate HTTP requests and responses against OpenAPI specs to catch breaking changes early in development or testing.</p>
499+
<a href="/resources/blogs/guard-your-api-contracts" class="btn btn-outline-primary btn-sm mt-auto align-self-start">Read Article</a>
500+
</div>
501+
</div>
502+
</div>
503+
504+
<!-- Record & Replay API Traffic -->
505+
<div class="col-md-6 col-lg-6">
506+
<div class="card h-100 shadow-sm border-0">
507+
<div class="card-body d-flex flex-column">
508+
<h3 class="card-title">
509+
<span class="icon me-2 bi-stopwatch"></span>Record & Replay API Traffic
510+
</h3>
511+
<p>Capture real API interactions and replay them in tests. Build test suites from actual production behavior.</p>
512+
<a href="/resources/blogs/record-and-replay-api-interactions" class="btn btn-outline-primary btn-sm mt-auto align-self-start">Read Article</a>
518513
</div>
519514
</div>
520515
</div>
@@ -623,6 +618,23 @@ function showImage(evt: MouseEvent) {
623618
}
624619
}
625620
621+
.quick-start-code {
622+
background: #1a1a1a;
623+
color: #00ff00;
624+
padding: 1rem 1.5rem;
625+
border-radius: 6px;
626+
margin: 0;
627+
font-family: 'JetBrains Mono', 'Courier New', monospace;
628+
font-size: 0.9rem;
629+
overflow-x: auto;
630+
max-width: 100%;
631+
}
632+
633+
.quick-start-desc {
634+
font-size: 0.9rem;
635+
margin-top: 0.75rem;
636+
}
637+
626638
ul.nav-vertical {
627639
padding: 0;
628640
margin: 0;

0 commit comments

Comments
 (0)