@edgedev/create-edge-app 1.2.29 → 1.2.30

package/{pages/app/dashboard/blocks/index.vue → edge/components/cms/blocksManager.vue}

@@ -7,15 +7,7 @@ const state = reactive({
   themesFilter: [],
 })
 
-const previewState = reactive({
-  loaded: [],
-})
-
-definePageMeta({
-  middleware: 'auth',
-})
-
-const rawInitBlockFiles = import.meta.glob('../../../../edge/components/cms/init_blocks/*.html', {
+const rawInitBlockFiles = import.meta.glob('./init_blocks/*.html', {
   as: 'raw',
   eager: true,
 })
@@ -74,14 +66,6 @@ const seedInitialBlocks = async () => {
   return created
 }
 
-onBeforeMount(async () => {
-  restoreFilters()
-  if (!edgeFirebase.data?.[`organizations/${edgeGlobal.edgeState.currentOrganization}/themes`]) {
-    await edgeFirebase.startSnapshot(`organizations/${edgeGlobal.edgeState.currentOrganization}/themes`)
-  }
-  state.mounted = true
-})
-
 const getThemeFromId = (themeId) => {
   const theme = edgeFirebase.data[`organizations/${edgeGlobal.edgeState.currentOrganization}/themes`]?.[themeId]
   console.log('getThemeFromId', themeId, theme.name)
@@ -93,13 +77,6 @@ const loadingRender = (content) => {
   return safeContent.replaceAll('{{loading}}', '').replaceAll('{{loaded}}', 'hidden')
 }
 
-const markPreviewLoaded = (isLoading, id) => {
-  if (!isLoading && !previewState.loaded.includes(id))
-    previewState.loaded.push(id)
-}
-
-const hasPreviewLoaded = id => previewState.loaded.includes(id)
-
 const FILTER_STORAGE_KEY = 'edge.blocks.filters'
 
 const restoreFilters = () => {
@@ -136,6 +113,14 @@ watch(
   { deep: true },
 )
 
+onBeforeMount(async () => {
+  restoreFilters()
+  if (!edgeFirebase.data?.[`organizations/${edgeGlobal.edgeState.currentOrganization}/themes`]) {
+    await edgeFirebase.startSnapshot(`organizations/${edgeGlobal.edgeState.currentOrganization}/themes`)
+  }
+  state.mounted = true
+})
+
 const tagOptions = computed(() => {
   const tagsSet = new Set()
   const blocks = edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/blocks`] || {}

package/edge/components/cms/sitesManager.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { Loader2 } from 'lucide-vue-next'
+
+const edgeFirebase = inject('edgeFirebase')
+const isAiBusy = status => status === 'queued' || status === 'running'
+
+const state = reactive({
+  filter: '',
+})
+
+const isAdmin = computed(() => {
+  return edgeGlobal.isAdminGlobal(edgeFirebase).value
+})
+
+const disableAddSiteForNonAdmin = true
+
+const currentOrgRoleName = computed(() => {
+  return String(edgeGlobal.getRoleName(edgeFirebase?.user?.roles || [], edgeGlobal.edgeState.currentOrganization) || '').toLowerCase()
+})
+
+const canAddSite = computed(() => {
+  if (!disableAddSiteForNonAdmin)
+    return true
+  return currentOrgRoleName.value === 'admin'
+})
+
+const queryField = computed(() => {
+  if (!isAdmin.value) {
+    return 'users'
+  }
+  return ''
+})
+
+const queryValue = computed(() => {
+  if (!isAdmin.value) {
+    return [edgeFirebase?.user?.uid]
+  }
+  return ''
+})
+
+const queryOperator = computed(() => {
+  if (!isAdmin.value) {
+    return 'array-contains-any'
+  }
+  return ''
+})
+</script>
+
+<template>
+  <edge-dashboard
+    :filter="state.filter"
+    :query-field="queryField"
+    :query-value="queryValue"
+    :query-operator="queryOperator"
+    collection="sites"
+    class="flex-1 pt-0"
+  >
+    <template #header-end>
+      <edge-shad-button
+        v-if="canAddSite"
+        class="uppercase bg-primary"
+        to="/app/dashboard/sites/new"
+      >
+        Add Site
+      </edge-shad-button>
+      <div v-else class="hidden" />
+    </template>
+    <template #list="slotProps">
+      <template v-for="item in slotProps.filtered" :key="item.docId">
+        <edge-shad-button
+          variant="text"
+          class="cursor-pointer w-full flex justify-between items-center py-2 gap-3"
+          :to="isAiBusy(item.aiBootstrapStatus) ? undefined : `/app/dashboard/sites/${item.docId}`"
+          :disabled="isAiBusy(item.aiBootstrapStatus)"
+        >
+          <div>
+            <Avatar class="cursor-pointer p-0 h-8 w-8 mr-2">
+              <FilePenLine class="h-5 w-5" />
+            </Avatar>
+          </div>
+          <div class="grow text-left">
+            <div class="text-lg">
+              {{ item.name }}
+            </div>
+            <div v-if="isAiBusy(item.aiBootstrapStatus)" class="flex items-center gap-2 text-xs text-muted-foreground">
+              <Loader2 class="h-3 w-3 animate-spin" />
+              <span>AI is preparing this site</span>
+            </div>
+          </div>
+          <div>
+            <edge-shad-button
+              size="icon"
+              class="bg-slate-600 h-7 w-7"
+              @click.stop="slotProps.deleteItem(item.docId)"
+            >
+              <Trash class="h-5 w-5" />
+            </edge-shad-button>
+          </div>
+        </edge-shad-button>
+        <Separator class="dark:bg-slate-600" />
+      </template>
+      <div
+        v-if="slotProps.filtered.length === 0 && !isAdmin && disableAddSiteForNonAdmin"
+        class="px-4 py-6 text-sm text-muted-foreground"
+      >
+        No sites are assigned to your account. Contact an organization admin to add a site for you.
+      </div>
+    </template>
+  </edge-dashboard>
+</template>

package/edge/components/editor.vue

@@ -96,6 +96,46 @@ const state = reactive({
 const edgeFirebase = inject('edgeFirebase')
 // const edgeGlobal = inject('edgeGlobal')
 
+const normalizeObject = (value) => {
+  if (Array.isArray(value)) {
+    return value.map(item => normalizeObject(item))
+  }
+
+  if (value && typeof value === 'object') {
+    return Object.keys(value)
+      .sort()
+      .reduce((acc, key) => {
+        acc[key] = normalizeObject(value[key])
+        return acc
+      }, {})
+  }
+
+  return value
+}
+
+const withSchemaDefaults = (doc = {}) => {
+  const normalizedDoc = edgeGlobal.dupObject(doc || {})
+  Object.keys(newDoc.value).forEach((field) => {
+    if (!edgeGlobal.objHas(normalizedDoc, field)) {
+      normalizedDoc[field] = newDoc.value[field]
+    }
+  })
+  return normalizedDoc
+}
+
+const comparableDoc = (doc = {}) => {
+  const sourceDoc = (doc && typeof doc === 'object') ? doc : {}
+  const comparable = {}
+  Object.keys(props.newDocSchema || {}).forEach((field) => {
+    if (edgeGlobal.objHas(sourceDoc, field)) {
+      comparable[field] = sourceDoc[field]
+      return
+    }
+    comparable[field] = newDoc.value[field]
+  })
+  return normalizeObject(comparable)
+}
+
 const unsavedChanges = computed(() => {
   if (props.docId === 'new') {
     return false
@@ -107,9 +147,9 @@ const unsavedChanges = computed(() => {
     return false
   }
 
-  console.log('comparing', state.workingDoc, baselineDoc)
-  console.log('unsavedChanges', JSON.stringify(state.workingDoc) !== JSON.stringify(baselineDoc))
-  return JSON.stringify(state.workingDoc) !== JSON.stringify(baselineDoc)
+  const workingComparable = comparableDoc(state.workingDoc)
+  const baselineComparable = comparableDoc(baselineDoc)
+  return JSON.stringify(workingComparable) !== JSON.stringify(baselineComparable)
 })
 
 onBeforeRouteLeave((to, from, next) => {
@@ -164,7 +204,7 @@ const discardChanges = async () => {
     }
     return
   }
-  state.workingDoc = await edgeGlobal.dupObject(state.collectionData[props.docId])
+  state.workingDoc = withSchemaDefaults(state.collectionData[props.docId])
   state.bypassUnsavedChanges = true
   state.dialog = false
   edgeGlobal.edgeState.changeTracker = {}
@@ -328,44 +368,63 @@ const initData = (newVal) => {
     if (edgeGlobal.objHas(newVal, props.docId) === false) {
       return
     }
-    state.workingDoc = edgeGlobal.dupObject(newVal[props.docId])
-    Object.keys(newDoc.value).forEach((field) => {
-      if (!edgeGlobal.objHas(state.workingDoc, field)) {
-        state.workingDoc[field] = newDoc.value[field]
-      }
-    })
+    state.workingDoc = withSchemaDefaults(newVal[props.docId])
     state.afterMount = true
   }
   else {
     if (!state.afterMount) {
-      state.workingDoc = edgeGlobal.dupObject(newDoc.value)
+      state.workingDoc = withSchemaDefaults(newDoc.value)
     }
     state.afterMount = true
   }
 }
 
-onBeforeMount(async () => {
-  state.bypassUnsavedChanges = false
-  edgeGlobal.edgeState.changeTracker = {}
-  for (const field of Object.keys(props.newDocSchema)) {
+const startCollectionSnapshots = async () => {
+  for (const field of Object.keys(props.newDocSchema || {})) {
     if (props.newDocSchema[field].type === 'collection') {
       await edgeFirebase.startSnapshot(`${edgeGlobal.edgeState.organizationDocPath}/${field}`)
     }
   }
-  emit('unsavedChanges', unsavedChanges.value)
-  // console.log('mounting editor for', props.collection, props.docId)
-  // console.log('starting snapshot for collection:', props.collection)
-  // await edgeFirebase.startSnapshot(`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`)
-  if (!edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`]) {
-    console.log(`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`)
-    console.log(props.docId)
-    const docData = await edgeFirebase.getDocData(`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`, props.docId)
-    state.collectionData[props.docId] = docData
-    initData(state.collectionData)
-  }
-  else {
-    state.collectionData = edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`]
+}
+
+const setCollectionData = async () => {
+  const collectionPath = `${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`
+  if (!edgeFirebase.data?.[collectionPath]) {
+    if (props.docId !== 'new') {
+      const docData = await edgeFirebase.getDocData(collectionPath, props.docId)
+      state.collectionData = {
+        ...(state.collectionData || {}),
+        [props.docId]: docData,
+      }
+    }
+    else if (!state.collectionData || typeof state.collectionData !== 'object') {
+      state.collectionData = {}
+    }
+    return
   }
+  state.collectionData = edgeFirebase.data[collectionPath]
+}
+
+const resetEditorState = () => {
+  state.bypassUnsavedChanges = false
+  state.bypassRoute = ''
+  state.afterMount = false
+  state.dialog = false
+  state.successMessage = ''
+  state.skipNextValidation = props.docId === 'new'
+  edgeGlobal.edgeState.changeTracker = {}
+}
+
+const refreshEditorData = async () => {
+  resetEditorState()
+  await startCollectionSnapshots()
+  await setCollectionData()
+  initData(state.collectionData)
+  emit('unsavedChanges', unsavedChanges.value)
+}
+
+onBeforeMount(async () => {
+  await refreshEditorData()
   if (props.noCloseAfterSave) {
     state.overrideClose = true
   }
@@ -374,6 +433,17 @@ onBeforeMount(async () => {
 watch(() => state.collectionData, (newVal) => {
   initData(newVal)
 })
+
+watch(() => [props.collection, props.docId], async (newVal, oldVal) => {
+  if (!oldVal) {
+    return
+  }
+  if (newVal[0] === oldVal[0] && newVal[1] === oldVal[1]) {
+    return
+  }
+  await refreshEditorData()
+})
+
 onActivated(() => {
   // console.log('activated')
   state.bypassUnsavedChanges = false
@@ -384,17 +454,12 @@ onActivated(() => {
     if (edgeGlobal.objHas(state.collectionData, props.docId) === false) {
       return
     }
-    state.workingDoc = edgeGlobal.dupObject(state.collectionData[props.docId])
-    Object.keys(newDoc.value).forEach((field) => {
-      if (!edgeGlobal.objHas(state.workingDoc, field)) {
-        state.workingDoc[field] = newDoc.value[field]
-      }
-    })
+    state.workingDoc = withSchemaDefaults(state.collectionData[props.docId])
 
     // console.log('state.workingDoc', state.workingDoc)
   }
   else {
-    state.workingDoc = edgeGlobal.dupObject(newDoc.value)
+    state.workingDoc = withSchemaDefaults(newDoc.value)
     Object.entries(route.query).forEach(([key, value]) => {
     // Check if the key exists in state.workingDoc, and if so, set the value
       if (key in state.workingDoc) {

package/edge/routes/cms/dashboard/blocks/index.vue

@@ -0,0 +1,21 @@
+<script setup>
+const state = reactive({
+  mounted: false,
+})
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+onMounted(() => {
+  state.mounted = true
+})
+</script>
+
+<template>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath && state.mounted"
+  >
+    <edge-cms-blocks-manager />
+  </div>
+</template>

package/edge/routes/cms/dashboard/sites/index.vue

@@ -0,0 +1,13 @@
+<script setup>
+definePageMeta({
+  middleware: 'auth',
+})
+</script>
+
+<template>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath"
+  >
+    <edge-cms-sites-manager />
+  </div>
+</template>

package/edge/routes/cms/nuxtHooks.js

@@ -0,0 +1,52 @@
+import { resolve as resolvePath } from 'node:path'
+import { cmsRoutes } from './routes'
+
+const resolveRouteFileFromCwd = (file) => {
+  const normalizedPath = String(file || '').replace(/^\.\//, '')
+  return resolvePath(process.cwd(), normalizedPath)
+}
+
+export const createCmsNuxtHooks = (resolveFile) => {
+  const resolveRouteFile = typeof resolveFile === 'function'
+    ? resolveFile
+    : resolveRouteFileFromCwd
+
+  const routeExists = (routeList, name) => {
+    for (const route of routeList) {
+      if (route.name === name)
+        return true
+      if (route.children?.length && routeExists(route.children, name))
+        return true
+    }
+    return false
+  }
+
+  const resolveCmsRoute = (route, appRootRoute, isChild = false) => {
+    const shouldStripAppPrefix = Boolean(appRootRoute) && !isChild
+    const nextRoute = {
+      ...route,
+      path: shouldStripAppPrefix
+        ? route.path.replace(/^\/app\/?/, '')
+        : route.path,
+      file: resolveRouteFile(route.file),
+    }
+
+    if (route.children?.length)
+      nextRoute.children = route.children.map(child => resolveCmsRoute(child, appRootRoute, true))
+
+    return nextRoute
+  }
+
+  return {
+    'pages:extend': (pages) => {
+      const appRootRoute = pages.find(page => page.path === '/app')
+      const targetRoutes = appRootRoute?.children || pages
+
+      cmsRoutes.forEach((route) => {
+        const routeToAdd = resolveCmsRoute(route, appRootRoute)
+        if (!routeExists(targetRoutes, routeToAdd.name))
+          targetRoutes.push(routeToAdd)
+      })
+    },
+  }
+}

package/edge/routes/cms/routes.js

@@ -0,0 +1,56 @@
+export const cmsRoutes = [
+  {
+    name: 'cms-dashboard-sites-index',
+    path: '/app/dashboard/sites',
+    file: './edge/routes/cms/dashboard/sites/index.vue',
+  },
+  {
+    name: 'cms-dashboard-blocks-index',
+    path: '/app/dashboard/blocks',
+    file: './edge/routes/cms/dashboard/blocks/index.vue',
+  },
+  {
+    name: 'cms-dashboard-blocks-block',
+    path: '/app/dashboard/blocks/:block',
+    file: './edge/routes/cms/dashboard/blocks/[block].vue',
+  },
+  {
+    name: 'cms-dashboard-media-index',
+    path: '/app/dashboard/media',
+    file: './edge/routes/cms/dashboard/media/index.vue',
+  },
+  {
+    name: 'cms-dashboard-sites-site',
+    path: '/app/dashboard/sites/:site',
+    file: './edge/routes/cms/dashboard/sites/[site].vue',
+    children: [
+      {
+        name: 'cms-dashboard-sites-site-page',
+        path: ':page',
+        file: './edge/routes/cms/dashboard/sites/[site]/[[page]].vue',
+      },
+    ],
+  },
+  {
+    name: 'cms-dashboard-templates-index',
+    path: '/app/dashboard/templates',
+    file: './edge/routes/cms/dashboard/templates/index.vue',
+    children: [
+      {
+        name: 'cms-dashboard-templates-page',
+        path: ':page',
+        file: './edge/routes/cms/dashboard/templates/[page].vue',
+      },
+    ],
+  },
+  {
+    name: 'cms-dashboard-themes-index',
+    path: '/app/dashboard/themes',
+    file: './edge/routes/cms/dashboard/themes/index.vue',
+  },
+  {
+    name: 'cms-dashboard-themes-theme',
+    path: '/app/dashboard/themes/:theme',
+    file: './edge/routes/cms/dashboard/themes/[theme].vue',
+  },
+]

package/nuxt.config.ts

@@ -1,3 +1,8 @@
+import { createCmsNuxtHooks } from './edge/routes/cms/nuxtHooks'
+
+const cmsRouteHooks = {}
+Object.assign(cmsRouteHooks, createCmsNuxtHooks()) // Comment out this line to disable CMS routes.
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   ssr: false,
@@ -16,6 +21,12 @@ export default defineNuxtConfig({
         { rel: 'apple-touch-icon', sizes: '180x180', href: '/favicon/apple-touch-icon.png' },
         { rel: 'manifest', href: '/favicon/site.webmanifest' },
       ],
+      meta: [
+        {
+          'http-equiv': 'Content-Security-Policy',
+          'content': 'font-src \'self\' https://files.edgemarketingdesign.com https://use.typekit.net https://p.typekit.net data:;',
+        },
+      ],
     },
   },
   modules: ['@vant/nuxt', '@nuxtjs/tailwindcss', '@nuxtjs/color-mode', 'shadcn-nuxt'],
@@ -40,9 +51,11 @@ export default defineNuxtConfig({
   },
   components: {
     dirs: [
-      { path: '~/components/formSubtypes', global: true, prefix: 'edge-form-subtypes' },
+      { path: '~/components' },
+
+      // Namespaced wrappers — keep them, but lower priority is fine
       { path: '~/edge/components', global: true, prefix: 'edge' },
-      '~/components',
+      { path: '~/components/formSubtypes', global: true, prefix: 'edge-form-subtypes' },
     ],
   },
   vite: {
@@ -50,11 +63,15 @@ export default defineNuxtConfig({
       'process.env.DEBUG': false,
     },
     server: {
+      watch: {
+        ignored: ['**/.nuxt/**', '**/.output/**', '**/dist/**', '**/node_modules/**'],
+      },
       hmr: {
         port: 3000, // Make sure this port matches your Nuxt server port
         clientPort: 3000, // Ensure this matches your Nuxt server port as well
       },
     },
   },
+  hooks: cmsRouteHooks,
   devtools: { enabled: false },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgedev/create-edge-app",
-  "version": "1.2.29",
+  "version": "1.2.30",
   "description": "Create Edge Starter App",
   "bin": {
     "create-edge-app": "./bin/cli.js"

package/pages/app/dashboard/sites/index.vue

@@ -1,114 +0,0 @@
-<script setup>
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import { Loader2 } from 'lucide-vue-next'
-const route = useRoute()
-// const edgeGlobal = inject('edgeGlobal')
-
-const edgeFirebase = inject('edgeFirebase')
-const isAiBusy = status => status === 'queued' || status === 'running'
-
-const state = reactive({
-  filter: '',
-  newDocs: {
-    sites: {
-      name: { bindings: { 'field-type': 'text', 'label': 'Name', 'helper': 'Name' }, cols: '12', value: '' },
-    },
-  },
-})
-
-const schemas = {
-  sites: toTypedSchema(z.object({
-    name: z.string({
-      required_error: 'Name is required',
-    }).min(1, { message: 'Name is required' }),
-  })),
-}
-
-const collection = computed(() => {
-  if (route.params.collection) {
-    return route.params.collection
-  }
-  return ''
-})
-const docId = computed(() => {
-  if (route.params.docId) {
-    return route.params.docId
-  }
-  return ''
-})
-definePageMeta({
-  middleware: 'auth',
-})
-
-onBeforeMount(() => {
-  // edgeGlobal.showLeftPanel(true)
-})
-const isAdmin = computed(() => {
-  return edgeGlobal.isAdminGlobal(edgeFirebase).value
-})
-const queryField = computed(() => {
-  if (!isAdmin.value) {
-    return 'users'
-  }
-  return ''
-})
-
-const queryValue = computed(() => {
-  if (!isAdmin.value) {
-    return [edgeFirebase?.user?.uid]
-  }
-  return ''
-})
-
-const queryOperator = computed(() => {
-  if (!isAdmin.value) {
-    return 'array-contains-any'
-  }
-  return ''
-})
-</script>
-
-<template>
-  <div
-    v-if="edgeGlobal.edgeState.organizationDocPath"
-  >
-    <edge-dashboard :load-first-if-one="!isAdmin" :filter="state.filter" :query-field="queryField" :query-value="queryValue" :query-operator="queryOperator" collection="sites" class="flex-1 pt-0">
-      <template #list="slotProps">
-        <template v-for="item in slotProps.filtered" :key="item.docId">
-          <edge-shad-button
-            variant="text"
-            class="cursor-pointer w-full flex justify-between items-center py-2 gap-3"
-            :to="isAiBusy(item.aiBootstrapStatus) ? undefined : `/app/dashboard/sites/${item.docId}`"
-            :disabled="isAiBusy(item.aiBootstrapStatus)"
-          >
-            <div>
-              <Avatar class="cursor-pointer p-0 h-8 w-8 mr-2">
-                <FilePenLine class="h-5 w-5" />
-              </Avatar>
-            </div>
-            <div class="grow text-left">
-              <div class="text-lg">
-                {{ item.name }}
-              </div>
-              <div v-if="isAiBusy(item.aiBootstrapStatus)" class="flex items-center gap-2 text-xs text-muted-foreground">
-                <Loader2 class="h-3 w-3 animate-spin" />
-                <span>AI is preparing this site</span>
-              </div>
-            </div>
-            <div>
-              <edge-shad-button
-                size="icon"
-                class="bg-slate-600 h-7 w-7"
-                @click.stop="slotProps.deleteItem(item.docId)"
-              >
-                <Trash class="h-5 w-5" />
-              </edge-shad-button>
-            </div>
-          </edge-shad-button>
-          <Separator class="dark:bg-slate-600" />
-        </template>
-      </template>
-    </edge-dashboard>
-  </div>
-</template>