@edgedev/create-edge-app 1.2.30 → 1.2.32

package/.env

@@ -11,4 +11,4 @@ VITE_FIREBASE_EMULATOR_FIRESTORE=
 VITE_FIREBASE_EMULATOR_FUNCTIONS=
 VITE_FIREBASE_EMULATOR_STORAGE=
 REGISTRATION_CODE=organization-registration-template
-DEVELOPMENT_MODE=false
+DEVELOPMENT_MODE=false

package/.env.dev

@@ -11,4 +11,4 @@ VITE_FIREBASE_EMULATOR_FIRESTORE=8080
 VITE_FIREBASE_EMULATOR_FUNCTIONS=5001
 VITE_FIREBASE_EMULATOR_STORAGE=9199
 REGISTRATION_CODE=organization-registration-template
-DEVELOPMENT_MODE=true
+DEVELOPMENT_MODE=true

package/edge/components/cms/site.vue

@@ -103,6 +103,7 @@ const schemas = {
         message: 'At least one domain is required',
         path: ['domains', 0],
       }),
+    forwardApex: z.boolean().optional(),
     contactEmail: z.string().optional(),
     contactPhone: z.string().optional(),
     theme: z.string({
@@ -783,6 +784,7 @@ const isSiteDiff = computed(() => {
       brandLogoLight: publishedSite.brandLogoLight,
       favicon: publishedSite.favicon,
       menuPosition: publishedSite.menuPosition,
+      forwardApex: publishedSite.forwardApex,
       contactEmail: publishedSite.contactEmail,
       contactPhone: publishedSite.contactPhone,
       metaTitle: publishedSite.metaTitle,
@@ -810,6 +812,7 @@ const isSiteDiff = computed(() => {
       brandLogoLight: siteData.value.brandLogoLight,
       favicon: siteData.value.favicon,
       menuPosition: siteData.value.menuPosition,
+      forwardApex: siteData.value.forwardApex,
       contactEmail: siteData.value.contactEmail,
       contactPhone: siteData.value.contactPhone,
       metaTitle: siteData.value.metaTitle,
@@ -851,6 +854,7 @@ const discardSiteSettings = async () => {
       brandLogoLight: publishedSite.brandLogoLight || '',
       favicon: publishedSite.favicon || '',
       menuPosition: publishedSite.menuPosition || '',
+      forwardApex: publishedSite.forwardApex === false ? false : true,
       contactEmail: publishedSite.contactEmail || '',
       contactPhone: publishedSite.contactPhone || '',
       metaTitle: publishedSite.metaTitle || '',
@@ -1699,6 +1703,7 @@ const pageSettingsUpdated = async (pageData) => {
                 :enable-media-picker="true"
                 :site-id="props.site"
                 :domain-error="domainError"
+                :settings-open="state.siteSettings"
               />
             </div>
             <SheetFooter class="pt-2 flex justify-between">

package/edge/components/cms/siteSettingsForm.vue

@@ -42,6 +42,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  settingsOpen: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const edgeFirebase = inject('edgeFirebase')
@@ -101,41 +105,266 @@ const menuPositionOptions = [
 
 const domainError = computed(() => String(props.domainError || '').trim())
 const serverPagesProject = ref('')
+const domainRegistry = ref({})
+const loadingDomainRegistry = ref(false)
+const hasLoadedDomainRegistry = ref(false)
 const pagesProject = computed(() => String(serverPagesProject.value || '').trim())
 const pagesDomain = computed(() => (pagesProject.value ? `${pagesProject.value}.pages.dev` : '(CLOUDFLARE_PAGES_PROJECT).pages.dev'))
+const forwardApexEnabled = computed({
+  get: () => props.settings?.forwardApex !== false,
+  set: (value) => {
+    props.settings.forwardApex = !!value
+  },
+})
+
+const normalizeDomain = (value) => {
+  if (!value)
+    return ''
+  let normalized = String(value).trim().toLowerCase()
+  if (!normalized)
+    return ''
+  if (normalized.includes('://')) {
+    try {
+      normalized = new URL(normalized).host
+    }
+    catch {
+      normalized = normalized.split('://').pop() || normalized
+    }
+  }
+  normalized = normalized.split('/')[0] || ''
+  if (normalized.includes(':') && !normalized.startsWith('[')) {
+    normalized = normalized.split(':')[0] || ''
+  }
+  return normalized.replace(/\.+$/g, '')
+}
+
+const isIpv4Address = (value) => {
+  const parts = String(value || '').split('.')
+  if (parts.length !== 4)
+    return false
+  return parts.every((part) => {
+    if (!/^\d{1,3}$/.test(part))
+      return false
+    const num = Number(part)
+    return num >= 0 && num <= 255
+  })
+}
+
+const isIpv6Address = (value) => {
+  const normalized = String(value || '').toLowerCase()
+  if (!normalized.includes(':'))
+    return false
+  return /^[0-9a-f:]+$/.test(normalized)
+}
+
+const isIpAddress = value => isIpv4Address(value) || isIpv6Address(value)
+
+const shouldDisplayDomainDnsRecords = (domain) => {
+  if (!domain)
+    return false
+  if (domain.includes('localhost'))
+    return false
+  if (isIpAddress(domain))
+    return false
+  if (domain.endsWith('.dev'))
+    return false
+  return true
+}
+
+const getCloudflareApexDomain = (domain) => {
+  if (!domain)
+    return ''
+  if (domain.startsWith('www.'))
+    return domain.slice(4)
+  return domain
+}
+
+const getCloudflarePagesDomain = (domain) => {
+  if (!domain)
+    return ''
+  if (domain.startsWith('www.'))
+    return domain
+  return `www.${domain}`
+}
+
+const normalizedDomains = computed(() => {
+  const values = Array.isArray(props.settings?.domains) ? props.settings.domains : []
+  return Array.from(new Set(values.map(normalizeDomain).filter(Boolean)))
+})
+
+const dnsEligibleDomains = computed(() => normalizedDomains.value.filter(shouldDisplayDomainDnsRecords))
+
+const organizationId = computed(() => String(edgeGlobal?.edgeState?.currentOrganization || '').trim())
+const shouldShowDomainRegistryLoading = computed(() => {
+  if (!normalizedDomains.value.length)
+    return false
+  return loadingDomainRegistry.value || !hasLoadedDomainRegistry.value
+})
+const DOMAIN_REGISTRY_POLL_MS = 2500
+let domainRegistryPollTimer = null
+
+const buildFallbackDomainEntry = (domain) => {
+  const apexDomain = getCloudflareApexDomain(domain)
+  const wwwDomain = getCloudflarePagesDomain(apexDomain)
+  const target = pagesDomain.value
+  const hasTarget = !!String(target || '').trim()
+  return {
+    domain,
+    apexDomain,
+    wwwDomain,
+    apexAttempted: false,
+    apexAdded: false,
+    apexError: '',
+    dnsGuidance: 'Add the www CNAME record. Apex is unavailable; forward apex to www.',
+    dnsRecords: {
+      target,
+      www: {
+        type: 'CNAME',
+        name: 'www',
+        host: wwwDomain,
+        value: target,
+        enabled: hasTarget,
+      },
+      apex: {
+        type: 'CNAME',
+        name: '@',
+        host: apexDomain,
+        value: target,
+        enabled: false,
+      },
+    },
+  }
+}
+
+const domainDnsEntries = computed(() => {
+  return dnsEligibleDomains.value.map((domain) => {
+    const fallback = buildFallbackDomainEntry(domain)
+    const value = domainRegistry.value?.[domain] || {}
+    const dnsRecords = {
+      ...fallback.dnsRecords,
+      ...(value.dnsRecords || {}),
+      www: {
+        ...fallback.dnsRecords.www,
+        ...(value?.dnsRecords?.www || {}),
+      },
+      apex: {
+        ...fallback.dnsRecords.apex,
+        ...(value?.dnsRecords?.apex || {}),
+      },
+    }
+    const apexAdded = value?.apexAdded === true
+    return {
+      ...fallback,
+      ...value,
+      dnsRecords,
+      apexAdded,
+      apexAttempted: value?.apexAttempted === true,
+      apexError: String(value?.apexError || '').trim(),
+      dnsGuidance: String(value?.dnsGuidance || '').trim()
+        || (apexAdded ? '' : fallback.dnsGuidance),
+    }
+  })
+})
 
-onMounted(async () => {
+const fetchDomainRegistry = async (options = {}) => {
+  const { background = false } = options
   if (!edgeFirebase?.runFunction)
     return
+  const domains = normalizedDomains.value
+  if (!background)
+    loadingDomainRegistry.value = true
   try {
-    const response = await edgeFirebase.runFunction('cms-getCloudflarePagesProject', {})
+    const response = await edgeFirebase.runFunction('cms-getCloudflarePagesProject', {
+      orgId: organizationId.value,
+      siteId: props.siteId || '',
+      domains,
+    })
     serverPagesProject.value = String(response?.data?.project || '').trim()
+    const nextRegistry = response?.data?.domainRegistry
+    if (domains.length && nextRegistry && typeof nextRegistry === 'object')
+      domainRegistry.value = nextRegistry
+    else
+      domainRegistry.value = {}
+    hasLoadedDomainRegistry.value = true
   }
   catch {
     serverPagesProject.value = ''
+    domainRegistry.value = {}
+    hasLoadedDomainRegistry.value = true
   }
+  finally {
+    if (!background)
+      loadingDomainRegistry.value = false
+  }
+}
+
+const stopDomainRegistryPolling = () => {
+  if (domainRegistryPollTimer) {
+    clearInterval(domainRegistryPollTimer)
+    domainRegistryPollTimer = null
+  }
+}
+
+const startDomainRegistryPolling = () => {
+  stopDomainRegistryPolling()
+  if (!props.settingsOpen)
+    return
+  if (!normalizedDomains.value.length)
+    return
+  domainRegistryPollTimer = setInterval(() => {
+    fetchDomainRegistry({ background: true }).catch(() => {})
+  }, DOMAIN_REGISTRY_POLL_MS)
+}
+
+watch(() => `${props.siteId}:${organizationId.value}:${normalizedDomains.value.join('|')}`, async () => {
+  hasLoadedDomainRegistry.value = false
+  await fetchDomainRegistry()
+  startDomainRegistryPolling()
+})
+
+watch(() => props.settingsOpen, async (open) => {
+  if (open) {
+    hasLoadedDomainRegistry.value = false
+    await fetchDomainRegistry()
+    startDomainRegistryPolling()
+  }
+  else {
+    stopDomainRegistryPolling()
+  }
+}, { immediate: true })
+
+onBeforeUnmount(() => {
+  stopDomainRegistryPolling()
 })
+
+watch(() => props.settings?.forwardApex, (value) => {
+  if (value === undefined)
+    props.settings.forwardApex = true
+}, { immediate: true })
 </script>
 
 <template>
   <Tabs class="w-full" default-value="general">
-    <TabsList class="w-full gap-2 bg-muted/40 p-1 rounded-lg">
-      <TabsTrigger value="general" class="text-sm uppercase font-medium">
+    <TabsList class="w-full mt-3 bg-secondary rounded-sm grid grid-cols-2 md:grid-cols-4 xl:grid-cols-7 gap-1">
+      <TabsTrigger value="general" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
         General
       </TabsTrigger>
-      <TabsTrigger value="appearance" class="text-sm uppercase font-medium">
+      <TabsTrigger value="domains" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
+        Domains
+      </TabsTrigger>
+      <TabsTrigger value="appearance" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
         Appearance
       </TabsTrigger>
-      <TabsTrigger value="branding" class="text-sm uppercase font-medium">
+      <TabsTrigger value="branding" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
         Branding
       </TabsTrigger>
-      <TabsTrigger value="seo" class="text-sm uppercase font-medium">
+      <TabsTrigger value="seo" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
         SEO
       </TabsTrigger>
-      <TabsTrigger value="tracking" class="text-sm uppercase font-medium">
+      <TabsTrigger value="tracking" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
         Tracking Pixels
       </TabsTrigger>
-      <TabsTrigger value="social" class="text-sm uppercase font-medium">
+      <TabsTrigger value="social" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
         Social Media
       </TabsTrigger>
     </TabsList>
@@ -147,46 +376,6 @@ onMounted(async () => {
         placeholder="Enter name"
         class="w-full"
       />
-      <edge-shad-tags
-        v-model="props.settings.domains"
-        name="domains"
-        label="Domains"
-        placeholder="Add or remove domains"
-        class="w-full"
-      />
-      <Alert v-if="domainError" variant="destructive">
-        <CircleAlert class="h-4 w-4" />
-        <AlertTitle>Domain error</AlertTitle>
-        <AlertDescription class="text-sm">
-          {{ domainError }}
-        </AlertDescription>
-      </Alert>
-      <div class="rounded-lg border border-border/60 bg-muted/40 p-4 space-y-3">
-        <div class="flex items-center justify-between">
-          <div class="text-sm font-semibold text-foreground">
-            Domain DNS records
-          </div>
-          <div class="text-xs text-muted-foreground">
-            Target: <span class="font-mono">{{ pagesDomain }}</span>
-          </div>
-        </div>
-        <p class="text-sm text-muted-foreground">
-          Add these records at your DNS provider.
-        </p>
-        <div class="space-y-2 text-sm">
-          <div class="grid grid-cols-[70px_1fr] gap-3">
-            <div class="text-muted-foreground">CNAME</div>
-            <div class="font-mono">www → {{ pagesDomain }}</div>
-          </div>
-          <div class="grid grid-cols-[70px_1fr] gap-3">
-            <div class="text-muted-foreground">CNAME</div>
-            <div class="font-mono">@ → {{ pagesDomain }}</div>
-          </div>
-        </div>
-        <p class="text-xs text-muted-foreground">
-          Then forward the root/apex (TLD) domain to <span class="font-mono">www</span> with a 301 redirect.
-        </p>
-      </div>
       <edge-shad-input
         v-model="props.settings.contactEmail"
         name="contactEmail"
@@ -219,6 +408,99 @@ onMounted(async () => {
         No organization users available for this site.
       </p>
     </TabsContent>
+    <TabsContent value="domains" class="pt-4 space-y-4">
+      <edge-shad-tags
+        v-model="props.settings.domains"
+        name="domains"
+        label="Domains"
+        placeholder="Add or remove domains"
+        class="w-full"
+      />
+      <div class="rounded-lg border border-border/60 bg-muted/40 p-4 space-y-3">
+        <edge-shad-switch
+          v-model="forwardApexEnabled"
+          name="forwardApex"
+          label="Forward Apex (non-www) domains to www"
+          class="w-full"
+        >
+          Use a single canonical host (www) to avoid duplicate URLs and consolidate SEO signals.
+        </edge-shad-switch>
+        <p class="text-xs text-amber-700 dark:text-amber-300">
+          Warning: if your DNS provider already redirects www to non-www, this can create a redirect loop.
+        </p>
+      </div>
+      <Alert v-if="domainError" variant="destructive">
+        <CircleAlert class="h-4 w-4" />
+        <AlertTitle>Domain error</AlertTitle>
+        <AlertDescription class="text-sm">
+          {{ domainError }}
+        </AlertDescription>
+      </Alert>
+      <div class="rounded-lg border border-border/60 bg-muted/40 p-4 space-y-3">
+        <div class="flex items-center justify-between">
+          <div class="text-sm font-semibold text-foreground">
+            Domain DNS records
+          </div>
+          <div class="text-xs text-muted-foreground">
+            Target: <span class="font-mono">{{ pagesDomain }}</span>
+          </div>
+        </div>
+        <p class="text-sm text-muted-foreground">
+          Records are listed for each domain.
+        </p>
+        <p v-if="shouldShowDomainRegistryLoading" class="text-xs text-muted-foreground">
+          Waiting for latest domain sync results...
+        </p>
+        <div v-if="!domainDnsEntries.length" class="text-sm text-muted-foreground italic">
+          Add at least one valid domain to see DNS records.
+        </div>
+        <div
+          v-for="entry in domainDnsEntries"
+          :key="entry.domain"
+          class="rounded-md border border-border/50 bg-background/70 p-3 space-y-3"
+        >
+          <div class="flex items-center justify-between gap-3">
+            <div class="text-sm font-semibold text-foreground font-mono">
+              {{ entry.domain }}
+            </div>
+            <div class="text-xs">
+              <span
+                v-if="entry.apexAdded"
+                class="rounded bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 px-2 py-1"
+              >
+                Apex added
+              </span>
+              <span
+                v-else
+                class="rounded bg-amber-500/15 text-amber-700 dark:text-amber-300 px-2 py-1"
+              >
+                Apex not added
+              </span>
+            </div>
+          </div>
+          <div class="space-y-2 text-sm">
+            <div class="grid grid-cols-[70px_1fr] gap-3">
+              <div class="text-muted-foreground">CNAME</div>
+              <div class="font-mono">
+                {{ entry?.dnsRecords?.www?.name || 'www' }} → {{ entry?.dnsRecords?.www?.value || pagesDomain }}
+              </div>
+            </div>
+            <div class="grid grid-cols-[70px_1fr] gap-3">
+              <div class="text-muted-foreground">CNAME</div>
+              <div class="font-mono">
+                {{ entry?.dnsRecords?.apex?.name || '@' }} → {{ entry?.dnsRecords?.apex?.value || pagesDomain }}
+              </div>
+            </div>
+          </div>
+          <p v-if="entry.apexError" class="text-xs text-amber-700 dark:text-amber-300">
+            {{ entry.apexError }}
+          </p>
+          <p v-if="!entry.apexAdded && entry.dnsGuidance" class="text-xs text-muted-foreground">
+            {{ entry.dnsGuidance }}
+          </p>
+        </div>
+      </div>
+    </TabsContent>
     <TabsContent value="appearance" class="pt-4 space-y-4">
       <edge-shad-select-tags
         v-if="props.showThemeFields && props.isAdmin"

package/edge/components/myProfile.vue

@@ -87,6 +87,24 @@ const filteredMetaFields = computed(() => {
   return (props.metaFields || []).filter(field => !skipFields.has(field.field))
 })
 
+const profilePhotoField = computed(() => {
+  return (props.metaFields || []).find(field => field?.field === 'profilephoto') || {}
+})
+
+const profilePhotoSite = computed(() => {
+  const baseSite = String(profilePhotoField.value?.site || 'system-images').trim() || 'system-images'
+  const uid = edgeFirebase?.user?.uid
+  if (!uid)
+    return baseSite
+  return `${baseSite}-${uid}`
+})
+
+const profilePhotoTags = computed(() => {
+  if (Array.isArray(profilePhotoField.value?.tags) && profilePhotoField.value.tags.length)
+    return profilePhotoField.value.tags
+  return ['Headshots']
+})
+
 const initializeDefaults = (meta) => {
   defaultFields.forEach((field) => {
     if (!(field.field in meta))
@@ -249,8 +267,8 @@ const menuIcon = computed(() => {
                   v-model="state.meta.profilephoto"
                   label="Profile Photo"
                   dialog-title="Select Profile Photo"
-                  :site="`${clearwater - hub - images}-${edgeFirebase.user.uid}`"
-                  :default-tags="['Headshots']"
+                  :site="profilePhotoSite"
+                  :default-tags="profilePhotoTags"
                   height-class="h-full min-h-[180px]"
                   :include-cms-all="false"
                 />
@@ -294,7 +312,7 @@ const menuIcon = computed(() => {
                   :model-value="getByPath(state.meta, field.field, '')"
                   :label="field?.label || 'Photo'"
                   :dialog-title="field?.dialogTitle || 'Select Image'"
-                  :site="field?.site || 'clearwater-hub-images'"
+                  :site="field?.site || 'system-images'"
                   :include-cms-all="false"
                   :default-tags="field?.tags || []"
                   :height-class="field?.heightClass || 'h-[160px]'"

package/edge/composables/siteSettingsTemplate.js

@@ -15,6 +15,7 @@ export const useSiteSettingsTemplate = () => {
     favicon: '',
     menuPosition: 'right',
     domains: [],
+    forwardApex: true,
     contactEmail: '',
     contactPhone: '',
     metaTitle: '',
@@ -49,6 +50,7 @@ export const useSiteSettingsTemplate = () => {
       favicon: { bindings: { 'field-type': 'text', 'label': 'Favicon' }, cols: '12', value: defaults.favicon },
       menuPosition: { bindings: { 'field-type': 'select', 'label': 'Menu Position', 'items': ['left', 'center', 'right'] }, cols: '12', value: defaults.menuPosition },
       domains: { bindings: { 'field-type': 'tags', 'label': 'Domains', 'helper': 'Add or remove domains' }, cols: '12', value: defaults.domains },
+      forwardApex: { bindings: { 'field-type': 'boolean', 'label': 'Forward Apex (non-www) domains to www' }, cols: '12', value: defaults.forwardApex },
       contactEmail: { bindings: { 'field-type': 'text', 'label': 'Contact Email' }, cols: '12', value: defaults.contactEmail },
       contactPhone: { bindings: { 'field-type': 'text', 'label': 'Contact Phone' }, cols: '12', value: defaults.contactPhone },
       metaTitle: { bindings: { 'field-type': 'text', 'label': 'Meta Title' }, cols: '12', value: defaults.metaTitle },

package/package.json

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