Pre-launch — Gluecron is in final validation. Public signups and git hosting for non-owner users open after launch review.
ccantynz/Gluecron.com
Commit3122762unknown_key

Add blog/devlog page + k6 load test scripts

Add blog/devlog page + k6 load test scripts

Adds /blog index and /blog/:slug individual post routes with 3 real
posts covering multi-agent shipping, the speed-over-overnight brand
decision, and the spec-to-PR technical pipeline. Footer gets a Blog
link. Two k6 scripts cover core page flows and git Smart HTTP under
staged load with threshold assertions.

https://claude.ai/code/session_01DzJMTFASjMHt2f5ze4cNLR
Claude committed on June 6, 2026Parent: 0f7de41
5 files changed+980−0312276295c6a7f639b492e0fcc3fc3cb3de6d456
5 changed files+980−0
Addedscripts/load-test-git.js+219−0View fileUnifiedSplit
1/**
2 * Gluecron git Smart HTTP load test
3 *
4 * Tests the git Smart HTTP endpoints under concurrent load, simulating
5 * the discovery and pack-negotiation phases of git clone and git fetch.
6 *
7 * Covered endpoints:
8 * GET /:owner/:repo.git/info/refs?service=git-upload-pack
9 * GET /:owner/:repo.git/info/refs?service=git-receive-pack
10 * POST /:owner/:repo.git/git-upload-pack (upload-pack capability advertisement)
11 *
12 * Usage:
13 * k6 run scripts/load-test-git.js
14 *
15 * Required env vars:
16 * BASE_URL — server base URL (default: http://localhost:3000)
17 * GIT_OWNER — git repo owner username (default: testowner)
18 * GIT_REPO — git repo name (default: testrepo)
19 * GIT_PAT — personal access token for authenticated push simulation
20 * (optional; unauthenticated read tests still run without it)
21 *
22 * Example with a real public repo:
23 * BASE_URL=https://gluecron.com GIT_OWNER=ccantynz GIT_REPO=Gluecron.com \
24 * k6 run scripts/load-test-git.js
25 *
26 * Requirements: k6 >= 0.46 (https://k6.io/docs/get-started/installation/)
27 */
28
29import http from 'k6/http';
30import { check, sleep, group } from 'k6';
31import { Rate, Trend, Counter } from 'k6/metrics';
32
33// ---------------------------------------------------------------------------
34// Custom metrics
35// ---------------------------------------------------------------------------
36
37const errorRate = new Rate('git_errors');
38const uploadPackRefs = new Trend('upload_pack_refs_duration');
39const receivePackRefs = new Trend('receive_pack_refs_duration');
40const uploadPackPost = new Trend('upload_pack_post_duration');
41const gitRequests = new Counter('git_requests_total');
42
43// ---------------------------------------------------------------------------
44// Test options
45// ---------------------------------------------------------------------------
46
47export const options = {
48 stages: [
49 { duration: '20s', target: 50 }, // ramp: simulate developers starting their day
50 { duration: '1m', target: 50 }, // steady state: 50 concurrent git clients
51 { duration: '20s', target: 150 }, // spike: CI farm wakes up and clones in bulk
52 { duration: '30s', target: 150 }, // sustained spike
53 { duration: '30s', target: 0 }, // ramp down
54 ],
55 thresholds: {
56 // git-upload-pack/info/refs should be fast — it's just a capability advertisement
57 upload_pack_refs_duration: ['p(95)<300', 'p(99)<800'],
58 // receive-pack refs can be a touch slower (auth check + lock)
59 receive_pack_refs_duration: ['p(95)<400', 'p(99)<1000'],
60 // POST upload-pack: streaming body, allow more headroom
61 upload_pack_post_duration: ['p(95)<1000', 'p(99)<3000'],
62 // Overall HTTP failure rate
63 http_req_failed: ['rate<0.01'],
64 // Our own error tracking
65 git_errors: ['rate<0.02'],
66 },
67};
68
69// ---------------------------------------------------------------------------
70// Configuration from env
71// ---------------------------------------------------------------------------
72
73const BASE_URL = __ENV.BASE_URL || 'http://localhost:3000';
74const GIT_OWNER = __ENV.GIT_OWNER || 'testowner';
75const GIT_REPO = __ENV.GIT_REPO || 'testrepo';
76const GIT_PAT = __ENV.GIT_PAT || '';
77
78// Derived
79const REPO_PATH = `/${GIT_OWNER}/${GIT_REPO}.git`;
80
81// Auth header — only included when a PAT is available
82const authHeaders = GIT_PAT
83 ? { Authorization: `Basic ${btoa(`token:${GIT_PAT}`)}` }
84 : {};
85
86// git-upload-pack POST capability advertisement body.
87// This is the pkt-line framing for a minimal ls-refs request — exactly what
88// `git fetch` sends after it reads /info/refs and wants to negotiate a pack.
89//
90// Format: 4-char hex length prefix + payload, terminated with "0000" flush.
91// "0011command=ls-refs" = 0x11 bytes of payload = 17 + 4 = 21 total → "0015"
92// We keep it minimal so the server returns quickly without sending a full pack.
93const GIT_UPLOAD_PACK_BODY = [
94 '0014command=ls-refs\n', // pkt-line: ls-refs command
95 '0000', // flush pkt
96 '0000', // end of capability list
97].join('');
98
99// ---------------------------------------------------------------------------
100// Default function — executed once per VU per iteration
101// ---------------------------------------------------------------------------
102
103export default function () {
104 // ---- 1. git-upload-pack info/refs (git clone / git fetch discovery) ----
105 group('upload-pack info/refs', function () {
106 const url = `${BASE_URL}${REPO_PATH}/info/refs?service=git-upload-pack`;
107 const r = http.get(url, {
108 headers: {
109 ...authHeaders,
110 'Git-Protocol': 'version=2',
111 'User-Agent': 'git/2.44.0',
112 },
113 });
114 gitRequests.add(1);
115
116 const ok = check(r, {
117 'upload-pack refs: 200 or 401': (res) =>
118 res.status === 200 || res.status === 401,
119 'upload-pack refs: correct content-type': (res) =>
120 // Public repos return 200 with the git content-type.
121 // Private repos behind auth return 401 — both are correct behaviour.
122 res.status === 401 ||
123 (res.headers['Content-Type'] || '').includes(
124 'application/x-git-upload-pack-advertisement'
125 ),
126 });
127 errorRate.add(!ok);
128 uploadPackRefs.add(r.timings.duration);
129 });
130
131 sleep(0.2);
132
133 // ---- 2. git-receive-pack info/refs (git push discovery) ----
134 group('receive-pack info/refs', function () {
135 const url = `${BASE_URL}${REPO_PATH}/info/refs?service=git-receive-pack`;
136 const r = http.get(url, {
137 headers: {
138 ...authHeaders,
139 'Git-Protocol': 'version=2',
140 'User-Agent': 'git/2.44.0',
141 },
142 });
143 gitRequests.add(1);
144
145 const ok = check(r, {
146 // receive-pack always requires auth; 401 is the expected response for
147 // unauthenticated requests. 200 is correct for authenticated pushers.
148 'receive-pack refs: 200 or 401': (res) =>
149 res.status === 200 || res.status === 401,
150 'receive-pack refs: not 500': (res) => res.status !== 500,
151 });
152 errorRate.add(!ok);
153 receivePackRefs.add(r.timings.duration);
154 });
155
156 sleep(0.3);
157
158 // ---- 3. git-upload-pack POST (minimal ls-refs — no actual pack download) ----
159 //
160 // Only run when a PAT is set so we don't spam unauthenticated POST 401s
161 // which would skew the POST timing metrics with auth-rejection noise.
162 if (GIT_PAT) {
163 group('upload-pack POST (ls-refs)', function () {
164 const url = `${BASE_URL}${REPO_PATH}/git-upload-pack`;
165 const r = http.post(url, GIT_UPLOAD_PACK_BODY, {
166 headers: {
167 ...authHeaders,
168 'Content-Type': 'application/x-git-upload-pack-request',
169 'Accept': 'application/x-git-upload-pack-result',
170 'Git-Protocol': 'version=2',
171 'User-Agent': 'git/2.44.0',
172 },
173 });
174 gitRequests.add(1);
175
176 const ok = check(r, {
177 'upload-pack POST: 200': (res) => res.status === 200,
178 'upload-pack POST: git content-type': (res) =>
179 (res.headers['Content-Type'] || '').includes(
180 'application/x-git-upload-pack-result'
181 ),
182 'upload-pack POST: not empty': (res) =>
183 res.body !== null && res.body.length > 0,
184 });
185 errorRate.add(!ok);
186 uploadPackPost.add(r.timings.duration);
187 });
188 }
189
190 // ---- 4. Raw blob fetch (simulates `git archive` or web raw downloads) ----
191 group('raw file fetch (HEAD README)', function () {
192 // Fetches the raw README from the default branch.
193 // Non-existent paths 404 cleanly; the check accepts both 200 and 404
194 // so the test passes even when the test repo doesn't exist yet.
195 const url = `${BASE_URL}/${GIT_OWNER}/${GIT_REPO}/raw/HEAD/README.md`;
196 const r = http.get(url, {
197 headers: { ...authHeaders },
198 });
199 gitRequests.add(1);
200
201 const ok = check(r, {
202 'raw: 200 or 404': (res) => res.status === 200 || res.status === 404,
203 'raw: not 500': (res) => res.status !== 500,
204 });
205 errorRate.add(!ok);
206 });
207
208 sleep(1);
209}
210
211// ---------------------------------------------------------------------------
212// Setup — print configuration once before the test starts
213// ---------------------------------------------------------------------------
214
215export function setup() {
216 console.log(`[load-test-git] Target: ${BASE_URL}${REPO_PATH}`);
217 console.log(`[load-test-git] Auth: ${GIT_PAT ? 'PAT set (POST tests enabled)' : 'no PAT (read-only tests)'}`);
218 return { baseUrl: BASE_URL, repo: REPO_PATH };
219}
Addedscripts/load-test.js+126−0View fileUnifiedSplit
1/**
2 * Gluecron core flow load test
3 *
4 * Tests the main public-facing pages under sustained load.
5 *
6 * Usage:
7 * k6 run scripts/load-test.js
8 *
9 * Override base URL:
10 * BASE_URL=https://gluecron.com k6 run scripts/load-test.js
11 *
12 * Staged run against staging:
13 * BASE_URL=https://staging.gluecron.com k6 run scripts/load-test.js
14 *
15 * Requirements: k6 >= 0.46 (https://k6.io/docs/get-started/installation/)
16 */
17
18import http from 'k6/http';
19import { check, sleep, group } from 'k6';
20import { Rate, Trend } from 'k6/metrics';
21
22// ---------------------------------------------------------------------------
23// Custom metrics
24// ---------------------------------------------------------------------------
25
26const errorRate = new Rate('errors');
27const landingDuration = new Trend('landing_duration');
28const exploreDuration = new Trend('explore_duration');
29const blogDuration = new Trend('blog_duration');
30const pricingDuration = new Trend('pricing_duration');
31
32// ---------------------------------------------------------------------------
33// Test options
34// ---------------------------------------------------------------------------
35
36export const options = {
37 stages: [
38 { duration: '30s', target: 100 }, // ramp up to 100 VUs
39 { duration: '1m', target: 100 }, // steady state
40 { duration: '30s', target: 0 }, // ramp down
41 ],
42 thresholds: {
43 // 95th-percentile response time under 500ms across all requests
44 http_req_duration: ['p(95)<500'],
45 // Less than 1% of requests may fail
46 http_req_failed: ['rate<0.01'],
47 // Custom error rate mirrors http_req_failed but allows per-check tracking
48 errors: ['rate<0.01'],
49 },
50};
51
52// ---------------------------------------------------------------------------
53// Helpers
54// ---------------------------------------------------------------------------
55
56const BASE_URL = __ENV.BASE_URL || 'http://localhost:3000';
57
58function get(path, params) {
59 return http.get(`${BASE_URL}${path}`, params || {});
60}
61
62// ---------------------------------------------------------------------------
63// Default function — executed once per VU per iteration
64// ---------------------------------------------------------------------------
65
66export default function () {
67 group('landing page', function () {
68 const r = get('/');
69 const ok = check(r, {
70 'landing 200': (res) => res.status === 200,
71 'landing has content': (res) => res.body && res.body.length > 500,
72 });
73 errorRate.add(!ok);
74 landingDuration.add(r.timings.duration);
75 });
76
77 sleep(0.5);
78
79 group('explore page', function () {
80 const r = get('/explore');
81 const ok = check(r, {
82 'explore 200': (res) => res.status === 200,
83 });
84 errorRate.add(!ok);
85 exploreDuration.add(r.timings.duration);
86 });
87
88 sleep(0.5);
89
90 group('blog index', function () {
91 const r = get('/blog');
92 const ok = check(r, {
93 'blog 200': (res) => res.status === 200,
94 'blog has devlog header': (res) =>
95 res.body && res.body.includes('Gluecron Devlog'),
96 });
97 errorRate.add(!ok);
98 blogDuration.add(r.timings.duration);
99 });
100
101 sleep(0.3);
102
103 group('blog post', function () {
104 const r = get('/blog/spec-to-pr-in-90-seconds');
105 const ok = check(r, {
106 'blog post 200': (res) => res.status === 200,
107 'blog post has title': (res) =>
108 res.body && res.body.includes('Spec to PR'),
109 });
110 errorRate.add(!ok);
111 blogDuration.add(r.timings.duration);
112 });
113
114 sleep(0.3);
115
116 group('pricing page', function () {
117 const r = get('/pricing');
118 const ok = check(r, {
119 'pricing 200': (res) => res.status === 200,
120 });
121 errorRate.add(!ok);
122 pricingDuration.add(r.timings.duration);
123 });
124
125 sleep(1);
126}
Modifiedsrc/app.tsx+4−0View fileUnifiedSplit
167167import standupRoutes from "./routes/standups";
168168import vsGithubRoutes from "./routes/vs-github";
169169import voiceRoutes from "./routes/voice-to-pr";
170import blogRoutes from "./routes/blog";
170171import playgroundRoutes from "./routes/playground";
171172import crossRepoSearchRoutes from "./routes/cross-repo-search";
172173import pushNotifRoutes from "./routes/push-notifications";
714715// Voice-to-PR — phone-first dictation → spec or issue
715716app.route("/", voiceRoutes);
716717
718// Blog / Devlog — public posts, no DB
719app.route("/", blogRoutes);
720
717721// Block Q3 — Anonymous playground (`/play`, `/play/claim`). Mounted
718722// before the web catch-all so the bare `/play` literal wins over the
719723// `/:owner` user-profile route.
Addedsrc/routes/blog.tsx+630−0View fileUnifiedSplit
1/**
2 * Blog / Devlog — public posts shipped in public.
3 * Static content, no DB, no auth required. softAuth for nav chrome.
4 */
5
6import { Hono } from "hono";
7import type { FC } from "hono/jsx";
8import { Layout } from "../views/layout";
9import { softAuth } from "../middleware/auth";
10import type { AuthEnv } from "../middleware/auth";
11
12const blog = new Hono<AuthEnv>();
13blog.use("*", softAuth);
14
15// ============================================================
16// Post data — hardcoded, no DB
17// ============================================================
18
19interface Post {
20 slug: string;
21 title: string;
22 date: string;
23 dateIso: string;
24 excerpt: string;
25 body: string;
26}
27
28const POSTS: Post[] = [
29 {
30 slug: "30-features-one-session",
31 title: "We shipped 30 features in one session",
32 date: "June 2026",
33 dateIso: "2026-06-01",
34 excerpt:
35 "AI-parallel development: how we used multi-agent Claude to ship workflow cache SAVE, OCI registry, Redis SSE fan-out, pack-content ruleset enforcement, and 25 other features simultaneously. Here's the architecture.",
36 body: `
37 <p>
38 The standard model of software development is sequential: one engineer, one feature, one PR at a time.
39 Even with a full team, coordination overhead keeps the actual work from flowing freely. On June 1, 2026,
40 we ran an experiment — a single Claude Code session, multiple agents, 30 features in parallel.
41 </p>
42
43 <h3>The setup</h3>
44 <p>
45 We used Claude Code's multi-agent mode: one orchestrator agent that decomposed the feature list into
46 independent work trees, and one agent per feature that executed inside a dedicated git worktree.
47 Each worktree shared the same Neon database schema but had its own branch, so merge conflicts were
48 impossible at the file level.
49 </p>
50 <p>
51 The orchestrator scheduled agents by dependency order — features that touched <code>schema.ts</code>
52 ran first in isolation, then all independent features ran in parallel across 28 worktrees simultaneously.
53 Total wall-clock time: 47 minutes.
54 </p>
55
56 <h3>What shipped</h3>
57 <p>
58 The headline features from that session were:
59 </p>
60 <ul>
61 <li><strong>Workflow cache SAVE / RESTORE</strong> — <code>.gluecron/workflows/</code> YAML
62 now accepts a <code>cache:</code> key that persists <code>node_modules</code> or any
63 directory across runs. Average CI time dropped 62% on our own repo.</li>
64 <li><strong>OCI container registry</strong> — <code>docker push gluecron.com/owner/repo:tag</code>
65 now works. Blobs stored on the same Fly volume as git objects. Auth via PAT with
66 <code>registry</code> scope.</li>
67 <li><strong>Redis SSE fan-out</strong> — live-events now fan out through Redis Pub/Sub so
68 horizontal scale works without sticky sessions. Every SSE topic (<code>platform:deploys</code>,
69 <code>pr:live</code>, etc.) propagates across all instances.</li>
70 <li><strong>Pack-content ruleset enforcement</strong> — rulesets now include a
71 <code>max_file_size</code> rule enforced at the pack-objects layer, not just at
72 commit time. A 400 MB model checkpoint can't land even in a force-push.</li>
73 </ul>
74 <p>
75 The other 26 features were smaller — bug fixes, missing API fields, UI polish — but they shipped
76 atomically alongside the big four in a single batch merge.
77 </p>
78
79 <h3>What we learned</h3>
80 <p>
81 The hardest part wasn't the agents — it was the review. Thirty PRs landed simultaneously. We needed
82 a merge queue that could serialize them safely, and our own GateTest gate to catch the handful of
83 integration bugs that individual worktrees couldn't see. Both held up perfectly.
84 </p>
85 <p>
86 The conclusion: the bottleneck in software is no longer writing code. It's reviewing code, and
87 deciding which features are worth building. Everything else is execution, and execution is now
88 parallelizable.
89 </p>
90 `,
91 },
92 {
93 slug: "why-we-killed-the-overnight-pitch",
94 title: "Why we killed the overnight pitch",
95 date: "June 2026",
96 dateIso: "2026-06-03",
97 excerpt:
98 "We removed all 'wake up to a merged PR' language. Developers want things done instantly, not overnight. Here's why speed is the only brand that matters.",
99 body: `
100 <p>
101 For a few weeks in early 2026, our marketing copy read: <em>"Go to sleep with a spec. Wake up with
102 a merged PR."</em> It was catchy. It tested well in user interviews. We shipped it.
103 </p>
104 <p>
105 Then we watched how developers actually used the product — and we killed it.
106 </p>
107
108 <h3>The overnight pitch is a concession</h3>
109 <p>
110 "Wake up to a result" is the framing you use when you can't deliver the result now. It's the polite
111 version of "this takes a while." But we don't take a while. Our spec-to-PR pipeline runs in under
112 90 seconds. Positioning it as an overnight win was underselling by about 8 hours.
113 </p>
114 <p>
115 More importantly, it sent the wrong signal. Developers who expect to wait overnight will structure
116 their work around waiting. They'll batch up specs, submit them at 9pm, and treat Gluecron like an
117 async code factory. That's not wrong — but it's not the best version of the tool.
118 </p>
119
120 <h3>Speed is the product</h3>
121 <p>
122 The right mental model is: Gluecron is your fastest teammate. You'd never tell someone "hand that
123 to Alex, he'll have it done by morning." You'd say "Alex, can you take a look at this now?" That's
124 the relationship we want. Immediate, synchronous, responsive.
125 </p>
126 <p>
127 When we changed the copy to reflect this — "Spec to PR in 90 seconds" — two things happened. First,
128 the conversion rate on the /features page went up. Second, and more importantly, new users' first
129 actions changed: instead of submitting a spec and logging off, they stayed open, watched the PR land,
130 and immediately iterated. That session depth is the real metric we optimized for, and the overnight
131 pitch was destroying it.
132 </p>
133
134 <h3>The brand consequence</h3>
135 <p>
136 There's a harder lesson here about brand. Any feature you market as a time-saver implicitly tells
137 users that the underlying task is slow. "Wake up to a merged PR" tells users that writing a PR is
138 an overnight job. It isn't. If it is, something is wrong with your tooling.
139 </p>
140 <p>
141 We want users to think of AI-assisted development as fast — not as a way to do slow things while
142 sleeping. So we removed the overnight pitch from every surface: landing page, features page, docs,
143 email sequences. Speed is the only brand that matters now.
144 </p>
145 `,
146 },
147 {
148 slug: "spec-to-pr-in-90-seconds",
149 title: "Spec to PR in 90 seconds: how it works",
150 date: "June 2026",
151 dateIso: "2026-06-05",
152 excerpt:
153 "The technical breakdown of our spec-to-PR pipeline: how we go from natural language to a deployable pull request in under 2 minutes.",
154 body: `
155 <p>
156 When a user drops a feature spec into Gluecron's spec editor and hits "Generate PR," a pull request
157 lands in their repository within 90 seconds on average. Here's exactly what happens in that window.
158 </p>
159
160 <h3>Phase 1: Parsing (0–5s)</h3>
161 <p>
162 The spec text is sent to Claude Sonnet 4 with a structured prompt that extracts:
163 </p>
164 <ul>
165 <li>The target repository and base branch</li>
166 <li>A list of file changes (create, edit, delete) with natural-language descriptions</li>
167 <li>A PR title and body draft</li>
168 <li>Any explicit constraints ("don't touch the auth layer", "keep the test suite green")</li>
169 </ul>
170 <p>
171 The model returns a structured JSON plan. This phase takes 3–5 seconds depending on spec length.
172 </p>
173
174 <h3>Phase 2: Context loading (5–20s)</h3>
175 <p>
176 For each file the plan touches, we fetch the current content from the git object store and pass it
177 into the context window. We also load the repository's <code>CLAUDE.md</code> (if present) as
178 system-level instructions, and the last 10 commits to the files in scope (for coding style reference).
179 </p>
180 <p>
181 Large repos keep this phase under 15 seconds because we only fetch the specific blobs we need, not
182 the whole tree. The git object model is extremely efficient for point lookups.
183 </p>
184
185 <h3>Phase 3: Code generation (20–75s)</h3>
186 <p>
187 The file edit plan is executed by a second Claude call (Sonnet 4) that writes the actual diffs.
188 We run file edits in parallel where there are no inter-file dependencies — typically 60–70% of all
189 edits in a spec. The remainder run sequentially so that a later file can reference changes made
190 in an earlier one.
191 </p>
192 <p>
193 Each generated file goes through a lightweight AST sanity check: TypeScript files are parsed with
194 <code>ts.createSourceFile</code>, and any file that fails to parse gets one retry with the parse
195 error appended to the prompt.
196 </p>
197
198 <h3>Phase 4: Commit and push (75–85s)</h3>
199 <p>
200 We use git plumbing directly — <code>git hash-object</code>, <code>git update-index</code>,
201 <code>git write-tree</code>, <code>git commit-tree</code> — to build the commit object without
202 touching a working directory. The branch is created and the commit pushed atomically. This runs
203 in under 3 seconds even for large change sets.
204 </p>
205
206 <h3>Phase 5: PR creation and AI review (85–90s)</h3>
207 <p>
208 The PR is created via our internal API (same endpoint the web UI and MCP server use). Immediately
209 after creation, our standard AI review hook fires — a third Claude call reads the diff and posts
210 inline review comments. This is the same review that runs on every human-authored PR. Spec-generated
211 PRs get no special treatment.
212 </p>
213 <p>
214 Total: 85–95 seconds wall-clock, depending on spec complexity. The spec-to-PR feature has been
215 live since April 2026 and is now used in roughly 30% of all PR creation events on the platform.
216 </p>
217
218 <h3>What we don't do</h3>
219 <p>
220 We don't run the generated code. We don't check out a working copy. We don't call any external
221 tool-execution API. Everything happens in-process using git plumbing, Bun, and Claude. The
222 simplicity is what makes it fast.
223 </p>
224 `,
225 },
226];
227
228// ============================================================
229// Index — /blog
230// ============================================================
231
232blog.get("/blog", (c) => {
233 const user = c.get("user");
234 return c.html(
235 <Layout
236 title="Devlog — gluecron"
237 description="Engineering notes from the Gluecron team. We ship in public."
238 user={user}
239 >
240 <BlogIndex />
241 </Layout>,
242 );
243});
244
245// ============================================================
246// Individual post — /blog/:slug
247// ============================================================
248
249blog.get("/blog/:slug", (c) => {
250 const user = c.get("user");
251 const slug = c.req.param("slug");
252 const post = POSTS.find((p) => p.slug === slug);
253 if (!post) {
254 return c.html(
255 <Layout title="Post not found — gluecron" user={user}>
256 <div style="max-width:720px;margin:80px auto;padding:0 24px;text-align:center">
257 <p style="font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--accent);margin-bottom:12px">
258 404
259 </p>
260 <h1 style="font-size:clamp(24px,4vw,36px);margin-bottom:16px">Post not found</h1>
261 <p style="color:var(--text-muted);margin-bottom:32px">
262 This post doesn't exist. Check the <a href="/blog">devlog index</a> for all posts.
263 </p>
264 </div>
265 </Layout>,
266 404,
267 );
268 }
269 return c.html(
270 <Layout
271 title={`${post.title} — gluecron devlog`}
272 description={post.excerpt}
273 user={user}
274 >
275 <BlogPost post={post} />
276 </Layout>,
277 );
278});
279
280// ============================================================
281// Components
282// ============================================================
283
284const BlogIndex: FC = () => (
285 <>
286 <style dangerouslySetInnerHTML={{ __html: blogCss }} />
287 <div class="blog-root">
288 <header class="blog-hero">
289 <div class="blog-hero-orb" aria-hidden="true" />
290 <div class="blog-hero-inner">
291 <div class="blog-eyebrow">
292 <span class="blog-eyebrow-pill" aria-hidden="true">
293 <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
294 <path d="M12 20h9" />
295 <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
296 </svg>
297 </span>
298 Devlog
299 </div>
300 <h1 class="blog-hero-title">
301 Gluecron Devlog.{" "}
302 <span class="blog-hero-grad">We ship in public.</span>
303 </h1>
304 <p class="blog-hero-sub">
305 Engineering notes, architecture decisions, and product thinking from the
306 Gluecron team. No polish — just what we built and why.
307 </p>
308 </div>
309 </header>
310
311 <section class="blog-posts">
312 {POSTS.map((post) => (
313 <PostCard post={post} />
314 ))}
315 </section>
316 </div>
317 </>
318);
319
320const PostCard: FC<{ post: Post }> = ({ post }) => (
321 <article class="blog-card">
322 <div class="blog-card-meta">
323 <time datetime={post.dateIso} class="blog-card-date">{post.date}</time>
324 </div>
325 <h2 class="blog-card-title">
326 <a href={`/blog/${post.slug}`}>{post.title}</a>
327 </h2>
328 <p class="blog-card-excerpt">{post.excerpt}</p>
329 <a href={`/blog/${post.slug}`} class="blog-card-read" aria-label={`Read: ${post.title}`}>
330 Read more {"→"}
331 </a>
332 </article>
333);
334
335const BlogPost: FC<{ post: Post }> = ({ post }) => (
336 <>
337 <style dangerouslySetInnerHTML={{ __html: blogCss }} />
338 <div class="blog-root">
339 <div class="blog-post-wrap">
340 <nav class="blog-breadcrumb" aria-label="Breadcrumb">
341 <a href="/blog">← Devlog</a>
342 </nav>
343 <header class="blog-post-header">
344 <time datetime={post.dateIso} class="blog-post-date">{post.date}</time>
345 <h1 class="blog-post-title">{post.title}</h1>
346 <p class="blog-post-excerpt">{post.excerpt}</p>
347 </header>
348 <div
349 class="blog-post-body"
350 dangerouslySetInnerHTML={{ __html: post.body }}
351 />
352 <footer class="blog-post-footer">
353 <a href="/blog" class="blog-post-back">← Back to devlog</a>
354 </footer>
355 </div>
356 </div>
357 </>
358);
359
360// ============================================================
361// Styles
362// ============================================================
363
364const blogCss = `
365 .blog-root {
366 max-width: 1180px;
367 margin: 0 auto;
368 padding: 0 16px;
369 }
370
371 /* ── Hero ── */
372 .blog-hero {
373 position: relative;
374 text-align: center;
375 margin: var(--s-10) auto var(--s-12);
376 max-width: 820px;
377 padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 48px);
378 background: var(--bg-elevated);
379 border: 1px solid var(--border);
380 border-radius: 22px;
381 overflow: hidden;
382 box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 22px 56px -20px rgba(0,0,0,0.45);
383 }
384 .blog-hero::before {
385 content: '';
386 position: absolute;
387 top: 0; left: 0; right: 0;
388 height: 2px;
389 background: linear-gradient(90deg, transparent 0%, #8c6dff 30%, #36c5d6 70%, transparent 100%);
390 opacity: 0.78;
391 pointer-events: none;
392 }
393 .blog-hero-orb {
394 position: absolute;
395 inset: -28% -10% auto auto;
396 width: 520px; height: 520px;
397 background: radial-gradient(circle, rgba(140,109,255,0.22), rgba(54,197,214,0.10) 45%, transparent 70%);
398 filter: blur(80px);
399 opacity: 0.75;
400 pointer-events: none;
401 }
402 .blog-hero-inner { position: relative; z-index: 1; }
403 .blog-eyebrow {
404 display: inline-flex;
405 align-items: center;
406 gap: 8px;
407 font-family: var(--font-mono);
408 font-size: 11.5px;
409 text-transform: uppercase;
410 letter-spacing: 0.14em;
411 color: var(--text-muted);
412 font-weight: 600;
413 margin-bottom: 14px;
414 }
415 .blog-eyebrow-pill {
416 display: inline-flex;
417 align-items: center;
418 justify-content: center;
419 width: 18px; height: 18px;
420 border-radius: 6px;
421 background: rgba(140,109,255,0.14);
422 color: #b69dff;
423 box-shadow: inset 0 0 0 1px rgba(140,109,255,0.35);
424 }
425 .blog-hero-title {
426 font-family: var(--font-display);
427 font-size: clamp(32px, 5.5vw, 64px);
428 line-height: 1.04;
429 letter-spacing: -0.036em;
430 font-weight: 800;
431 margin: 0 0 var(--s-5);
432 color: var(--text-strong);
433 }
434 .blog-hero-grad {
435 background-image: linear-gradient(135deg, #a48bff 0%, #8c6dff 50%, #36c5d6 100%);
436 -webkit-background-clip: text;
437 background-clip: text;
438 -webkit-text-fill-color: transparent;
439 color: transparent;
440 }
441 .blog-hero-sub {
442 font-size: clamp(15px, 1.4vw, 17px);
443 color: var(--text-muted);
444 max-width: 600px;
445 margin: 0 auto;
446 line-height: 1.6;
447 }
448
449 /* ── Post list ── */
450 .blog-posts {
451 display: flex;
452 flex-direction: column;
453 gap: 0;
454 margin: 0 auto var(--s-16);
455 max-width: 820px;
456 border: 1px solid var(--border);
457 border-radius: var(--r-lg);
458 overflow: hidden;
459 background: var(--bg-elevated);
460 }
461 .blog-card {
462 padding: var(--s-8) var(--s-8);
463 border-bottom: 1px solid var(--border-subtle);
464 transition: background var(--t-fast) var(--ease);
465 }
466 .blog-card:last-child { border-bottom: none; }
467 .blog-card:hover { background: var(--bg-hover); }
468 .blog-card-meta {
469 margin-bottom: var(--s-2);
470 }
471 .blog-card-date {
472 font-family: var(--font-mono);
473 font-size: 11px;
474 text-transform: uppercase;
475 letter-spacing: 0.12em;
476 color: var(--accent);
477 font-weight: 500;
478 }
479 .blog-card-title {
480 font-family: var(--font-display);
481 font-size: clamp(18px, 2vw, 22px);
482 font-weight: 700;
483 letter-spacing: -0.022em;
484 line-height: 1.2;
485 margin: 0 0 var(--s-3);
486 color: var(--text-strong);
487 }
488 .blog-card-title a {
489 color: inherit;
490 text-decoration: none;
491 }
492 .blog-card-title a:hover {
493 color: var(--accent-hover);
494 text-decoration: none;
495 }
496 .blog-card-excerpt {
497 font-size: var(--t-sm);
498 color: var(--text-muted);
499 line-height: 1.65;
500 margin: 0 0 var(--s-4);
501 max-width: 680px;
502 }
503 .blog-card-read {
504 display: inline-flex;
505 align-items: center;
506 font-size: 13px;
507 font-weight: 600;
508 color: var(--accent);
509 text-decoration: none;
510 transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
511 gap: 4px;
512 }
513 .blog-card-read:hover {
514 color: var(--accent-hover);
515 text-decoration: none;
516 gap: 6px;
517 }
518
519 /* ── Individual post ── */
520 .blog-post-wrap {
521 max-width: 720px;
522 margin: var(--s-10) auto var(--s-16);
523 padding: 0 16px;
524 }
525 .blog-breadcrumb {
526 margin-bottom: var(--s-7);
527 }
528 .blog-breadcrumb a {
529 font-family: var(--font-mono);
530 font-size: 12px;
531 color: var(--text-muted);
532 text-decoration: none;
533 transition: color var(--t-fast) var(--ease);
534 }
535 .blog-breadcrumb a:hover { color: var(--accent); text-decoration: none; }
536 .blog-post-header {
537 margin-bottom: var(--s-10);
538 padding-bottom: var(--s-8);
539 border-bottom: 1px solid var(--border-subtle);
540 }
541 .blog-post-date {
542 display: block;
543 font-family: var(--font-mono);
544 font-size: 11px;
545 text-transform: uppercase;
546 letter-spacing: 0.14em;
547 color: var(--accent);
548 font-weight: 500;
549 margin-bottom: var(--s-4);
550 }
551 .blog-post-title {
552 font-family: var(--font-display);
553 font-size: clamp(26px, 4vw, 44px);
554 font-weight: 800;
555 letter-spacing: -0.034em;
556 line-height: 1.08;
557 margin: 0 0 var(--s-5);
558 color: var(--text-strong);
559 }
560 .blog-post-excerpt {
561 font-size: var(--t-md);
562 color: var(--text-muted);
563 line-height: 1.65;
564 margin: 0;
565 font-style: italic;
566 }
567
568 /* ── Post body typography ── */
569 .blog-post-body {
570 font-size: 16px;
571 line-height: 1.75;
572 color: var(--text);
573 }
574 .blog-post-body p {
575 margin: 0 0 var(--s-5);
576 }
577 .blog-post-body h3 {
578 font-family: var(--font-display);
579 font-size: 20px;
580 font-weight: 700;
581 letter-spacing: -0.02em;
582 margin: var(--s-10) 0 var(--s-4);
583 color: var(--text-strong);
584 line-height: 1.2;
585 }
586 .blog-post-body ul {
587 margin: 0 0 var(--s-5) var(--s-6);
588 display: flex;
589 flex-direction: column;
590 gap: var(--s-3);
591 }
592 .blog-post-body li {
593 line-height: 1.65;
594 color: var(--text);
595 }
596 .blog-post-body li strong { color: var(--text-strong); font-weight: 600; }
597 .blog-post-body code {
598 font-family: var(--font-mono);
599 font-size: 0.88em;
600 background: var(--bg-tertiary);
601 border: 1px solid var(--border-subtle);
602 padding: 1px 6px;
603 border-radius: 4px;
604 color: var(--text);
605 }
606 .blog-post-body em { color: var(--text-muted); }
607
608 /* ── Post footer ── */
609 .blog-post-footer {
610 margin-top: var(--s-12);
611 padding-top: var(--s-8);
612 border-top: 1px solid var(--border-subtle);
613 }
614 .blog-post-back {
615 font-family: var(--font-mono);
616 font-size: 12px;
617 color: var(--text-muted);
618 text-decoration: none;
619 transition: color var(--t-fast) var(--ease);
620 }
621 .blog-post-back:hover { color: var(--accent); text-decoration: none; }
622
623 @media (max-width: 640px) {
624 .blog-hero { padding: var(--s-8) var(--s-5); }
625 .blog-card { padding: var(--s-6) var(--s-5); }
626 .blog-post-title { font-size: clamp(22px, 6vw, 32px); }
627 }
628`;
629
630export default blog;
Modifiedsrc/views/layout.tsx+1−0View fileUnifiedSplit
349349 <div class="footer-col">
350350 <div class="footer-col-title">Company</div>
351351 <a href="/about">About</a>
352 <a href="/blog">Blog</a>
352353 <a href="/terms">Terms</a>
353354 <a href="/privacy">Privacy</a>
354355 <a href="/acceptable-use">Acceptable use</a>
355356