@edgedev/create-edge-app 1.1.28 → 1.1.29

package/edge/components/auth/register.vue

@@ -77,6 +77,47 @@ const register = reactive({
   requestedOrgId: '',
 })
 
+const resolveAuthEmail = () => {
+  return (
+    edgeFirebase?.user?.email
+    || edgeFirebase?.user?.firebaseUser?.email
+    || edgeFirebase?.user?.firebaseUser?.providerData?.find(p => p?.email)?.email
+    || ''
+  )
+}
+
+const waitForUserSnapshot = async (timeoutMs = 8000) => {
+  const findUser = () => {
+    const users = Object.values(edgeFirebase.state?.users || {})
+    const stagedDocId = edgeFirebase?.user?.stagedDocId
+    const uid = edgeFirebase?.user?.uid
+    return users.find(u => (stagedDocId && u?.docId === stagedDocId) || (uid && u?.userId === uid))
+  }
+
+  if (findUser())
+    return true
+
+  return await new Promise((resolve) => {
+    let timeoutId = null
+    const stop = watch(
+      () => edgeFirebase.state?.users,
+      () => {
+        if (findUser()) {
+          stop()
+          if (timeoutId)
+            clearTimeout(timeoutId)
+          resolve(true)
+        }
+      },
+      { immediate: true, deep: true },
+    )
+    timeoutId = setTimeout(() => {
+      stop()
+      resolve(false)
+    }, timeoutMs)
+  })
+}
+
 const onSubmit = async () => {
   state.registering = true
 
@@ -108,6 +149,9 @@ const onSubmit = async () => {
     if (state.showRegistrationCode || !props.registrationCode) {
       register.registrationCode = state.registrationCode
     }
+    if (state.provider === 'email' && register.email) {
+      register.meta.email = register.email
+    }
     const result = await edgeFirebase.registerUser(register, state.provider)
     state.error.error = !result.success
     if (result.message === `${props.requestedOrgIdLabel} already exists.`) {
@@ -118,6 +162,13 @@ const onSubmit = async () => {
       result.message = `${orgLabel} already exists. Please choose another.`
     }
     state.error.message = result.message.code ? result.message.code : result.message
+    if (result.success) {
+      const authEmail = resolveAuthEmail()
+      if (authEmail && (!register.meta.email || register.meta.email !== authEmail)) {
+        await waitForUserSnapshot()
+        await edgeFirebase.setUserMeta({ email: authEmail })
+      }
+    }
   }
 
   state.registering = false

package/edge/components/cms/block.vue

@@ -122,11 +122,13 @@ const sanitizeQueryItems = (meta) => {
   return cleaned
 }
 
-const resetArrayItems = (field) => {
+const resetArrayItems = (field, metaSource = null) => {
+  const meta = metaSource || modelValue.value?.meta || {}
+  const fieldMeta = meta?.[field]
   if (!state.arrayItems?.[field]) {
     state.arrayItems[field] = {}
   }
-  for (const schemaItem of modelValue.value.meta[field].schema) {
+  for (const schemaItem of (fieldMeta?.schema || [])) {
     if (schemaItem.type === 'text') {
       state.arrayItems[field][schemaItem.field] = ''
     }
@@ -148,25 +150,35 @@ const resetArrayItems = (field) => {
 const openEditor = async () => {
   if (!props.editMode)
     return
-  for (const key of Object.keys(modelValue.value?.meta || {})) {
-    if (modelValue.value.meta[key]?.type === 'array' && modelValue.value.meta[key]?.schema) {
-      if (!modelValue.value.meta[key]?.api) {
-        resetArrayItems(key)
-      }
+  const blockData = edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/blocks`]?.[modelValue.value.blockId]
+  const templateMeta = blockData?.meta || modelValue.value?.meta || {}
+  const storedMeta = modelValue.value?.meta || {}
+  const mergedMeta = edgeGlobal.dupObject(templateMeta) || {}
+
+  for (const key of Object.keys(mergedMeta)) {
+    const storedField = storedMeta?.[key]
+    if (!storedField || typeof storedField !== 'object')
+      continue
+    if (storedField.queryItems && typeof storedField.queryItems === 'object') {
+      mergedMeta[key].queryItems = edgeGlobal.dupObject(storedField.queryItems)
+    }
+    if (storedField.limit !== undefined) {
+      mergedMeta[key].limit = storedField.limit
     }
   }
-  state.draft = JSON.parse(JSON.stringify(modelValue.value?.values || {}))
-  state.meta = JSON.parse(JSON.stringify(modelValue.value?.meta || {}))
-  ensureQueryItemsDefaults(state.meta)
-  const blockData = edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/blocks`]?.[modelValue.value.blockId]
-  state.metaUpdate = edgeGlobal.dupObject(modelValue.value?.meta) || {}
-  if (blockData?.meta) {
-    for (const key of Object.keys(blockData.meta)) {
-      if (!(key in state.metaUpdate)) {
-        state.metaUpdate[key] = blockData.meta[key]
+
+  for (const key of Object.keys(mergedMeta || {})) {
+    if (mergedMeta[key]?.type === 'array' && mergedMeta[key]?.schema) {
+      if (!mergedMeta[key]?.api) {
+        resetArrayItems(key, mergedMeta)
       }
     }
   }
+
+  state.draft = JSON.parse(JSON.stringify(modelValue.value?.values || {}))
+  state.meta = JSON.parse(JSON.stringify(mergedMeta || {}))
+  ensureQueryItemsDefaults(state.meta)
+  state.metaUpdate = edgeGlobal.dupObject(mergedMeta) || {}
   if (blockData?.values) {
     for (const key of Object.keys(blockData.values)) {
       if (!(key in state.draft)) {
@@ -682,6 +694,7 @@ const getTagsFromPosts = computed(() => {
                         v-model="state.meta[entry.field].queryItems[option.field]"
                         :option="option"
                         :label="genTitleFromField(option)"
+                        :multiple="option?.multiple || false"
                       />
                     </div>
                   </template>

package/edge/components/cms/codeEditor.vue

@@ -56,12 +56,34 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  validateJson: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['update:modelValue', 'lineClick'])
 const localModelValue = ref(null)
 const edgeFirebase = inject('edgeFirebase')
 const expectsJsonObject = ref(false)
+const jsonValidationError = computed(() => {
+  if (!props.validateJson || props.language !== 'json')
+    return ''
+  const raw = localModelValue.value
+  if (raw === null || raw === undefined)
+    return ''
+  const text = String(raw).trim()
+  if (!text)
+    return ''
+  try {
+    JSON.parse(text)
+    return ''
+  }
+  catch (error) {
+    return `Invalid JSON: ${error.message}`
+  }
+})
+const displayError = computed(() => props.error || jsonValidationError.value)
 
 const editorOptions = {
   mode: 'htmlmixed',
@@ -379,11 +401,11 @@ onBeforeUnmount(() => {
       </template>
       <template #center>
         <div class="w-full px-2">
-          <Alert v-if="props.error" variant="destructive" class="rounded-[6px] py-1">
+          <Alert v-if="displayError" variant="destructive" class="rounded-[6px] py-1">
             <TriangleAlert class="h-4 w-4" />
             <AlertTitle>Error</AlertTitle>
             <AlertDescription>
-              {{ props.error }}
+              {{ displayError }}
             </AlertDescription>
           </Alert>
         </div>

package/edge/components/cms/htmlContent.vue

@@ -699,10 +699,18 @@ function rewriteAllClasses(scopeEl, theme, isolated = true, viewportMode = 'auto
   scopeEl.querySelectorAll('[class]').forEach((el) => {
     let base = el.dataset.viewportBaseClass
     if (typeof base !== 'string') {
-      base = el.className || ''
+      if (typeof el.className === 'string') {
+        base = el.className
+      }
+      else if (el.className && typeof el.className.baseVal === 'string') {
+        base = el.className.baseVal
+      }
+      else {
+        base = el.getAttribute('class') || ''
+      }
       el.dataset.viewportBaseClass = base
     }
-    const orig = base || ''
+    const orig = typeof base === 'string' ? base : String(base || '')
     if (!orig.trim())
       return
     const origTokens = orig.split(/\s+/).filter(Boolean)

package/edge/components/cms/mediaManager.vue

@@ -8,6 +8,11 @@ const props = defineProps({
     required: false,
     default: 'all',
   },
+  includeCmsAll: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
   selectMode: {
     type: Boolean,
     required: false,
@@ -137,6 +142,7 @@ onBeforeMount(() => {
   console.log('Default tags prop:', props.defaultTags)
   if (props.defaultTags && Array.isArray(props.defaultTags) && props.defaultTags.length > 0) {
     state.filterTags = [...props.defaultTags]
+    state.tags = [...props.defaultTags]
   }
 })
 
@@ -166,6 +172,12 @@ const isLightName = (name) => {
 }
 
 const previewBackgroundClass = computed(() => (isLightName(state.workingDoc?.name) ? 'bg-neutral-900/90' : 'bg-neutral-100'))
+
+const siteQueryValue = computed(() => {
+  if (!props.site)
+    return []
+  return props.includeCmsAll ? ['all', props.site] : [props.site]
+})
 </script>
 
 <template>
@@ -228,8 +240,12 @@ const previewBackgroundClass = computed(() => (isLightName(state.workingDoc?.nam
             v-if="state.tags.length === 0"
             class="pointer-events-auto absolute inset-0 z-20 rounded-[20px] border border-dashed border-border/70 bg-background/85 dark:bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center text-center px-6 text-foreground"
           >
-            <div class="text-lg font-semibold">Tags are required</div>
-            <div class="text-sm text-muted-foreground">Add tags above to enable upload</div>
+            <div class="text-lg font-semibold">
+              Tags are required
+            </div>
+            <div class="text-sm text-muted-foreground">
+              Add tags above to enable upload
+            </div>
           </div>
         </div>
       </SheetContent>
@@ -239,7 +255,7 @@ const previewBackgroundClass = computed(() => (isLightName(state.workingDoc?.nam
       sort-field="uploadTime"
       query-field="meta.cmssite"
       :filters="filters"
-      :query-value="['all', props.site]"
+      :query-value="siteQueryValue"
       query-operator="array-contains-any"
       header-class=""
       sort-direction="desc" class="w-full flex-1 border-none shadow-none bg-background"

package/edge/components/cms/menu.vue

@@ -75,6 +75,42 @@ const normalizeForCompare = (value) => {
 
 const stableSerialize = value => JSON.stringify(normalizeForCompare(value))
 const areEqualNormalized = (a, b) => stableSerialize(a) === stableSerialize(b)
+const isBlankString = value => String(value || '').trim() === ''
+const isJsonInvalid = (value) => {
+  if (value === null || value === undefined)
+    return false
+  if (typeof value === 'object')
+    return false
+  const text = String(value).trim()
+  if (!text)
+    return false
+  try {
+    JSON.parse(text)
+    return false
+  }
+  catch {
+    return true
+  }
+}
+const hasStructuredDataErrors = (doc) => {
+  if (!doc)
+    return false
+  if (isJsonInvalid(doc.structuredData))
+    return true
+  if (doc.post && isJsonInvalid(doc.postStructuredData))
+    return true
+  return false
+}
+const ensurePostSeoDefaults = (doc) => {
+  if (!doc?.post)
+    return
+  if (isBlankString(doc.postMetaTitle))
+    doc.postMetaTitle = doc.metaTitle || ''
+  if (isBlankString(doc.postMetaDescription))
+    doc.postMetaDescription = doc.metaDescription || ''
+  if (isBlankString(doc.postStructuredData))
+    doc.postStructuredData = doc.structuredData || buildPageStructuredData()
+}
 
 const orderedMenus = computed(() => {
   const menuEntries = Object.entries(modelValue.value || {}).map(([name, menu], originalIndex) => ({
@@ -117,6 +153,9 @@ const isPublishedPageDiff = (pageId) => {
         metaTitle: publishedPage.metaTitle,
         metaDescription: publishedPage.metaDescription,
         structuredData: publishedPage.structuredData,
+        postMetaTitle: publishedPage.postMetaTitle,
+        postMetaDescription: publishedPage.postMetaDescription,
+        postStructuredData: publishedPage.postStructuredData,
       },
       {
         content: draftPage.content,
@@ -126,6 +165,9 @@ const isPublishedPageDiff = (pageId) => {
         metaTitle: draftPage.metaTitle,
         metaDescription: draftPage.metaDescription,
         structuredData: draftPage.structuredData,
+        postMetaTitle: draftPage.postMetaTitle,
+        postMetaDescription: draftPage.postMetaDescription,
+        postStructuredData: draftPage.postStructuredData,
       },
     )
   }
@@ -172,6 +214,9 @@ const state = reactive({
       metaTitle: { value: '' },
       metaDescription: { value: '' },
       structuredData: { value: buildPageStructuredData() },
+      postMetaTitle: { value: '' },
+      postMetaDescription: { value: '' },
+      postStructuredData: { value: '' },
       tags: { value: [] },
       allowedThemes: { value: [] },
     },
@@ -526,6 +571,9 @@ const buildPagePayloadFromTemplate = (templateDoc, slug) => {
     metaTitle: '',
     metaDescription: '',
     structuredData,
+    postMetaTitle: '',
+    postMetaDescription: '',
+    postStructuredData: '',
     doc_created_at: timestamp,
     last_updated: timestamp,
   }
@@ -797,6 +845,10 @@ const showPageSettings = (page) => {
   state.pageSettings = true
 }
 
+const handlePageWorkingDoc = (doc) => {
+  ensurePostSeoDefaults(doc)
+}
+
 const formErrors = (error) => {
   console.log('Form errors:', error)
   console.log(Object.values(error))
@@ -1214,6 +1266,7 @@ const theme = computed(() => {
         :save-function-override="onSubmit"
         card-content-class="px-0"
         @error="formErrors"
+        @working-doc="handlePageWorkingDoc"
       >
         <template #main="slotProps">
           <div class="p-6 space-y-4  h-[calc(100vh-142px)] overflow-y-auto">
@@ -1253,24 +1306,83 @@ const theme = computed(() => {
                 <CardDescription>Meta tags for the page.</CardDescription>
               </CardHeader>
               <CardContent class="pt-0">
-                <edge-shad-input
-                  v-model="slotProps.workingDoc.metaTitle"
-                  label="Meta Title"
-                  name="metaTitle"
-                />
-                <edge-shad-textarea
-                  v-model="slotProps.workingDoc.metaDescription"
-                  label="Meta Description"
-                  name="metaDescription"
-                />
-                <edge-cms-code-editor
-                  v-model="slotProps.workingDoc.structuredData"
-                  title="Structured Data (JSON-LD)"
-                  language="json"
-                  name="structuredData"
-                  height="300px"
-                  class="mb-4 w-full"
-                />
+                <Tabs class="w-full" default-value="list">
+                  <TabsList v-if="slotProps.workingDoc?.post" class="w-full grid grid-cols-2 gap-1 rounded-lg border border-border/60 bg-muted/30 p-1">
+                    <TabsTrigger
+                      value="list"
+                      class="text-xs font-semibold uppercase tracking-wide transition-all data-[state=active]:bg-slate-900 data-[state=active]:text-white data-[state=active]:shadow-sm"
+                    >
+                      Index Page
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="post"
+                      class="text-xs font-semibold uppercase tracking-wide transition-all data-[state=active]:bg-slate-900 data-[state=active]:text-white data-[state=active]:shadow-sm"
+                    >
+                      Detail Page
+                    </TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="list" class="mt-4 space-y-4">
+                    <edge-shad-input
+                      v-model="slotProps.workingDoc.metaTitle"
+                      label="Meta Title"
+                      name="metaTitle"
+                    />
+                    <edge-shad-textarea
+                      v-model="slotProps.workingDoc.metaDescription"
+                      label="Meta Description"
+                      name="metaDescription"
+                    />
+                    <div class="rounded-md border border-border/60 bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+                      CMS tokens in double curly braces are replaced on the front end.
+                      Example: <span v-pre class="font-semibold text-foreground">"{{cms-site}}"</span> for the site URL,
+                      <span v-pre class="font-semibold text-foreground">"{{cms-url}}"</span> for the page URL, and
+                      <span v-pre class="font-semibold text-foreground">"{{cms-logo}}"</span> for the logo URL. Keep the tokens intact.
+                    </div>
+                    <edge-cms-code-editor
+                      v-model="slotProps.workingDoc.structuredData"
+                      title="Structured Data (JSON-LD)"
+                      language="json"
+                      name="structuredData"
+                      validate-json
+                      height="300px"
+                      class="mb-4 w-full"
+                    />
+                  </TabsContent>
+                  <TabsContent value="post" class="mt-4 space-y-4">
+                    <div class="rounded-md border border-border/60 bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+                      You can use template keys in double curly braces to pull data from the detail record.
+                      Example: <span v-pre class="font-semibold text-foreground">"{{name}}"</span> will be replaced with the record’s name.
+                      Dot notation is supported for nested objects, e.g. <span v-pre class="font-semibold text-foreground">"{{data.name}}"</span>.
+                      These keys work in the Title, Description, and Structured Data fields.
+                    </div>
+                    <edge-shad-input
+                      v-model="slotProps.workingDoc.postMetaTitle"
+                      label="Meta Title"
+                      name="postMetaTitle"
+                    />
+                    <edge-shad-textarea
+                      v-model="slotProps.workingDoc.postMetaDescription"
+                      label="Meta Description"
+                      name="postMetaDescription"
+                    />
+
+                    <div class="rounded-md border border-border/60 bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+                      CMS tokens in double curly braces are replaced on the front end.
+                      Example: <span v-pre class="font-semibold text-foreground">"{{cms-site}}"</span> for the site URL,
+                      <span v-pre class="font-semibold text-foreground">"{{cms-url}}"</span> for the page URL, and
+                      <span v-pre class="font-semibold text-foreground">"{{cms-logo}}"</span> for the logo URL. Keep the tokens intact.
+                    </div>
+                    <edge-cms-code-editor
+                      v-model="slotProps.workingDoc.postStructuredData"
+                      title="Structured Data (JSON-LD)"
+                      language="json"
+                      name="postStructuredData"
+                      validate-json
+                      height="300px"
+                      class="mb-4 w-full"
+                    />
+                  </TabsContent>
+                </Tabs>
               </CardContent>
             </Card>
           </div>
@@ -1278,7 +1390,7 @@ const theme = computed(() => {
             <edge-shad-button variant="destructive" class="text-white" @click="state.pageSettings = false">
               Cancel
             </edge-shad-button>
-            <edge-shad-button :disabled="slotProps.submitting" type="submit" class=" bg-slate-800 hover:bg-slate-400 w-full">
+            <edge-shad-button :disabled="slotProps.submitting || hasStructuredDataErrors(slotProps.workingDoc)" type="submit" class=" bg-slate-800 hover:bg-slate-400 w-full">
               <Loader2 v-if="slotProps.submitting" class=" h-4 w-4 animate-spin" />
               Update
             </edge-shad-button>

package/edge/components/cms/optionsSelect.vue

@@ -2,7 +2,7 @@
 import { useVModel } from '@vueuse/core'
 const props = defineProps({
   modelValue: {
-    type: [String, Boolean, Number, null],
+    type: [String, Boolean, Number, Array, null],
     required: false,
     default: null,
   },
@@ -14,6 +14,10 @@ const props = defineProps({
     type: String,
     required: false,
   },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emits = defineEmits(['update:modelValue'])
 const edgeFirebase = inject('edgeFirebase')
@@ -91,17 +95,30 @@ onBeforeMount(async () => {
       })
       .filter(Boolean) // remove nulls
   }
-  staticOption.options.unshift({ title: '(none)', name: NONE_VALUE })
+  if (!props.multiple) {
+    staticOption.options.unshift({ title: '(none)', name: NONE_VALUE })
+  }
   state.loading = false
 })
 </script>
 
 <template>
   <edge-shad-select
-    v-if="!state.loading && staticOption.options.length > 0"
+    v-if="!state.loading && staticOption.options.length > 0 && !props.multiple"
     v-model="selectValue"
     :label="props.label"
     :name="props.option.field"
     :items="staticOption.options"
   />
+  <edge-shad-select-tags
+    v-else-if="!state.loading && staticOption.options.length > 0 && props.multiple"
+    :model-value="Array.isArray(modelValue) ? modelValue : []"
+    :label="props.label"
+    :name="props.option.field"
+    :items="staticOption.options"
+    item-title="title"
+    item-value="name"
+    :allow-additions="false"
+    @update:model-value="value => (modelValue = Array.isArray(value) ? value : [])"
+  />
 </template>

package/edge/components/cms/page.vue

@@ -881,6 +881,9 @@ const isPublishedPageDiff = (pageId) => {
         metaTitle: publishedPage.metaTitle,
         metaDescription: publishedPage.metaDescription,
         structuredData: publishedPage.structuredData,
+        postMetaTitle: publishedPage.postMetaTitle,
+        postMetaDescription: publishedPage.postMetaDescription,
+        postStructuredData: publishedPage.postStructuredData,
       },
       {
         content: draftPage.content,
@@ -890,6 +893,9 @@ const isPublishedPageDiff = (pageId) => {
         metaTitle: draftPage.metaTitle,
         metaDescription: draftPage.metaDescription,
         structuredData: draftPage.structuredData,
+        postMetaTitle: draftPage.postMetaTitle,
+        postMetaDescription: draftPage.postMetaDescription,
+        postStructuredData: draftPage.postStructuredData,
       },
     )
   }
@@ -1087,6 +1093,9 @@ const unpublishedChangeDetails = computed(() => {
   compareField('metaTitle', 'Meta title', val => summarizeChangeValue(val, true))
   compareField('metaDescription', 'Meta description', val => summarizeChangeValue(val, true))
   compareField('structuredData', 'Structured data', val => summarizeChangeValue(val, true))
+  compareField('postMetaTitle', 'Detail meta title', val => summarizeChangeValue(val, true))
+  compareField('postMetaDescription', 'Detail meta description', val => summarizeChangeValue(val, true))
+  compareField('postStructuredData', 'Detail structured data', val => summarizeChangeValue(val, true))
 
   return changes
 })

package/edge/components/cms/site.vue

@@ -33,6 +33,22 @@ const normalizeForCompare = (value) => {
 
 const stableSerialize = value => JSON.stringify(normalizeForCompare(value))
 const areEqualNormalized = (a, b) => stableSerialize(a) === stableSerialize(b)
+const isJsonInvalid = (value) => {
+  if (value === null || value === undefined)
+    return false
+  if (typeof value === 'object')
+    return false
+  const text = String(value).trim()
+  if (!text)
+    return false
+  try {
+    JSON.parse(text)
+    return false
+  }
+  catch {
+    return true
+  }
+}
 
 const isTemplateSite = computed(() => props.site === 'templates')
 const router = useRouter()
@@ -339,8 +355,9 @@ const themeOptionsMap = computed(() => {
 const orgUsers = computed(() => edgeFirebase.state?.users || {})
 const userOptions = computed(() => {
   return Object.entries(orgUsers.value || {})
+    .filter(([, user]) => Boolean(user?.userId))
     .map(([id, user]) => ({
-      value: user?.userId || id,
+      value: user?.userId,
       label: user?.meta?.name || user?.userId || id,
     }))
     .sort((a, b) => a.label.localeCompare(b.label))
@@ -859,6 +876,9 @@ const isPublishedPageDiff = (pageId) => {
         metaTitle: publishedPage.metaTitle,
         metaDescription: publishedPage.metaDescription,
         structuredData: publishedPage.structuredData,
+        postMetaTitle: publishedPage.postMetaTitle,
+        postMetaDescription: publishedPage.postMetaDescription,
+        postStructuredData: publishedPage.postStructuredData,
       },
       {
         content: draftPage.content,
@@ -868,6 +888,9 @@ const isPublishedPageDiff = (pageId) => {
         metaTitle: draftPage.metaTitle,
         metaDescription: draftPage.metaDescription,
         structuredData: draftPage.structuredData,
+        postMetaTitle: draftPage.postMetaTitle,
+        postMetaDescription: draftPage.postMetaDescription,
+        postStructuredData: draftPage.postStructuredData,
       },
     )
   }
@@ -1069,6 +1092,9 @@ const isAnyPagesDiff = computed(() => {
         metaTitle: pageData.metaTitle,
         metaDescription: pageData.metaDescription,
         structuredData: pageData.structuredData,
+        postMetaTitle: pageData.postMetaTitle,
+        postMetaDescription: pageData.postMetaDescription,
+        postStructuredData: pageData.postStructuredData,
       },
       {
         content: publishedPage.content,
@@ -1078,6 +1104,9 @@ const isAnyPagesDiff = computed(() => {
         metaTitle: publishedPage.metaTitle,
         metaDescription: publishedPage.metaDescription,
         structuredData: publishedPage.structuredData,
+        postMetaTitle: publishedPage.postMetaTitle,
+        postMetaDescription: publishedPage.postMetaDescription,
+        postStructuredData: publishedPage.postStructuredData,
       },
     )) {
       return true
@@ -1596,7 +1625,7 @@ const pageSettingsUpdated = async (pageData) => {
               <edge-shad-button variant="destructive" class="text-white" @click="state.siteSettings = false">
                 Cancel
               </edge-shad-button>
-              <edge-shad-button :disabled="slotProps.submitting" type="submit" class=" bg-slate-800 hover:bg-slate-400 w-full">
+              <edge-shad-button :disabled="slotProps.submitting || isJsonInvalid(slotProps.workingDoc?.structuredData)" type="submit" class=" bg-slate-800 hover:bg-slate-400 w-full">
                 <Loader2 v-if="slotProps.submitting" class=" h-4 w-4 animate-spin" />
                 Update
               </edge-shad-button>

package/edge/components/cms/siteSettingsForm.vue

@@ -534,11 +534,18 @@ onMounted(async () => {
           label="Meta Description"
           name="metaDescription"
         />
+        <div class="rounded-md border border-border/60 bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+          CMS tokens in double curly braces are replaced on the front end.
+          Example: <span v-pre class="font-semibold text-foreground">"{{cms-site}}"</span> for the site URL,
+          <span v-pre class="font-semibold text-foreground">"{{cms-url}}"</span> for the page URL, and
+          <span v-pre class="font-semibold text-foreground">"{{cms-logo}}"</span> for the logo URL. Keep the tokens intact.
+        </div>
         <edge-cms-code-editor
           v-model="props.settings.structuredData"
           title="Structured Data (JSON-LD)"
           language="json"
           name="structuredData"
+          validate-json
           height="300px"
           class="mb-4 w-full"
         />