create-vexcms 0.0.3

package/templates/base-nextjs/src/vexcms/collections/users.ts

@@ -0,0 +1,46 @@
+import { checkbox, defineCollection, imageUrl, select, text } from "@vexcms/core"
+
+import { TABLE_SLUG_USERS } from "~/db/constants"
+import { auth } from "~/vexcms/auth"
+
+export const users = defineCollection({
+  slug: TABLE_SLUG_USERS,
+  admin: {
+    defaultColumns: ["name", "email", "createdAt", "role"],
+    group: "Admin",
+    useAsTitle: "name",
+  },
+  auth,
+  fields: {
+    name: text({
+      label: "Name",
+      required: true,
+    }),
+    image: imageUrl({
+      label: "Image",
+    }),
+    role: select({
+      defaultValue: "user",
+      hasMany: true,
+      labels: {
+        plural: "Roles",
+        singular: "Role",
+      },
+      options: [
+        { badgeColor: "#ff0000", label: "Admin", value: "admin" },
+        { label: "Editor", value: "editor" },
+        { badgeColor: "#333333", label: "User", value: "user" },
+      ],
+      required: true,
+    }),
+    vex_onboarding_complete: checkbox({
+      admin: { hidden: true },
+      defaultValue: false,
+      label: "Onboarding Complete",
+    }),
+  },
+  labels: {
+    plural: "Users",
+    singular: "User",
+  },
+})

package/templates/base-nextjs/tsconfig.json

