Skip to content

Commit 82a5492

Browse files
motdotlamotdotla
committed
update
1 parent 4256c6b commit 82a5492

1 file changed

Lines changed: 127 additions & 22 deletions

File tree

‎index.md‎

Lines changed: 127 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ title: ""
33
---
44

55
<section class="relative min-h-screen overflow-hidden px-5 py-8 sm:px-12 sm:py-10">
6-
<div aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-[-220px] z-0 hidden w-[760px] items-center opacity-20 dark:opacity-30 md:flex lg:right-[-180px] lg:w-[860px]">
7-
<div id="globe-bg" class="h-[760px] w-[760px] lg:h-[860px] lg:w-[860px]"></div>
6+
<div aria-hidden="true" class="absolute top-[-10px] right-[-180px] z-20 flex w-[360px] sm:right-[-210px] sm:w-[460px] md:top-[-20px] md:right-[-240px] md:w-[560px] lg:right-[-220px] lg:w-[640px]">
7+
<div id="globe-bg" class="pointer-events-none h-[360px] w-[360px] sm:h-[460px] sm:w-[460px] md:pointer-events-auto md:h-[560px] md:w-[560px] md:cursor-grab md:active:cursor-grabbing lg:h-[640px] lg:w-[640px]"></div>
88
</div>
99

1010
<div class="relative z-10 max-w-5xl font-mono text-xs leading-5 text-black dark:text-white sm:text-sm sm:leading-6">
1111
<p class="break-words [overflow-wrap:anywhere]"><span class="text-[#1a7f52] dark:text-[#30ff8a]">$</span> vestauth agent init</p>
1212

1313
<section class="mt-6 sm:mt-8">
1414
<h2 class="text-[#1a7f52] dark:text-[#30ff8a]">Description</h2>
15-
<p class="mt-3 max-w-5xl italic">auth for agents&ndash;from the creator of <a class="underline" href="https://github.com/motdotla/dotenv#readme" target="_blank" rel="noopener noreferrer"><code>dotenv</code></a> and <a class="underline" href="https://github.com/dotenvx/dotenvx#readme" target="_blank" rel="noopener noreferrer"><code>dotenvx</code></a>.</p>
15+
<p class="mt-3 max-w-5xl italic"><strong>auth for agents</strong>&ndash;from the creator of <a class="underline" href="https://github.com/motdotla/dotenv#readme" target="_blank" rel="noopener noreferrer"><code>dotenv</code></a> and <a class="underline" href="https://github.com/dotenvx/dotenvx#readme" target="_blank" rel="noopener noreferrer"><code>dotenvx</code></a>.</p>
1616
</section>
1717

1818
<section class="mt-4 sm:mt-6">
@@ -27,7 +27,7 @@ title: ""
2727
<p class="break-words [overflow-wrap:anywhere]"><span class="text-[#1a7f52] dark:text-[#30ff8a]">$</span> vestauth agent init</p>
2828

2929
<p class="mt-4 text-zinc-500 dark:text-zinc-500"># …and sign their curl requests with cryptographic authentication.</p>
30-
<p class="break-words [overflow-wrap:anywhere]"><span class="text-[#1a7f52] dark:text-[#30ff8a]">$</span> vestauth agent curl https://api.vestauth.com/whoami</p>
30+
<p class="break-words [overflow-wrap:anywhere]"><span class="text-[#1a7f52] dark:text-[#30ff8a]">$</span> vestauth agent curl https://ping.vestauth.com/ping</p>
3131
</section>
3232

3333
<section class="mt-4 sm:mt-6">
@@ -61,37 +61,65 @@ app.listen(3000)</code></pre>
6161
</div>
6262

