Skip to content

Commit b4f7f85

Browse files
jonathanperisjonathanperis
committed
feat(docs): overhaul site design
1 parent 6a82e13 commit b4f7f85

7 files changed

Lines changed: 904 additions & 1309 deletions

File tree

‎docs/src/components/home/Dashboard.astro‎

Lines changed: 92 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,28 @@ import path from 'node:path';
55
interface Stat {
66
value: string;
77
label: string;
8+
note: string;
89
}
910
10-
const stats: Stat[] = [
11-
{ value: '47k+', label: 'Target Requests' },
12-
{ value: '< 1.5', label: 'CPU Cores Used' },
13-
{ value: '< 550', label: 'MB Memory Allocated' }
11+
const proofStats: Stat[] = [
12+
{ value: '46k+', label: 'requests / second', note: 'k6 stress run evidence' },
13+
{ value: '<50ms', label: 'p95 latency', note: 'under concurrent load' },
14+
{ value: '99.9%', label: 'success rate', note: 'archived CI reports' }
1415
];
1516
16-
const stressTestMetrics = [
17-
{ value: '46k+', label: 'Requests/Second' },
18-
{ value: '<50ms', label: 'P95 Latency' },
19-
{ value: '99.9%', label: 'Success Rate' }
17+
const constraints = [
18+
['API_INSTANCES', '2'],
19+
['LOAD_BALANCER', 'nginx x1'],
20+
['DATABASE', 'postgres x1'],
21+
['CPU_TOTAL', '<= 1.5 cores'],
22+
['MEMORY_TOTAL', '<= 550 MB']
23+
];
24+
25+
const architectureNodes = [
26+
{ name: 'k6/load', meta: 'stress profile' },
27+
{ name: 'nginx', meta: 'least_conn' },
28+
{ name: 'api-1 / api-2', meta: '.NET 9 AOT' },
29+
{ name: 'postgres', meta: 'stored procedures' }
2030
];
2131
2232
const reportsDir = path.join(process.cwd(), 'public/reports');
@@ -35,67 +45,97 @@ function parseReportMeta(filename: string) {
3545
};
3646
}
3747
38-
const recentReports = allReports.slice(0, 8).map(file => ({
48+
const recentReports = allReports.slice(0, 6).map(file => ({
3949
file,
4050
...parseReportMeta(file),
4151
}));
4252
---
4353

44-
<section class="constraints">
45-
<h2>System Constraints // Parameters</h2>
46-
<ul class="constraint-list">
47-
<li>2 API Instances</li>
48-
<li>1 Nginx Load Balancer</li>
49-
<li>1 Postgres Database</li>
50-
<li>Max 1.5 CPU Total</li>
51-
<li>Max 550MB RAM Total</li>
52-
</ul>
53-
</section>
54-
55-
<div class="stats-grid">
56-
{stats.map(stat => (
57-
<div class="stat-card">
58-
<div class="stat-value">{stat.value}</div>
59-
<div class="stat-label">{stat.label}</div>
60-
</div>
61-
))}
62-
</div>
54+
<section class="systems-section" aria-labelledby="system-title">
55+
<div class="section-heading">
56+
<p class="eyebrow">runtime budget</p>
57+
<h2 id="system-title">System constraints as deployed parameters</h2>
58+
<p>
59+
The challenge is not raw hardware. It is throughput while two API instances,
60+
one load balancer, and one database share a tiny resource envelope.
61+
</p>
62+
</div>
6363

64-
<section class="stress-tests">
65-
<h3>⚡ Stress Test Results</h3>
66-
<p class="stress-intro">
67-
Validated under extreme load conditions using k6. The system maintains stable performance
68-
even when processing thousands of concurrent banking transactions.
69-
</p>
64+
<div class="system-grid">
65+
<article class="config-panel" aria-labelledby="constraints-title">
66+
<div class="panel-topline">
67+
<h3 id="constraints-title">constraints.config</h3>
68+
<span>locked</span>
69+
</div>
70+
<dl class="config-list">
71+
{constraints.map(([key, value]) => (
72+
<div>
73+
<dt>{key}</dt>
74+
<dd>{value}</dd>
75+
</div>
76+
))}
77+
</dl>
78+
</article>
7079

71-
<div class="stress-metrics">
72-
{stressTestMetrics.map(metric => (
73-
<div class="stress-metric">
74-
<span class="metric-value">{metric.value}</span>
75-
<span class="metric-label">{metric.label}</span>
80+
<article class="architecture-panel" aria-labelledby="architecture-title">
81+
<div class="panel-topline">
82+
<h3 id="architecture-title">request path</h3>
83+
<span>topology</span>
7684
</div>
85+
<ol class="architecture-rail">
86+
{architectureNodes.map((node) => (
87+
<li>
88+
<strong>{node.name}</strong>
89+
<span>{node.meta}</span>
90+
</li>
91+
))}
92+
</ol>
93+
</article>
94+
</div>
95+
</section>
96+
97+
<section class="proof-section" aria-labelledby="proof-title">
98+
<div class="section-heading compact">
99+
<p class="eyebrow">benchmark proof</p>
100+
<h2 id="proof-title">Stress results, not decorative numbers</h2>
101+
</div>
102+
103+
<div class="proof-grid">
104+
{proofStats.map(stat => (
105+
<article class="proof-card">
106+
<strong>{stat.value}</strong>
107+
<span>{stat.label}</span>
108+
<p>{stat.note}</p>
109+
</article>
77110
))}
78111
</div>
79112

80-
<div class="stress-links">
81-
<a href="https://github.com/jonathanperis/rinha2-back-end-dotnet/actions/workflows/main-release.yml" class="stress-link" target="_blank" rel="noopener noreferrer">
82-
<span>📊</span> View CI/CD Stress Tests
113+
<div class="proof-actions" aria-label="Evidence links">
114+
<a href="https://github.com/jonathanperis/rinha2-back-end-dotnet/actions/workflows/main-release.yml" class="evidence-link" target="_blank" rel="noopener noreferrer">
115+
<span aria-hidden="true">▣</span> CI/CD stress tests
83116
</a>
84-
<a href="./docs/" class="stress-link">
85-
<span>📖</span> Documentation
117+
<a href="./docs/performance/" class="evidence-link">
118+
<span aria-hidden="true">↳</span> Performance notes
119+
</a>
120+
<a href="./reports/" class="evidence-link">
121+
<span aria-hidden="true">≣</span> Report archive
86122
</a>
87123
</div>
88124

89-
<div class="reports-section">
90-
<h4>📈 Historical Reports</h4>
91-
<div class="reports-grid">
125+
<article class="reports-log" aria-labelledby="reports-title">
126+
<div class="panel-topline">
127+
<h3 id="reports-title">latest archived runs</h3>
128+
<a href="./reports/">View all {allReports.length}</a>
129+
</div>
130+
<div class="log-list">
92131
{recentReports.map(report => (
93-
<a href={`./reports/${report.file}`} class="report-link">
94-
<span class="report-date">{report.date}</span>
95-
<span class="report-time">{report.time}</span>
132+
<a href={`./reports/${report.file}`} class="log-row">
133+
<span class="log-status">PASS</span>
134+
<time>{report.date} {report.time}</time>
135+
<span>k6 report</span>
136+
<span aria-hidden="true">→</span>
96137
</a>
97138
))}
98139
</div>
99-
<p class="reports-note">{allReports.length} stress test runs archived • <a href="./reports/">View all reports →</a></p>
100-
</div>
140+
</article>
101141
</section>

‎docs/src/components/home/Hero.astro‎

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,51 @@
11
---
22
---
33

4-
<section class="hero">
5-
<h1>Runs on Every OS.<br><span>Even Windows.</span></h1>
6-
<p class="tagline">
7-
.NET 9 Implementation of Rinha de Backend 2024/Q1. High-throughput fictional bank API under extreme resource constraints.
8-
</p>
4+
<section class="hero" aria-labelledby="hero-title">
5+
<div class="hero-status" aria-label="Project status">
6+
<span class="status-dot"></span>
7+
<span>BUILD: VALIDATED</span>
8+
<span>RUNTIME: .NET 9 Native AOT</span>
9+
</div>
10+
11+
<div class="hero-copy">
12+
<p class="eyebrow">Rinha de Backend 2024/Q1 // constrained systems entry</p>
13+
<h1 id="hero-title">Runs on Every OS.<br><span>Even Windows.</span></h1>
14+
<p class="tagline">
15+
A high-throughput fictional bank API built with ASP.NET Minimal APIs,
16+
PostgreSQL stored procedures, and Npgsql multiplexing under a 1.5 CPU / 550MB budget.
17+
</p>
18+
</div>
19+
20+
<div class="benchmark-strip" aria-label="Benchmark summary">
21+
<div class="benchmark-item">
22+
<strong>46k+</strong>
23+
<span>requests/second</span>
24+
</div>
25+
<div class="benchmark-item">
26+
<strong>&lt;50ms</strong>
27+
<span>p95 latency</span>
28+
</div>
29+
<div class="benchmark-item">
30+
<strong>99.9%</strong>
31+
<span>success rate</span>
32+
</div>
33+
<div class="benchmark-item">
34+
<strong>1.5 / 550</strong>
35+
<span>CPU cores / MB RAM</span>
36+
</div>
37+
</div>
938

10-
<div class="badges">
39+
<div class="badges" aria-label="Technology stack">
1140
<span class="badge">.NET 9</span>
1241
<span class="badge">C# 12</span>
42+
<span class="badge">Native AOT</span>
1343
<span class="badge">Nginx</span>
1444
<span class="badge">PostgreSQL</span>
1545
</div>
1646

1747
<div class="ctas">
18-
<a href="./docs/" class="btn btn-primary">View Documentation &rarr;</a>
19-
<a href="https://github.com/jonathanperis/rinha2-back-end-dotnet" class="btn btn-outline">View on GitHub &rarr;</a>
48+
<a href="./docs/" class="btn btn-primary">View Documentation <span aria-hidden="true">→</span></a>
49+
<a href="https://github.com/jonathanperis/rinha2-back-end-dotnet" class="btn btn-outline">View on GitHub <span aria-hidden="true">→</span></a>
2050
</div>
2151
</section>

‎docs/src/layouts/BaseLayout.astro‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@ const jsonLd = {
3636
<html lang="en">
3737
<head>
3838
<meta charset="utf-8" />
39-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
39+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
4040
<link rel="preconnect" href="https://fonts.googleapis.com" />
4141
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
42-
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
42+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
4343
<meta name="description" content={description} />
4444
<meta name="keywords" content=".NET 9, C#, ASP.NET, Native AOT, Npgsql, PostgreSQL, banking API, Rinha de Backend, performance, load testing" />
4545
<link rel="canonical" href={pageUrl} />
@@ -77,6 +77,7 @@ const jsonLd = {
7777

7878
<div class="glow"></div>
7979

80+
<a class="skip-link" href="#mainContent">Skip to main content</a>
8081
<slot />
8182
</body>
8283
</html>

0 commit comments

Comments
 (0)