@kirkelliott/zap 0.1.16 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/demo/astros.zap +26 -0
- package/demo/index.zap +56 -23
- package/demo/iss.zap +26 -0
- package/demo/lib/page.zap +30 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -261,4 +261,4 @@ Deploy `live.zap` once. Then POST JavaScript directly — no S3, no CLI, no depl
|
|
|
261
261
|
|
|
262
262
|
---
|
|
263
263
|
|
|
264
|
-
**[
|
|
264
|
+
**[live demo →](https://zn2qgaqlofvauxmoncf36m4ynq0pfarj.lambda-url.us-east-1.on.aws/)**
|
package/demo/astros.zap
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default async (req) => {
|
|
2
|
+
const page = await zap('demo/lib/page')
|
|
3
|
+
const res = await fetch('http://api.open-notify.org/astros.json')
|
|
4
|
+
const { people, number } = await res.json()
|
|
5
|
+
|
|
6
|
+
const byCraft = people.reduce((acc, { name, craft }) => {
|
|
7
|
+
acc[craft] = acc[craft] ?? []
|
|
8
|
+
acc[craft].push(name)
|
|
9
|
+
return acc
|
|
10
|
+
}, {})
|
|
11
|
+
|
|
12
|
+
const content = `
|
|
13
|
+
<div class="row">
|
|
14
|
+
<div class="value">${number}</div>
|
|
15
|
+
<div class="label">People in space right now</div>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="row">
|
|
18
|
+
${Object.entries(byCraft).map(([craft, names]) => `
|
|
19
|
+
<div class="label" style="margin-bottom:0.75rem">${craft}</div>
|
|
20
|
+
<div>${names.map(n => `<span class="tag">${n}</span>`).join('')}</div>
|
|
21
|
+
`).join('<br>')}
|
|
22
|
+
</div>
|
|
23
|
+
`
|
|
24
|
+
|
|
25
|
+
return page('Who\'s in space', content)
|
|
26
|
+
}
|
package/demo/index.zap
CHANGED
|
@@ -1,38 +1,71 @@
|
|
|
1
1
|
export default async (req) => {
|
|
2
2
|
const base = `${req.headers['x-forwarded-proto'] ?? 'https'}://${req.headers['host']}`
|
|
3
3
|
const demos = [
|
|
4
|
-
['hello',
|
|
5
|
-
['counter',
|
|
6
|
-
['visitors', 'visitor count'],
|
|
7
|
-
['
|
|
8
|
-
['
|
|
9
|
-
['
|
|
4
|
+
['hello', 'hello world', 'GET'],
|
|
5
|
+
['counter', 'persistent counter', 'GET'],
|
|
6
|
+
['visitors', 'visitor count', 'GET'],
|
|
7
|
+
['iss', 'ISS position — live', 'GET'],
|
|
8
|
+
['astros', 'who\'s in space right now', 'GET'],
|
|
9
|
+
['echo', 'echo request details', 'GET'],
|
|
10
|
+
['proxy', 'cors proxy ?url=https://…', 'GET'],
|
|
10
11
|
]
|
|
12
|
+
|
|
11
13
|
return {
|
|
12
14
|
headers: { 'content-type': 'text/html' },
|
|
13
15
|
body: `<!doctype html>
|
|
14
16
|
<html>
|
|
15
|
-
<head
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
17
|
+
<head>
|
|
18
|
+
<meta charset="utf-8">
|
|
19
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
20
|
+
<title>zap</title>
|
|
21
|
+
<style>
|
|
22
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
23
|
+
body { font-family: -apple-system, sans-serif; background: #0a0a0f; color: #e8e8f0; min-height: 100vh; padding: 4rem 2rem; }
|
|
24
|
+
.wrap { max-width: 560px; margin: 0 auto; }
|
|
25
|
+
h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.4rem; }
|
|
26
|
+
.sub { color: #555; font-size: 0.875rem; margin-bottom: 3rem; }
|
|
27
|
+
.sub a { color: #555; text-decoration: none; }
|
|
28
|
+
.sub a:hover { color: #888; }
|
|
29
|
+
|
|
30
|
+
.explainer { background: #13131a; border: 1px solid #1e1e2e; border-radius: 10px; padding: 1.5rem; margin-bottom: 3rem; }
|
|
31
|
+
.explainer p { font-size: 0.875rem; color: #888; line-height: 1.6; margin-bottom: 1rem; }
|
|
32
|
+
.explainer p strong { color: #ccc; }
|
|
33
|
+
pre { background: #0a0a0f; border-radius: 6px; padding: 1rem; font-size: 0.8rem; line-height: 1.7; color: #a0a0c0; overflow-x: auto; }
|
|
34
|
+
.comment { color: #444; }
|
|
35
|
+
.kw { color: #7c7cff; }
|
|
36
|
+
.str { color: #7fbb7f; }
|
|
37
|
+
|
|
38
|
+
h2 { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #444; margin-bottom: 1rem; }
|
|
39
|
+
ul { list-style: none; }
|
|
40
|
+
li { display: flex; align-items: baseline; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid #111; }
|
|
41
|
+
li:last-child { border-bottom: none; }
|
|
42
|
+
a.route { font-family: monospace; font-size: 0.875rem; color: #e8e8f0; text-decoration: none; }
|
|
43
|
+
a.route:hover { color: #fff; text-decoration: underline; }
|
|
44
|
+
span.desc { color: #555; font-size: 0.8rem; flex: 1; }
|
|
45
|
+
</style>
|
|
29
46
|
</head>
|
|
30
47
|
<body>
|
|
31
|
-
|
|
32
|
-
<
|
|
48
|
+
<div class="wrap">
|
|
49
|
+
<h1>zap</h1>
|
|
50
|
+
<p class="sub">Drop a .zap file in S3. It becomes an endpoint. — <a href="https://github.com/dmvjs/s3node">github</a> — <a href="https://npmjs.com/package/@kirkelliott/zap">npm</a></p>
|
|
51
|
+
|
|
52
|
+
<div class="explainer">
|
|
53
|
+
<p>A <strong>.zap file</strong> is a JavaScript file you drop in an S3 bucket. The filename becomes the URL path. The function inside handles the request.</p>
|
|
54
|
+
<pre><span class="comment">// hello.zap → /demo/hello</span>
|
|
55
|
+
<span class="kw">export default async</span> (req) => {
|
|
56
|
+
<span class="kw">return</span> { body: <span class="str">'hello world'</span> }
|
|
57
|
+
}</pre>
|
|
58
|
+
<p style="margin-bottom:0">That's it. No deploy step. No config. Change the file, the endpoint changes.</p>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<h2>Demos</h2>
|
|
33
62
|
<ul>
|
|
34
|
-
${demos.map(([slug, desc]) => `<li
|
|
63
|
+
${demos.map(([slug, desc]) => `<li>
|
|
64
|
+
<a class="route" href="${base}/demo/${slug}">/demo/${slug}</a>
|
|
65
|
+
<span class="desc">${desc}</span>
|
|
66
|
+
</li>`).join('\n ')}
|
|
35
67
|
</ul>
|
|
68
|
+
</div>
|
|
36
69
|
</body>
|
|
37
70
|
</html>`,
|
|
38
71
|
}
|
package/demo/iss.zap
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default async (req) => {
|
|
2
|
+
const page = await zap('demo/lib/page')
|
|
3
|
+
const res = await fetch('http://api.open-notify.org/iss-now.json')
|
|
4
|
+
const { iss_position: { latitude, longitude }, timestamp } = await res.json()
|
|
5
|
+
|
|
6
|
+
const lat = parseFloat(latitude).toFixed(4)
|
|
7
|
+
const lon = parseFloat(longitude).toFixed(4)
|
|
8
|
+
const time = new Date(timestamp * 1000).toUTCString()
|
|
9
|
+
const ns = lat >= 0 ? 'N' : 'S'
|
|
10
|
+
const ew = lon >= 0 ? 'E' : 'W'
|
|
11
|
+
|
|
12
|
+
return page('ISS — live position', `
|
|
13
|
+
<div class="row">
|
|
14
|
+
<div class="value">${Math.abs(lat)}° ${ns}</div>
|
|
15
|
+
<div class="label">Latitude</div>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="row">
|
|
18
|
+
<div class="value">${Math.abs(lon)}° ${ew}</div>
|
|
19
|
+
<div class="label">Longitude</div>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="row">
|
|
22
|
+
<div class="value" style="font-size:1rem;color:#555">${time}</div>
|
|
23
|
+
<div class="label">Timestamp</div>
|
|
24
|
+
</div>
|
|
25
|
+
`)
|
|
26
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export default (title, content) => ({
|
|
2
|
+
headers: { 'content-type': 'text/html' },
|
|
3
|
+
body: `<!doctype html>
|
|
4
|
+
<html>
|
|
5
|
+
<head>
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
8
|
+
<title>${title}</title>
|
|
9
|
+
<style>
|
|
10
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
11
|
+
body { font-family: -apple-system, sans-serif; background: #0a0a0f; color: #e8e8f0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
|
|
12
|
+
h1 { font-size: 1rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #666; margin-bottom: 2rem; }
|
|
13
|
+
.card { background: #13131a; border: 1px solid #1e1e2e; border-radius: 12px; padding: 2.5rem 3rem; min-width: 360px; max-width: 520px; width: 100%; }
|
|
14
|
+
.value { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 0.5rem; }
|
|
15
|
+
.label { font-size: 0.75rem; color: #555; letter-spacing: 0.08em; text-transform: uppercase; }
|
|
16
|
+
.row { margin-bottom: 1.75rem; }
|
|
17
|
+
.row:last-child { margin-bottom: 0; }
|
|
18
|
+
.tag { display: inline-block; background: #1e1e2e; border-radius: 6px; padding: 0.35rem 0.75rem; font-size: 0.875rem; margin: 0.2rem 0.2rem 0.2rem 0; }
|
|
19
|
+
.dim { color: #444; font-size: 0.75rem; margin-top: 2rem; text-align: center; }
|
|
20
|
+
a { color: #555; text-decoration: none; }
|
|
21
|
+
a:hover { color: #888; }
|
|
22
|
+
</style>
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<h1>${title}</h1>
|
|
26
|
+
<div class="card">${content}</div>
|
|
27
|
+
<p class="dim">powered by <a href="https://github.com/dmvjs/s3node">zap</a></p>
|
|
28
|
+
</body>
|
|
29
|
+
</html>`,
|
|
30
|
+
})
|