first commit

2026-07-12 15:55:18 +05:30
commit ee98026cc5
404 changed files with 44522 additions and 0 deletions
@@ -0,0 +1,58 @@
+// 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(--wire-*)), so it
+         restyles instantly when the theme changes. -->
+    <div class="themed-box">
+      This box uses theme tokens. Current theme controls its colors.
+      <button data-wire-theme-toggle class="theme-toggle">Toggle theme</button>
+    </div>
+
+    <p><a class="text-red-600 hover:underline" href="/about">About</a></p>
+  }
+
+  style {
+    .themed-box {
+      background: var(--wire-color-surface);
+      color: var(--wire-color-text);
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius);
+      padding: 1rem;
+      margin: 1rem 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+    }
+    .theme-toggle {
+      background: var(--wire-color-primary);
+      color: var(--wire-color-primary-contrast);
+      border: 0;
+      border-radius: var(--wire-radius-sm);
+      padding: 0.5rem 0.9rem;
+      cursor: pointer;
+    }
+  }
+}