ClintchizandClaude Opus 5
69020b2555
Expands 3.1 and 3.2 so the work can be done without re-deriving anything. 3.1 now records what 0.8.6 already fixed, separated into the ten components that were miswired and the five that gained outputs they had been firing undeclared, with the caveat that Map's three were converted but never confirmed in a browser. For the 22 that remain it adds the finding that changes the decision: all nine are pure scaffolds with no state, functions or handlers, and five of them duplicate a component that already works -- FileUpload against FileInput and FileUploadProgress, Toast and ToastNotifications against Toaster, AdvancedDatePicker against DatePicker, AdvancedRangeSlider against RangeSlider. Superseding those is a migration entry rather than new code, and leaves Chart, TreeView, Confetti and CopyMarkup as the only ones needing to be built. 3.2 corrects the scaffold count from 23 to 28; the earlier figure used a looser rule. Nine of the 28 are the 3.1 components, so the two items must be planned together, and several of the rest are primitives that need only their styles moved out of ui.css rather than any behaviour. Also corrects the dead-output component count from 11 to 9 in both documents. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
64 lines
3.9 KiB
Plaintext
64 lines
3.9 KiB
Plaintext
// Home page (route: /). SSR-first: the view is server-rendered, then components
|
|
// (.wrn files under app/components) hydrate in the browser. Styled with Tailwind.
|
|
page Home {
|
|
seo {
|
|
title = "Home"
|
|
description = "web — built with WrNexus, an SSR-first Bun framework."
|
|
}
|
|
|
|
view {
|
|
<main class="relative min-h-screen overflow-hidden bg-white text-slate-900 dark:bg-[#0b0f1e] dark:text-slate-100">
|
|
<div aria-hidden="true" class="pointer-events-none absolute inset-x-0 -top-40 mx-auto h-96 max-w-2xl rounded-full bg-indigo-500/20 blur-3xl"></div>
|
|
|
|
<div class="relative mx-auto flex min-h-screen max-w-3xl flex-col px-6">
|
|
<header class="flex items-center justify-between py-6">
|
|
<span class="flex items-center gap-2.5 font-semibold tracking-tight">
|
|
<span class="grid h-7 w-7 place-items-center rounded-md bg-gradient-to-br from-indigo-500 to-violet-600 text-sm font-bold text-white">W</span>
|
|
web
|
|
</span>
|
|
<button data-wire-theme-toggle class="rounded-md border border-slate-200 px-3 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:text-slate-900 dark:border-white/10 dark:text-slate-400 dark:hover:border-white/20 dark:hover:text-white">
|
|
Toggle theme
|
|
</button>
|
|
</header>
|
|
|
|
<section class="flex flex-1 flex-col items-center justify-center py-16 text-center">
|
|
<p class="font-mono text-xs uppercase tracking-[0.2em] text-indigo-500 dark:text-indigo-400">SSR-first · Bun-native</p>
|
|
|
|
<h1 class="mt-5 text-4xl font-bold leading-[1.1] tracking-tight sm:text-6xl">
|
|
Server-rendered.<br />
|
|
Instantly <span class="bg-gradient-to-r from-indigo-500 to-violet-500 bg-clip-text text-transparent">interactive</span>.
|
|
</h1>
|
|
|
|
<p class="mt-5 max-w-md text-base leading-relaxed text-slate-600 dark:text-slate-400">
|
|
web runs on WrNexus — write <code class="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[0.85em] text-slate-800 dark:bg-white/10 dark:text-slate-200">.wrn</code> components, ship no client boilerplate, and let the server do the work.
|
|
</p>
|
|
|
|
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
|
|
<a href="/about" class="rounded-lg bg-slate-900 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-slate-700 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200">Get started</a>
|
|
<a href="/api/hello" class="rounded-lg border border-slate-200 px-5 py-2.5 text-sm font-medium text-slate-700 transition hover:border-slate-300 dark:border-white/10 dark:text-slate-300 dark:hover:border-white/20">View API</a>
|
|
</div>
|
|
|
|
<div class="mt-14 w-full max-w-md rounded-2xl border border-slate-200 bg-white p-6 text-left shadow-sm dark:border-white/10 dark:bg-white/5">
|
|
<div class="flex items-center gap-2 font-mono text-xs text-slate-400">
|
|
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
|
|
live · hydrated on the server
|
|
</div>
|
|
<div class="mt-4 flex items-center justify-between gap-4">
|
|
<div data-component="counter" start="0" label="Clicks"></div>
|
|
<span class="max-w-[10rem] text-right text-xs leading-snug text-slate-500">This button works. You wrote zero client JavaScript.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-10 font-mono text-xs text-slate-400 dark:text-slate-600">
|
|
edit <span class="text-slate-600 dark:text-slate-400">app/pages/index.wrn</span> to make it yours
|
|
</p>
|
|
</section>
|
|
|
|
<footer class="border-t border-slate-100 py-6 text-center text-xs text-slate-400 dark:border-white/5 dark:text-slate-600">
|
|
Built with <a href="https://www.npmjs.com/package/@wrnexus/cli" class="text-slate-600 underline-offset-2 hover:underline dark:text-slate-400">WrNexus</a>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
}
|
|
}
|