Skip to content

Commit 5c26751

Browse files
Copilotgarrytrinder
Copilot
and
garrytrinder
committed
Prioritise homepage content to align with top 10 Dev Proxy developer scenarios
Co-authored-by: garrytrinder <11563347+garrytrinder@users.noreply.github.com>
1 parent 728fd67 commit 5c26751

1 file changed

Lines changed: 52 additions & 57 deletions

File tree

‎src/pages/index.astro‎

Lines changed: 52 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,31 @@ import Layout from '../layouts/Layout.astro';
7878
<section class="py-16 px-6 sm:px-8">
7979
<div class="max-w-6xl mx-auto space-y-32 min-w-0">
8080

81-
<!-- Use case 1: API Errors -->
81+
<!-- Use case 1: Mock APIs -->
8282
<div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
8383
<div>
84+
<p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">API Mocking</p>
85+
<h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">Mock APIs that don't exist yet.</h3>
86+
<p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
87+
Stand up a fully-functional CRUD API without writing a single line of server code. Design, prototype, and build your frontend in parallel with your backend.
88+
</p>
89+
<a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-crud-api" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
90+
Learn more &rarr;
91+
</a>
92+
</div>
93+
<div class="rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
94+
<p style="color: var(--text-faint);">// No backend? No problem.</p>
95+
<p class="mt-2"><span class="text-green-400">GET</span> <span style="color: var(--text-secondary);">/products</span> <span style="color: var(--text-faint);">→ list</span></p>
96+
<p><span class="text-blue-400">POST</span> <span style="color: var(--text-secondary);">/products</span> <span style="color: var(--text-faint);">→ create</span></p>
97+
<p><span class="text-yellow-400">PUT</span> <span style="color: var(--text-secondary);">/products/:id</span> <span style="color: var(--text-faint);">→ update</span></p>
98+
<p><span class="text-red-400">DEL</span> <span style="color: var(--text-secondary);">/products/:id</span> <span style="color: var(--text-faint);">→ delete</span></p>
99+
<p class="mt-4 text-purple-400">// Zero lines of server code.</p>
100+
</div>
101+
</div>
102+
103+
<!-- Use case 2: Error Handling / Resilience -->
104+
<div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
105+
<div class="md:order-2">
84106
<p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">Resilience Testing</p>
85107
<h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">See how your app handles API errors.</h3>
86108
<p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
@@ -90,7 +112,7 @@ import Layout from '../layouts/Layout.astro';
90112
Learn more &rarr;
91113
</a>
92114
</div>
93-
<div class="rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
115+
<div class="md:order-1 rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
94116
<p style="color: var(--text-faint);">// Your app makes a normal API call</p>
95117
<p class="truncate" style="color: var(--text-secondary);">fetch(<span class="text-green-400">'https://api.contoso.com/orders'</span>)</p>
96118
<p class="mt-4 text-purple-400">// Dev Proxy intercepts and returns</p>
@@ -101,7 +123,30 @@ import Layout from '../layouts/Layout.astro';
101123
</div>
102124
</div>
103125

104-
<!-- Use case 2: Rate Limiting -->
126+
<!-- Use case 3: AI/LLM Testing -->
127+
<div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
128+
<div>
129+
<p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">AI / LLM Testing</p>
130+
<h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">Build &amp; test AI apps without burning tokens.</h3>
131+
<p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
132+
Simulate responses from OpenAI, Azure OpenAI, and other language model APIs. Test error handling, content filtering, and rate limits without real API costs.
133+
</p>
134+
<a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-errors-from-language-model-apis" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
135+
Learn more &rarr;
136+
</a>
137+
</div>
138+
<div class="rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
139+
<p style="color: var(--text-faint);">// Your app calls an LLM API</p>
140+
<p class="truncate" style="color: var(--text-secondary);">POST <span class="text-green-400">/openai/deployments/chat/completions</span></p>
141+
<p class="mt-4 text-purple-400">// Dev Proxy simulates failures</p>
142+
<p><span class="text-red-400">429</span> <span style="color: var(--text-faint);">Rate limit exceeded</span></p>
143+
<p><span class="text-yellow-400">400</span> <span style="color: var(--text-faint);">Content filter triggered</span></p>
144+
<p><span class="text-red-400">500</span> <span style="color: var(--text-faint);">Model unavailable</span></p>
145+
<p class="mt-4 text-purple-400">// Save costs. Ship with confidence.</p>
146+
</div>
147+
</div>
148+
149+
<!-- Use case 4: Rate Limiting -->
105150
<div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
106151
<div class="md:order-2">
107152
<p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">Rate Limit Simulation</p>
@@ -141,56 +186,6 @@ import Layout from '../layouts/Layout.astro';
141186
</div>
142187
</div>
143188

