Skip to content

Commit f5cd2b9

Browse files
CodeMeAPixelCodeMeAPixel
committed
add 404 page and more
1 parent 2382ea5 commit f5cd2b9

7 files changed

Lines changed: 502 additions & 4 deletions

File tree

‎src/components/ErrorBoundary.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { Link, ErrorComponent, ErrorComponentProps } from "@tanstack/react-router";
2+
import { Home, RefreshCw, AlertTriangle } from "lucide-react";
3+
import { BackgroundEffects } from "@/components/ui/BackgroundEffects";
4+
5+
export function ErrorBoundary({ error, reset }: ErrorComponentProps) {
6+
const isDev = import.meta.env.DEV;
7+
8+
return (
9+
<div className="relative min-h-screen overflow-hidden bg-[#0a0a0f]">
10+
<BackgroundEffects />
11+
12+
<div className="relative z-10 flex flex-col items-center justify-center min-h-screen px-4 py-16">
13+
<div className="max-w-3xl w-full text-center space-y-8">
14+
{/* Error Icon */}
15+
<div className="relative inline-flex">
16+
<div className="relative">
17+
<AlertTriangle
18+
size={120}
19+
className="text-red-500 animate-pulse-slow"
20+
strokeWidth={1.5}
21+
/>
22+
<div className="absolute inset-0 blur-2xl bg-red-500/30 -z-10" />
23+
</div>
24+
</div>
25+
26+
{/* Error Message */}
27+
<div className="space-y-4">
28+
<h1 className="text-4xl md:text-5xl font-bold text-white">
29+
Something Went Wrong
30+
</h1>
31+
<p className="text-gray-400 text-lg max-w-xl mx-auto">
32+
We encountered an unexpected error. Don't worry, our team has been
33+
notified. Please try refreshing the page or return home.
34+
</p>
35+
</div>
36+
37+
{/* Error Details (Dev Only) */}
38+
{isDev && error && (
39+
<div className="mt-8 p-6 rounded-xl bg-red-950/20 border border-red-900/30 backdrop-blur-sm text-left max-w-2xl mx-auto">
40+
<p className="text-red-400 font-mono text-sm mb-3 font-semibold">
41+
Development Error Details:
42+
</p>
43+
<div className="space-y-2">
44+
<p className="text-red-300 font-mono text-xs">
45+
<strong>Message:</strong> {error.message}
46+
</p>
47+
{error.stack && (
48+
<pre className="text-red-300/70 font-mono text-xs overflow-x-auto whitespace-pre-wrap wrap-break-word">
49+
{error.stack}
50+
</pre>
51+
)}
52+
</div>
53+
</div>
54+
)}
55+
56+
{/* Action Buttons */}
57+
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
58+
<button
59+
type="button"
60+
onClick={() => {
61+
reset();
62+
window.location.reload();
63+
}}
64+
className="group relative px-8 py-4 rounded-xl bg-linear-to-r from-blue-500 to-cyan-500 text-white font-semibold text-lg overflow-hidden transition-all duration-300 hover:shadow-[0_0_30px_rgba(59,130,246,0.4)] hover:scale-105 w-full sm:w-auto"
65+
>
66+
<div className="relative z-10 flex items-center justify-center gap-2">
67+
<RefreshCw size={20} />
68+
<span>Try Again</span>
69+
</div>
70+
<div className="absolute inset-0 bg-linear-to-r from-blue-600 to-cyan-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
71+
</button>
72+
73+
<Link
74+
to="/"
75+
className="group relative px-8 py-4 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 text-white font-semibold text-lg overflow-hidden transition-all duration-300 hover:bg-white/10 hover:border-white/20 w-full sm:w-auto"
76+
>
77+
<div className="relative z-10 flex items-center justify-center gap-2">
78+
<Home size={20} />
79+
<span>Back to Home</span>
80+
</div>
81+
</Link>
82+
</div>
83+
84+
{/* Help Text */}
85+
<div className="pt-8 space-y-2">
86+
<p className="text-gray-500 text-sm">
87+
If this issue persists, please contact us at{" "}
88+
<a
89+
href="mailto:hey@codemeapixel.dev"
90+
className="text-blue-400 hover:text-blue-300 transition-colors underline"
91+
>
92+
hey@codemeapixel.dev
93+
</a>
94+
</p>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
);
100+
}

