create-vexcms 0.0.19 → 0.1.0-alpha.2

package/templates/base-nextjs/src/components/WelcomePage.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import { useMutation, useQuery } from "convex/react"
+import { usePathname, useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
+
+import { api } from "@convex/_generated/api"
+import { useSession } from "~/auth/client"
+
+function LoadingSpinner() {
+  return (
+    <svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  )
+}
+
+/**
+ * Landing UI for a project that has not been bootstrapped yet (no admin user),
+ * and the "Go to Admin" / "Sign in" entry point once it has.
+ *
+ * Renders directly on `templates/base-nextjs`'s home route (no `pages`
+ * collection exists there). The marketing overlay's `PageContent` renders it
+ * as a fallback instead, when `pages.getBySlug("home")` returns no document.
+ *
+ * Promotes the first signed-in user to admin exactly once: `promoteFirstAdmin`
+ * is a Convex mutation, so concurrent signups cannot both win — Convex
+ * serializes mutations, and the loser observes `isBootstrapped` already true.
+ */
+export function WelcomePage() {
+  const isBootstrapped = useQuery(api.vex.firstUser.isBootstrapped)
+  const promoteFirstAdmin = useMutation(api.vex.firstUser.promoteFirstAdmin)
+  const { data: session } = useSession()
+  const router = useRouter()
+  const pathname = usePathname()
+  const [promoting, setPromoting] = useState(false)
+  const [navigating, setNavigating] = useState(false)
+
+  // Reset navigating state when the user comes back to the home page
+  // (e.g. closing the intercepting auth dialog)
+  useEffect(() => {
+    if (pathname === "/") {
+      setNavigating(false)
+    }
+  }, [pathname])
+
+  // If the user is signed in and this is a fresh project, try to promote them
+  useEffect(() => {
+    if (session?.user && isBootstrapped === false && !promoting) {
+      setPromoting(true)
+      setNavigating(true)
+      promoteFirstAdmin()
+        .then((result) => {
+          if (result.promoted) {
+            router.push("/admin")
+          } else {
+            setNavigating(false)
+          }
+        })
+        .catch(() => {
+          setPromoting(false)
+          setNavigating(false)
+        })
+    }
+  }, [session, isBootstrapped, promoting, promoteFirstAdmin, router])
+
+  // Treat undefined (query still loading) as not bootstrapped — show the welcome page immediately
+  const bootstrapped = isBootstrapped === true
+
+  const buttonClass =
+    "inline-flex items-center justify-center gap-2 rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+
+  const handleNavigate = (path: string) => {
+    setNavigating(true)
+    router.push(path)
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-8 p-8">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold tracking-tight">VexCMS</h1>
+        <p className="mt-3 text-lg text-muted-foreground">
+          {bootstrapped
+            ? "Your content management system is ready."
+            : "Welcome! Create your admin account to get started."}
+        </p>
+      </div>
+
+      <div className="flex gap-4">
+        {session?.user ? (
+          <button onClick={() => handleNavigate("/admin")} disabled={navigating} className={buttonClass}>
+            {navigating && <LoadingSpinner />}
+            {navigating ? "Loading..." : "Go to Admin Panel"}
+          </button>
+        ) : bootstrapped ? (
+          <button onClick={() => handleNavigate("/auth/sign-in")} disabled={navigating} className={buttonClass}>
+            {navigating && <LoadingSpinner />}
+            {navigating ? "Loading..." : "Sign In"}
+          </button>
+        ) : (
+          <button onClick={() => handleNavigate("/auth/sign-up")} disabled={navigating} className={buttonClass}>
+            {navigating && <LoadingSpinner />}
+            {navigating ? "Loading..." : "Create Admin Account"}
+          </button>
+        )}
+      </div>
+
+      {promoting && <p className="text-sm text-muted-foreground animate-pulse">Setting up your admin account...</p>}
+    </div>
+  )
+}

package/templates/base-nextjs/src/components/component-example.tsx

@@ -1,474 +1,66 @@
-"use client"
+"use client";
 
-import {
-  BellIcon,
-  BluetoothIcon,
-  CreditCardIcon,
-  DownloadIcon,
-  EyeIcon,
-  FileCodeIcon,
-  FileIcon,
-  FileTextIcon,
-  FolderIcon,
-  FolderOpenIcon,
-  FolderSearchIcon,
-  HelpCircleIcon,
-  KeyboardIcon,
-  LanguagesIcon,
-  LayoutIcon,
-  LogOutIcon,
-  MailIcon,
-  MonitorIcon,
-  MoonIcon,
-  MoreHorizontalIcon,
-  MoreVerticalIcon,
-  PaletteIcon,
-  PlusIcon,
-  SaveIcon,
-  SettingsIcon,
-  ShieldIcon,
-  SunIcon,
-  UserIcon,
-} from "lucide-react"
-import * as React from "react"
+import { ThemeToggle } from "@vexcms/react";
+import { TerminalIcon, UserIcon } from "lucide-react";
+import Link from "next/link";
 
-import { Example, ExampleWrapper } from "~/components/example"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "~/components/ui/alert-dialog"
-import { Badge } from "~/components/ui/badge"
-import { Button } from "~/components/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card"
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-} from "~/components/ui/combobox"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu"
-import { Field, FieldGroup, FieldLabel } from "~/components/ui/field"
-import { Input } from "~/components/ui/input"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select"
-import { Textarea } from "~/components/ui/textarea"
-import { ThemeToggle } from "~/components/ui/theme-toggle"
+import { signOut, useSession } from "~/auth/client";
+import { Button } from "~/components/ui/button";
 
 export function ComponentExample() {
-  return (
-    <ExampleWrapper>
-      <ThemeToggle className="absolute w-md:top-10 right-10 top-2" />
-      <CardExample />
-      <FormExample />
-    </ExampleWrapper>
-  )
-}
+  const { data: session } = useSession();
 
