create-vexcms 0.0.8 → 0.0.10

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

@@ -1,33 +1,126 @@
-import { defineCollection, text } from "@vexcms/core"
+import { color, defineCollection, tabs, text, ui } from "@vexcms/core"
 
+import ThemeImportField from "~/components/admin/ThemeImportField"
 import { TABLE_SLUG_THEMES } from "~/db/constants"
 
+/**
+ * Helper to create a set of shadcn/Tailwind color fields for a theme mode.
+ */
+function themeColorFields() {
+  return {
+    background: color({ label: "Background", defaultValue: "#ffffff" }),
+    foreground: color({ label: "Foreground", defaultValue: "#0a0a0a" }),
+    card: color({ label: "Card", defaultValue: "#ffffff" }),
+    cardForeground: color({ label: "Card Foreground", defaultValue: "#0a0a0a" }),
+    popover: color({ label: "Popover", defaultValue: "#ffffff" }),
+    popoverForeground: color({ label: "Popover Foreground", defaultValue: "#0a0a0a" }),
+    primary: color({ label: "Primary", defaultValue: "#171717" }),
+    primaryForeground: color({ label: "Primary Foreground", defaultValue: "#fafafa" }),
+    secondary: color({ label: "Secondary", defaultValue: "#f5f5f5" }),
+    secondaryForeground: color({ label: "Secondary Foreground", defaultValue: "#171717" }),
+    muted: color({ label: "Muted", defaultValue: "#f5f5f5" }),
+    mutedForeground: color({ label: "Muted Foreground", defaultValue: "#737373" }),
+    accent: color({ label: "Accent", defaultValue: "#f5f5f5" }),
+    accentForeground: color({ label: "Accent Foreground", defaultValue: "#171717" }),
+    destructive: color({ label: "Destructive", defaultValue: "#ef4444" }),
+    destructiveForeground: color({ label: "Destructive Foreground", defaultValue: "#fafafa" }),
+    border: color({ label: "Border", defaultValue: "#e5e5e5" }),
+    input: color({ label: "Input", defaultValue: "#e5e5e5" }),
+    ring: color({ label: "Ring", defaultValue: "#0a0a0a" }),
+    chart1: color({ label: "Chart 1", defaultValue: "#e76e50" }),
+    chart2: color({ label: "Chart 2", defaultValue: "#2a9d90" }),
+    chart3: color({ label: "Chart 3", defaultValue: "#264653" }),
+    chart4: color({ label: "Chart 4", defaultValue: "#e8c468" }),
+    chart5: color({ label: "Chart 5", defaultValue: "#f4a261" }),
+    sidebar: color({ label: "Sidebar", defaultValue: "#fafafa" }),
+    sidebarForeground: color({ label: "Sidebar Foreground", defaultValue: "#0a0a0a" }),
+    sidebarPrimary: color({ label: "Sidebar Primary", defaultValue: "#171717" }),
+    sidebarPrimaryForeground: color({ label: "Sidebar Primary FG", defaultValue: "#fafafa" }),
+    sidebarAccent: color({ label: "Sidebar Accent", defaultValue: "#f5f5f5" }),
+    sidebarAccentForeground: color({ label: "Sidebar Accent FG", defaultValue: "#171717" }),
+    sidebarBorder: color({ label: "Sidebar Border", defaultValue: "#e5e5e5" }),
+    sidebarRing: color({ label: "Sidebar Ring", defaultValue: "#0a0a0a" }),
+  } as const
+}
+
 export const themes = defineCollection({
   slug: TABLE_SLUG_THEMES,
   admin: {
+    defaultColumns: ["name", "_id", "fontFamily"],
     group: "Site Builder",
     useAsTitle: "name",
+    livePreview: {
+      url: "/preview/home",
+    },
+  },
+  versions: {
+    drafts: true,
   },
   fields: {
     name: text({
-      label: "Name",
+      label: "Theme Name",
       required: true,
     }),
-    backgroundColor: text({
-      defaultValue: "#ffffff",
-      label: "Background Color",
+    importTheme: ui({
+      admin: {
+        components: {
+          Field: ThemeImportField,
+        },
+      },
     }),
-    fontFamily: text({
-      defaultValue: "Inter, sans-serif",
-      label: "Font Family",
+    colors: tabs({
+      label: "Theme Colors",
+      tabs: [
+        {
+          label: "Light",
+          slug: "light",
+          fields: themeColorFields(),
+        },
+        {
+          label: "Dark",
+          slug: "dark",
+          fields: {
+            ...themeColorFields(),
+            // Override dark mode defaults
+            background: color({ label: "Background", defaultValue: "#0a0a0a" }),
+            foreground: color({ label: "Foreground", defaultValue: "#fafafa" }),
+            card: color({ label: "Card", defaultValue: "#0a0a0a" }),
+            cardForeground: color({ label: "Card Foreground", defaultValue: "#fafafa" }),
+            popover: color({ label: "Popover", defaultValue: "#0a0a0a" }),
+            popoverForeground: color({ label: "Popover Foreground", defaultValue: "#fafafa" }),
+            primary: color({ label: "Primary", defaultValue: "#fafafa" }),
+            primaryForeground: color({ label: "Primary Foreground", defaultValue: "#171717" }),
+            secondary: color({ label: "Secondary", defaultValue: "#262626" }),
+            secondaryForeground: color({ label: "Secondary Foreground", defaultValue: "#fafafa" }),
+            muted: color({ label: "Muted", defaultValue: "#262626" }),
+            mutedForeground: color({ label: "Muted Foreground", defaultValue: "#a3a3a3" }),
+            accent: color({ label: "Accent", defaultValue: "#262626" }),
+            accentForeground: color({ label: "Accent Foreground", defaultValue: "#fafafa" }),
+            border: color({ label: "Border", defaultValue: "#262626" }),
+            input: color({ label: "Input", defaultValue: "#262626" }),
+            ring: color({ label: "Ring", defaultValue: "#d4d4d4" }),
+            sidebar: color({ label: "Sidebar", defaultValue: "#171717" }),
+            sidebarForeground: color({ label: "Sidebar Foreground", defaultValue: "#fafafa" }),
+            sidebarPrimary: color({ label: "Sidebar Primary", defaultValue: "#fafafa" }),
+            sidebarPrimaryForeground: color({
+              label: "Sidebar Primary FG",
+              defaultValue: "#171717",
+            }),
+            sidebarAccent: color({ label: "Sidebar Accent", defaultValue: "#262626" }),
+            sidebarAccentForeground: color({ label: "Sidebar Accent FG", defaultValue: "#fafafa" }),
+            sidebarBorder: color({ label: "Sidebar Border", defaultValue: "#262626" }),
+            sidebarRing: color({ label: "Sidebar Ring", defaultValue: "#d4d4d4" }),
+          },
+        },
+      ],
     }),
-    primaryColor: text({
-      defaultValue: "#3b82f6",
-      label: "Primary Color",
+    radius: text({
+      label: "Border Radius",
+      defaultValue: "0.625rem",
     }),
-    secondaryColor: text({
-      defaultValue: "#6b7280",
-      label: "Secondary Color",
+    fontFamily: text({
+      label: "Font Family",
+      defaultValue: "Inter, sans-serif",
     }),
   },
   labels: {

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

@@ -0,0 +1 @@
+export { siteSettings } from "./siteSettings"

package/templates/marketing-site/src/vexcms/globals/siteSettings.ts

@@ -0,0 +1,57 @@
+import { defineGlobal, relationship, text, upload } from "@vexcms/core"
+
+import { TABLE_SLUG_MEDIA, TABLE_SLUG_SITE_SETTINGS, TABLE_SLUG_THEMES } from "~/db/constants"
+
+export const siteSettings = defineGlobal({
+  slug: TABLE_SLUG_SITE_SETTINGS,
+  admin: {
+    group: "Site Builder",
+    livePreview: {
+      url: "/preview/home",
+    },
+    useAsTitle: "name",
+  },
+  fields: {
+    name: text({
+      label: "Site Name",
+      required: true,
+    }),
+    activeTheme: relationship({
+      label: "Active Theme",
+      to: TABLE_SLUG_THEMES,
+    }),
+    description: text({
+      label: "Site Description",
+    }),
+    favicon: upload({
+      admin: { description: "Site favicon image" },
+      label: "Favicon",
+      to: TABLE_SLUG_MEDIA,
+    }),
+    googleAnalyticsId: text({
+      admin: { description: "GA4 measurement ID (G-XXXXXXXXXX)" },
+      label: "Google Analytics ID",
+    }),
+    metaDescription: text({
+      admin: { description: "Default meta description for SEO" },
+      label: "Meta Description",
+    }),
+    metaTitle: text({
+      admin: { description: "Default <title> tag for the site" },
+      label: "Meta Title",
+    }),
+    ogImage: upload({
+      admin: { description: "Default Open Graph image for social sharing" },
+      label: "OG Image",
+      to: TABLE_SLUG_MEDIA,
+    }),
+    twitterHandle: text({
+      admin: { description: "@handle for Twitter cards" },
+      label: "Twitter Handle",
+    }),
+  },
+  label: "Site Settings",
+  versions: {
+    drafts: true,
+  },
+})

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

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

package/templates/base-nextjs/src/auth/permissions.ts

@@ -1,102 +0,0 @@
-import type { User } from "~/db/types"
-
-import { TABLE_SLUG_USERS, USER_ROLES, type UserRole } from "~/db/constants"
-
-export const AUTH_ACTIONS = {
-  create: "create",
-  delete: "delete",
-  read: "read",
-  update: "update",
-} as const
-export type AuthAction = (typeof AUTH_ACTIONS)[keyof typeof AUTH_ACTIONS]
-
-export const RESOURCES = {
-  users: TABLE_SLUG_USERS,
-} as const
-export type Permissions = {
-  [TABLE_SLUG_USERS]: {
-    action: AuthAction
-    dataType: User
-  }
-}
-
-export type Resource = (typeof RESOURCES)[keyof typeof RESOURCES]
-
-export type RolesWithPermissions = Record<
-  UserRole,
-  Partial<{
-    [Key in keyof Permissions]: Partial<Record<Permissions[Key]["action"], PermissionCheck<Key>>>
-  }>
->
-
-type PermissionCheck<Key extends keyof Permissions> =
-  | (({ data, user }: { data: Permissions[Key]["dataType"]; user: User }) => boolean)
-  | boolean
-
-// type PermissionDataTypeExcluding<K extends keyof Permissions> = Permissions[Exclude<keyof Permissions, K>]["dataType"];
-// usage: T extends PermissionDataTypeExcluding<"orgs" | "users">
-
-const ROLES = {
-  [USER_ROLES.admin]: {
-    [TABLE_SLUG_USERS]: {
-      create: true,
-      delete: true,
-      read: true,
-      update: true,
-    },
-  },
-  [USER_ROLES.editor]: {
-    [TABLE_SLUG_USERS]: {
-      read: true,
-    },
-  },
-  [USER_ROLES.author]: {
-    [TABLE_SLUG_USERS]: {
-      read: ({ data: targetUser, user }) => user._id === targetUser._id,
-      update: ({ data: targetUser, user }) => user._id === targetUser._id,
-    },
-  },
-  [USER_ROLES.member]: {
-    [TABLE_SLUG_USERS]: {
-      read: ({ data: targetUser, user }) => user._id === targetUser._id,
-    },
-  },
-  [USER_ROLES.user]: {
-    [TABLE_SLUG_USERS]: {
-      create: false,
-      delete: ({ data: targetUser, user }) => user._id === targetUser._id,
-      read: ({ data: targetUser, user }) => user._id === targetUser._id,
-      update: ({ data: targetUser, user }) => user._id === targetUser._id,
-    },
-  },
-} as const satisfies RolesWithPermissions
-
-export function hasPermission<Resource extends keyof Permissions>({
-  action,
-  data,
-  resource,
-  user,
-}: {
-  action: Permissions[Resource]["action"]
-  data?: Permissions[Resource]["dataType"]
-  resource: Resource
-  user?: null | User
-}): boolean {
-  if (!user?.role) {
-    return false
-  }
-
-  return user.role.some((role) => {
-    const permission = (ROLES as RolesWithPermissions)[role as UserRole][resource]?.[action]
-
-    if (!permission) {
-      return false
-    }
-
-    if (typeof permission === "boolean") {
-      return permission
-    }
-
-    return data != null && permission({ data, user })
-  })
-}

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

@@ -1,31 +0,0 @@
-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",
-  },
-})