6363
<script src="https://unpkg.com/globe.gl"></script>
64+
<style>
65+
.ping-label {
66+
display: grid;
67+
gap: 2px;
68+
padding: 6px 8px;
69+
border-radius: 8px;
70+
border: 1px solid rgba(45, 52, 64, 0.42);
71+
background: rgba(248, 249, 251, 0.9);
72+
color: rgba(18, 22, 30, 0.95);
73+
font: 600 9px/1.2 "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
74+
letter-spacing: 0.02em;
75+
text-transform: lowercase;
76+
white-space: nowrap;
77+
pointer-events: none;
78+
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
79+
}
80+
.ping-label__title { opacity: 0.78; }
81+
.ping-label__agent { color: rgba(14, 18, 24, 0.95); }
82+
.ping-label__kid { opacity: 0.88; }
83+
.ping-label__meta { opacity: 0.76; }
84+
</style>
6485
<script>
6586
(() => {
6687
const root = document.getElementById('globe-bg');
6788
if (!root || typeof Globe === 'undefined') return;
68-
if (!window.matchMedia('(min-width: 768px)').matches) return;
6989

7090
const globe = Globe()
7191
.backgroundColor('rgba(0,0,0,0)')
72-
.pointColor((d) => 'rgba(255,255,255,' + (d.opacity ?? 1) + ')')
92+
.pointColor((d) => 'rgba(58, 255, 134, ' + (d.opacity ?? 1) + ')')
7393
.pointRadius((d) => d.r)
7494
.pointAltitude((d) => d.altitude)
95+
.htmlElementsData([])
96+
.htmlLat((d) => d.lat)
97+
.htmlLng((d) => d.lng)
98+
.htmlAltitude((d) => {
99+
const a = (d.altitude ?? d.maxAltitude ?? 0) * 0.002 + 0.06;
100+
return Math.min(0.35, Math.max(0.06, a));
101+
})
102+
.htmlElement((d) => d.htmlEl || makeHtmlLabel(d))
103+
.pointsMerge(false)
75104
.pointOfView({ altitude: 2.3, lat: 20, lng: -20 }, 0)
76105
.pointsData([])
77-
.htmlElementsData([])
78106
(root);
79107

80108
const material = globe.globeMaterial();
81-
material.color.set('#dff7ec');
82-
material.emissive.set('#c9efdd');
109+
material.color.set('#eceef0');
110+
material.emissive.set('#d4d8dd');
83111
material.emissiveIntensity = 0.03;
84112
material.shininess = 0.02;
85113
material.transparent = true;
86-
material.opacity = 0.24;
114+
material.opacity = 0.3;
87115

88-
globe.atmosphereColor('#9fe5c5');
116+
globe.atmosphereColor('#dfe3e8');
89117
globe.atmosphereAltitude(0.03);
90118
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
91119
globe
92120
.polygonCapColor(() => 'rgba(0, 0, 0, 0)')
93121
.polygonSideColor(() => 'rgba(0, 0, 0, 0)')
94-
.polygonStrokeColor(() => isDark ? 'rgba(184, 255, 220, 0.58)' : 'rgba(26, 90, 62, 0.5)')
122+
.polygonStrokeColor(() => isDark ? 'rgba(246, 248, 252, 0.95)' : 'rgba(8, 14, 24, 0.98)')
95123
.polygonAltitude(0.006);
96124

97125
fetch('https://cdn.jsdelivr.net/gh/vasturiano/three-globe@master/example/country-polygons/ne_110m_admin_0_countries.geojson')
@@ -115,19 +143,81 @@ app.listen(3000)</code></pre>
115143
const controls = globe.controls();
116144
controls.autoRotate = true;
117145
controls.autoRotateSpeed = 0.28;
146+
controls.enableRotate = true;
118147
controls.enableZoom = false;
119148
controls.enablePan = false;
120149

121-
const pointGrowMs = 180;
122-
const pointHoldMs = 1200;
123-
const pointFadeMs = 2400;
124-
const pointRadius = 0.05;
150+
const pointGrowMs = 200;
151+
const pointHoldMs = 2000;
152+
const pointFadeMs = 5000;
153+
const pointRadius = 0.12;
125154
const activePoints = [];
126155
let lastSeen = 0;
156+
let pullInFlight = false;
127157

128158
globe.pointsData(activePoints);
159+
globe.htmlElementsData(activePoints);
160+
161+
function shortAgentId(value) {
162+
if (!value && value !== 0) return 'agent-????';
163+
const str = String(value);
164+
const marker = 'agent-';
165+
const idx = str.indexOf(marker);
166+
if (idx !== -1) {
167+
const after = str.slice(idx + marker.length);
168+
return 'agent-' + after.slice(0, 4).padEnd(4, '?');
169+
}
170+
return 'agent-' + str.slice(0, 4).padEnd(4, '?');
171+
}
172+
173+
function shortKid(value) {
174+
if (!value && value !== 0) return 'kid:????';
175+
const str = String(value);
176+
return 'kid:' + str.slice(0, 4).padEnd(4, '?');
177+
}
178+
179+
function formatMeta(d) {
180+
const lat = d.lat != null ? d.lat.toFixed(2) : '--';
181+
const lng = d.lng != null ? d.lng.toFixed(2) : '--';
182+
const ts = d.ts
183+
? new Date(d.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
184+
: '--';
185+
return 'loc ' + lat + ',' + lng + ' · ' + ts;
186+
}
187+
188+
function makeHtmlLabel(d) {
189+
const rootEl = document.createElement('div');
190+
rootEl.className = 'ping-label';
191+
rootEl.style.opacity = String(d.opacity ?? 1);
192+
193+
const title = document.createElement('div');
194+
title.className = 'ping-label__title';
195+
title.textContent = 'id: ' + (d.id ?? '??');
196+
197+
const agent = document.createElement('div');
198+
agent.className = 'ping-label__agent';
199+
agent.textContent = d.label || 'agent-????';
200+
201+
const kid = document.createElement('div');
202+
kid.className = 'ping-label__kid';
203+
kid.textContent = d.kidShort || 'kid:????';
204+
205+
const meta = document.createElement('div');
206+
meta.className = 'ping-label__meta';
207+
meta.textContent = formatMeta(d);
208+
209+
rootEl.appendChild(title);
210+
rootEl.appendChild(agent);
211+
rootEl.appendChild(kid);
212+
rootEl.appendChild(meta);
213+
214+
d.htmlEl = rootEl;
215+
return rootEl;
216+
}
129217

130218
async function pullPings() {
219+
if (pullInFlight) return;
220+
pullInFlight = true;
131221
try {
132222
const res = await fetch('https://ping.vestauth.com/pings?since=' + encodeURIComponent(lastSeen));
133223
if (!res.ok) return;
@@ -145,13 +235,21 @@ app.listen(3000)</code></pre>
145235
altitude: 0,
146236
maxAltitude: ping.altitude ?? 90,
147237
r: pointRadius,
148-
opacity: 0.9,
238+
opacity: 1,
149239
born: performance.now(),
150-
grown: false
240+
grown: false,
241+
label: shortAgentId(ping.agent_id),
242+
kidShort: shortKid(ping.agent_kid),
243+
id: ping.id,
244+
ts: ping.ts,
245+
htmlEl: null
151246
});
152247
}
153248
lastSeen = maxSeen;
154-
} catch (_) {}
249+
} catch (_) {
250+
} finally {
251+
pullInFlight = false;
252+
}
155253
}
156254

