60 lines
2.0 KiB
Plaintext
60 lines
2.0 KiB
Plaintext
// Home page. Route: / (a trailing `index` segment is dropped from the route).
|
|
//
|
|
// SSR-first: the body is server-rendered. Interactivity comes from components —
|
|
// `.wrn` files under app/components, rendered on the server and hydrated in the
|
|
// browser. Mount one with data-component="<name>" and pass props as attributes.
|
|
page Home {
|
|
layout = "public"
|
|
|
|
seo {
|
|
title = "Home"
|
|
description = "Welcome to the WrNexus basic app, an SSR-first framework demo."
|
|
}
|
|
|
|
view {
|
|
<h1>{t:home.title}</h1>
|
|
<p>{t:home.intro}</p>
|
|
|
|
<!-- Tailwind utility classes (flex layout + spacing) style the page; the
|
|
mount divs are replaced by each component's server-rendered HTML. -->
|
|
<div class="flex flex-wrap items-center gap-3 my-4">
|
|
<div data-component="counter" start="0" label="Count"></div>
|
|
<!-- The label is localized: `{t:key}` in a prop is resolved per-request. -->
|
|
<div data-component="counter" start="10" label="{t:nav.dashboard}"></div>
|
|
</div>
|
|
|
|
<!-- This box is styled entirely with theme tokens (var(--wrn-*)), so it
|
|
restyles instantly when the theme changes. -->
|
|
<div class="themed-box">
|
|
This box uses theme tokens. Current theme controls its colors.
|
|
<button type="button" data-wrn-theme-toggle class="theme-toggle">Toggle theme</button>
|
|
</div>
|
|
|
|
<p><a class="text-red-600 hover:underline" href="/about">About</a></p>
|
|
<p><a class="hover:underline" href="/language-tools">Language server playground</a></p>
|
|
}
|
|
|
|
style {
|
|
.themed-box {
|
|
background: var(--wrn-color-surface);
|
|
color: var(--wrn-color-text);
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: var(--wrn-radius);
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
.theme-toggle {
|
|
background: var(--wrn-color-primary);
|
|
color: var(--wrn-color-primary-contrast);
|
|
border: 0;
|
|
border-radius: var(--wrn-radius-sm);
|
|
padding: 0.5rem 0.9rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|