@pylonsync/create-pylon 0.3.266 → 0.3.268
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/create-pylon.js +77 -14
- package/package.json +1 -1
- package/templates/b2b/AGENTS.md +61 -0
- package/templates/b2b/README.md +62 -0
- package/templates/b2b/app/auth-form.tsx +142 -0
- package/templates/b2b/app/dashboard/dashboard-client.tsx +192 -0
- package/templates/b2b/app/dashboard/page.tsx +63 -0
- package/templates/b2b/app/error.tsx +43 -0
- package/templates/b2b/app/globals.css +139 -0
- package/templates/b2b/app/layout.tsx +71 -0
- package/templates/b2b/app/login/page.tsx +47 -0
- package/templates/b2b/app/not-found.tsx +29 -0
- package/templates/b2b/app/page.tsx +114 -0
- package/templates/b2b/app/robots.ts +12 -0
- package/templates/b2b/app/signup/page.tsx +44 -0
- package/templates/b2b/app/sitemap.ts +27 -0
- package/templates/b2b/app.ts +179 -0
- package/templates/b2b/components/ui/button.tsx +56 -0
- package/templates/b2b/components/ui/card.tsx +90 -0
- package/templates/b2b/components.json +20 -0
- package/templates/b2b/functions/_keep.ts +13 -0
- package/templates/b2b/gitignore +10 -0
- package/templates/b2b/lib/utils.ts +10 -0
- package/templates/b2b/package.json +33 -0
- package/templates/b2b/tsconfig.json +18 -0
- package/templates/barebones/AGENTS.md +61 -0
- package/templates/barebones/README.md +45 -0
- package/templates/barebones/app/error.tsx +43 -0
- package/templates/barebones/app/globals.css +139 -0
- package/templates/barebones/app/items-client.tsx +96 -0
- package/templates/barebones/app/layout.tsx +27 -0
- package/templates/barebones/app/not-found.tsx +29 -0
- package/templates/barebones/app/page.tsx +28 -0
- package/templates/barebones/app/robots.ts +12 -0
- package/templates/barebones/app/sitemap.ts +27 -0
- package/templates/barebones/app.ts +55 -0
- package/templates/barebones/components/ui/button.tsx +56 -0
- package/templates/barebones/components/ui/card.tsx +90 -0
- package/templates/barebones/components.json +20 -0
- package/templates/barebones/functions/_keep.ts +13 -0
- package/templates/barebones/gitignore +10 -0
- package/templates/barebones/lib/utils.ts +10 -0
- package/templates/barebones/package.json +33 -0
- package/templates/barebones/tsconfig.json +18 -0
- package/templates/chat/AGENTS.md +61 -0
- package/templates/chat/README.md +51 -0
- package/templates/chat/app/chat-client.tsx +113 -0
- package/templates/chat/app/error.tsx +43 -0
- package/templates/chat/app/globals.css +139 -0
- package/templates/chat/app/layout.tsx +25 -0
- package/templates/chat/app/not-found.tsx +29 -0
- package/templates/chat/app/page.tsx +26 -0
- package/templates/chat/app/robots.ts +12 -0
- package/templates/chat/app/sitemap.ts +27 -0
- package/templates/chat/app.ts +59 -0
- package/templates/chat/components/ui/button.tsx +56 -0
- package/templates/chat/components/ui/card.tsx +90 -0
- package/templates/chat/components.json +20 -0
- package/templates/chat/functions/_keep.ts +13 -0
- package/templates/chat/gitignore +10 -0
- package/templates/chat/lib/utils.ts +10 -0
- package/templates/chat/package.json +33 -0
- package/templates/chat/tsconfig.json +18 -0
- package/templates/consumer/AGENTS.md +61 -0
- package/templates/consumer/README.md +52 -0
- package/templates/consumer/app/error.tsx +43 -0
- package/templates/consumer/app/feed-client.tsx +154 -0
- package/templates/consumer/app/globals.css +139 -0
- package/templates/consumer/app/layout.tsx +27 -0
- package/templates/consumer/app/not-found.tsx +29 -0
- package/templates/consumer/app/page.tsx +27 -0
- package/templates/consumer/app/robots.ts +12 -0
- package/templates/consumer/app/sitemap.ts +27 -0
- package/templates/consumer/app.ts +89 -0
- package/templates/consumer/components/ui/button.tsx +56 -0
- package/templates/consumer/components/ui/card.tsx +90 -0
- package/templates/consumer/components.json +20 -0
- package/templates/consumer/functions/_keep.ts +13 -0
- package/templates/consumer/gitignore +10 -0
- package/templates/consumer/lib/utils.ts +10 -0
- package/templates/consumer/package.json +33 -0
- package/templates/consumer/tsconfig.json +18 -0
- package/templates/ssr/app.ts +3 -0
- package/templates/todo/AGENTS.md +61 -0
- package/templates/todo/README.md +59 -0
- package/templates/todo/app/error.tsx +43 -0
- package/templates/todo/app/globals.css +139 -0
- package/templates/todo/app/layout.tsx +31 -0
- package/templates/todo/app/not-found.tsx +29 -0
- package/templates/todo/app/page.tsx +37 -0
- package/templates/todo/app/robots.ts +12 -0
- package/templates/todo/app/sitemap.ts +27 -0
- package/templates/todo/app/todo-app.tsx +133 -0
- package/templates/todo/app.ts +72 -0
- package/templates/todo/components/ui/button.tsx +56 -0
- package/templates/todo/components/ui/card.tsx +90 -0
- package/templates/todo/components.json +20 -0
- package/templates/todo/functions/_keep.ts +13 -0
- package/templates/todo/gitignore +10 -0
- package/templates/todo/lib/utils.ts +10 -0
- package/templates/todo/package.json +33 -0
- package/templates/todo/tsconfig.json +18 -0
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import React, { Suspense, use } from "react";
|
|
2
|
+
import {
|
|
3
|
+
type Metadata,
|
|
4
|
+
type PageProps,
|
|
5
|
+
type ServerData,
|
|
6
|
+
} from "@pylonsync/react";
|
|
7
|
+
import { Workspace } from "./dashboard-client";
|
|
8
|
+
|
|
9
|
+
export const metadata: Metadata = {
|
|
10
|
+
title: "Dashboard — __APP_NAME__",
|
|
11
|
+
robots: "noindex",
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
interface User {
|
|
15
|
+
id: string;
|
|
16
|
+
email: string;
|
|
17
|
+
displayName?: string;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Reads the signed-in user DURING the server render (owner-scoped: only your
|
|
21
|
+
// own row). The org list + the active org's projects load client-side, since
|
|
22
|
+
// they depend on the session's selected tenant.
|
|
23
|
+
function Greeting({
|
|
24
|
+
serverData,
|
|
25
|
+
userId,
|
|
26
|
+
}: {
|
|
27
|
+
serverData: ServerData;
|
|
28
|
+
userId: string;
|
|
29
|
+
}) {
|
|
30
|
+
const user = use(serverData.get<User>("User", userId));
|
|
31
|
+
return (
|
|
32
|
+
<p className="text-sm text-muted-foreground">
|
|
33
|
+
Signed in as{" "}
|
|
34
|
+
<span className="font-medium text-foreground">
|
|
35
|
+
{user?.displayName || user?.email || "you"}
|
|
36
|
+
</span>
|
|
37
|
+
.
|
|
38
|
+
</p>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// `app/dashboard/page.tsx` → `/dashboard`.
|
|
43
|
+
export default function DashboardPage({
|
|
44
|
+
auth,
|
|
45
|
+
response,
|
|
46
|
+
serverData,
|
|
47
|
+
}: PageProps) {
|
|
48
|
+
// Server-side auth gate: anonymous requests get a 307 to /login before any
|
|
49
|
+
// HTML. Must fire in the synchronous shell render, not inside <Suspense> —
|
|
50
|
+
// and return immediately so nothing renders below the already-sent redirect.
|
|
51
|
+
if (!auth.user_id) {
|
|
52
|
+
response.redirect("/login");
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
55
|
+
return (
|
|
56
|
+
<div className="space-y-6">
|
|
57
|
+
<Suspense fallback={null}>
|
|
58
|
+
<Greeting serverData={serverData} userId={auth.user_id!} />
|
|
59
|
+
</Suspense>
|
|
60
|
+
<Workspace />
|
|
61
|
+
</div>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type ErrorBoundaryProps } from "@pylonsync/react";
|
|
3
|
+
import { Button } from "@/components/ui/button";
|
|
4
|
+
|
|
5
|
+
// `app/error.tsx` → the error boundary for this segment. It catches a throw
|
|
6
|
+
// in any page/layout below it and renders at HTTP 500. It's HYDRATED, so
|
|
7
|
+
// this is a real interactive client component: `reset()` re-attempts the
|
|
8
|
+
// route, and useState/onClick work. The thrown error reaches the client as
|
|
9
|
+
// `{ message, digest }` only — the stack stays in the dev overlay
|
|
10
|
+
// (PYLON_DEV_MODE) and the server logs, never in the page.
|
|
11
|
+
export default function Error({ error, reset }: ErrorBoundaryProps) {
|
|
12
|
+
const [tries, setTries] = React.useState(0);
|
|
13
|
+
return (
|
|
14
|
+
<div className="space-y-6">
|
|
15
|
+
<section>
|
|
16
|
+
<h1 className="text-2xl font-semibold tracking-tight">
|
|
17
|
+
Something went wrong
|
|
18
|
+
</h1>
|
|
19
|
+
<p className="mt-2 text-muted-foreground">{error.message}</p>
|
|
20
|
+
{error.digest ? (
|
|
21
|
+
<p className="mt-1 text-xs text-muted-foreground/70">
|
|
22
|
+
Reference: <code>{error.digest}</code>
|
|
23
|
+
</p>
|
|
24
|
+
) : null}
|
|
25
|
+
</section>
|
|
26
|
+
<div className="flex items-center gap-3">
|
|
27
|
+
<Button
|
|
28
|
+
onClick={() => {
|
|
29
|
+
setTries((n) => n + 1);
|
|
30
|
+
reset();
|
|
31
|
+
}}
|
|
32
|
+
>
|
|
33
|
+
Try again
|
|
34
|
+
</Button>
|
|
35
|
+
{tries > 0 ? (
|
|
36
|
+
<span className="text-sm text-muted-foreground">
|
|
37
|
+
Retried {tries} {tries === 1 ? "time" : "times"}
|
|
38
|
+
</span>
|
|
39
|
+
) : null}
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "tw-animate-css";
|
|
3
|
+
|
|
4
|
+
/* Tailwind v4 scans these globs for class names. `components/` is here so
|
|
5
|
+
shadcn/ui component classes are seen — add more @source lines if you put
|
|
6
|
+
markup elsewhere. */
|
|
7
|
+
@source "../app/**/*.{tsx,ts,jsx,js}";
|
|
8
|
+
@source "../components/**/*.{tsx,ts,jsx,js}";
|
|
9
|
+
|
|
10
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
11
|
+
|
|
12
|
+
/* shadcn/ui design tokens (new-york / zinc). Edit these to re-theme the
|
|
13
|
+
whole app; `npx shadcn@latest add <component>` drops new components that
|
|
14
|
+
consume the same variables. Toggle dark mode by putting `class="dark"`
|
|
15
|
+
on <html>. */
|
|
16
|
+
:root {
|
|
17
|
+
--radius: 0.625rem;
|
|
18
|
+
--background: oklch(1 0 0);
|
|
19
|
+
--foreground: oklch(0.141 0.005 285.823);
|
|
20
|
+
--card: oklch(1 0 0);
|
|
21
|
+
--card-foreground: oklch(0.141 0.005 285.823);
|
|
22
|
+
--popover: oklch(1 0 0);
|
|
23
|
+
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
24
|
+
--primary: oklch(0.21 0.006 285.885);
|
|
25
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
26
|
+
--secondary: oklch(0.967 0.001 286.375);
|
|
27
|
+
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
28
|
+
--muted: oklch(0.967 0.001 286.375);
|
|
29
|
+
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
30
|
+
--accent: oklch(0.967 0.001 286.375);
|
|
31
|
+
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
32
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
33
|
+
--border: oklch(0.92 0.004 286.32);
|
|
34
|
+
--input: oklch(0.92 0.004 286.32);
|
|
35
|
+
--ring: oklch(0.705 0.015 286.067);
|
|
36
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
37
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
38
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
39
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
40
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
41
|
+
--sidebar: oklch(0.985 0 0);
|
|
42
|
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
|
43
|
+
--sidebar-primary: oklch(0.21 0.006 285.885);
|
|
44
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
45
|
+
--sidebar-accent: oklch(0.967 0.001 286.375);
|
|
46
|
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
47
|
+
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
48
|
+
--sidebar-ring: oklch(0.705 0.015 286.067);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.dark {
|
|
52
|
+
--background: oklch(0.141 0.005 285.823);
|
|
53
|
+
--foreground: oklch(0.985 0 0);
|
|
54
|
+
--card: oklch(0.21 0.006 285.885);
|
|
55
|
+
--card-foreground: oklch(0.985 0 0);
|
|
56
|
+
--popover: oklch(0.21 0.006 285.885);
|
|
57
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
58
|
+
--primary: oklch(0.92 0.004 286.32);
|
|
59
|
+
--primary-foreground: oklch(0.21 0.006 285.885);
|
|
60
|
+
--secondary: oklch(0.274 0.006 286.033);
|
|
61
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
62
|
+
--muted: oklch(0.274 0.006 286.033);
|
|
63
|
+
--muted-foreground: oklch(0.705 0.015 286.067);
|
|
64
|
+
--accent: oklch(0.274 0.006 286.033);
|
|
65
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
66
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
67
|
+
--border: oklch(1 0 0 / 10%);
|
|
68
|
+
--input: oklch(1 0 0 / 15%);
|
|
69
|
+
--ring: oklch(0.552 0.016 285.938);
|
|
70
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
71
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
72
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
73
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
74
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
75
|
+
--sidebar: oklch(0.21 0.006 285.885);
|
|
76
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
77
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
78
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
79
|
+
--sidebar-accent: oklch(0.274 0.006 286.033);
|
|
80
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
81
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
82
|
+
--sidebar-ring: oklch(0.552 0.016 285.938);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@theme inline {
|
|
86
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
87
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
88
|
+
--radius-lg: var(--radius);
|
|
89
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
90
|
+
--color-background: var(--background);
|
|
91
|
+
--color-foreground: var(--foreground);
|
|
92
|
+
--color-card: var(--card);
|
|
93
|
+
--color-card-foreground: var(--card-foreground);
|
|
94
|
+
--color-popover: var(--popover);
|
|
95
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
96
|
+
--color-primary: var(--primary);
|
|
97
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
98
|
+
--color-secondary: var(--secondary);
|
|
99
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
100
|
+
--color-muted: var(--muted);
|
|
101
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
102
|
+
--color-accent: var(--accent);
|
|
103
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
104
|
+
--color-destructive: var(--destructive);
|
|
105
|
+
--color-border: var(--border);
|
|
106
|
+
--color-input: var(--input);
|
|
107
|
+
--color-ring: var(--ring);
|
|
108
|
+
--color-chart-1: var(--chart-1);
|
|
109
|
+
--color-chart-2: var(--chart-2);
|
|
110
|
+
--color-chart-3: var(--chart-3);
|
|
111
|
+
--color-chart-4: var(--chart-4);
|
|
112
|
+
--color-chart-5: var(--chart-5);
|
|
113
|
+
--color-sidebar: var(--sidebar);
|
|
114
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
115
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
116
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
117
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
118
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
119
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
120
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
@layer base {
|
|
124
|
+
*,
|
|
125
|
+
::after,
|
|
126
|
+
::before,
|
|
127
|
+
::backdrop,
|
|
128
|
+
::file-selector-button {
|
|
129
|
+
border-color: var(--color-border, currentColor);
|
|
130
|
+
outline-color: var(--color-ring);
|
|
131
|
+
}
|
|
132
|
+
body {
|
|
133
|
+
background-color: var(--color-background);
|
|
134
|
+
color: var(--color-foreground);
|
|
135
|
+
}
|
|
136
|
+
button {
|
|
137
|
+
cursor: pointer;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Link, type PageAuth } from "@pylonsync/react";
|
|
3
|
+
|
|
4
|
+
// A layout receives the page props plus `children`. `auth.user_id` is null
|
|
5
|
+
// for anonymous visitors and the signed-in user's id otherwise — resolved
|
|
6
|
+
// server-side from the session cookie, before any HTML is sent, so the nav
|
|
7
|
+
// renders the right links on the first byte (no flash, no client fetch). The
|
|
8
|
+
// `PageAuth` type is exported from @pylonsync/react so you never hand-roll it.
|
|
9
|
+
interface LayoutProps {
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
url: string;
|
|
12
|
+
auth: PageAuth;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// The root layout wraps every page.
|
|
16
|
+
export default function RootLayout({ children, auth }: LayoutProps) {
|
|
17
|
+
const signedIn = Boolean(auth?.user_id);
|
|
18
|
+
// Add `className="dark"` to this <html> to flip every shadcn token to its
|
|
19
|
+
// dark value. The classes below use semantic tokens (bg-background,
|
|
20
|
+
// text-foreground, …) so the whole UI re-themes from app/globals.css.
|
|
21
|
+
return (
|
|
22
|
+
<html lang="en">
|
|
23
|
+
<head>
|
|
24
|
+
<meta charSet="utf-8" />
|
|
25
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
26
|
+
<title>__APP_NAME__</title>
|
|
27
|
+
{/* Tailwind is compiled by Pylon from app/globals.css and the
|
|
28
|
+
stylesheet link is injected here automatically — nothing to
|
|
29
|
+
wire up. */}
|
|
30
|
+
</head>
|
|
31
|
+
<body className="min-h-screen bg-background text-foreground antialiased">
|
|
32
|
+
<header className="sticky top-0 z-10 border-b bg-background/80 backdrop-blur">
|
|
33
|
+
<div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
|
|
34
|
+
<Link
|
|
35
|
+
href="/"
|
|
36
|
+
className="text-sm font-semibold tracking-tight hover:text-muted-foreground"
|
|
37
|
+
>
|
|
38
|
+
__APP_NAME__
|
|
39
|
+
</Link>
|
|
40
|
+
<nav className="flex items-center gap-4 text-sm text-muted-foreground">
|
|
41
|
+
<Link href="/" className="hover:text-foreground">
|
|
42
|
+
Home
|
|
43
|
+
</Link>
|
|
44
|
+
{signedIn ? (
|
|
45
|
+
<Link href="/dashboard" className="hover:text-foreground">
|
|
46
|
+
Dashboard
|
|
47
|
+
</Link>
|
|
48
|
+
) : (
|
|
49
|
+
<>
|
|
50
|
+
<Link href="/login" className="hover:text-foreground">
|
|
51
|
+
Sign in
|
|
52
|
+
</Link>
|
|
53
|
+
<Link
|
|
54
|
+
href="/signup"
|
|
55
|
+
className="rounded-md bg-primary px-3 py-1.5 font-medium text-primary-foreground hover:opacity-90"
|
|
56
|
+
>
|
|
57
|
+
Sign up
|
|
58
|
+
</Link>
|
|
59
|
+
</>
|
|
60
|
+
)}
|
|
61
|
+
</nav>
|
|
62
|
+
</div>
|
|
63
|
+
</header>
|
|
64
|
+
<main className="mx-auto max-w-3xl px-4 py-10">{children}</main>
|
|
65
|
+
<footer className="border-t py-6 text-center text-xs text-muted-foreground">
|
|
66
|
+
Rendered by Pylon · one server, one port
|
|
67
|
+
</footer>
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Link, type Metadata, type PageProps } from "@pylonsync/react";
|
|
3
|
+
import {
|
|
4
|
+
Card,
|
|
5
|
+
CardContent,
|
|
6
|
+
CardDescription,
|
|
7
|
+
CardHeader,
|
|
8
|
+
CardTitle,
|
|
9
|
+
} from "@/components/ui/card";
|
|
10
|
+
import { AuthForm } from "../auth-form";
|
|
11
|
+
|
|
12
|
+
export const metadata: Metadata = {
|
|
13
|
+
title: "Sign in — __APP_NAME__",
|
|
14
|
+
// Auth pages shouldn't be indexed.
|
|
15
|
+
robots: "noindex",
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
// `app/login/page.tsx` → `/login`. A server-rendered shell around the
|
|
19
|
+
// client-side <AuthForm> island.
|
|
20
|
+
export default function LoginPage({ auth, response }: PageProps) {
|
|
21
|
+
// Already signed in? Skip the form. `response.redirect` runs in the
|
|
22
|
+
// synchronous shell render, so it's a real 307 before any HTML is sent
|
|
23
|
+
// (no flash, works with JS disabled).
|
|
24
|
+
if (auth.user_id) response.redirect("/dashboard");
|
|
25
|
+
return (
|
|
26
|
+
<div className="mx-auto max-w-sm">
|
|
27
|
+
<Card>
|
|
28
|
+
<CardHeader>
|
|
29
|
+
<CardTitle>Sign in</CardTitle>
|
|
30
|
+
<CardDescription>Welcome back.</CardDescription>
|
|
31
|
+
</CardHeader>
|
|
32
|
+
<CardContent className="space-y-4">
|
|
33
|
+
<AuthForm mode="login" />
|
|
34
|
+
<p className="text-center text-sm text-muted-foreground">
|
|
35
|
+
No account?{" "}
|
|
36
|
+
<Link
|
|
37
|
+
href="/signup"
|
|
38
|
+
className="font-medium text-foreground hover:underline"
|
|
39
|
+
>
|
|
40
|
+
Create one
|
|
41
|
+
</Link>
|
|
42
|
+
</p>
|
|
43
|
+
</CardContent>
|
|
44
|
+
</Card>
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Link, useRouter, type NotFoundProps } from "@pylonsync/react";
|
|
3
|
+
import { Button } from "@/components/ui/button";
|
|
4
|
+
|
|
5
|
+
// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and when
|
|
6
|
+
// a page calls `response.notFound()`). It's HYDRATED, so it's interactive:
|
|
7
|
+
// the buttons below use the client router. Not-found boundaries receive the
|
|
8
|
+
// standard page props (and, matching Next, no `reset`).
|
|
9
|
+
export default function NotFound(_props: NotFoundProps) {
|
|
10
|
+
const router = useRouter();
|
|
11
|
+
return (
|
|
12
|
+
<div className="space-y-6">
|
|
13
|
+
<section>
|
|
14
|
+
<h1 className="text-2xl font-semibold tracking-tight">404</h1>
|
|
15
|
+
<p className="mt-2 text-muted-foreground">
|
|
16
|
+
We couldn't find that page.
|
|
17
|
+
</p>
|
|
18
|
+
</section>
|
|
19
|
+
<div className="flex items-center gap-3">
|
|
20
|
+
<Button onClick={() => router.back()} variant="outline">
|
|
21
|
+
← Go back
|
|
22
|
+
</Button>
|
|
23
|
+
<Button asChild>
|
|
24
|
+
<Link href="/">Home</Link>
|
|
25
|
+
</Button>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Link, type Metadata, type PageProps } from "@pylonsync/react";
|
|
3
|
+
import { Button } from "@/components/ui/button";
|
|
4
|
+
import {
|
|
5
|
+
Card,
|
|
6
|
+
CardContent,
|
|
7
|
+
CardDescription,
|
|
8
|
+
CardHeader,
|
|
9
|
+
CardTitle,
|
|
10
|
+
} from "@/components/ui/card";
|
|
11
|
+
|
|
12
|
+
// SEO metadata. Export `metadata` (static) or `generateMetadata(props)`
|
|
13
|
+
// (dynamic) from any page or layout — Pylon renders the <title>/<meta>
|
|
14
|
+
// into <head> server-side. The `Metadata` type is exported from
|
|
15
|
+
// @pylonsync/react.
|
|
16
|
+
export const metadata: Metadata = {
|
|
17
|
+
title: "__APP_NAME__ — full-stack Pylon app",
|
|
18
|
+
description:
|
|
19
|
+
"A server-rendered homepage, email/password auth, and a live client dashboard over one synced backend — one binary, one port.",
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
// `app/page.tsx` → `/`. This page is server-rendered: view source and the copy
|
|
23
|
+
// is in the HTML, not fetched later — good for SEO and first paint. It reads
|
|
24
|
+
// `auth` (resolved from the session cookie during the render) to show the
|
|
25
|
+
// right call to action. Every page receives `PageProps` from the SSR runtime:
|
|
26
|
+
// `{ url, params, searchParams, auth, response, serverData }` — typed, no
|
|
27
|
+
// hand-rolled interface.
|
|
28
|
+
export default function IndexPage({ auth }: PageProps) {
|
|
29
|
+
const signedIn = Boolean(auth.user_id);
|
|
30
|
+
return (
|
|
31
|
+
<div className="space-y-12">
|
|
32
|
+
<section className="space-y-5">
|
|
33
|
+
<span className="inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium text-muted-foreground">
|
|
34
|
+
Server-rendered · authenticated · synced · one port
|
|
35
|
+
</span>
|
|
36
|
+
<h1 className="text-4xl font-semibold tracking-tight">
|
|
37
|
+
Full-stack apps, one binary.
|
|
38
|
+
</h1>
|
|
39
|
+
<p className="max-w-xl text-lg text-muted-foreground">
|
|
40
|
+
This homepage is server-rendered React. Sign in and your dashboard
|
|
41
|
+
becomes a live, local-first view over the same Pylon backend — writes
|
|
42
|
+
appear instantly and sync across tabs. No Next.js, no separate API
|
|
43
|
+
server, no realtime sidecar.
|
|
44
|
+
</p>
|
|
45
|
+
<div className="flex flex-wrap items-center gap-3">
|
|
46
|
+
{signedIn ? (
|
|
47
|
+
<Button asChild>
|
|
48
|
+
<Link href="/dashboard">Go to your dashboard →</Link>
|
|
49
|
+
</Button>
|
|
50
|
+
) : (
|
|
51
|
+
<>
|
|
52
|
+
<Button asChild>
|
|
53
|
+
<Link href="/signup">Get started</Link>
|
|
54
|
+
</Button>
|
|
55
|
+
<Button asChild variant="outline">
|
|
56
|
+
<Link href="/login">Sign in</Link>
|
|
57
|
+
</Button>
|
|
58
|
+
</>
|
|
59
|
+
)}
|
|
60
|
+
</div>
|
|
61
|
+
</section>
|
|
62
|
+
|
|
63
|
+
<section className="grid gap-4 sm:grid-cols-3">
|
|
64
|
+
<Feature title="Server-rendered">
|
|
65
|
+
File-based routes under <Code>app/</Code>. Pages render to HTML on the
|
|
66
|
+
server with <Code>metadata</Code> in <Code>{"<head>"}</Code>, then
|
|
67
|
+
hydrate. Drop <Code>app/about/page.tsx</Code> to add{" "}
|
|
68
|
+
<Code>/about</Code>.
|
|
69
|
+
</Feature>
|
|
70
|
+
<Feature title="Auth included">
|
|
71
|
+
Email/password is built in. <Code>/login</Code> and{" "}
|
|
72
|
+
<Code>/signup</Code> hit <Code>/api/auth/password/*</Code>; the server
|
|
73
|
+
sets an HttpOnly session cookie. <Code>/dashboard</Code> gates on it
|
|
74
|
+
server-side.
|
|
75
|
+
</Feature>
|
|
76
|
+
<Feature title="Synced database">
|
|
77
|
+
Every <Code>entity()</Code> in <Code>app.ts</Code> gets a REST +
|
|
78
|
+
realtime API and a typed client. <Code>db.useQuery</Code> is live;{" "}
|
|
79
|
+
<Code>db.insert</Code> is optimistic.
|
|
80
|
+
</Feature>
|
|
81
|
+
</section>
|
|
82
|
+
|
|
83
|
+
<p className="text-xs text-muted-foreground">
|
|
84
|
+
Edit <Code>app/page.tsx</Code> and save — the page reloads instantly.
|
|
85
|
+
The data model and access policies live in <Code>app.ts</Code>.
|
|
86
|
+
</p>
|
|
87
|
+
</div>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
function Feature({
|
|
92
|
+
title,
|
|
93
|
+
children,
|
|
94
|
+
}: {
|
|
95
|
+
title: string;
|
|
96
|
+
children: React.ReactNode;
|
|
97
|
+
}) {
|
|
98
|
+
return (
|
|
99
|
+
<Card>
|
|
100
|
+
<CardHeader>
|
|
101
|
+
<CardTitle className="text-base">{title}</CardTitle>
|
|
102
|
+
</CardHeader>
|
|
103
|
+
<CardContent>
|
|
104
|
+
<CardDescription className="text-sm leading-relaxed">
|
|
105
|
+
{children}
|
|
106
|
+
</CardDescription>
|
|
107
|
+
</CardContent>
|
|
108
|
+
</Card>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
function Code({ children }: { children: React.ReactNode }) {
|
|
113
|
+
return <code className="rounded bg-muted px-1 text-xs">{children}</code>;
|
|
114
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Robots } from "@pylonsync/react";
|
|
2
|
+
|
|
3
|
+
// app/robots.ts → served at /robots.txt. The default export may also be async.
|
|
4
|
+
const SITE = process.env.SITE_URL ?? "http://localhost:4321";
|
|
5
|
+
|
|
6
|
+
export default function robots(): Robots {
|
|
7
|
+
return {
|
|
8
|
+
// Keep the authenticated app and the API out of the index.
|
|
9
|
+
rules: { userAgent: "*", allow: "/", disallow: ["/dashboard", "/api/"] },
|
|
10
|
+
sitemap: `${SITE}/sitemap.xml`,
|
|
11
|
+
};
|
|
12
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Link, type Metadata, type PageProps } from "@pylonsync/react";
|
|
3
|
+
import {
|
|
4
|
+
Card,
|
|
5
|
+
CardContent,
|
|
6
|
+
CardDescription,
|
|
7
|
+
CardHeader,
|
|
8
|
+
CardTitle,
|
|
9
|
+
} from "@/components/ui/card";
|
|
10
|
+
import { AuthForm } from "../auth-form";
|
|
11
|
+
|
|
12
|
+
export const metadata: Metadata = {
|
|
13
|
+
title: "Create your account — __APP_NAME__",
|
|
14
|
+
robots: "noindex",
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
// `app/signup/page.tsx` → `/signup`. Same shell as /login, register mode.
|
|
18
|
+
export default function SignupPage({ auth, response }: PageProps) {
|
|
19
|
+
if (auth.user_id) response.redirect("/dashboard");
|
|
20
|
+
return (
|
|
21
|
+
<div className="mx-auto max-w-sm">
|
|
22
|
+
<Card>
|
|
23
|
+
<CardHeader>
|
|
24
|
+
<CardTitle>Create your account</CardTitle>
|
|
25
|
+
<CardDescription>
|
|
26
|
+
Email + password. No credit card, no email verification step in dev.
|
|
27
|
+
</CardDescription>
|
|
28
|
+
</CardHeader>
|
|
29
|
+
<CardContent className="space-y-4">
|
|
30
|
+
<AuthForm mode="signup" />
|
|
31
|
+
<p className="text-center text-sm text-muted-foreground">
|
|
32
|
+
Already have an account?{" "}
|
|
33
|
+
<Link
|
|
34
|
+
href="/login"
|
|
35
|
+
className="font-medium text-foreground hover:underline"
|
|
36
|
+
>
|
|
37
|
+
Sign in
|
|
38
|
+
</Link>
|
|
39
|
+
</p>
|
|
40
|
+
</CardContent>
|
|
41
|
+
</Card>
|
|
42
|
+
</div>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { Sitemap } from "@pylonsync/react";
|
|
2
|
+
|
|
3
|
+
// app/sitemap.ts → served at /sitemap.xml. The default export can be async, so
|
|
4
|
+
// it can enumerate dynamic pages from your database. Point SITE_URL at your
|
|
5
|
+
// domain in production.
|
|
6
|
+
const SITE = process.env.SITE_URL ?? "http://localhost:4321";
|
|
7
|
+
|
|
8
|
+
export default async function sitemap(): Promise<Sitemap> {
|
|
9
|
+
// Only public pages belong here — /dashboard is private (and noindex), so
|
|
10
|
+
// it's intentionally left out.
|
|
11
|
+
const staticRoutes: Sitemap = [
|
|
12
|
+
{ url: `${SITE}/`, changeFrequency: "weekly", priority: 1 },
|
|
13
|
+
{ url: `${SITE}/login`, changeFrequency: "yearly", priority: 0.3 },
|
|
14
|
+
{ url: `${SITE}/signup`, changeFrequency: "yearly", priority: 0.5 },
|
|
15
|
+
];
|
|
16
|
+
|
|
17
|
+
// The export is async, so you can enumerate dynamic pages from a DB read:
|
|
18
|
+
//
|
|
19
|
+
// const posts = await fetchPublishedPosts();
|
|
20
|
+
// const postRoutes: Sitemap = posts.map((p) => ({
|
|
21
|
+
// url: `${SITE}/blog/${p.slug}`,
|
|
22
|
+
// lastModified: p.updatedAt,
|
|
23
|
+
// }));
|
|
24
|
+
// return [...staticRoutes, ...postRoutes];
|
|
25
|
+
|
|
26
|
+
return staticRoutes;
|
|
27
|
+
}
|