‎src/components/GlobalError.tsx‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
import { AlertTriangle, Home, RefreshCw } from "lucide-react";
2+
3+
export function GlobalError() {
4+
return (
5+
<html lang="en" className="dark">
6+
<head>
7+
<meta charSet="utf-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<title>Error | FixFX Links</title>
10+
<style
11+
dangerouslySetInnerHTML={{
12+
__html: `
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
box-sizing: border-box;
17+
}
18+
body {
19+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
20+
background: #0a0a0f;
21+
color: #fff;
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
min-height: 100vh;
26+
padding: 2rem;
27+
}
28+
.container {
29+
max-width: 42rem;
30+
text-align: center;
31+
position: relative;
32+
z-index: 10;
33+
}
34+
.icon-wrapper {
35+
display: inline-flex;
36+
margin-bottom: 2rem;
37+
position: relative;
38+
}
39+
.icon {
40+
width: 120px;
41+
height: 120px;
42+
color: #ef4444;
43+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
44+
}
45+
.glow {
46+
position: absolute;
47+
inset: 0;
48+
background: radial-gradient(circle, rgba(239, 68, 68, 0.3), transparent 70%);
49+
filter: blur(40px);
50+
z-index: -1;
51+
}
52+
h1 {
53+
font-size: 2.5rem;
54+
font-weight: 700;
55+
margin-bottom: 1rem;
56+
background: linear-gradient(135deg, #ef4444, #dc2626);
57+
-webkit-background-clip: text;
58+
-webkit-text-fill-color: transparent;
59+
background-clip: text;
60+
}
61+
p {
62+
color: #9ca3af;
63+
font-size: 1.125rem;
64+
margin-bottom: 2rem;
65+
line-height: 1.6;
66+
}
67+
.button-group {
68+
display: flex;
69+
flex-direction: column;
70+
gap: 1rem;
71+
align-items: center;
72+
}
73+
.button {
74+
display: inline-flex;
75+
align-items: center;
76+
gap: 0.5rem;
77+
padding: 1rem 2rem;
78+
border-radius: 0.75rem;
79+
font-weight: 600;
80+
font-size: 1.125rem;
81+
cursor: pointer;
82+
transition: all 0.3s;
83+
text-decoration: none;
84+
border: none;
85+
width: 100%;
86+
max-width: 300px;
87+
justify-content: center;
88+
}
89+
.button-primary {
90+
background: linear-gradient(135deg, #3b82f6, #06b6d4);
91+
color: white;
92+
}
93+
.button-primary:hover {
94+
transform: scale(1.05);
95+
box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
96+
}
97+
.button-secondary {
98+
background: rgba(255, 255, 255, 0.05);
99+
backdrop-filter: blur(10px);
100+
border: 1px solid rgba(255, 255, 255, 0.1);
101+
color: white;
102+
}
103+
.button-secondary:hover {
104+
background: rgba(255, 255, 255, 0.1);
105+
border-color: rgba(255, 255, 255, 0.2);
106+
}
107+
@keyframes pulse {
108+
0%, 100% {
109+
opacity: 1;
110+
}
111+
50% {
112+
opacity: 0.5;
113+
}
114+
}
115+
@media (min-width: 640px) {
116+
.button-group {
117+
flex-direction: row;
118+
justify-content: center;
119+
}
120+
}
121+
.bg-effects {
122+
position: fixed;
123+
inset: 0;
124+
z-index: 0;
125+
overflow: hidden;
126+
}
127+
.grid {
128+
position: absolute;
129+
inset: 0;
130+
opacity: 0.03;
131+
background-image: linear-gradient(rgba(59, 130, 246, 0.3) 1px, transparent 1px),
132+
linear-gradient(90deg, rgba(59, 130, 246, 0.3) 1px, transparent 1px);
133+
background-size: 40px 40px;
134+
}
135+
.orb {
136+
position: absolute;
137+
border-radius: 50%;
138+
filter: blur(80px);
139+
opacity: 0.1;
140+
}
141+
.orb-1 {
142+
top: 10%;
143+
right: 5%;
144+
width: 300px;
145+
height: 300px;
146+
background: #3b82f6;
147+
animation: float 20s ease-in-out infinite;
148+
}
149+
.orb-2 {
150+
bottom: 15%;
151+
left: 10%;
152+
width: 400px;
153+
height: 400px;
154+
background: #9333ea;
155+
animation: float 25s ease-in-out infinite reverse;
156+
}
157+
@keyframes float {
158+
0%, 100% {
159+
transform: translateY(0px) rotate(0deg);
160+
}
161+
50% {
162+
transform: translateY(-20px) rotate(5deg);
163+
}
164+
}
165+
`,
166+
}}
167+
/>
168+
</head>
169+
<body>
170+
<div className="bg-effects">
171+
<div className="grid" />
172+
<div className="orb orb-1" />
173+
<div className="orb orb-2" />
174+
</div>
175+
176+
<div className="container">
177+
<div className="icon-wrapper">
178+
<svg
179+
className="icon"
180+
xmlns="http://www.w3.org/2000/svg"
181+
fill="none"
182+
viewBox="0 0 24 24"
183+
stroke="currentColor"
184+
strokeWidth="1.5"
185+
>
186+
<title>Error Icon</title>
187+
<path
188+
strokeLinecap="round"
189+
strokeLinejoin="round"
190+
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
191+
/>
192+
</svg>
193+
<div className="glow" />
194+
</div>
195+
196+
<h1>Critical Error</h1>
197+
<p>
198+
Something went seriously wrong. Please refresh the page or return to
199+
the home page.
200+
</p>
201+
202+
<div className="button-group">
203+
<button
204+
type="button"
205+
className="button button-primary"
206+
onClick={() => window.location.reload()}
207+
>
208+
<svg
209+
width="20"
210+
height="20"
211+
xmlns="http://www.w3.org/2000/svg"
212+
fill="none"
213+
viewBox="0 0 24 24"
214+
stroke="currentColor"
215+
strokeWidth="2"
216+
>
217+
<title>Refresh</title>
218+
<path
219+
strokeLinecap="round"
220+
strokeLinejoin="round"
221+
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
222+
/>
223+
</svg>
224+
<span>Refresh Page</span>
225+
</button>
226+
227+
<a href="/" className="button button-secondary">
228+
<svg
229+
width="20"
230+
height="20"
231+
xmlns="http://www.w3.org/2000/svg"
232+
fill="none"
233+
viewBox="0 0 24 24"
234+
stroke="currentColor"
235+
strokeWidth="2"
236+
>
237+
<title>Home</title>
238+
<path
239+
strokeLinecap="round"
240+
strokeLinejoin="round"
241+
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
242+
/>
243+
</svg>
244+
<span>Go Home</span>
245+
</a>
246+
</div>
247+
</div>
248+
</body>
249+
</html>
250+
);
251+
}

‎src/data/categories.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,14 @@ export const categories: LinkCategory[] = [
8686
icon: "BookOpen",
8787
description: "Unofficial guides and documentation for ESX, QBCore and more.",
8888
color: "bg-blue-500"
89+
},
90+
{
91+
id: "yorick",
92+
title: "Yorick Documentation",
93+
url: "https://docs.yorick.gg",
94+
icon: "BookOpen",
95+
description: "Community documentation to learn the basics of running a FiveM server",
96+
color: "bg-rose-500"
8997
}
9098
],
9199
},

0 commit comments

Comments
 (0)