Skip to content

Commit e00eb74

Browse files
marle3003marle3003
committed
update kafka page
improve dashboard spacing
1 parent 79ba452 commit e00eb74

2 files changed

Lines changed: 133 additions & 64 deletions

File tree

‎webui/src/assets/dashboard.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,9 @@
8383
margin: 0 0 0.3rem;
8484
}
8585
.dashboard {
86-
width: 90%;
87-
margin: 0 auto auto;
86+
padding: 0 2rem;
87+
max-width: 1800px;
88+
margin: 0 auto;
8889
}
8990
.header-demo {
9091
position: fixed;

‎webui/src/views/Kafka.vue‎

Lines changed: 130 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,14 @@ useMeta(title, description, "https://mokapi.io/kafka")
2020
<a href="/ldap"><span class="badge bg-secondary" aria-label="Go to LDAP API page">LDAP</span></a>
2121
<a href="/mail"><span class="badge bg-secondary" aria-label="Go to Email API page">Email</span></a>
2222
</div>
23-
<p class="lead description">Simulate Kafka topics and produce or consume messages without setting up a real Kafka cluster.
24-
<strong>Free, open-source, and fully under your control.</strong>
23+
<p class="lead description">
24+
Simulate Kafka topics and messages without running a Kafka cluster.
25+
<span class="fst-italic d-block mt-1">
26+
Validate events, test workflows, and debug message flows consistently
27+
across local development and CI pipelines.
28+
</span>
2529
</p>
30+
2631
<p class="d-none d-md-block">
2732
<router-link :to="{ path: '/docs/guides/kafka' }">
2833
<button type="button" class="btn btn-outline-primary">Get Started</button>
@@ -51,107 +56,170 @@ useMeta(title, description, "https://mokapi.io/kafka")
5156

5257
<section class="py-5 text-center">
5358
<div class="container">
54-
<h2>Why Mock Kafka Topics?</h2>
55-
<p class="lead mb-0">
56-
Modern applications rely on Kafka for event-driven architectures. With Mokapi, you can simulate Kafka topics and messages, enabling development and testing without the need for a live Kafka cluster.
59+
<h2>Testing Kafka Is Hard</h2>
60+
61+
<p class="lead">
62+
Kafka-based systems are difficult to test reliably.
63+
</p>
64+
65+
<p>
66+
Real Kafka clusters are heavy, slow to spin up, and hard to control in tests.
67+
Mokapi removes this complexity by simulating Kafka behavior without brokers,
68+
Zookeeper, or infrastructure setup.
5769
</p>
5870
</div>
5971
</section>
6072

6173
<section class="py-5">
6274
<div class="container text-center">
63-
<h2>How Mokapi Helps You with Kafka</h2>
75+
<h2>How Mokapi Works with Kafka</h2>
76+
77+
<div class="row g-4 mt-4">
78+
<div class="col-md-4">
79+
<h3 class="h5">1. Define Topics</h3>
80+
<p>Describe topics and message schemas using AsyncAPI.</p>
81+
</div>
82+
83+
<div class="col-md-4">
84+
<h3 class="h5">2. Run Mokapi</h3>
85+
<p>Start Mokapi locally or in CI to simulate Kafka producers and consumers.</p>
86+
</div>
87+
88+
<div class="col-md-4">
89+
<h3 class="h5">3. Test & Observe</h3>
90+
<p>Validate messages and inspect traffic in real time.</p>
91+
</div>
92+
</div>
93+
</div>
94+
</section>
95+
96+
<section class="py-5">
97+
<div class="container text-center">
98+
<h2>Core Kafka Mocking Capabilities</h2>
99+
64100
<div class="row g-4 mt-4">
65-
66101
<div class="col-md-4">
67102
<span class="bi bi-kanban display-5 mb-3 d-block icon"></span>
68-
<h3 class="h5">AsyncAPI Support</h3>
69-
<p class="text-muted">Define Kafka topics and message structures with AsyncAPI, and validate messages in real-time.</p>
103+
<h3 class="h5">AsyncAPI-Based Topics</h3>
104+
<p>
105+
Define Kafka topics and payloads declaratively using AsyncAPI,
106+
ensuring your mocks stay aligned with production contracts.
107+
</p>
70108
</div>
71109

72110
<div class="col-md-4">
73111
<span class="bi bi-shield-check display-5 mb-3 d-block icon"></span>
74-
<h3 class="h5">Schema Validation</h3>
75-
<p class="text-muted">Ensure message consistency by validating against JSON Schema and Avro formats.</p>
112+
<h3 class="h5">Message Validation</h3>
113+
<p>
114+
Catch invalid messages early by validating payloads against JSON Schema
115+
or Avro before they reach real consumers.
116+
</p>
76117
</div>
77118

78119
<div class="col-md-4">
79120
<span class="bi bi-git display-5 mb-3 d-block icon"></span>
80-
<h3 class="h5">CI/CD Ready</h3>
81-
<p class="text-muted">Integrate Kafka mocks into your pipelines to test event-driven services reliably and accelerate your development workflow.</p>
121+
<h3 class="h5">CI-Friendly Testing</h3>
122+
<p>
123+
Replace fragile Kafka test setups with fast, deterministic simulations
124+
in your CI/CD pipelines.
125+
</p>
82126
</div>
83-
84127
</div>
85128
</div>
86129
</section>
87130

131+
88132
<section class="py-5">
89133
<div class="container">
90-
<h2>Use Cases</h2>
91-
<div class="row row-cols-1 row-cols-md-3 g-4">
92-
<div class="col">
93-
<div class="card h-100 shadow-sm border-0">
134+
<h2>Common Kafka Testing Scenarios</h2>
135+
136+
<div class="row row-cols-1 row-cols-md-3 g-4">
137+
<div class="col">
138+
<div class="card h-100 shadow-sm border-0">
94139
<div class="card-body">
95-
<h3 class="card-title align-middle">
96-
<span class="bi bi-diagram-3 me-2 icon"></span>
97-
Test Microservices
98-
</h3>
99-
<p class="card-text pb-4">Simulate Kafka events to test how microservices respond to different messages and scenarios.</p>
100-
<a href="docs/guides/kafka" class="card-link position-absolute" style="bottom: 15px;">Learn More</a>
140+
<h3 class="h5">Test Microservices</h3>
141+
<p>
142+
Simulate incoming Kafka events to verify how services react to
143+
different message types and edge cases.
144+
</p>
145+
<a href="/docs/guides/kafka"
146+
class="btn btn-outline-primary btn-sm align-self-start"
147+
style="bottom: 15px;">
148+
Learn More
149+
</a>
101150
</div>
151+
</div>
102152
</div>
103-
</div>
104-
<div class="col">
105-
<div class="card h-100 shadow-sm border-0">
153+
154+
<div class="col">
155+
<div class="card h-100 shadow-sm border-0">
106156
<div class="card-body">
107-
<h3 class="card-title align-middle">
108-
<span class="bi bi-check2-circle me-2 icon"></span>
109-
Validate Producer Messages
110-
</h3>
111-
<p class="card-text pb-4">Ensure that producer applications generate valid messages before they reach a real Kafka cluster.</p>
112-
<a href="/docs/resources/tutorials/get-started-with-kafka" class="card-link position-absolute" style="bottom: 15px;">Start Validating</a>
157+
<h3 class="h5">Validate Producers</h3>
158+
<p>
159+
Ensure producer applications emit valid messages before they reach
160+
downstream consumers.
161+
</p>
162+
<a href="/docs/resources/tutorials/get-started-with-kafka"
163+
class="btn btn-outline-primary btn-sm align-self-start"
164+
style="bottom: 15px;">
165+
Start Validating
166+
</a>
113167
</div>
168+
</div>
114169
</div>
115-
</div>
116-
<div class="col">
117-
<div class="card h-100 shadow-sm border-0">
170+
171+
<div class="col">
172+
<div class="card h-100 shadow-sm border-0">
118173
<div class="card-body">
119-
<h3 class="card-title align-middle">
120-
<span class="bi bi-gear-wide-connected me-2 icon"></span>
121-
Simulate Complex Workflows
122-
</h3>
123-
<p class="card-text pb-4">Mock complex Kafka message flows to test end-to-end interactions between services.</p>
124-
<a href="/docs/resources/tutorials/running-mokapi-in-a-ci-cd-pipeline" class="card-link position-absolute" style="bottom: 15px;">Explore Workflows</a>
174+
<h3 class="h5">Simulate Workflows</h3>
175+
<p>
176+
Mock complex message flows across multiple topics to test
177+
end-to-end event-driven systems.
178+
</p>
179+
<a href="/docs/resources/tutorials/running-mokapi-in-a-ci-cd-pipeline"
180+
class="btn btn-outline-primary btn-sm align-self-start"
181+
style="bottom: 15px;">
182+
Run Mokapi in CI/CD
183+
</a>
125184
</div>
185+
</div>
126186
</div>
127187
</div>
128188
</div>
129-
</div>
130189
</section>
131190

191+
132192
<section class="py-5">
133-
<div class="container">
134-
<div class="row">
135-
<div class="col-12">
136-
<h2>Visualize Kafka Messages</h2>
137-
<p class="lead mb-0 text-center mb-4">Gain insights into your Kafka traffic and consumer groups with the interactive dashboard.</p>
138-
139-
<a href="#kafkadialog" data-bs-toggle="modal" data-bs-target="#kafkadialog">
140-
<img src="/kafka-dashboard.png" style="width:100%" alt="Analyze and inspect topics, topics data, consumer groups and more..." />
141-
</a>
142-
</div>
143-
</div>
193+
<div class="container text-center">
194+
<h2>Inspect Kafka Traffic in Real Time</h2>
195+
<p class="lead">
196+
Visualize topics, messages, and consumer activity using Mokapi’s dashboard.
197+
</p>
198+
199+
<img
200+
src="/kafka-dashboard.png"
201+
alt="Mokapi dashboard showing Kafka topics, messages, and consumer groups"
202+
class="img-fluid shadow rounded"
203+
/>
144204
</div>
145205
</section>
146-
<div class="modal fade" id="kafkadialog" tabindex="-1" aria-hidden="true">
147-
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
148-
<div class="modal-content">
149-
<div class="modal-body">
150-
<img src="/kafka-dashboard.png" style="width:100%" alt="Analyze and inspect topics, topics data, consumer groups and more..." />
151-
</div>
152-
</div>
206+
207+
<section class="py-5 text-center">
208+
<div class="container">
209+
<h2>Test Kafka Without Running Kafka</h2>
210+
<p class="lead">
211+
Mock topics, validate events, and test distributed systems faster.
212+
</p>
213+
214+
<router-link :to="{ path: '/docs/resources/tutorials/get-started-with-kafka' }">
215+
<button class="btn btn-primary btn-lg">
216+
Get Started with Kafka Mocking
217+
</button>
218+
</router-link>
153219
</div>
154-
</div>
220+
</section>
221+
222+
155223
</main>
156224
<Footer></Footer>
157225
</template>

0 commit comments

Comments
 (0)