144-
<!-- Use case 3: Mock APIs -->
145-
<div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
146-
<div>
147-
<p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">API Mocking</p>
148-
<h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">Mock APIs that don't exist yet.</h3>
149-
<p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
150-
Stand up a fully-functional CRUD API without writing a single line of server code. Design, prototype, and build your frontend in parallel with your backend.
151-
</p>
152-
<a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-crud-api" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
153-
Learn more &rarr;
154-
</a>
155-
</div>
156-
<div class="rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
157-
<p style="color: var(--text-faint);">// No backend? No problem.</p>
158-
<p class="mt-2"><span class="text-green-400">GET</span> <span style="color: var(--text-secondary);">/products</span> <span style="color: var(--text-faint);">→ list</span></p>
159-
<p><span class="text-blue-400">POST</span> <span style="color: var(--text-secondary);">/products</span> <span style="color: var(--text-faint);">→ create</span></p>
160-
<p><span class="text-yellow-400">PUT</span> <span style="color: var(--text-secondary);">/products/:id</span> <span style="color: var(--text-faint);">→ update</span></p>
161-
<p><span class="text-red-400">DEL</span> <span style="color: var(--text-secondary);">/products/:id</span> <span style="color: var(--text-faint);">→ delete</span></p>
162-
<p class="mt-4 text-purple-400">// Zero lines of server code.</p>
163-
</div>
164-
</div>
165-
166-
<!-- Use case 4: Slow APIs -->
167-
<div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
168-
<div class="md:order-2">
169-
<p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">Latency Simulation</p>
170-
<h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">Test what happens when APIs are slow.</h3>
171-
<p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
172-
Add realistic latency to any API response. Make sure your loading states, timeouts, and cancellation logic work as expected.
173-
</p>
174-
<a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-slow-api-responses" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
175-
Learn more &rarr;
176-
</a>
177-
</div>
178-
<div class="md:order-1 rounded-2xl border p-6 md:p-8 flex flex-col items-center justify-center" style="background: var(--bg-secondary); border-color: var(--border-primary); min-height: 200px;">
179-
<div class="flex items-end gap-1 mb-4" aria-hidden="true">
180-
<div class="w-2 rounded-full bg-green-400" style="height: 20px;"></div>
181-
<div class="w-2 rounded-full bg-green-400" style="height: 30px;"></div>
182-
<div class="w-2 rounded-full bg-yellow-400" style="height: 50px;"></div>
183-
<div class="w-2 rounded-full bg-yellow-400" style="height: 70px;"></div>
184-
<div class="w-2 rounded-full bg-red-400" style="height: 100px;"></div>
185-
<div class="w-2 rounded-full bg-red-400" style="height: 90px;"></div>
186-
<div class="w-2 rounded-full bg-yellow-400" style="height: 60px;"></div>
187-
<div class="w-2 rounded-full bg-green-400" style="height: 35px;"></div>
188-
</div>
189-
<p class="text-4xl font-bold font-mono text-purple-400">3,200<span class="text-lg" style="color: var(--text-faint);">ms</span></p>
190-
<p class="text-sm mt-1" style="color: var(--text-faint);">simulated response time</p>
191-
</div>
192-
</div>
193-
194189
<!-- Use case 5: CI/CD -->
195190
<div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
196191
<div>
@@ -254,12 +249,12 @@ import Layout from '../layouts/Layout.astro';
254249
</div>
255250
<div class="section-reveal grid md:grid-cols-2 lg:grid-cols-3 gap-6">
256251
{[
257-
{ title: 'Test my app handles API errors', time: '5 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/test-my-app-with-random-errors' },
258252
{ title: 'Mock an API that doesn\'t exist yet', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-crud-api' },
259-
{ title: 'Check my Microsoft Graph permissions', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/check-minimal-api-permissions' },
260-
{ title: 'Discover what APIs my app calls', time: '5 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/discover-urls-to-watch' },
261-
{ title: 'Automate API testing in CI/CD', time: '15 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/use-dev-proxy-in-ci-cd-overview' },
253+
{ title: 'Test my app handles API errors', time: '5 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/test-my-app-with-random-errors' },
262254
{ title: 'Simulate LLM API failures', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-errors-from-language-model-apis' },
255+
{ title: 'Simulate rate limiting responses', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-rate-limit-api-responses' },
256+
{ title: 'Automate API testing in CI/CD', time: '15 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/use-dev-proxy-in-ci-cd-overview' },
257+
{ title: 'Discover what APIs my app calls', time: '5 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/discover-urls-to-watch' },
263258
].map((scenario) => (
264259
<a
265260
href={scenario.href}

0 commit comments

Comments
 (0)