fix: website -d

@fiction/core/package.json

@@ -21,14 +21,14 @@
     "@iconify-json/flag": "^1.1.49",
     "@iconify-json/heroicons": "^1.1.20",
     "@iconify-json/logos": "^1.1.42",
-    "@iconify-json/tabler": "^1.1.107",
+    "@iconify-json/tabler": "^1.1.108",
     "@medv/finder": "^3.2.0",
     "@sinclair/typebox": "^0.32.15",
     "@slack/webhook": "^7.0.2",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@unhead/schema": "^1.8.16",
-    "@unhead/ssr": "^1.8.16",
-    "@unhead/vue": "^1.8.16",
+    "@unhead/schema": "^1.8.18",
+    "@unhead/ssr": "^1.8.18",
+    "@unhead/vue": "^1.8.18",
     "@unocss/preset-attributify": "^0.58.5",
     "@unocss/preset-icons": "^0.58.5",
     "@unocss/preset-uno": "^0.58.5",
@@ -72,7 +72,7 @@
     "google-auth-library": "^9.7.0",
     "google-one-tap": "^1.0.6",
     "handlebars": "^4.7.8",
-    "happy-dom": "^13.8.2",
+    "happy-dom": "^13.8.4",
     "helmet": "^7.1.0",
     "highlight.js": "^11.9.0",
     "html-minifier": "^4.0.0",
@@ -125,7 +125,7 @@
     "ts-node": "^10.9.2",
     "tsup": "^8.0.2",
     "typescript": "^5.4.2",
-    "unhead": "^1.8.16",
+    "unhead": "^1.8.18",
     "unocss": "^0.58.5",
     "uuid-apikey": "^1.5.3",
     "validator": "^13.11.0",

@fiction/plugin-monitor/package.json

@@ -8,9 +8,9 @@
   "dependencies": {
     "@fiction/core": "workspace:*",
     "@mailchimp/mailchimp_marketing": "^3.0.80",
-    "@sentry/node": "^7.106.1",
-    "@sentry/tracing": "^7.106.1",
-    "@sentry/vue": "^7.106.1",
+    "@sentry/node": "^7.107.0",
+    "@sentry/tracing": "^7.107.0",
+    "@sentry/vue": "^7.107.0",
     "@slack/webhook": "^7.0.2",
     "@types/mailchimp__mailchimp_marketing": "^3.0.19"
   },

@fiction/plugin-sites/card.ts

@@ -241,6 +241,7 @@ export class Card<
   layoutId = vue.ref(this.settings.layoutId)
   templateId = vue.ref(this.settings.templateId || (this.parentId ? 'area' : 'wrap'))
   title = vue.ref(this.settings.title)
+  description = vue.ref(this.settings.description)
   slug = vue.ref(this.settings.slug ?? `${(this.title.value ? toSlug(this.title.value) : `page`)}`)
   displayTitle = vue.computed(() => this.title.value || toLabel(this.slug.value))
   userConfig = vue.ref<T>(this.settings.userConfig || {} as T)
@@ -355,6 +356,7 @@ export class Card<
       isHome: !!this.isHome.value,
       is404: !!this.is404.value,
       title: this.title.value,
+      description: this.description.value,
       slug: this.slug.value,
       userConfig: this.userConfig.value as T,
       cards,

@fiction/plugin-sites/cards/ElEngine.vue