-function CardExample() {
   return (
-    <Example className="items-center justify-center" title="Card">
-      <Card className="relative w-full max-w-sm overflow-hidden pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
-        <img
-          alt="Photo by mymind on Unsplash"
-          className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
-          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          title="Photo by mymind on Unsplash"
-        />
-        <CardHeader>
-          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
-          <CardDescription>
-            Switch to the improved way to explore your data, with natural language. Monitoring will
-            no longer be available on the Pro plan in November, 2025
-          </CardDescription>
-        </CardHeader>
-        <CardFooter>
-          <AlertDialog>
-            <AlertDialogTrigger render={<Button />}>
-              <PlusIcon data-icon="inline-start" />
-              Show Dialog
-            </AlertDialogTrigger>
-            <AlertDialogContent size="sm">
-              <AlertDialogHeader>
-                <AlertDialogMedia>
-                  <BluetoothIcon />
-                </AlertDialogMedia>
-                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  Do you want to allow the USB accessory to connect to this device?
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
-                <AlertDialogAction>Allow</AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-          <Badge className="ml-auto" variant="secondary">
-            Warning
-          </Badge>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
+    <div className="bg-background flex min-h-screen flex-col items-center justify-center gap-8 p-6 text-center">
+      <div className="absolute top-4 right-4 flex items-center gap-2">
+        {session?.user && (
+          <>
+            <div className="bg-muted flex size-8 items-center justify-center rounded-full">
+              <UserIcon className="text-muted-foreground size-4" />
+            </div>
+            <span className="text-sm font-medium">{session.user.name}</span>
+          </>
+        )}
+        <ThemeToggle />
+      </div>
 
-const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] as const
+      <div className="flex flex-col items-center gap-4">
+        <div className="bg-foreground text-background flex size-14 items-center justify-center rounded-2xl">
+          <TerminalIcon className="size-7" />
+        </div>
+        <div className="flex flex-col gap-1">
+          <h1 className="text-3xl font-bold tracking-tight">Vex CMS</h1>
+          <p className="text-muted-foreground max-w-sm text-base">
+            The CMS built for Convex. Real-time, type-safe, developer first.
+          </p>
+        </div>
+      </div>
 
-const roleItems = [
-  { label: "Developer", value: "developer" },
-  { label: "Designer", value: "designer" },
-  { label: "Manager", value: "manager" },
-  { label: "Other", value: "other" },
-]
+      <div className="flex gap-3">
+        {session?.user ? (
+          <div className="flex gap-4">
+            <Link href="/admin">
+              <Button>Admin</Button>
+            </Link>
+            <Button onClick={() => signOut()} variant="outline">
+              Sign out
+            </Button>
+          </div>
+        ) : (
+          <>
+            <Button nativeButton={false} render={<Link href="/auth/sign-up" />}>
+              Sign up
+            </Button>
+            <Button nativeButton={false} render={<Link href="/auth/sign-in" />} variant="outline">
+              Sign in
+            </Button>
+          </>
+        )}
+      </div>
 
-function FormExample() {
-  const [notifications, setNotifications] = React.useState({
-    email: true,
-    push: true,
-    sms: false,
-  })
-  const [theme, setTheme] = React.useState("light")
-
-  return (
-    <Example title="Form">
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle>User Information</CardTitle>
-          <CardDescription>Please fill in your details below</CardDescription>
-          <CardAction>
-            <DropdownMenu>
-              <DropdownMenuTrigger render={<Button size="icon" variant="ghost" />}>
-                <MoreVerticalIcon />
-                <span className="sr-only">More options</span>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-56">
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>File</DropdownMenuLabel>
-                  <DropdownMenuItem>
-                    <FileIcon />
-                    New File
-                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <FolderIcon />
-                    New Folder
-                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <FolderOpenIcon />
-                      Open Recent
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
-                          <DropdownMenuItem>
-                            <FileCodeIcon />
-                            Project Alpha
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <FileCodeIcon />
-                            Project Beta
-                          </DropdownMenuItem>
-                          <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>
-                              <MoreHorizontalIcon />
-                              More Projects
-                            </DropdownMenuSubTrigger>
-                            <DropdownMenuPortal>
-                              <DropdownMenuSubContent>
-                                <DropdownMenuItem>
-                                  <FileCodeIcon />
-                                  Project Gamma
-                                </DropdownMenuItem>
-                                <DropdownMenuItem>
-                                  <FileCodeIcon />
-                                  Project Delta
-                                </DropdownMenuItem>
-                              </DropdownMenuSubContent>
-                            </DropdownMenuPortal>
-                          </DropdownMenuSub>
-                        </DropdownMenuGroup>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuGroup>
-                          <DropdownMenuItem>
-                            <FolderSearchIcon />
-                            Browse...
-                          </DropdownMenuItem>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <SaveIcon />
-                    Save
-                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <DownloadIcon />
-                    Export
-                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>View</DropdownMenuLabel>
-                  <DropdownMenuCheckboxItem
-                    checked={notifications.email}
-                    onCheckedChange={(checked) =>
-                      setNotifications({
-                        ...notifications,
-                        email: checked === true,
-                      })
-                    }
-                  >
-                    <EyeIcon />
-                    Show Sidebar
-                  </DropdownMenuCheckboxItem>
-                  <DropdownMenuCheckboxItem
-                    checked={notifications.sms}
-                    onCheckedChange={(checked) =>
-                      setNotifications({
-                        ...notifications,
-                        sms: checked === true,
-                      })
-                    }
-                  >
-                    <LayoutIcon />
-                    Show Status Bar
-                  </DropdownMenuCheckboxItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <PaletteIcon />
-                      Theme
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-                          <DropdownMenuRadioGroup onValueChange={setTheme} value={theme}>
-                            <DropdownMenuRadioItem value="light">
-                              <SunIcon />
-                              Light
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="dark">
-                              <MoonIcon />
-                              Dark
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="system">
-                              <MonitorIcon />
-                              System
-                            </DropdownMenuRadioItem>
-                          </DropdownMenuRadioGroup>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>Account</DropdownMenuLabel>
-                  <DropdownMenuItem>
-                    <UserIcon />
-                    Profile
-                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <CreditCardIcon />
-                    Billing
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <SettingsIcon />
-                      Settings
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>
-                          <DropdownMenuItem>
-                            <KeyboardIcon />
-                            Keyboard Shortcuts
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <LanguagesIcon />
-                            Language
-                          </DropdownMenuItem>
-                          <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>
-                              <BellIcon />
-                              Notifications
-                            </DropdownMenuSubTrigger>
-                            <DropdownMenuPortal>
-                              <DropdownMenuSubContent>
-                                <DropdownMenuGroup>
-                                  <DropdownMenuLabel>Notification Types</DropdownMenuLabel>
-                                  <DropdownMenuCheckboxItem
-                                    checked={notifications.push}
-                                    onCheckedChange={(checked) =>
-                                      setNotifications({
-                                        ...notifications,
-                                        push: checked === true,
-                                      })
-                                    }
-                                  >
-                                    <BellIcon />
-                                    Push Notifications
-                                  </DropdownMenuCheckboxItem>
-                                  <DropdownMenuCheckboxItem
-                                    checked={notifications.email}
-                                    onCheckedChange={(checked) =>
-                                      setNotifications({
-                                        ...notifications,
-                                        email: checked === true,
-                                      })
-                                    }
-                                  >
-                                    <MailIcon />
-                                    Email Notifications
-                                  </DropdownMenuCheckboxItem>
-                                </DropdownMenuGroup>
-                              </DropdownMenuSubContent>
-                            </DropdownMenuPortal>
-                          </DropdownMenuSub>
-                        </DropdownMenuGroup>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuGroup>
-                          <DropdownMenuItem>
-                            <ShieldIcon />
-                            Privacy & Security
-                          </DropdownMenuItem>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <HelpCircleIcon />
-                    Help & Support
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <FileTextIcon />
-                    Documentation
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem variant="destructive">
-                    <LogOutIcon />
-                    Sign Out
-                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <FieldGroup>
-              <div className="grid grid-cols-2 gap-4">
-                <Field>
-                  <FieldLabel htmlFor="small-form-name">Name</FieldLabel>
-                  <Input id="small-form-name" placeholder="Enter your name" required />
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="small-form-role">Role</FieldLabel>
-                  <Select defaultValue={null} items={roleItems}>
-                    <SelectTrigger id="small-form-role">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        {roleItems.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </div>
-              <Field>
-                <FieldLabel htmlFor="small-form-framework">Framework</FieldLabel>
-                <Combobox items={frameworks}>
-                  <ComboboxInput
-                    id="small-form-framework"
-                    placeholder="Select a framework"
-                    required
-                  />
-                  <ComboboxContent>
-                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
-                    <ComboboxList>
-                      {(item) => (
-                        <ComboboxItem key={item} value={item}>
-                          {item}
-                        </ComboboxItem>
-                      )}
-                    </ComboboxList>
-                  </ComboboxContent>
-                </Combobox>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="small-form-comments">Comments</FieldLabel>
-                <Textarea id="small-form-comments" placeholder="Add any additional comments" />
-              </Field>
-              <Field orientation="horizontal">
-                <Button type="submit">Submit</Button>
-                <Button type="button" variant="outline">
-                  Cancel
-                </Button>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </Example>
-  )
+      <code className="bg-muted text-muted-foreground rounded-lg px-4 py-2 font-mono text-sm">
+        npx create-vexcms@latest
+      </code>
+    </div>
+  );
 }

package/templates/base-nextjs/src/components/providers/auth.tsx

@@ -0,0 +1,13 @@
+import { api } from "@convex/_generated/api";
+
+import { fetchAuthQuery, getToken } from "~/auth/server";
+import { AuthProvider } from "~/context/AuthContext";
+
+export async function AuthServerProvider(props: { children: React.ReactNode }) {
+  const sessionToken = await getToken();
+  if (!sessionToken) {
+    return <AuthProvider value={{ user: null }}>{props.children}</AuthProvider>;
+  }
+  const auth = await fetchAuthQuery(api.auth.api.getUserOrg, {});
+  return <AuthProvider value={auth}>{props.children}</AuthProvider>;
+}

package/templates/base-nextjs/src/components/providers/client.tsx

@@ -3,7 +3,12 @@
 import { type PropsWithChildren } from "react"
 
 import BetterAuthClientProvider from "~/auth/client"
+import ConvexClientProvider from "~/components/providers/convex"
 
 export default function ClientProviders({ children }: PropsWithChildren) {
-  return <BetterAuthClientProvider>{children}</BetterAuthClientProvider>
+  return (
+    <ConvexClientProvider>
+      <BetterAuthClientProvider>{children}</BetterAuthClientProvider>
+    </ConvexClientProvider>
+  )
 }