Skip to content

Commit ad83fa2

Browse files
robin-drexlerrobin-drexler
committed
fix routes + fresh coat of paint
1 parent e19a9ac commit ad83fa2

File tree

4 files changed

+229
-74
lines changed

4 files changed

+229
-74
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
node_modules/
1+
node_modules/
2+
.vercel
3+
.env*.local

‎index.html‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>httsleep – Delayed HTTP Responses for Testing</title>
7+
<meta
8+
name="description"
9+
content="A simple service to delay HTTP responses. Perfect for testing timeouts, loading states, and async behavior in your applications."
10+
/>
11+
12+
<style>
13+
*,
14+
*::before,
15+
*::after {
16+
box-sizing: border-box;
17+
}
18+
19+
body {
20+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
21+
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
22+
"Segoe UI Symbol";
23+
margin: 0;
24+
min-height: 100vh;
25+
background: linear-gradient(to right, #701a75, #000000);
26+
color: #f0f0f0;
27+
line-height: 1.6;
28+
}
29+
30+
.wrapper {
31+
margin: 0 auto;
32+
max-width: 800px;
33+
padding: 2rem 1.5rem 4rem;
34+
}
35+
36+
header {
37+
text-align: center;
38+
margin-bottom: 3rem;
39+
}
40+
41+
h1 {
42+
font-size: 3.5rem;
43+
margin: 0 0 0.5rem;
44+
letter-spacing: -0.02em;
45+
}
46+
47+
.tagline {
48+
font-size: 1.25rem;
49+
color: rgba(255, 255, 255, 0.8);
50+
margin: 0 0 1.5rem;
51+
font-weight: 400;
52+
}
53+
54+
.subtitle {
55+
font-size: 1rem;
56+
color: rgba(255, 255, 255, 0.75);
57+
max-width: 500px;
58+
margin: 0 auto;
59+
}
60+
61+
.cards {
62+
display: grid;
63+
gap: 1.5rem;
64+
}
65+
66+
.card {
67+
background: rgba(255, 255, 255, 0.08);
68+
backdrop-filter: blur(10px);
69+
border: 1px solid rgba(255, 255, 255, 0.1);
70+
border-radius: 16px;
71+
padding: 1.5rem;
72+
transition: transform 0.2s ease, box-shadow 0.2s ease;
73+
}
74+
75+
.card:hover {
76+
transform: translateY(-2px);
77+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
78+
}
79+
80+
.card h3 {
81+
margin: 0 0 0.5rem;
82+
font-size: 1.25rem;
83+
display: flex;
84+
align-items: center;
85+
gap: 0.5rem;
86+
}
87+
88+
.card p {
89+
margin: 0 0 1rem;
90+
color: rgba(255, 255, 255, 0.8);
91+
font-size: 0.95rem;
92+
}
93+
94+
.example-link {
95+
display: inline-flex;
96+
align-items: center;
97+
gap: 0.5rem;
98+
font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Monaco,
99+
Consolas, monospace;
100+
font-size: 0.9rem;
101+
color: #e9d5ff;
102+
background: rgba(233, 213, 255, 0.1);
103+
padding: 0.75rem 1rem;
104+
border-radius: 8px;
105+
text-decoration: none;
106+
border: 1px solid rgba(233, 213, 255, 0.25);
107+
transition: all 0.2s ease;
108+
word-break: break-all;
109+
}
110+
111+
.example-link:hover {
112+
background: rgba(233, 213, 255, 0.2);
113+
border-color: rgba(233, 213, 255, 0.5);
114+
color: #ffffff;
115+
}
116+
117+
.example-link::before {
118+
content: "→";
119+
opacity: 0.6;
120+
}
121+
122+
.pattern {
123+
display: block;
124+
font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Monaco,
125+
Consolas, monospace;
126+
font-size: 0.85rem;
127+
color: rgba(255, 255, 255, 0.7);
128+
margin-bottom: 0.75rem;
129+
}
130+
131+
.features {
132+
display: flex;
133+
justify-content: center;
134+
gap: 2rem;
135+
margin-top: 1.5rem;
136+
flex-wrap: wrap;
137+
}
138+
139+
.feature {
140+
display: flex;
141+
align-items: center;
142+
gap: 0.5rem;
143+
font-size: 0.85rem;
144+
color: rgba(255, 255, 255, 0.75);
145+
}
146+
147+
.feature-icon {
148+
font-size: 1rem;
149+
}
150+
</style>
151+
</head>
152+
<body>
153+
<div class="wrapper">
154+
<header>
155+
<h1>😴 httsleep</h1>
156+
<p class="tagline">Delayed HTTP responses for testing</p>
157+
<p class="subtitle">
158+
Test how your application handles slow network requests, timeouts, and
159+
loading states.
160+
</p>
161+
<div class="features">
162+
<span class="feature">
163+
<span class="feature-icon">⚡</span> All HTTP methods
164+
</span>
165+
<span class="feature">
166+
<span class="feature-icon">🔄</span> Proxy & redirect support
167+
</span>
168+
<span class="feature">
169+
<span class="feature-icon">🌐</span> CORS enabled
170+
</span>
171+
</div>
172+
</header>
173+
174+
<main class="cards">
175+
<article class="card">
176+
<h3>⏱️ Simple Delay</h3>
177+
<p>
178+
Returns a 200 OK response after waiting the specified number of
179+
seconds. Great for testing loading spinners and timeout handling.
180+
</p>
181+
<code class="pattern">/:seconds</code>
182+
<a class="example-link" href="/3">/3</a>
183+
</article>
184+
185+
<article class="card">
186+
<h3>🔀 Delayed Proxy</h3>
187+
<p>
188+
Fetches a URL and returns its response after the delay. Useful for
189+
simulating slow API responses with real data.
190+
</p>
191+
<code class="pattern">/:seconds?proxyUrl=:url</code>
192+
<a class="example-link" href="/3?proxyUrl=https://httpbin.org/json">
193+
/3?proxyUrl=https://httpbin.org/json
194+
</a>
195+
</article>
196+
197+
<article class="card">
198+
<h3>↪️ Delayed Redirect</h3>
199+
<p>
200+
Redirects to the specified URL after waiting. Perfect for testing
201+
redirect handling with network latency.
202+
</p>
203+
<code class="pattern">/:seconds?redirectUrl=:url</code>
204+
<a
205+
class="example-link"
206+
href="/3?redirectUrl=https://httpbin.org/headers"
207+
>
208+
/3?redirectUrl=https://httpbin.org/headers
209+
</a>
210+
</article>
211+
</main>
212+
</div>
213+
</body>
214+
</html>

‎index.js‎

Lines changed: 6 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import express from "express";
2+
import { fileURLToPath } from "url";
3+
import { dirname, join } from "path";
24
import delayMiddleware from "./delayMiddleware.js";
35
import proxyMiddleware from "./proxyMiddleware.js";
46
import redirectMiddleware from "./redirectMiddleware.js";
57

8+
const __filename = fileURLToPath(import.meta.url);
9+
const __dirname = dirname(__filename);
10+
611
const app = express();
712
let server;
813

@@ -28,79 +33,7 @@ app.all(
2833
);
2934

3035
app.get("/", (req, res) => {
31-
const html = `
32-
<html>
33-
<head>
34-
<meta charset="utf-8" />
35-
<meta name="viewport" content="width=device-width, initial-scale=1">
36-
37-
<style>
38-
body {
39-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
40-
box-sizing: border-box;
41-
background: linear-gradient(312deg, rgba(153,218,255,1) 0%, rgba(0,128,128,1) 100%);
42-
color: white;
43-
}
44-
.wrapper {
45-
margin: 0 auto;
46-
max-width: 960px;
47-
padding: 1rem;
48-
}
49-
.example {
50-
font-family: monospace;
51-
font-size: 1.5rem;
52-
color: white;
53-
}
54-
section {
55-
border-bottom: 1px solid rgba(255,255,255, .2);
56-
margin-top: 1rem;
57-
padding-bottom: 1rem;
58-
}
59-
section:first-child {
60-
margin-top: 2rem;
61-
}
62-
</style>
63-
</head>
64-
<body>
65-
<div class="wrapper">
66-
<header>
67-
<h1>😴 httsleep 😴</h1>
68-
<h2>
69-
Delay HTTP requests to test how your app behaves when requests take longer than expected.
70-
</h2>
71-
</header>
72-
<main>
73-
<section>
74-
<h3>Proxy</h3>
75-
<div>
76-
<a class="example" href="/3/?proxyUrl=https://httpbin.org/headers">
77-
/:seconds/?proxyUrl=:proxyUrl
78-
</a>
79-
</div>
80-
</section>
81-
<section>
82-
<h3>Redirect</h3>
83-
<div>
84-
<a class="example" href="/3/?redirectUrl=https://httpbin.org/headers">
85-
/:seconds/?redirectUrl=:redirectUrl
86-
</a>
87-
</div>
88-
</section>
89-
<section>
90-
<h3>Delaying a 200 response</h3>
91-
<div>
92-
<a class="example" href="/3">
93-
/:seconds
94-
</a>
95-
</div>
96-
</section>
97-
</main>
98-
</div>
99-
100-
</body>
101-
</html>
102-
`;
103-
res.send(html);
36+
res.sendFile(join(__dirname, "index.html"));
10437
});
10538

10639
export const start = (cb) => {

‎vercel.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,11 @@
77
"src": "index.js",
88
"use": "@vercel/node"
99
}
10+
],
11+
"routes": [
12+
{
13+
"src": "/(.*)",
14+
"dest": "index.js"
15+
}
1016
]
1117
}

0 commit comments

Comments
 (0)