fix: restore premium marketing homepage

This commit is contained in:
2026-07-12 23:55:27 +05:30
parent d150e99809
commit cc5ca221e4
12 changed files with 307 additions and 12 deletions
+18 -6
View File
@@ -1,15 +1,27 @@
page Home {
seo {
title = "Home"
title = "WRNexusJS — Bun-native server-first framework"
description = "WRNexusJS is a Bun-native, SSR-first full-stack framework using the .wrn component language."
canonical = "https://wrnexusjs.dev/"
}
view {
<a class="skip-link" href="#main">Skip to content</a>
<div class="docs-shell">
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/tutorial">Tutorial</a><a href="/packages">Packages</a><a href="/guides/project-structure">Guides</a><a href="/language">.wrn language</a><a href="/examples">Examples</a><a href="/search">Search</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.15</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/tutorial">Tutorial</a><a href="/packages">Packages</a><a href="/guides/project-structure">Guides</a><a href="/language">.wrn language</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
<main id="main" class="portal-main"><section class="hero portal-hero"><span class="status status-beta"><span aria-hidden="true">●</span> Private Developer Preview</span><p class="eyebrow">WRNexusJS v0.2.15</p><h1>Build from the server.<br><em>Ship only what matters.</em></h1><p>WRNexusJS is an SSR-first, Bun-native full-stack framework. Build typed pages, APIs, validated forms, realtime rooms, secure sessions, workspaces, and optional mobile experiences with the <code>.wrn</code> component language.</p><div class="actions"><a class="primary" href="/access">Request preview access</a><a href="/getting-started">Read the preview docs</a></div><p class="access-note">Packages require approved private-registry access. No public installation command is currently available.</p></section>
<div class="docs-shell marketing-shell">
<header class="topbar marketing-header"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.15</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme">◐</button></div></header>
<div class="marketing-mobile-nav"><details><summary>Menu</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/examples">Examples</a></nav></details></div>
<main id="main" class="marketing-main"><section class="hero marketing-hero"><span class="status status-beta"><span aria-hidden="true">●</span> Private Developer Preview</span><p class="eyebrow">WRNexusJS v0.2.15</p><h1>Build from the server.<br><em>Ship only what matters.</em></h1><p>WRNexusJS is an SSR-first, Bun-native full-stack framework. Build typed pages, APIs, validated forms, realtime rooms, secure sessions, workspaces, and optional mobile experiences with the <code>.wrn</code> component language.</p><div class="actions"><a class="primary" href="/access">Request preview access</a><a href="/getting-started">Read the preview docs</a></div><p class="access-note">Private developer preview. Request access to the package registry.</p><div class="code-window"><span>app/pages/dashboard.wrn</span><pre><code>page Dashboard &#123;
ssr &#123; api tasks GET /api/tasks &#123; return tasks &#125; &#125;
view &#123;
&lt;main&gt;
&lt;h1&gt;Tasks&lt;/h1&gt;
&#123;#each tasks as task&#125;
&lt;article&gt;&#123;task.title&#125;&lt;/article&gt;
&#123;:empty&#125;
&lt;p&gt;Nothing waiting.&lt;/p&gt;
&#123;/each&#125;
&lt;/main&gt;
&#125;
&#125;</code></pre></div></section>
<section><h2>Why WRNexusJS</h2><div class="feature-grid"><article><h3>Server-first rendering</h3><p>Useful HTML is rendered first; reactive scopes hydrate only where declared.</p></article><article><h3><code>.wrn</code> components</h3><p>Pages, layouts, props, state, events, server loops, and directives live in a focused language.</p></article><article><h3>Bun-native runtime</h3><p>The runtime is Bun. Node compatibility is not claimed.</p></article><article><h3>Typed data and validation</h3><p>Database queries and shared validation connect server routes to forms.</p></article><article><h3>Integrated security</h3><p>CSP, CSRF, sessions, authorization, encryption, and safe output are framework primitives.</p></article><article><h3>Realtime and workspaces</h3><p>Rooms, Redis pub/sub, and multi-app gateways support live and isolated applications.</p></article></div></section>
<section><h2>A small full-stack flow</h2><pre><code>// app/schemas/contact.ts
import &#123; v &#125; from "@wrnexus/validation";
@@ -26,7 +38,7 @@ export const POST = async (ctx) =&gt; &#123;
<section><h2>Production proof</h2><div class="feature-grid"><article><h3><a href="https://workroot.in/">WorkRoot</a></h3><p>Public creator/company site and approved WRNexusJS production showcase.</p></article><article><h3><a href="https://wrnexusjs.dev/">wrnexusjs.dev</a></h3><p>This documentation application runs WRNexusJS 0.2.15.</p></article></div><p><a href="/showcase">View deployment notes and showcase status →</a></p></section>
<section><h2>Capability status</h2><div class="table-wrap"><table><thead><tr><th>Capability</th><th>Status</th><th>Details</th></tr></thead><tbody><tr><td>SSR, routing, compiler, APIs</td><td>Preview</td><td>Installed in 0.2.15; public support policy pending.</td></tr><tr><td>Mobile/native</td><td>Experimental</td><td>Capacitor compatibility and native generation have platform limitations.</td></tr><tr><td>Durable queues</td><td>Experimental</td><td>Production durability requires an appropriate driver strategy.</td></tr></tbody></table></div></section>
<section><h2>Continue exploring</h2><div class="actions"><a href="/packages">Explore 25 packages</a><a href="/changelog">Release notes</a><a href="/roadmap">Roadmap</a><a href="/support">Support and access</a></div></section></main>
<footer><p><strong>WRNexusJS 0.2.15</strong> · Private Developer Preview · Bun-native</p><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p>WRNexusJS is created by <a href="https://workroot.in/">WorkRoot</a>. WRNexus is a separate SaaS product.</p></footer>
<footer><p><strong>WRNexusJS 0.2.15</strong> · Bun-native · Created by <a href="https://workroot.in/">WorkRoot</a></p><nav aria-label="Footer"><a href="/getting-started">Documentation</a><a href="/roadmap">Roadmap</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav></footer>
</div>
}
}
+225
View File
@@ -1040,3 +1040,228 @@ footer a {
padding-top: 30px;
}
}
/* Marketing shell restored from the visual system at 5eea460. */
.marketing-shell {
background:
radial-gradient(circle at 50% 18%, rgba(99, 102, 241, 0.12), transparent 30rem),
radial-gradient(circle at 92% 88%, rgba(168, 85, 247, 0.1), transparent 32rem), var(--bg);
}
.marketing-header {
grid-template-columns: 1fr auto 1fr;
}
.marketing-header > nav {
justify-self: center;
}
.marketing-mobile-nav {
display: none;
}
.marketing-main {
width: 100%;
}
.marketing-main .marketing-hero {
min-height: 860px;
padding: 96px clamp(20px, 5vw, 80px) 120px;
}
.marketing-hero .status {
display: none;
}
.marketing-hero .eyebrow {
margin-bottom: 0.5rem;
}
.marketing-hero h1 {
max-width: 1080px;
font-size: clamp(4rem, 7.5vw, 7.5rem);
}
.marketing-hero > p:not(.access-note) {
max-width: 760px;
}
.marketing-hero .access-note {
width: auto;
margin-top: 1rem;
font-size: 0.78rem !important;
}
.marketing-hero .code-window {
width: min(760px, 100%);
margin-top: 3.5rem;
border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.36);
}
.marketing-hero .code-window > span::before {
content: "● ● ● ";
color: #64748b;
letter-spacing: 0.15em;
}
.marketing-section,
.marketing-cta {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
padding: clamp(5rem, 9vw, 9rem) 0;
border-top: 1px solid var(--border);
}
.marketing-section > .eyebrow,
.marketing-cta > .eyebrow {
display: block;
margin-bottom: 1rem;
}
.marketing-section > h2,
.marketing-cta h2 {
max-width: 800px;
margin: 0 0 2.5rem;
font-size: clamp(2.4rem, 5vw, 4.8rem);
line-height: 1.03;
letter-spacing: -0.055em;
}
.marketing-main .feature-grid {
padding-bottom: 0;
}
.marketing-main .feature-grid article {
min-height: 220px;
padding: 2rem;
box-shadow: none;
}
.marketing-main .feature-grid article b {
color: var(--brand);
font-size: 0.72rem;
letter-spacing: 0.12em;
}
.marketing-main > section:nth-child(3) {
display: grid;
grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
gap: clamp(2rem, 7vw, 7rem);
align-items: start;
}
.marketing-main > section:nth-child(3) > h2 {
margin-top: 1.2rem;
}
.marketing-main > section:nth-child(3) > pre {
margin: 0;
}
.marketing-main .lifecycle {
grid-template-columns: repeat(5, 1fr);
}
.marketing-main .lifecycle li {
min-height: 150px;
padding: 1.25rem;
background: linear-gradient(
145deg,
var(--surface),
color-mix(in srgb, var(--brand) 5%, var(--surface))
);
}
.marketing-main .lifecycle li b {
color: var(--brand);
font-size: 0.7rem;
}
.marketing-main > section:nth-child(5) .feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.marketing-main > section:nth-child(5) .feature-grid article {
min-height: 260px;
}
.marketing-main > section:nth-child(6) .table-wrap {
background: var(--surface);
}
.marketing-main > section:nth-child(7) {
text-align: center;
border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
border-radius: 24px;
padding-inline: 2rem;
background: radial-gradient(
circle at 50% 0,
color-mix(in srgb, var(--brand) 14%, transparent),
transparent 65%
);
}
.marketing-main > section:nth-child(7) h2 {
margin-inline: auto;
}
.marketing-main > section:nth-child(7) .actions {
justify-content: center;
}
@media (max-width: 900px) {
.marketing-header {
grid-template-columns: 1fr auto;
}
.marketing-header > nav {
display: none;
}
.marketing-header .topbar-actions {
display: flex;
}
.marketing-header .preview-pill {
display: none;
}
.marketing-mobile-nav {
display: block;
border-bottom: 1px solid var(--border);
padding: 0.8rem 20px;
background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.marketing-mobile-nav summary {
cursor: pointer;
font-weight: 700;
}
.marketing-mobile-nav nav {
display: grid;
gap: 0.8rem;
padding: 1rem 0 0.35rem;
}
.marketing-main .lifecycle {
grid-template-columns: repeat(2, 1fr);
}
.marketing-main > section:nth-child(3) {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.marketing-main .marketing-hero {
min-height: auto;
padding: 72px 20px 86px;
}
.marketing-hero h1 {
width: calc(100vw - 40px);
max-width: calc(100vw - 40px);
font-size: clamp(2.35rem, 11vw, 3rem);
line-height: 0.98;
overflow-wrap: normal;
}
.marketing-hero h1 em {
display: block;
max-width: 100%;
font-size: 0.94em;
}
.marketing-hero > p,
.marketing-hero .actions {
width: calc(100vw - 40px);
max-width: calc(100vw - 40px);
}
.marketing-hero .actions {
justify-content: center;
}
.marketing-hero .actions a {
width: 100%;
}
.marketing-hero .code-window {
margin-top: 2.5rem;
}
.marketing-hero .code-window pre {
max-height: 360px;
}
.marketing-section,
.marketing-cta {
width: calc(100% - 40px);
padding-block: 4.5rem;
}
.marketing-section > h2,
.marketing-cta h2 {
font-size: clamp(2.2rem, 11vw, 3.2rem);
}
.marketing-main .feature-grid,
.marketing-main > section:nth-child(5) .feature-grid,
.marketing-main .lifecycle {
grid-template-columns: 1fr;
}
}
+19
View File
@@ -0,0 +1,19 @@
# Premium homepage recovery visual audit
Date: 2026-07-12
- Current source commit before recovery: `d150e99`
- Last-good visual source: `5eea460`
- Recovery branch: `recovery/restore-premium-homepage`
- Production build: passed, 67 page routes
- HTTP smoke audit: 72 discovery/static URLs passed
- Internal link smoke audit: 64 unique internal paths passed
Screenshots cover 1440×900, 1280×800, 1024×768, 768×1024, 430×932,
390×844, and 360×800. Microsoft Edge headless enforces a minimum CSS layout
viewport near 500px; the three narrower bitmap captures therefore crop that
minimum-width layout. The site CSS still applies explicit `100vw` bounds at the
mobile breakpoint, but owner approval should include a real-device check before
deployment.
No deployment or production push was performed.
Binary file not shown.

After

Width:  |  Height:  |  Size: 452 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 506 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 567 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 173 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 349 KiB

+45 -6
View File
@@ -47,6 +47,45 @@ function shell(title: string, description: string, body: string, section = "Docu
}`;
}
function marketingShell(description: string, body: string) {
const codeCard = `<div class="code-window"><span>app/pages/dashboard.wrn</span><pre><code>page Dashboard &#123;
ssr &#123; api tasks GET /api/tasks &#123; return tasks &#125; &#125;
view &#123;
&lt;main&gt;
&lt;h1&gt;Tasks&lt;/h1&gt;
&#123;#each tasks as task&#125;
&lt;article&gt;&#123;task.title&#125;&lt;/article&gt;
&#123;:empty&#125;
&lt;p&gt;Nothing waiting.&lt;/p&gt;
&#123;/each&#125;
&lt;/main&gt;
&#125;
&#125;</code></pre></div>`;
const marketingBody = body
.replace("hero portal-hero", "hero marketing-hero")
.replace(
"Packages require approved private-registry access. No public installation command is currently available.",
"Private developer preview. Request access to the package registry.",
)
.replace("</section>", `${codeCard}</section>`);
return `page Home {
seo {
title = "WRNexusJS — Bun-native server-first framework"
description = "${description.replaceAll('"', "'")}"
canonical = "https://wrnexusjs.dev/"
}
view {
<a class="skip-link" href="#main">Skip to content</a>
<div class="docs-shell marketing-shell">
<header class="topbar marketing-header"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v${version}</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme">◐</button></div></header>
<div class="marketing-mobile-nav"><details><summary>Menu</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/examples">Examples</a></nav></details></div>
<main id="main" class="marketing-main">${marketingBody}</main>
<footer><p><strong>WRNexusJS ${version}</strong> · Bun-native · Created by <a href="https://workroot.in/">WorkRoot</a></p><nav aria-label="Footer"><a href="/getting-started">Documentation</a><a href="/roadmap">Roadmap</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav></footer>
</div>
}
}`;
}
const slugs: Record<string, string> = {
Home: "",
Packages: "/packages",
@@ -72,18 +111,18 @@ function page(route: string, title: string, description: string, body: string, s
}
const status = `<span class="status status-beta"><span aria-hidden="true">●</span> Private Developer Preview</span>`;
page(
"/",
"Home",
"WRNexusJS is a Bun-native, SSR-first full-stack framework using the .wrn component language.",
`<section class="hero portal-hero">${status}<p class="eyebrow">WRNexusJS v${version}</p><h1>Build from the server.<br><em>Ship only what matters.</em></h1><p>WRNexusJS is an SSR-first, Bun-native full-stack framework. Build typed pages, APIs, validated forms, realtime rooms, secure sessions, workspaces, and optional mobile experiences with the <code>.wrn</code> component language.</p><div class="actions"><a class="primary" href="/access">Request preview access</a><a href="/getting-started">Read the preview docs</a></div><p class="access-note">Packages require approved private-registry access. No public installation command is currently available.</p></section>
writeFileSync(
join(pages, "index.wrn"),
marketingShell(
"WRNexusJS is a Bun-native, SSR-first full-stack framework using the .wrn component language.",
`<section class="hero portal-hero">${status}<p class="eyebrow">WRNexusJS v${version}</p><h1>Build from the server.<br><em>Ship only what matters.</em></h1><p>WRNexusJS is an SSR-first, Bun-native full-stack framework. Build typed pages, APIs, validated forms, realtime rooms, secure sessions, workspaces, and optional mobile experiences with the <code>.wrn</code> component language.</p><div class="actions"><a class="primary" href="/access">Request preview access</a><a href="/getting-started">Read the preview docs</a></div><p class="access-note">Packages require approved private-registry access. No public installation command is currently available.</p></section>
<section><h2>Why WRNexusJS</h2><div class="feature-grid"><article><h3>Server-first rendering</h3><p>Useful HTML is rendered first; reactive scopes hydrate only where declared.</p></article><article><h3><code>.wrn</code> components</h3><p>Pages, layouts, props, state, events, server loops, and directives live in a focused language.</p></article><article><h3>Bun-native runtime</h3><p>The runtime is Bun. Node compatibility is not claimed.</p></article><article><h3>Typed data and validation</h3><p>Database queries and shared validation connect server routes to forms.</p></article><article><h3>Integrated security</h3><p>CSP, CSRF, sessions, authorization, encryption, and safe output are framework primitives.</p></article><article><h3>Realtime and workspaces</h3><p>Rooms, Redis pub/sub, and multi-app gateways support live and isolated applications.</p></article></div></section>
<section><h2>A small full-stack flow</h2>${code(`// app/schemas/contact.ts\nimport { v } from "@wrnexus/validation";\nexport default v.object({ email: v.string().email(), message: v.string().min(10) });\n\n// app/api/contacts.ts\nimport schema from "../schemas/contact";\nimport { parseBody } from "@wrnexus/validation";\nexport const POST = async (ctx) => {\n const result = await parseBody(schema, ctx.req);\n return result.ok ? Response.json({ ok: true }, { status: 201 }) : result.response;\n};`)}</section>
<section><h2>Request lifecycle</h2><ol class="lifecycle"><li><strong>Request</strong><span>Security headers and request limits</span></li><li><strong>Middleware</strong><span>Authentication, policy, and context</span></li><li><strong>File route</strong><span>Page or API handler</span></li><li><strong>Compiler + SSR</strong><span>Safe HTML and scoped runtime</span></li><li><strong>Response</strong><span>HTML, JSON, stream, or realtime upgrade</span></li></ol></section>
<section><h2>Production proof</h2><div class="feature-grid"><article><h3><a href="https://workroot.in/">WorkRoot</a></h3><p>Public creator/company site and approved WRNexusJS production showcase.</p></article><article><h3><a href="https://wrnexusjs.dev/">wrnexusjs.dev</a></h3><p>This documentation application runs WRNexusJS ${version}.</p></article></div><p><a href="/showcase">View deployment notes and showcase status →</a></p></section>
<section><h2>Capability status</h2><div class="table-wrap"><table><thead><tr><th>Capability</th><th>Status</th><th>Details</th></tr></thead><tbody><tr><td>SSR, routing, compiler, APIs</td><td>Preview</td><td>Installed in ${version}; public support policy pending.</td></tr><tr><td>Mobile/native</td><td>Experimental</td><td>Capacitor compatibility and native generation have platform limitations.</td></tr><tr><td>Durable queues</td><td>Experimental</td><td>Production durability requires an appropriate driver strategy.</td></tr></tbody></table></div></section>
<section><h2>Continue exploring</h2><div class="actions"><a href="/packages">Explore 25 packages</a><a href="/changelog">Release notes</a><a href="/roadmap">Roadmap</a><a href="/support">Support and access</a></div></section>`,
"Framework",
),
);
page(