From 3a0541ccd2c0285c5934ddcb70a3733e65083e3f Mon Sep 17 00:00:00 2001 From: Vivek Date: Thu, 30 Jul 2026 13:06:30 +0530 Subject: [PATCH 1/7] fix: make the hero code pane theme-aware, not always dark The hero's components/like-button.ts pane hardcoded a near-black background and dark syntax colors unconditionally, so light theme showed what read as an unstyled black box, inconsistent with every other code window on the page and with /docs. Reproduced on the Railway origin directly, so this was a genuine defect in the shipped code, not the Cloudflare cache staleness found in the same QA pass. Drop the .stage-code overrides and let the pane pick up bg-bg-elev plus the shared .t-* token classes, the same theme-aware pattern the "whole stack, in three files" code windows already use. The removed CSS custom properties (--code-tag etc.) were dead weight: the highlight() tokenizer renders .t-* classes, not those vars, so they were never read by the markup that actually fills the pane. Closes #1182 --- website/app/page.ts | 16 +--------------- website/public/input.css | 11 ----------- 2 files changed, 1 insertion(+), 26 deletions(-) diff --git a/website/app/page.ts b/website/app/page.ts index bad516a5e..3843c22e7 100644 --- a/website/app/page.ts +++ b/website/app/page.ts @@ -158,20 +158,6 @@ export default function LandingPage() { the page a reader is invited to click, so it is sized as a control rather than as an inline badge, and it is the single surface where the brand accent appears as a hover state. */ - .stage-code { background: oklch(0.09 0.005 60); } - .stage-code > div:first-child { - background: oklch(0.13 0.006 60); - border-color: oklch(1 0 0 / 0.09); - } - .stage-code > div:first-child span:last-child { color: oklch(0.62 0.01 60); } - .stage-code pre { - color: oklch(0.95 0.005 70); - --code-tag: oklch(0.78 0.13 250); - --code-attr: oklch(0.66 0.16 150); - --code-str: oklch(0.80 0.15 145); - --code-text: oklch(0.95 0.005 70); - --code-punc: oklch(0.68 0.01 60); - } .hero-stage like-button button { gap: 0.5rem; padding: 0.7rem 1.25rem; @@ -228,7 +214,7 @@ export default function LandingPage() {
-
+
${DOTS}components/like-button.ts
${highlight(HERO_SAMPLE)}
diff --git a/website/public/input.css b/website/public/input.css index fa01a6c05..cf541f2aa 100644 --- a/website/public/input.css +++ b/website/public/input.css @@ -255,17 +255,6 @@ .t-num { color: oklch(0.55 0.12 215); } .t-punc{ color: var(--fg-muted); } .t-id { color: var(--fg); } - /* The hero stage's source pane is a dark editor in BOTH themes, so it takes - the dark token set unconditionally (the theme-scoped rules below cannot - reach it in light mode). */ -.stage-code .t-str { color: oklch(0.80 0.14 150); } -.stage-code .t-kw { color: oklch(0.76 0.14 295); } -.stage-code .t-fn { color: oklch(0.75 0.13 250); } -.stage-code .t-type{ color: oklch(0.80 0.10 200); } -.stage-code .t-num { color: oklch(0.72 0.12 215); } -.stage-code .t-id { color: oklch(0.95 0.005 70); } -.stage-code .t-punc{ color: oklch(0.68 0.01 60); } -.stage-code .t-com { color: oklch(0.55 0.01 60); font-style: italic; } :root[data-theme='dark'] .t-str { color: oklch(0.80 0.14 150); } :root[data-theme='dark'] .t-kw { color: oklch(0.76 0.14 295); } From 1a3a4ab2dcfa77706a1f6d0e076a6ed3bda2fe03 Mon Sep 17 00:00:00 2001 From: Vivek Date: Thu, 30 Jul 2026 13:15:36 +0530 Subject: [PATCH 2/7] fix: narrow the hero code pane relative to the live demo The components/like-button.ts pane was wider than the live-demo pane (1.12fr vs 0.88fr); the source is short enough that the extra width just added empty space. Flip the split to 0.92fr/1.08fr, still wide enough that the longest sample line does not wrap. --- website/app/page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/app/page.ts b/website/app/page.ts index 3843c22e7..8112b73b7 100644 --- a/website/app/page.ts +++ b/website/app/page.ts @@ -213,7 +213,7 @@ export default function LandingPage() {

-
+
${DOTS}components/like-button.ts
${highlight(HERO_SAMPLE)}
From 556f3058c3e8cce0dd57310811988db2aa5f09b1 Mon Sep 17 00:00:00 2001 From: Vivek Date: Thu, 30 Jul 2026 13:20:15 +0530 Subject: [PATCH 3/7] fix: narrow the hero code pane further 0.92fr/1.08fr still read close to even; move to 0.8fr/1.2fr so the code pane is clearly narrower than the live-demo pane while keeping them side by side. The longest sample line still fits with no wrap. --- website/app/page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/app/page.ts b/website/app/page.ts index 8112b73b7..12477e94a 100644 --- a/website/app/page.ts +++ b/website/app/page.ts @@ -213,7 +213,7 @@ export default function LandingPage() {

-
+
${DOTS}components/like-button.ts
${highlight(HERO_SAMPLE)}
From 6752b8f7a02c8b4f430819143345fbb562b9b4b4 Mon Sep 17 00:00:00 2001 From: Vivek Date: Thu, 30 Jul 2026 13:22:28 +0530 Subject: [PATCH 4/7] fix: dial back the hero pane split, shrink overall stage width The previous 0.8fr/1.2fr split overcorrected; back off to 0.88fr/1.12fr, a modest step down from 0.92fr/1.08fr rather than another large jump. Also shrink the stage's own container from max-w-6xl to max-w-5xl (a single step down Tailwind's built-in scale) per a separate request to reduce the combined LHS+RHS width, not just their split. --- website/app/page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/app/page.ts b/website/app/page.ts index 12477e94a..73e54b444 100644 --- a/website/app/page.ts +++ b/website/app/page.ts @@ -213,7 +213,7 @@ export default function LandingPage() {

-
+
${DOTS}components/like-button.ts
${highlight(HERO_SAMPLE)}
From 4f1381ad2fbc36db65d23ce4c1c936bffe050ed8 Mon Sep 17 00:00:00 2001 From: Vivek Date: Thu, 30 Jul 2026 13:24:29 +0530 Subject: [PATCH 5/7] fix: split the hero code pane and live pane evenly Use grid-cols-2 (Tailwind's built-in even-split utility) instead of an arbitrary fr ratio, so the two panes are exactly equal width. --- website/app/page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/app/page.ts b/website/app/page.ts index 73e54b444..77e9f198c 100644 --- a/website/app/page.ts +++ b/website/app/page.ts @@ -213,7 +213,7 @@ export default function LandingPage() {

-
+
${DOTS}components/like-button.ts
${highlight(HERO_SAMPLE)}
From dc43842c4591b94e802f55dbbe454a9f579f9c95 Mon Sep 17 00:00:00 2001 From: Vivek Date: Thu, 30 Jul 2026 13:32:50 +0530 Subject: [PATCH 6/7] fix: align home page code blocks with the /docs recessed surface The whole-stack code windows, the hero pane, the mock panels under 'Modern full-stack, on web standards', and the file-list blocks under 'Start where you are' all used bg-elev (a raised surface) or bg-sunken (a much deeper recess), while /docs code blocks use bg-subtle. A code block reads as recessed into the page, not raised above it, which is why /docs had it right and the home page was the outlier. Switch all four surfaces to bg-subtle. --editor-bg (the small nested pill/tag accents inside the Modern full-stack panels) is left on bg-elev so those inner elements keep visible contrast against their now-recessed container. --- website/app/page.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/website/app/page.ts b/website/app/page.ts index 77e9f198c..c67541dac 100644 --- a/website/app/page.ts +++ b/website/app/page.ts @@ -92,7 +92,7 @@ LikeButton.register('like-button'); // The panel to the right is this file, server-rendered // and upgraded in place. Click it.`; -const WIN = 'flex flex-col flex-1 m-0 min-w-0 max-w-full rounded-2xl overflow-hidden border border-border bg-bg-elev shadow-[var(--shadow)]'; +const WIN = 'flex flex-col flex-1 m-0 min-w-0 max-w-full rounded-2xl overflow-hidden border border-border bg-bg-subtle shadow-[var(--shadow)]'; const WINBAR = 'flex items-center gap-1.5 h-10 px-3.5 border-b border-border bg-[color-mix(in_oklch,var(--color-bg-sunken)_60%,var(--color-bg-elev))]'; const WINNAME = 'ml-2 font-mono font-medium text-xs leading-none text-fg-subtle'; const DOTS = html``; @@ -117,7 +117,7 @@ export default function LandingPage() { the three syntax hues need a dark override. */ :root { --editor-bg: var(--bg-elev); - --editor-sidebar-bg: var(--bg-sunken); + --editor-sidebar-bg: var(--bg-subtle); --editor-tab-bg: var(--bg-sunken); --editor-active-tab-bg: var(--bg-elev); --editor-status-bg: var(--bg-sunken); @@ -214,7 +214,7 @@ export default function LandingPage() {
-
+
${DOTS}components/like-button.ts
${highlight(HERO_SAMPLE)}
@@ -384,7 +384,7 @@ export default function LandingPage() { Full-stack

Pages + API + components

SSR pages, web components, server actions, Drizzle, streaming, and a browsable feature gallery. Auth (login, sessions, a protected route) ships as a gallery card. The default.

- 
app/page.ts
+            
app/page.ts
 components/counter.ts
 actions/posts.server.ts

             
npm create webjs@latest my-app

@@ -393,7 +393,7 @@ actions/posts.server.ts
Backend (API)

Route handlers + Database

A backend-only app, no UI or SSR. File-based route handlers, modules, middleware, rate limiting, WebSockets, a database, and a backend-features gallery.

- 
app/api/users/route.ts
+            
app/api/users/route.ts
 app/api/chat/route.ts
 middleware.ts

             
npm create webjs@latest my-api -- --template api


From d5ce7259017e6153267ec17ab1debc3b30a7a399 Mon Sep 17 00:00:00 2001
From: Vivek 
Date: Thu, 30 Jul 2026 13:37:35 +0530
Subject: [PATCH 7/7] fix: align the copy bar's base color with the code block
 surface

The INSTALL recipe (the npm create copy bar shown on the home,
why-webjs, and what-is-webjs pages, plus cta-panel.ts) mixed
bg-sunken into transparent, a darker base than the bg-subtle now used
by every code block on the same pages. Switch the base to bg-subtle,
keeping the 70% mix and backdrop-blur so it still reads as a floating
pill over the hero gradient rather than a flat card.
---
 website/lib/design/recipes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/lib/design/recipes.ts b/website/lib/design/recipes.ts
index 1221b95a7..957ac708d 100644
--- a/website/lib/design/recipes.ts
+++ b/website/lib/design/recipes.ts
@@ -64,7 +64,7 @@ export const BTN_GHOST = `${BTN_BASE} text-fg border-border-strong bg-[color-mix
  * proportionally right for something 10px taller.
  */
 export const INSTALL =
-  `flex items-center gap-2 w-fit max-w-full mx-auto px-4 py-3.5 text-left font-mono text-sm leading-[1.6] text-fg-muted rounded-2xl border border-border bg-[color-mix(in_oklch,var(--color-bg-sunken)_70%,transparent)] backdrop-blur-sm shadow-[var(--shadow-sm)]`;
+  `flex items-center gap-2 w-fit max-w-full mx-auto px-4 py-3.5 text-left font-mono text-sm leading-[1.6] text-fg-muted rounded-2xl border border-border bg-[color-mix(in_oklch,var(--color-bg-subtle)_70%,transparent)] backdrop-blur-sm shadow-[var(--shadow-sm)]`;
 
 /* ---------------------------------------------------------------------------
    Layout.