@@ -36,7 +36,7 @@ const isEditable = vue.computed(() => {
       ]"
       :data-card-type="subCard.templateId.value"
       :card="subCard"
-      @click="isEditable && card.site?.setActiveCard({ cardId: subCard.cardId })"
+      @click.stop="isEditable && card.site?.setActiveCard({ cardId: subCard.cardId })"
     />
   </component>
 </template>

@fiction/plugin-sites/cards/features/ElFeatures.vue

@@ -25,27 +25,27 @@ const uc = vue.computed(() => {
 
 <template>
   <div :class="card.classes.value.contentWidth">
-    <div class="mb-16 flex items-end gap-36">
+    <div class="mb-6 md:mb-24 text-center md:text-left md:flex items-end gap-4 justify-center">
       <div
-        class="x-font-title w-[20em] text-4xl font-bold tracking-tighter sm:text-7xl text-balance"
+        class="x-font-title max-w-full text-4xl font-bold tracking-tighter sm:text-6xl lg:text-8xl text-balance"
         v-html="uc.heading"
       />
       <div
-        class="text-lg lg:text-3xl lg:leading-snug w-full text-balance text-right"
+        class="text-xl lg:text-3xl lg:leading-snug w-full text-balance mt-4 lg:max-w-sm"
         v-html="uc.subHeading"
       />
     </div>
-    <div class="grid grid-cols-3 gap-20">
+    <div class=" md:grid-cols-3 gap-8 md:gap-20 text-center md:text-left hidden md:grid ">
       <div v-for="(item, i) in uc.items" :key="i">
-        <div class="text-2xl font-bold">
+        <div class="text-3xl font-bold x-font-title">
           {{ item.name }}
         </div>
-        <div class="mt-4 text-lg">
+        <div class="mt-4 text-xl text-theme-500 dark:text-theme-200">
           {{ item.desc }}
         </div>
       </div>
     </div>
-    <div class="mt-10 flex items-center justify-center gap-x-6">
+    <div class="mt-6 md:mt-24 flex items-center justify-center gap-x-6">
       <ElButton
         v-for="(action, i) in uc.actions"
         :key="i"

@fiction/plugin-sites/cards/logos/ElLogos.vue

@@ -27,10 +27,10 @@ const uc = vue.computed(() => {
     <div class="content-standard p-4 text-center md:p-0">
       <div
         class="items-center"
-        :class="uc.format === 'stacked' ? 'block' : 'inline-flex space-x-14'"
+        :class="uc.format === 'stacked' ? 'block' : 'md:inline-flex md:space-x-14'"
       >
         <div
-          class="x-font-title"
+          class="x-font-title text-theme-400 dark:text-theme-600"
           :class="
             uc.format === 'stacked'
               ? 'text-xl mb-16 font-medium'
@@ -44,7 +44,7 @@ const uc = vue.computed(() => {
           :class="
             uc.format === 'stacked'
               ? `flex justify-center flex-wrap`
-              : 'md:inline-flex'
+              : 'flex-col md:flex-row flex align-middle justify-center md:inline-flex'
           "
         >
           <a

@fiction/plugin-sites/el/ElToolHandle.vue

@@ -88,13 +88,14 @@ const i = vue.computed(() => {
     <TransitionSlide>
       <div
         v-show="handle.hasDrawer"
-        class="card-drawer rounded-b-md border-x border-b border-theme-300 p-3 bg-theme-0"
+        class="card-drawer rounded-b-md border-x border-b   p-3 bg-theme-0 dark:bg-theme-700"
+        :class="handle.isActive ? 'border-primary-300 dark:border-primary-600' : 'border-theme-200 dark:border-theme-600'"
       >
         <div>
           <div class="drag-input-zone min-h-[1em] space-y-2">
             <div
               tag="div"
-              class="space-y-2 sortable-zone min-h-[60px]"
+              class="space-y-2 sortable-zone min-h-[40px]"
               data-drag-zone
               :data-drag-depth="handle.depth + 1"
             >

@fiction/plugin-sites/el/InputCustomDomains.vue

@@ -83,10 +83,10 @@ const showInstructions = vue.ref(false)
   <div class="custom-domains font-sans border-t border-theme-200 dark:border-theme-600 pt-4">
     <div
 
-      class=" grid grid-cols-1 gap-x-12 gap-y-6   text-xs"
+      class=" grid grid-cols-1 gap-x-12 gap-y-6"
     >
       <div class="sm:col-span-6">
-        <label for="domain" class="block text-theme-500">
+        <label for="domain" class="block text-theme-500 text-xs">
           Domains
         </label>
         <div class="space-y-4">

@fiction/plugin-sites/el/LayoutDraggable.vue

@@ -28,7 +28,7 @@ function setEmptyRecursive(args: { depth?: number, parentEl: Element }) {
   if (!containers)
     return
 
-  const classes = ['outline-2', 'outline-dashed', 'outline-theme-200', 'dark:outline-theme-600', 'rounded-md']
+  const classes = ['outline-2', 'outline-dashed', 'outline-theme-100', 'dark:outline-theme-600', 'rounded-md']
   containers.forEach((container) => {
     const items = container.querySelectorAll(`:scope > ${selectors.handleId}`)
     const isEmpty = items.length === 0
@@ -100,4 +100,3 @@ vue.onMounted(async () => {
   z-index: 500;
 }
 </style>
-./layout./layout

@fiction/plugin-sites/el/SiteEditorEditMode.vue

@@ -56,7 +56,7 @@ const { fictionSites } = useService<{ fictionSites: FictionSites, fictionRouterS
         <div
           v-if="fictionSites.activeTool.left.value"
           :key="fictionSites.activeTool.left.value.toolId"
-          class="absolute left-full h-full bg-theme-0 dark:bg-theme-900 top-0 z-30 border-r shadow-[10px_0_8px_-5px_rgba(0,0,0,0.05)] border-theme-300 dark:border-theme-600 overflow-scroll no-scrollbar "
+          class="absolute left-full h-full bg-theme-0 dark:bg-theme-900 top-0 z-30 border-r shadow-[10px_0_18px_-15px_rgba(0,0,0,0.6)] border-theme-300 dark:border-theme-600 overflow-scroll no-scrollbar "
           :class="fictionSites.activeTool.left.value.widthClasses || 'w-[300px]'"
         >
           <component

@fiction/plugin-sites/el/ToolPageAi.vue

@@ -32,15 +32,15 @@ const options = [
     input: 'group',
     options: [
       new InputOption({
-        key: 'userConfig.objectives.about',
+        key: 'userConfig.ai.objectives.about',
         label: 'About the Website',
         description: 'The primary focus for the website? Who or what is it about?',
         input: 'InputTextarea',
         placeholder: 'A portfolio website for a freelance web designer...',
         props: { rows: 3 },
       }),
       new InputOption({
-        key: 'userConfig.objectives.targetCustomer',
+        key: 'userConfig.ai.objectives.targetCustomer',
         label: 'Target Customer',
         description: 'Who is the target customer(s) for the website? What are their needs?',
         input: 'InputTextarea',
@@ -56,13 +56,13 @@ const options = [
     input: 'group',
     options: [
       new InputOption({
-        key: 'userConfig.objectives.imageStyle',
+        key: 'userConfig.ai.objectives.imageStyle',
         label: 'Image Style',
         input: 'InputSelectCustom',
         list: imageStyle,
       }),
       new InputOption({
-        key: 'userConfig.objectives.imageStyle',
+        key: 'userConfig.ai.objectives.imageStyle',
         label: 'Image Style',
         description: 'When generating placeholder images for your site, what style would be best?',
         input: 'InputTextarea',

@fiction/plugin-sites/engine/XSite.vue

@@ -43,10 +43,13 @@ async function load() {
     loading.value = false
   }
 }
+
+const page = vue.computed(() => site.value?.currentPage.value)
+
 unhead.useHead({
-  title: 'Site',
+  title: () => page.value?.userConfig.value.seoTitle || page.value?.title.value || 'untitled',
   meta: [
-    { name: `description`, content: `` },
+    { name: `description`, content: page.value?.userConfig.value.seoDescription || page.value?.description.value || 'no description' },
     { name: 'robots', content: () => site.value?.userConfig.value.robotsTxt || 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' },
     { property: 'og:site_name', content: () => site.value?.title.value || 'untitled' },
     { property: 'og:locale', content: () => site.value?.userConfig.value.locale || 'en_US' },
@@ -107,7 +110,7 @@ const primary = vue.computed(() => site.value?.colors.value.primary || getColorS
 
 <template>
   <div class="x-site overflow-y-scroll h-full w-full relative">
-    <div class="antialiased x-font-body  bg-theme-0 dark:bg-theme-950 text-theme-1000 dark:text-theme-0" :class="site?.isEditable.value ? '' : ''">
+    <div class="x-font-body  bg-theme-0 dark:bg-theme-950 text-theme-1000 dark:text-theme-0" :class="site?.isEditable.value ? '' : ''">
       <div
         class="x-engine"
         :data-site-id="site?.siteId ?? '[empty]'"

@fiction/plugin-sites/tables.ts

@@ -33,11 +33,16 @@ export type SiteUserConfig = Partial<{
   }
 }>
 
+type PageCardConfig = {
+  seoTitle?: string
+  seoDescription?: string
+}
+
 export type TableCardConfig<T extends Record<string, unknown> = Record<string, unknown> > = Omit<CreateObjectType<typeof pageCols>, 'cards' | 'userConfig'> & st & {
   parentId?: string
   depth?: number
   index?: number
-  userConfig?: T
+  userConfig?: T & PageCardConfig
   cards?: TableCardConfig[]
   scope?: string
 }
@@ -185,6 +190,13 @@ const pageCols = [
     isSetting: true,
   }),
 
+  new FictionDbCol({
+    key: 'description',
+    create: ({ schema, column }) => schema.text(column.pgKey).defaultTo(column.default()),
+    default: () => '' as string,
+    isSetting: true,
+  }),
+
   new FictionDbCol({
     key: 'cards',
     create: ({ schema, column }) => schema.jsonb(column.pgKey).defaultTo(column.default()),

@fiction/plugin-sites/themes/admin/el/ViewSettingsOrg.vue

@@ -148,7 +148,7 @@ vue.onMounted(async () => {
     <ElPanelSettings
       v-if="!fictionUser.activeUser.value?.isSuperAdmin"
       title="Admin Only Settings"
-      class="p-4 border border-theme-200/75 bg-theme-50/50 rounded-md m-4"
+      class="p-4 border border-theme-200/75 dark:border-theme-600 bg-theme-50/50 dark:bg-theme-700 rounded-md m-4"
     >
       <div class="space-y-12">
         <div class="space-y-4">

@fiction/plugin-sites/themes/fiction/el/ElFooter.vue

@@ -66,7 +66,7 @@ const uc = vue.computed(() => {
             <div
               class="col-span-6 text-sm sm:col-span-3 lg:flex-row lg:items-center lg:justify-between"
             >
-              <ul class="m-0 mx-auto flex justify-end p-0 lg:mx-0">
+              <ul class="m-0 mx-auto flex flex-wrap gap-2 justify-end p-0 lg:mx-0">
                 <li
                   v-for="(item, i) in uc.socialList"
                   :key="i"
@@ -86,7 +86,7 @@ const uc = vue.computed(() => {
                 </li>
               </ul>
 
-              <div class="text-theme-700 dark:text-theme-50 mt-5 text-right text-xs">
+              <div class="hidden md:block text-theme-700 dark:text-theme-50 mt-5 text-right text-xs">
                 <svg
                   class="inline-block"
                   xmlns="http://www.w3.org/2000/svg"