swadhinbiswas docs: complete documentation overhaul and changelog update · 1/21/2026
bba9bff
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
<defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
</style>
<!-- Gradients -->
<linearGradient id="grad-app" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#0f172a;stop-opacity:1" />
<stop offset="100%" style="stop-color:#334155;stop-opacity:1" />
</linearGradient>
<linearGradient id="grad-db" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" />
<stop offset="100%" style="stop-color:#d97706;stop-opacity:1" />
</linearGradient>
<linearGradient id="grad-git" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ef4444;stop-opacity:1" />
<stop offset="100%" style="stop-color:#b91c1c;stop-opacity:1" />
</linearGradient>
<linearGradient id="grad-user" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1d4ed8;stop-opacity:1" />
</linearGradient>
<filter id="shadow">
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000" flood-opacity="0.2"/>
</filter>
</defs>
<!-- Title -->
<text x="400" y="40" font-family="Inter, sans-serif" font-size="24" font-weight="700" text-anchor="middle" fill="#1e293b">System Architecture</text>
<!-- Central Hub: OpenCodeHub Server -->
<g transform="translate(250, 150)">
<rect x="0" y="0" width="300" height="200" rx="16" fill="url(#grad-app)" filter="url(#shadow)"/>
<text x="150" y="40" font-family="Inter, sans-serif" font-size="20" font-weight="700" text-anchor="middle" fill="white">OpenCodeHub</text>
<!-- Internal Components -->
<g transform="translate(30, 70)">
<!-- Next.js -->
<rect x="0" y="0" width="100" height="40" rx="6" fill="#1e293b" stroke="#475569" stroke-width="1"/>
<text x="50" y="25" font-family="Inter, sans-serif" font-size="14" text-anchor="middle" fill="#e2e8f0">Next.js App</text>
</g>
<g transform="translate(170, 70)">
<!-- Git Service -->
<rect x="0" y="0" width="100" height="40" rx="6" fill="#1e293b" stroke="#475569" stroke-width="1"/>
<text x="50" y="25" font-family="Inter, sans-serif" font-size="14" text-anchor="middle" fill="#e2e8f0">Git Service</text>
</g>
<g transform="translate(100, 130)">
<!-- API -->
<rect x="0" y="0" width="100" height="40" rx="6" fill="#1e293b" stroke="#475569" stroke-width="1"/>
<text x="50" y="25" font-family="Inter, sans-serif" font-size="14" text-anchor="middle" fill="#e2e8f0">tRPC API</text>
</g>
</g>
<!-- Database Node (Bottom) -->
<g transform="translate(350, 400)">
<path d="M0,20 Q50,-10 100,20 L100,80 Q50,110 0,80 Z" fill="url(#grad-db)" filter="url(#shadow)"/>
<path d="M0,20 Q50,50 100,20" fill="none" stroke="#b45309" stroke-width="2" opacity="0.5"/>
<text x="50" y="60" font-family="Inter, sans-serif" font-size="16" font-weight="600" text-anchor="middle" fill="white">Database</text>
</g>
<!-- Users (Left) -->
<g transform="translate(50, 200)">
<circle cx="50" cy="50" r="40" fill="url(#grad-user)" filter="url(#shadow)"/>
<text x="50" y="110" font-family="Inter, sans-serif" font-size="16" font-weight="600" text-anchor="middle" fill="#0f172a">Developers</text>
<text x="50" y="130" font-family="Inter, sans-serif" font-size="12" text-anchor="middle" fill="#64748b">CLI & Web</text>
</g>
<!-- Repositories (Right) -->
<g transform="translate(650, 200)">
<rect x="0" y="10" width="80" height="90" rx="4" fill="url(#grad-git)" filter="url(#shadow)"/>
<path d="M10,10 L70,10 L70,30 L10,30 Z" fill="#fff" opacity="0.2"/>
<text x="40" y="60" font-family="Inter, sans-serif" font-size="16" font-weight="600" text-anchor="middle" fill="white">Repos</text>
<text x="40" y="120" font-family="Inter, sans-serif" font-size="12" text-anchor="middle" fill="#64748b">Raw Git Data</text>
</g>
<!-- Connections -->
<!-- User to App -->
<path d="M150 250 L240 250" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4"/>
<!-- App to DB -->
<path d="M400 350 L400 390" stroke="#94a3b8" stroke-width="2"/>
<!-- App to Repos -->
<path d="M550 250 L640 250" stroke="#94a3b8" stroke-width="2"/>
</svg>