Skip to content

Commit a4f0fe7

Browse files
pangerlkrpangerlkr
authored
Refactor Fork section to dedicated page
1 parent 4c9dd0d commit a4f0fe7

5 files changed

Lines changed: 314 additions & 180 deletions

File tree

‎public/_redirects‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* /index.html 200

‎src/App.tsx‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
import React, { useState, useEffect } from 'react';
22
import Landing from './components/Landing';
33
import ChatRoom from './components/ChatRoom';
4+
import ForkPage from './components/ForkPage';
45

56
function App() {
67
const [currentRoom, setCurrentRoom] = useState<string | null>(null);
78
const [isCreatingRoom, setIsCreatingRoom] = useState(false);
89
const [isJoiningFromLink, setIsJoiningFromLink] = useState(false);
910
const [isHost, setIsHost] = useState(false);
1011
const [hostSessionId, setHostSessionId] = useState('');
12+
const [isForkPage, setIsForkPage] = useState(window.location.pathname === '/fork');
1113

1214
useEffect(() => {
1315
const checkUrlParams = () => {
16+
if (window.location.pathname === '/fork') {
17+
setIsForkPage(true);
18+
return;
19+
}
20+
setIsForkPage(false);
1421
const urlParams = new URLSearchParams(window.location.search);
1522
const roomId = urlParams.get('room');
1623

@@ -33,6 +40,11 @@ function App() {
3340

3441
useEffect(() => {
3542
const handlePopState = () => {
43+
if (window.location.pathname === '/fork') {
44+
setIsForkPage(true);
45+
return;
46+
}
47+
setIsForkPage(false);
3648
const urlParams = new URLSearchParams(window.location.search);
3749
const roomId = urlParams.get('room');
3850

@@ -84,7 +96,17 @@ function App() {
8496
setCurrentRoom(null);
8597
setIsHost(false);
8698
setHostSessionId('');
87-
window.history.pushState({}, '', window.location.pathname);
99+
window.history.pushState({}, '', '/');
100+
};
101+
102+
const handleNavigateFork = () => {
103+
window.history.pushState({}, '', '/fork');
104+
setIsForkPage(true);
105+
};
106+
107+
const handleBackFromFork = () => {
108+
window.history.pushState({}, '', '/');
109+
setIsForkPage(false);
88110
};
89111

90112
if (isJoiningFromLink) {
@@ -116,6 +138,10 @@ function App() {
116138
);
117139
}
118140

141+
if (isForkPage) {
142+
return <ForkPage onBack={handleBackFromFork} />;
143+
}
144+
119145
if (currentRoom) {
120146
return (
121147
<ChatRoom
@@ -127,7 +153,7 @@ function App() {
127153
);
128154
}
129155

130-
return <Landing onCreateRoom={handleCreateRoom} onJoinRoom={handleJoinRoom} />;
156+
return <Landing onCreateRoom={handleCreateRoom} onJoinRoom={handleJoinRoom} onFork={handleNavigateFork} />;
131157
}
132158

133159
export default App;

‎src/components/ForkPage.tsx‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
import React, { useState } from 'react';
2+
import { ArrowLeft, GitFork, Copy, Check, Terminal, ExternalLink, Github } from 'lucide-react';
3+
import ParticleField from './landing/ParticleField';
4+
5+
interface Method {
6+
id: string;
7+
label: string;
8+
badge: string;
9+
description: string;
10+
steps: { comment: string; command: string }[];
11+
}
12+
13+
const methods: Method[] = [
14+
{
15+
id: 'dev',
16+
label: 'Local Development',
17+
badge: 'Recommended',
18+
description: 'Start a local dev server with hot reloading. Best suited for contributors, testers, and developers who want to explore the codebase.',
19+
steps: [
20+
{ comment: '# Clone the repository', command: 'git clone https://github.com/pangerlkr/SecureComm.git' },
21+
{ comment: '# Enter the project directory', command: 'cd SecureComm' },
22+
{ comment: '# Install dependencies', command: 'npm install' },
23+
{ comment: '# Start the dev server', command: 'npm run dev' },
24+
],
25+
},
26+
{
27+
id: 'prod',
28+
label: 'Production Build',
29+
badge: 'Node.js',
30+
description: 'Build and serve an optimised production bundle. Recommended for deploying SecureComm on a server or VPS.',
31+
steps: [
32+
{ comment: '# Clone the repository', command: 'git clone https://github.com/pangerlkr/SecureComm.git' },
33+
{ comment: '# Enter the project directory', command: 'cd SecureComm' },
34+
{ comment: '# Install dependencies', command: 'npm install' },
35+
{ comment: '# Build optimised assets', command: 'npm run build' },
36+
{ comment: '# Start the production server', command: 'npm start' },
37+
],
38+
},
39+
{
40+
id: 'docker',
41+
label: 'Docker',
42+
badge: 'Container',
43+
description: 'Build and run a containerised image. Isolates all dependencies for reproducible, portable deployments.',
44+
steps: [
45+
{ comment: '# Clone the repository', command: 'git clone https://github.com/pangerlkr/SecureComm.git' },
46+
{ comment: '# Enter the project directory', command: 'cd SecureComm' },
47+
{ comment: '# Build the Docker image', command: 'docker build -t securecomm .' },
48+
{ comment: '# Run the container on port 3000', command: 'docker run -p 3000:3000 securecomm' },
49+
],
50+
},
51+
{
52+
id: 'compose',
53+
label: 'Docker Compose',
54+
badge: 'Scalable',
55+
description: 'Use Docker Compose for structured and scalable deployments. Requires Docker and Docker Compose installed on the host.',
56+
steps: [
57+
{ comment: '# Clone the repository', command: 'git clone https://github.com/pangerlkr/SecureComm.git' },
58+
{ comment: '# Enter the project directory', command: 'cd SecureComm' },
59+
{ comment: '# Build and start all services', command: 'docker-compose up --build' },
60+
],
61+
},
62+
{
63+
id: 'env',
64+
label: 'Env Configuration',
65+
badge: 'Custom Setup',
66+
description: 'Configure environment variables before building. Required when pointing to a custom Supabase project or enabling optional feature flags.',
67+
steps: [
68+
{ comment: '# Clone the repository', command: 'git clone https://github.com/pangerlkr/SecureComm.git' },
69+
{ comment: '# Enter the project directory', command: 'cd SecureComm' },
70+
{ comment: '# Copy the example env file', command: 'cp .env.example .env' },
71+
{ comment: '# Edit values as needed (use any editor)', command: 'nano .env' },
72+
{ comment: '# Install dependencies and build', command: 'npm install && npm run build' },
73+
{ comment: '# Start the production server', command: 'npm start' },
74+
],
75+
},
76+
];
77+
78+
function CopyButton({ text }: { text: string }) {
79+
const [copied, setCopied] = useState(false);
80+
81+
const handleCopy = async () => {
82+
await navigator.clipboard.writeText(text);
83+
setCopied(true);
84+
setTimeout(() => setCopied(false), 2000);
85+
};
86+
87+
return (
88+
<button
89+
onClick={handleCopy}
90+
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white border border-white/10 transition-all duration-200"
91+
>
92+
{copied ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />}
93+
{copied ? 'Copied' : 'Copy all'}
94+
</button>
95+
);
96+
}
97+
98+
interface ForkPageProps {
99+
onBack: () => void;
100+
}
101+
102+
export default function ForkPage({ onBack }: ForkPageProps) {
103+
const [active, setActive] = useState('dev');
104+
const method = methods.find((m) => m.id === active)!;
105+
const allCommands = method.steps.map((s) => s.command).join('\n');
106+
107+
return (
108+
<div className="min-h-screen bg-[#030d1a] text-white overflow-x-hidden">
109+
<ParticleField />
110+
111+
<div className="absolute inset-0 pointer-events-none overflow-hidden">
112+
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] rounded-full bg-emerald-500/5 blur-[120px]" />
113+
<div className="absolute bottom-0 right-0 w-[400px] h-[400px] rounded-full bg-sky-500/4 blur-[100px]" />
114+
</div>
115+
116+
<div className="relative z-10">
117+
{/* Nav */}
118+
<nav className="flex items-center justify-between max-w-5xl mx-auto px-4 py-5">
119+
<button
120+
onClick={onBack}
121+
className="flex items-center gap-2 text-slate-400 hover:text-white text-sm font-medium transition-colors duration-200 group"
122+
>
123+
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform duration-200" />
124+
Back
125+
</button>
126+
127+
<div className="flex items-center gap-2 text-sm font-bold tracking-tight">
128+
<span className="text-white">Secure</span>
129+
<span className="bg-gradient-to-r from-sky-400 via-cyan-300 to-emerald-400 bg-clip-text text-transparent">Comm</span>
130+
</div>
131+
132+
<a
133+
href="https://github.com/pangerlkr/SecureComm"
134+
target="_blank"
135+
rel="noopener noreferrer"
136+
className="flex items-center gap-2 text-slate-400 hover:text-white text-sm transition-colors duration-200"
137+
>
138+
<Github className="w-4 h-4" />
139+
<span className="hidden sm:inline">GitHub</span>
140+
</a>
141+
</nav>
142+
143+
{/* Hero */}
144+
<header className="max-w-5xl mx-auto px-4 pt-10 pb-14 text-center">
145+
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-400/10 border border-emerald-400/20 mb-5">
146+
<GitFork className="w-3.5 h-3.5 text-emerald-400" />
147+
<span className="text-emerald-400 text-xs font-semibold tracking-widest uppercase">Open Source</span>
148+
</div>
149+
<h1 className="text-4xl lg:text-6xl font-bold text-white leading-tight mb-4">
150+
Fork &amp; self-host in
151+
<span className="text-emerald-400"> minutes</span>
152+
</h1>
153+
<p className="text-slate-400 max-w-2xl mx-auto text-base lg:text-lg leading-relaxed">
154+
SecureComm is fully open source. Clone the repo, choose a deployment method below, and run your own end-to-end encrypted chat platform.
155+
</p>
156+
<a
157+
href="https://github.com/pangerlkr/SecureComm"
158+
target="_blank"
159+
rel="noopener noreferrer"
160+
className="inline-flex items-center gap-2 mt-7 px-5 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 text-slate-300 hover:text-white text-sm font-medium transition-all duration-200"
161+
>
162+
<GitFork className="w-4 h-4" />
163+
github.com/pangerlkr/SecureComm
164+
<ExternalLink className="w-3.5 h-3.5 opacity-60" />
165+
</a>
166+
</header>
167+
168+
{/* Main content */}
169+
<main className="max-w-5xl mx-auto px-4 pb-24">
170+
{/* Method selector */}
171+
<div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-3 mb-8">
172+
{methods.map((m) => (
173+
<button
174+
key={m.id}
175+
onClick={() => setActive(m.id)}
176+
className={`text-left p-4 rounded-xl border transition-all duration-200 ${
177+
active === m.id
178+
? 'border-emerald-400/40 bg-emerald-400/8 text-white'
179+
: 'border-white/8 bg-white/[0.02] text-slate-400 hover:border-white/15 hover:text-slate-200 hover:bg-white/5'
180+
}`}
181+
>
182+
<div className={`text-xs font-semibold mb-1 ${active === m.id ? 'text-emerald-400' : 'text-slate-500'}`}>
183+
{m.badge}
184+
</div>
185+
<div className="text-sm font-medium leading-tight">{m.label}</div>
186+
</button>
187+
))}
188+
</div>
189+
190+
{/* Terminal block */}
191+
<div className="rounded-2xl border border-white/10 bg-white/[0.02] overflow-hidden">
192+
<div className="px-6 pt-6 pb-4 border-b border-white/8">
193+
<div className="flex items-start justify-between gap-4">
194+
<div>
195+
<div className="flex items-center gap-2 mb-1">
196+
<h2 className="text-white font-semibold">{method.label}</h2>
197+
<span className="text-xs px-2 py-0.5 rounded-full bg-emerald-400/10 text-emerald-400 border border-emerald-400/20">
198+
{method.badge}
199+
</span>
200+
</div>
201+
<p className="text-slate-400 text-sm leading-relaxed max-w-2xl">{method.description}</p>
202+
</div>
203+
</div>
204+
</div>
205+
206+
<div className="rounded-xl m-4 bg-[#020b14] border border-white/8 overflow-hidden">
207+
<div className="flex items-center justify-between px-4 py-2.5 border-b border-white/8 bg-white/3">
208+
<div className="flex items-center gap-3">
209+
<div className="flex gap-1.5">
210+
<div className="w-2.5 h-2.5 rounded-full bg-red-500/60" />
211+
<div className="w-2.5 h-2.5 rounded-full bg-yellow-500/60" />
212+
<div className="w-2.5 h-2.5 rounded-full bg-green-500/60" />
213+
</div>
214+
<div className="flex items-center gap-2 text-slate-500">
215+
<Terminal className="w-3.5 h-3.5" />
216+
<span className="text-xs font-medium">bash</span>
217+
</div>
218+
</div>
219+
<CopyButton text={allCommands} />
220+
</div>
221+
222+
<div className="p-6 space-y-0.5 font-mono text-sm leading-relaxed overflow-x-auto">
223+
{method.steps.map((step, i) => (
224+
<div key={i} className={i > 0 ? 'mt-4' : ''}>
225+
<div className="text-slate-600 text-xs mb-1 select-none">{step.comment}</div>
226+
<div className="flex items-start gap-2">
227+
<span className="text-emerald-500 select-none flex-shrink-0">$</span>
228+
<span className="text-slate-200">{step.command}</span>
229+
</div>
230+
</div>
231+
))}
232+
</div>
233+
</div>
234+
</div>
235+
236+
{/* Info cards */}
237+
<div className="grid sm:grid-cols-3 gap-4 mt-6">
238+
{[
239+
{ label: 'License', value: 'MIT', sub: 'Free to use and modify' },
240+
{ label: 'Stack', value: 'React + Vite', sub: 'TypeScript, Tailwind, Supabase' },
241+
{ label: 'Encryption', value: 'AES-256-GCM', sub: 'End-to-end, zero knowledge' },
242+
].map((card) => (
243+
<div key={card.label} className="rounded-xl border border-white/8 bg-white/[0.02] p-5">
244+
<div className="text-xs text-slate-500 uppercase tracking-widest mb-1">{card.label}</div>
245+
<div className="text-white font-semibold mb-0.5">{card.value}</div>
246+
<div className="text-slate-500 text-xs">{card.sub}</div>
247+
</div>
248+
))}
249+
</div>
250+
</main>
251+
252+
{/* Bottom strip */}
253+
<div className="border-t border-white/5">
254+
<div className="max-w-5xl mx-auto px-4 py-5 flex flex-col sm:flex-row items-center justify-between gap-3">
255+
<div className="flex items-center gap-2">
256+
<div className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
257+
<span className="text-slate-500 text-xs">
258+
Built &amp; maintained by{' '}
259+
<a href="https://pangerlkr.link" target="_blank" rel="noopener noreferrer" className="text-sky-400/80 hover:text-sky-400 transition-colors">
260+
Panger Lkr
261+
</a>
262+
</span>
263+
</div>
264+
<button onClick={onBack} className="text-slate-500 hover:text-slate-300 text-xs transition-colors flex items-center gap-1.5">
265+
<ArrowLeft className="w-3 h-3" />
266+
Back to SecureComm
267+
</button>
268+
</div>
269+
</div>
270+
</div>
271+
</div>
272+
);
273+
}

0 commit comments

Comments
 (0)