create-vexcms 0.0.7 → 0.0.9

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

@@ -0,0 +1,39 @@
+import type { BlockComponentProps } from "@vexcms/ui"
+import type { ComponentType } from "react"
+
+import {
+  BLOCK_SLUG_CTA,
+  BLOCK_SLUG_FAQ,
+  BLOCK_SLUG_FEATURES,
+  BLOCK_SLUG_FOOTER,
+  BLOCK_SLUG_HEADER,
+  BLOCK_SLUG_HERO,
+  BLOCK_SLUG_HOW_IT_WORKS,
+  BLOCK_SLUG_ROADMAP,
+} from "./constants"
+import CTABlock from "./CTA"
+import FAQBlock from "./FAQ"
+import FeaturesBlock from "./Features"
+import FooterBlock from "./Footer"
+import HeaderBlock from "./Header"
+import HeroBlock from "./Hero"
+import HowItWorksBlock from "./HowItWorks"
+import RoadmapBlock from "./Roadmap"
+
+/** Block component map for use with RenderBlocks */
+export const blockComponents: Record<
+  string,
+  ComponentType<BlockComponentProps>
+> = {
+  [BLOCK_SLUG_CTA]: CTABlock,
+  [BLOCK_SLUG_FAQ]: FAQBlock,
+  [BLOCK_SLUG_FEATURES]: FeaturesBlock,
+  [BLOCK_SLUG_FOOTER]: FooterBlock,
+  [BLOCK_SLUG_HEADER]: HeaderBlock,
+  [BLOCK_SLUG_HERO]: HeroBlock,
+  [BLOCK_SLUG_HOW_IT_WORKS]: HowItWorksBlock,
+  [BLOCK_SLUG_ROADMAP]: RoadmapBlock,
+}
+
+// Re-export configs for convenience in client code
+export { allBlocks, footerBlocks, headerBlocks, pageBlocks } from "./config"

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

@@ -1,6 +1,7 @@
-import { defineCollection, richtext, text } from "@vexcms/core"
+import { blocks, defineCollection, text } from "@vexcms/core"
 
-import { TABLE_SLUG_FOOTERS, TABLE_SLUG_MEDIA } from "~/db/constants"
+import { TABLE_SLUG_FOOTERS } from "~/db/constants"
+import { footerBlocks } from "~/vexcms/blocks/config"
 
 export const footers = defineCollection({
   slug: TABLE_SLUG_FOOTERS,
@@ -13,12 +14,14 @@ export const footers = defineCollection({
       label: "Name",
       required: true,
     }),
-    content: richtext({
-      label: "Content",
-      mediaCollection: TABLE_SLUG_MEDIA,
-    }),
-    copyright: text({
-      label: "Copyright Text",
+    content: blocks({
+      blocks: footerBlocks,
+      label: "Footer",
+      max: 1,
+      labels: {
+        singular: "Footer",
+        plural: "Footers",
+      },
     }),
   },
   labels: {

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

@@ -1,6 +1,7 @@
-import { checkbox, defineCollection, text, upload } from "@vexcms/core"
+import { blocks, defineCollection, text } from "@vexcms/core"
 
-import { TABLE_SLUG_HEADERS, TABLE_SLUG_MEDIA } from "~/db/constants"
+import { TABLE_SLUG_HEADERS } from "~/db/constants"
+import { headerBlocks } from "~/vexcms/blocks/config"
 
 export const headers = defineCollection({
   slug: TABLE_SLUG_HEADERS,
@@ -13,19 +14,14 @@ export const headers = defineCollection({
       label: "Name",
       required: true,
     }),
-    logoText: text({
-      label: "Logo Text",
-    }),
-    logoUrl: upload({
-      admin: {
-        description: "URL for the header logo image",
+    content: blocks({
+      blocks: headerBlocks,
+      label: "Header",
+      max: 1,
+      labels: {
+        singular: "Header",
+        plural: "Headers",
       },
-      label: "Logo URL",
-      to: TABLE_SLUG_MEDIA,
-    }),
-    sticky: checkbox({
-      defaultValue: false,
-      label: "Sticky Header",
     }),
   },
   labels: {

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

@@ -2,6 +2,5 @@ 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

@@ -1,6 +1,7 @@
-import { defineCollection, richtext, text } from "@vexcms/core"
+import { blocks, defineCollection, imageUrl, text } from "@vexcms/core"
 
-import { TABLE_SLUG_MEDIA, TABLE_SLUG_PAGES } from "~/db/constants"
+import { TABLE_SLUG_PAGES } from "~/db/constants"
+import { pageBlocks } from "~/vexcms/blocks/config"
 
 export const pages = defineCollection({
   slug: TABLE_SLUG_PAGES,
@@ -25,9 +26,34 @@ export const pages = defineCollection({
       label: "Slug",
       required: true,
     }),
-    content: richtext({
+    content: blocks({
+      blocks: pageBlocks,
       label: "Content",
-      mediaCollection: TABLE_SLUG_MEDIA,
+      labels: {
+        singular: "Block",
+        plural: "Blocks",
+      },
+    }),
+    metaTitle: text({
+      label: "Meta Title",
+      admin: {
+        description: "Custom <title> tag. Falls back to page title if empty.",
+        position: "sidebar",
+      },
+    }),
+    metaDescription: text({
+      label: "Meta Description",
+      admin: {
+        description: "Custom meta description for search results.",
+        position: "sidebar",
+      },
+    }),
+    ogImage: imageUrl({
+      label: "OG Image",
+      admin: {
+        description: "Custom Open Graph image URL for social sharing.",
+        position: "sidebar",
+      },
     }),
   },
   labels: {

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",
-  },
-})