@edgedev/create-edge-app 1.1.28 → 1.2.29

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: [] },
     },
@@ -337,12 +382,82 @@ const resolveBlockForPreview = (block) => {
   return null
 }
 
-const templateHasBlocks = template => Array.isArray(template?.content) && template.content.length > 0
+const normalizePreviewColumns = (row) => {
+  if (!Array.isArray(row?.columns) || !row.columns.length)
+    return []
+  return row.columns.map((column, idx) => ({
+    id: column?.id || `${row?.id || 'row'}-col-${idx}`,
+    span: Number(column?.span) || null,
+    blocks: Array.isArray(column?.blocks) ? column.blocks.filter(Boolean) : [],
+  }))
+}
 
-const templatePreviewBlocks = (template) => {
-  if (!templateHasBlocks(template))
+const templatePreviewRows = (template) => {
+  const structureRows = Array.isArray(template?.structure) ? template.structure : []
+  if (structureRows.length) {
+    return structureRows
+      .map((row, rowIndex) => ({
+        id: row?.id || `${template?.docId || 'template'}-row-${rowIndex}`,
+        columns: normalizePreviewColumns(row),
+      }))
+      .filter(row => row.columns.length > 0)
+  }
+
+  const legacyBlocks = Array.isArray(template?.content) ? template.content.filter(Boolean) : []
+  if (!legacyBlocks.length)
     return []
-  return template.content
+  return [{
+    id: `${template?.docId || 'template'}-legacy-row`,
+    columns: [{
+      id: `${template?.docId || 'template'}-legacy-col`,
+      span: null,
+      blocks: legacyBlocks,
+    }],
+  }]
+}
+
+const templateHasPreview = template => templatePreviewRows(template).length > 0
+
+const resolveTemplateBlockSource = (template, blockRef) => {
+  if (!blockRef)
+    return null
+  if (typeof blockRef === 'object')
+    return blockRef
+  const lookupId = String(blockRef).trim()
+  if (!lookupId)
+    return null
+  const templateBlocks = Array.isArray(template?.content) ? template.content : []
+  return templateBlocks.find(block => block?.id === lookupId || block?.blockId === lookupId) || null
+}
+
+const resolveTemplateBlockForPreview = (template, blockRef) => {
+  const source = resolveTemplateBlockSource(template, blockRef)
+  return resolveBlockForPreview(source)
+}
+
+const hasPreviewSpans = row => (row?.columns || []).some(column => Number.isFinite(Number(column?.span)))
+
+const previewGridClass = (row) => {
+  if (hasPreviewSpans(row))
+    return 'grid grid-cols-1 sm:grid-cols-6 gap-4'
+  const count = row?.columns?.length || 1
+  const map = {
+    1: 'grid grid-cols-1 gap-4',
+    2: 'grid grid-cols-1 sm:grid-cols-2 gap-4',
+    3: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4',
+    4: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4',
+    5: 'grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-4',
+    6: 'grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-6 gap-4',
+  }
+  return map[count] || map[1]
+}
+
+const previewColumnStyle = (column) => {
+  const span = Number(column?.span)
+  if (!Number.isFinite(span))
+    return {}
+  const safeSpan = Math.min(Math.max(span, 1), 6)
+  return { gridColumn: `span ${safeSpan} / span ${safeSpan}` }
 }
 
 const renameFolderOrPageShow = (item) => {
@@ -526,6 +641,9 @@ const buildPagePayloadFromTemplate = (templateDoc, slug) => {
     metaTitle: '',
     metaDescription: '',
     structuredData,
+    postMetaTitle: '',
+    postMetaDescription: '',
+    postStructuredData: '',
     doc_created_at: timestamp,
     last_updated: timestamp,
   }
@@ -797,6 +915,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))
@@ -1103,19 +1225,34 @@ const theme = computed(() => {
                           Blank page
                         </div>
                       </template>
-                      <template v-else-if="templateHasBlocks(template)">
+                      <template v-else-if="templateHasPreview(template)">
                         <div
-                          v-for="(block, idx) in templatePreviewBlocks(template)"
-                          :key="`${template.docId}-block-${idx}`"
+                          v-for="(row, rowIndex) in templatePreviewRows(template)"
+                          :key="`${template.docId}-row-${row.id || rowIndex}`"
+                          class="w-full"
                         >
-                          <edge-cms-block-api
-                            v-if="resolveBlockForPreview(block)"
-                            :content="resolveBlockForPreview(block).content"
-                            :values="resolveBlockForPreview(block).values"
-                            :meta="resolveBlockForPreview(block).meta"
-                            :theme="theme"
-                            :isolated="true"
-                          />
+                          <div :class="previewGridClass(row)">
+                            <div
+                              v-for="(column, colIndex) in row.columns"
+                              :key="`${template.docId}-row-${row.id || rowIndex}-col-${column.id || colIndex}`"
+                              class="min-w-0"
+                              :style="previewColumnStyle(column)"
+                            >
+                              <div
+                                v-for="(blockRef, blockIdx) in column.blocks || []"
+                                :key="`${template.docId}-row-${row.id || rowIndex}-col-${column.id || colIndex}-block-${blockIdx}`"
+                              >
+                                <edge-cms-block-api
+                                  v-if="resolveTemplateBlockForPreview(template, blockRef)"
+                                  :content="resolveTemplateBlockForPreview(template, blockRef).content"
+                                  :values="resolveTemplateBlockForPreview(template, blockRef).values"
+                                  :meta="resolveTemplateBlockForPreview(template, blockRef).meta"
+                                  :theme="theme"
+                                  :isolated="true"
+                                />
+                              </div>
+                            </div>
+                          </div>
                         </div>
                       </template>
                       <template v-else>
@@ -1214,6 +1351,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 +1391,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 +1475,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
 })