@@ -0,0 +1,60 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "~/*": [
+        "./src/*"
+      ],
+      "@convex/*": [
+        "./convex/*"
+      ],
+      "@vexcms/core": [
+        "../../packages/core/src/index.ts"
+      ],
+      "@vexcms/ui": [
+        "../../packages/ui/src/index.ts"
+      ],
+      "@vexcms/admin-next": [
+        "../../packages/admin-next/src/index.ts"
+      ],
+      "@vexcms/better-auth": [
+        "../../packages/better-auth/src/index.ts"
+      ],
+      "@vexcms/file-storage-convex": [
+        "../../packages/file-storage-convex/src/index.ts"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/templates/base-nextjs/vex.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "@vexcms/core"
+import { convexFileStorage } from "@vexcms/file-storage-convex"
+
+import { auth } from "~/vexcms/auth"
+
+export default defineConfig({
+  admin: {
+    meta: {
+      titleSuffix: " | Admin",
+    },
+    sidebar: {
+      hideGlobals: true,
+    },
+    user: "user",
+  },
+  auth,
+  basePath: "/admin",
+  collections: [],
+  media: {
+    collections: [],
+    storageAdapter: convexFileStorage(),
+  },
+})

package/templates/marketing-site/convex/pages.ts

@@ -0,0 +1,46 @@
+import { getPreviewSnapshot } from "@vexcms/core"
+import { v } from "convex/values"
+
+import { TABLE_SLUG_PAGES } from "~/db/constants"
+
+import { vexQuery } from "./vex/helpers"
+
+/**
+ * Get a published page by slug.
+ * Returns null if the page doesn't exist or isn't published.
+ *
+ * Uses vexQuery which automatically handles _vexDrafts arg
+ * and provides ctx.drafts for draft-aware queries.
+ */
+export const getBySlug = vexQuery({
+  args: { slug: v.string() },
+  handler: async (ctx, args) => {
+    const page = await ctx.db
+      .query(TABLE_SLUG_PAGES)
+      .withIndex("by_slug", (q) => q.eq("slug", args.slug))
+      .first()
+
+    if (!page) {
+      return null
+    }
+
+    // On the public route, only return published pages
+    if (ctx.drafts === false && page.vex_status !== "published") {
+      return null
+    }
+
+    // For preview/snapshot mode, merge the draft snapshot
+    if (ctx.drafts === "snapshot") {
+      const snapshot = await getPreviewSnapshot({
+        collection: TABLE_SLUG_PAGES,
+        ctx,
+        documentId: page._id,
+      })
+      if (snapshot) {
+        return { ...page, ...snapshot }
+      }
+    }
+
+    return page
+  },
+})

package/templates/marketing-site/src/app/(frontend)/[slug]/page.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import type { RichTextDocument } from "@vexcms/core"
+
+import { api } from "@convex/_generated/api"
+import { RichText } from "@vexcms/richtext/render"
+import { useQuery } from "convex/react"
+import Link from "next/link"
+import { useParams } from "next/navigation"
+
+/**
+ * Public page route — renders published pages by slug.
+ * Passes _vexDrafts: false to only get published content.
+ */
+export default function PublicPage() {
+  const { slug } = useParams<{ slug: string }>()
+
+  const page = useQuery(api.pages.getBySlug, {
+    slug,
+    _vexDrafts: false,
+  })
+
+  if (page === undefined) {
+    return (
+      <div className="mx-auto max-w-3xl px-4 py-12">
+        <p className="text-muted-foreground">Loading…</p>
+      </div>
+    )
+  }
+
+  if (page === null) {
+    return (
+      <div className="mx-auto max-w-3xl px-4 py-12">
+        <h1 className="text-2xl font-bold">Page not found</h1>
+        <p className="mt-2 text-muted-foreground">
+          The page &ldquo;{slug}&rdquo; doesn&apos;t exist or hasn&apos;t been published yet.
+        </p>
+        <Link className="mt-4 inline-block text-sm text-primary hover:underline" href="/">
+          ← Back to home
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-12">
+      <h1 className="text-3xl font-bold mb-6">{page.title ?? "Untitled"}</h1>
+
+      {page.content ? (
+        <div className="prose prose-lg max-w-none">
+          <RichText content={page.content as RichTextDocument} />
+        </div>
+      ) : (
+        <p className="text-muted-foreground">This page has no content yet.</p>
+      )}
+    </div>
+  )
+}

package/templates/marketing-site/src/app/(frontend)/preview/[slug]/page.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import type { RichTextDocument } from "@vexcms/core"
+
+import { api } from "@convex/_generated/api"
+import { RichText } from "@vexcms/richtext/render"
+import { useVexPreview } from "@vexcms/ui"
+import { useQuery } from "convex/react"
+import { useParams } from "next/navigation"
+
+/**
+ * Preview page route — renders draft pages for live preview.
+ * Used by the admin panel's live preview iframe.
+ *
+ * Uses the same getBySlug query but with _vexDrafts: "snapshot"
+ * so the draft snapshot is automatically merged onto the document.
+ */
+export default function PreviewPage() {
+  const { slug } = useParams<{ slug: string }>()
+
+  const page = useQuery(api.pages.getBySlug, {
+    slug,
+    _vexDrafts: "snapshot",
+  })
+
+  // Notify admin panel's live preview when data changes
+  useVexPreview({ data: page })
+
+  if (page === undefined) {
+    return (
+      <div className="mx-auto max-w-3xl px-4 py-12">
+        <div className="flex items-center gap-2">
+          <div className="h-2 w-2 rounded-full bg-yellow-500 animate-pulse" />
+          <p className="text-muted-foreground">Loading preview…</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (page === null) {
+    return (
+      <div className="mx-auto max-w-3xl px-4 py-12">
+        <h1 className="text-2xl font-bold">Preview not found</h1>
+        <p className="mt-2 text-muted-foreground">
+          No page with slug &ldquo;{slug}&rdquo; exists.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-12">
+      {/* Preview banner */}
+      <div className="mb-6 rounded-md border border-yellow-200 bg-yellow-50 px-4 py-2 text-sm text-yellow-800">
+        Preview Mode — This page may not be published yet.
+      </div>
+
+      <h1 className="text-3xl font-bold mb-6">{page.title ?? "Untitled"}</h1>
+
+      {page.content ? (
+        <div className="prose prose-lg max-w-none">
+          <RichText content={page.content as RichTextDocument} />
+        </div>
+      ) : (
+        <p className="text-muted-foreground">This page has no content yet.</p>
+      )}
+    </div>
+  )
+}

package/templates/marketing-site/src/app/admin/AdminLayoutWrapper.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import { useCallback } from "react"
+import { useMutation, useQuery } from "convex/react"
+import { useRouter } from "next/navigation"
+import { AdminLayout, OnboardingTour, useOnboardingTour } from "@vexcms/admin-next"
+import type { PermissionUser } from "@vexcms/admin-next"
+import type { ClientVexConfig } from "@vexcms/core"
+import { api } from "@convex/_generated/api"
+import { access } from "~/vexcms/access"
+
+/**
+ * Client wrapper that provides the access config directly (not through RSC serialization).
+ * Includes the onboarding tour for the marketing site template.
+ */
+export function AdminLayoutWrapper({
+  config,
+  user,
+  permissionUser,
+  children,
+}: {
+  config: ClientVexConfig
+  user?: { name: string; email: string; avatar?: string }
+  permissionUser?: PermissionUser
+  children: React.ReactNode
+}) {
+  const router = useRouter()
+  const onboardingStatus = useQuery(api.vex.firstUser.getOnboardingStatus)
+  const completeOnboarding = useMutation(api.vex.firstUser.completeOnboarding)
+  const resetOnboarding = useMutation(api.vex.firstUser.resetOnboarding)
+
+  const handleComplete = useCallback(() => {
+    completeOnboarding()
+  }, [completeOnboarding])
+
+  const handleReset = useCallback(() => {
+    resetOnboarding()
+  }, [resetOnboarding])
+
+  const navigate = useCallback((path: string) => {
+    router.push(path)
+  }, [router])
+
+  const { showTour, completeTour } = useOnboardingTour({
+    config,
+    isComplete: onboardingStatus?.complete ?? true,
+    onComplete: handleComplete,
+    onReset: handleReset,
+  })
+
+  // Use the first collection as the example for the tour
+  const exampleCollection = config.collections[0]?.slug
+
+  return (
+    <AdminLayout
+      config={config}
+      user={user}
+      permissionUser={permissionUser}
+      access={access}
+    >
+      {children}
+      <OnboardingTour
+        active={showTour}
+        onComplete={completeTour}
+        basePath={config.basePath}
+        exampleCollection={exampleCollection}
+        navigate={navigate}
+      />
+    </AdminLayout>
+  )
+}

package/templates/marketing-site/src/db/constants/index.ts

@@ -0,0 +1,52 @@
+export * from "./auth"
+
+// Better Auth
+export const TABLE_SLUG_USERS = "user" as const
+export const TABLE_SLUG_ACCOUNTS = "account" as const
+export const TABLE_SLUG_SESSIONS = "session" as const
+export const TABLE_SLUG_VERIFICATIONS = "verification" as const
+export const TABLE_SLUG_JWKS = "jwks" as const
+
+// Media
+export const TABLE_SLUG_MEDIA = "media" as const
+
+// Site Builder
+export const TABLE_SLUG_PAGES = "pages" as const
+export const TABLE_SLUG_HEADERS = "headers" as const
+export const TABLE_SLUG_FOOTERS = "footers" as const
+export const TABLE_SLUG_THEMES = "themes" as const
+export const TABLE_SLUG_SITE_SETTINGS = "site_settings" as const
+
+export const AUTH_PROVIDERS = {
+  apple: "apple",
+  atlassian: "atlassian",
+  cognito: "cognito",
+  discord: "discord",
+  dropbox: "dropbox",
+  facebook: "facebook",
+  figma: "figma",
+  github: "github",
+  gitlab: "gitlab",
+  google: "google",
+  huggingface: "huggingface",
+  kakao: "kakao",
+  kick: "kick",
+  line: "line",
+  linear: "linear",
+  linkedin: "linkedin",
+  microsoft: "microsoft",
+  naver: "naver",
+  notion: "notion",
+  paypal: "paypal",
+  reddit: "reddit",
+  roblox: "roblox",
+  salesforce: "salesforce",
+  slack: "slack",
+  spotify: "spotify",
+  tiktok: "tiktok",
+  twitch: "twitch",
+  twitter: "twitter",
+  vk: "vk",
+  zoom: "zoom",
+} as const
+export type AuthProvider = (typeof AUTH_PROVIDERS)[keyof typeof AUTH_PROVIDERS]

package/templates/marketing-site/src/vexcms/collections/footers.ts

@@ -0,0 +1,28 @@
+import { defineCollection, richtext, text } from "@vexcms/core"
+
+import { TABLE_SLUG_FOOTERS, TABLE_SLUG_MEDIA } from "~/db/constants"
+
+export const footers = defineCollection({
+  slug: TABLE_SLUG_FOOTERS,
+  admin: {
+    group: "Site Builder",
+    useAsTitle: "name",
+  },
+  fields: {
+    name: text({
+      label: "Name",
+      required: true,
+    }),
+    content: richtext({
+      label: "Content",
+      mediaCollection: TABLE_SLUG_MEDIA,
+    }),
+    copyright: text({
+      label: "Copyright Text",
+    }),
+  },
+  labels: {
+    plural: "Footers",
+    singular: "Footer",
+  },
+})

package/templates/marketing-site/src/vexcms/collections/headers.ts

@@ -0,0 +1,35 @@
+import { checkbox, defineCollection, text, upload } from "@vexcms/core"
+
+import { TABLE_SLUG_HEADERS, TABLE_SLUG_MEDIA } from "~/db/constants"
+
+export const headers = defineCollection({
+  slug: TABLE_SLUG_HEADERS,
+  admin: {
+    group: "Site Builder",
+    useAsTitle: "name",
+  },
+  fields: {
+    name: text({
+      label: "Name",
+      required: true,
+    }),
+    logoText: text({
+      label: "Logo Text",
+    }),
+    logoUrl: upload({
+      admin: {
+        description: "URL for the header logo image",
+      },
+      label: "Logo URL",
+      to: TABLE_SLUG_MEDIA,
+    }),
+    sticky: checkbox({
+      defaultValue: false,
+      label: "Sticky Header",
+    }),
+  },
+  labels: {
+    plural: "Headers",
+    singular: "Header",
+  },
+})

package/templates/marketing-site/src/vexcms/collections/index.ts

@@ -0,0 +1,7 @@
+export * from "./footers"
+export * from "./headers"
+export * from "./media"
+export * from "./pages"
+export * from "./site_settings"
+export * from "./themes"
+export * from "./users"

package/templates/marketing-site/src/vexcms/collections/pages.ts

@@ -0,0 +1,40 @@
+import { defineCollection, richtext, text } from "@vexcms/core"
+
+import { TABLE_SLUG_MEDIA, TABLE_SLUG_PAGES } from "~/db/constants"
+
+export const pages = defineCollection({
+  slug: TABLE_SLUG_PAGES,
+  admin: {
+    defaultColumns: ["title", "slug", "vex_status", "_id"],
+    group: "Site Builder",
+    livePreview: {
+      url: (doc) => `/preview/${doc.slug ?? doc._id}`,
+    },
+    useAsTitle: "title",
+  },
+  fields: {
+    title: text({
+      label: "Title",
+      required: true,
+    }),
+    slug: text({
+      admin: {
+        description: "URL-friendly page path",
+      },
+      index: "by_slug",
+      label: "Slug",
+      required: true,
+    }),
+    content: richtext({
+      label: "Content",
+      mediaCollection: TABLE_SLUG_MEDIA,
+    }),
+  },
+  labels: {
+    plural: "Pages",
+    singular: "Page",
+  },
+  versions: {
+    drafts: true,
+  },
+})

package/templates/marketing-site/src/vexcms/collections/site_settings.ts

@@ -0,0 +1,31 @@
+import { defineCollection, text, upload } from "@vexcms/core"
+
+import { TABLE_SLUG_MEDIA, TABLE_SLUG_SITE_SETTINGS } from "~/db/constants"
+
+export const siteSettings = defineCollection({
+  slug: TABLE_SLUG_SITE_SETTINGS,
+  admin: {
+    group: "Site Builder",
+    useAsTitle: "name",
+  },
+  fields: {
+    name: text({
+      label: "Site Name",
+      required: true,
+    }),
+    description: text({
+      label: "Site Description",
+    }),
+    favicon: upload({
+      admin: {
+        description: "Site favicon image",
+      },
+      label: "Favicon",
+      to: TABLE_SLUG_MEDIA,
+    }),
+  },
+  labels: {
+    plural: "Site Settings",
+    singular: "Site Settings",
+  },
+})

package/templates/marketing-site/src/vexcms/collections/themes.ts

@@ -0,0 +1,37 @@
+import { defineCollection, text } from "@vexcms/core"
+
+import { TABLE_SLUG_THEMES } from "~/db/constants"
+
+export const themes = defineCollection({
+  slug: TABLE_SLUG_THEMES,
+  admin: {
+    group: "Site Builder",
+    useAsTitle: "name",
+  },
+  fields: {
+    name: text({
+      label: "Name",
+      required: true,
+    }),
+    backgroundColor: text({
+      defaultValue: "#ffffff",
+      label: "Background Color",
+    }),
+    fontFamily: text({
+      defaultValue: "Inter, sans-serif",
+      label: "Font Family",
+    }),
+    primaryColor: text({
+      defaultValue: "#3b82f6",
+      label: "Primary Color",
+    }),
+    secondaryColor: text({
+      defaultValue: "#6b7280",
+      label: "Secondary Color",
+    }),
+  },
+  labels: {
+    plural: "Themes",
+    singular: "Theme",
+  },
+})

package/templates/marketing-site/vex.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from "@vexcms/core"
+import { convexFileStorage } from "@vexcms/file-storage-convex"
+
+import { auth } from "~/vexcms/auth"
+import {
+  footers,
+  headers,
+  media,
+  pages,
+  siteSettings,
+  themes,
+  users,
+} from "~/vexcms/collections"
+
+export default defineConfig({
+  admin: {
+    meta: {
+      titleSuffix: " | My Site",
+    },
+    sidebar: {
+      hideGlobals: true,
+    },
+    user: "user",
+  },
+  auth,
+  basePath: "/admin",
+  collections: [pages, headers, footers, themes, siteSettings, users],
+  media: {
+    collections: [media],
+    storageAdapter: convexFileStorage(),
+  },
+})