157255
function animatePoints() {
@@ -184,7 +282,7 @@ app.listen(3000)</code></pre>
184282
const fadeStart = pointGrowMs + pointHoldMs;
185283
if (age >= fadeStart) {
186284
const fadeT = Math.min(1, (age - fadeStart) / pointFadeMs);
187-
const nextOpacity = Math.max(0, 0.9 - fadeT * 0.9);
285+
const nextOpacity = Math.max(0, 1 - fadeT);
188286
const nextAltitude = Math.max(0, p.maxAltitude * (1 - fadeT));
189287
if (nextOpacity !== p.opacity) {
190288
p.opacity = nextOpacity;
@@ -198,13 +296,20 @@ app.listen(3000)</code></pre>
198296
}
199297

200298
if (changed) {
201-
globe.pointsData(activePoints.slice());
299+
const next = activePoints.slice();
300+
globe.pointsData(next);
301+
globe.htmlElementsData(next);
302+
}
303+
304+
for (let i = 0; i < activePoints.length; i += 1) {
305+
const p = activePoints[i];
306+
if (p.htmlEl) p.htmlEl.style.opacity = String(p.opacity ?? 1);
202307
}
203308
requestAnimationFrame(animatePoints);
204309
}
205310

206311
pullPings();
207-
setInterval(pullPings, 800);
312+
setInterval(pullPings, 1000);
208313
animatePoints();
209314
})();
210315
</script>

0 commit comments

Comments
 (0)