@silexlabs/silex 3.3.1-3 → 3.3.1-5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.3.1-3",
+  "version": "3.3.1-5",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",
@@ -79,7 +79,7 @@
     "dev": "run-p watch start:debug",
     "watch": "npm-watch",
     "start": "node dist/server/server/",
-    "start:debug": "cross-env SILEX_FS_ROOT=`pwd`/silex SILEX_DEBUG=true nodemon --watch dist/server dist/server/server/",
+    "start:debug": "cross-env SILEX_DEBUG=true nodemon --watch dist/server dist/server/server/",
     "start:preview": "http-server silex/hosting -o",
     "prepublishOnly": "$npm_execpath run lint && $npm_execpath test && $npm_execpath run build",
     "preversion": "$npm_execpath run prepublishOnly",
@@ -100,21 +100,21 @@
     "lint:fix": "$npm_execpath run lint -- --fix",
     "test": "node --experimental-vm-modules `node_modules jest`/jest/bin/jest.js",
     "test:watch": "$npm_execpath test -- --watch",
-    "prepare": "husky install && npm run build"
+    "prepare": "husky && $npm_execpath run build"
   },
   "dependencies": {
     "@fontsource/ubuntu": "^5.0.13",
     "@fortawesome/fontawesome-free": "6.6.0",
-    "@silexlabs/grapesjs-advanced-selector": "1.2.1-2",
-    "@silexlabs/grapesjs-filter-styles": "1.1.0",
-    "@silexlabs/grapesjs-fonts": "1.1.0",
-    "@silexlabs/grapesjs-keymaps-dialog": "1.1.0",
-    "@silexlabs/grapesjs-loading": "1.1.0",
-    "@silexlabs/grapesjs-notifications": "0.1.0",
-    "@silexlabs/grapesjs-storage-rate-limit": "1.1.0",
-    "@silexlabs/grapesjs-symbols": "1.2.1-0",
-    "@silexlabs/grapesjs-ui-suggest-classes": "1.1.0",
-    "@silexlabs/silex-plugins": "1.1.0",
+    "@silexlabs/grapesjs-advanced-selector": "1.2.1-5",
+    "@silexlabs/grapesjs-filter-styles": "1.1.1-0",
+    "@silexlabs/grapesjs-fonts": "1.1.1-1",
+    "@silexlabs/grapesjs-keymaps-dialog": "1.1.1-0",
+    "@silexlabs/grapesjs-loading": "1.1.1-0",
+    "@silexlabs/grapesjs-notifications": "0.1.1-0",
+    "@silexlabs/grapesjs-storage-rate-limit": "1.1.1-0",
+    "@silexlabs/grapesjs-symbols": "1.2.1-1",
+    "@silexlabs/grapesjs-ui-suggest-classes": "1.1.1-0",
+    "@silexlabs/silex-plugins": "1.1.1-0",
     "@types/archiver": "^6.0.2",
     "adm-zip": "0.5.14",
     "archiver": "^7.0.1",

package/src/css/_variables.scss

@@ -27,9 +27,13 @@ $fontFamily: 'Ubuntu', sans-serif;
 
 :root {
   --primaryColor: #{$primaryColor};
+  --gjs-primary-color: #{$primaryColor} !important;
   --secondaryColor: #{$secondaryColor};
+  --gjs-secondary-color: #{$secondaryColor} !important;
   --tertiaryColor: #{$tertiaryColor};
+  --gjs-tertiary-color: #{$tertiaryColor} !important;
   --quaternaryColor: #{$quaternaryColor};
+  --gjs-quaternary-color: #{$quaternaryColor} !important;
   --darkerPrimaryColor: #{$darkerPrimaryColor};
   --lighterPrimaryColor: #{$lighterPrimaryColor};
   --viewsPanelWidth: #{$viewsPanelWidth};

package/src/css/grapesjs-plugins.scss

@@ -33,6 +33,11 @@
   border-right-color: $secondaryColor;
 }
 
+// Hide tooltip info buttons for border properties that interfere with the visual squares
+.gjs-radio-item-label:after {
+  display: none !important;
+}
+
 // grapesjs-notifications
 .gjs-editor .gjs-notification {
   max-height: initial;

package/src/css/grapesjs.scss

@@ -130,6 +130,12 @@
 .gjs-sm-icon[title]:not([title=""])::after {
   content: "?";
   margin-left: 0.5em;
+  padding: 0.1em 0.3em;
+  transition: background 0.5s;
+  font-size: x-small;
+}
+.gjs-sm-icon[title]:not([title=""]):hover::after {
+  background: var(--gjs-main-dark-color);
 }
 
 /*
@@ -214,9 +220,9 @@
 }
 .gjs-sm-sector .gjs-sm-sector-title::before,
 .gjs-sm-sector .gjs-sm-sector-title::after {
-    content: '•';
+    content: 'o';
     display: none;
-    margin-left: 0.1em;
+    margin-left: 0.4em;
     order: 5;
 }
 .gjs-sm-sector:has(.gjs-sm-label.gjs-four-color) .gjs-sm-sector-title::before {

package/src/css/loader.scss

@@ -22,20 +22,23 @@
       height: 0;
       position: absolute;
       background-color: variables.$primaryColor;
+      outline: 1px solid grey;
+      border: none;
       border-radius: 0.125rem;
       transform: translateY(-5px);
       transition: all 0.3s 0.3s ease;
+      /* CHROME */
       &::-webkit-progress-bar {
-        background-color: variables.$secondaryColor;
-        border-radius: 0.125rem;
+        background-color: variables.$primaryColor; // dark background (track)
       }
+
       &::-webkit-progress-value {
-        background-color: variables.$primaryColor;
-        border-radius: 0.125rem;
+        background-color: variables.$secondaryColor; // light foreground (filled)
       }
+
+      /* FIREFOX */
       &::-moz-progress-bar {
-        background-color: variables.$secondaryColor;
-        border-radius: 0.125rem;
+        background-color: variables.$secondaryColor; // light foreground (filled)
       }
     }
   }

package/src/css/page-panel.scss

@@ -2,16 +2,17 @@
 
 .page-panel-container {
   .pages__wrapper {
-    height: inherit;
+    display: contents !important;
+    height: fit-content;
   }
   .pages {
-    height: 100%;
     display: flex;
     flex-direction: column;
     .pages__main {
       flex: 1; // take the available space in height
       border: 1px solid $darkerPrimaryColor;
       background-color: $primaryColor;
+      min-height: 20vh;
     }
     .pages__page {
       display: flex;

package/src/css/project-bar.scss

@@ -115,4 +115,3 @@
       }
     }
   }
-

package/src/html/index.pug

@@ -23,7 +23,7 @@ html(lang="en", translate="no")
     block head-end
 
   body.silex-loading
-    .silex-loader.silex-dialog.
+    .silex-loader.silex-dialog(role="status", aria-live="polite", aria-busy="true").
       Loading
 
     block includes

package/src/ts/client/assetUrl.ts

@@ -1,5 +1,5 @@
 import { API_PATH, API_WEBSITE_ASSET_READ, API_WEBSITE_PATH } from '../constants'
-import { Asset, ClientSideFileType, Component, ConnectorId, Page, Style, WebsiteId } from '../types'
+import { Asset, ClientSideFileType, ConnectorId, Style, WebsiteId } from '../types'
 
 /**
  * @fileoverview Helpers to manage assets URL

package/src/ts/client/grapesjs/PublicationUi.ts

@@ -129,7 +129,7 @@ export class PublicationUi {
     // Create the dialog element
     const el = document.createElement('div')
     el.id = 'publish-dialog'
-    el.className = 'silex-dialog-inline silex-dialog gjs-two-color'
+    el.className = 'silex-dialog-inline silex-dialog gjs-two-color silex-dialog-hide'
     document.body.append(el)
     // Let the other buttons be added, we want to be last
     setTimeout(() => {

package/src/ts/client/grapesjs/css-props.ts

@@ -128,19 +128,20 @@ export default (editor: Editor, opts) => {
         name: 'Content',
         property: 'content',
         type: 'text',
-        defaults: '',
+        defaults: '"Content in double quotes"',
         info: 'Generates content for an element.',
         full: true,
         visible: false,
       }],
       shouldShow: async () => {
         return new Promise<boolean>((resolve, reject) => {
+
           requestAnimationFrame(() => {
             try {
               const state = editor.StyleManager
                 .getSelected()
-                .get('state')
-              if (['before', 'after'].includes(state)) {
+                ?.get('state')
+              if (state && ['before', 'after'].includes(state)) {
                 return resolve(true)
               }
               return resolve(false)

package/src/ts/client/grapesjs/flex.ts

@@ -15,7 +15,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 import { Component, Editor } from 'grapesjs'
-import { SectorConfig, registerSector } from './sectors'
 
 /**
  * @fileoverview This plugin adds CSS properties for the UL, OL and LI elements
@@ -54,12 +53,16 @@ export default (editor: Editor) => {
     //       })
     //     }
     //   })
-    // Update the visibility
-    // This is a workaround grapesjs behavior: https://github.com/GrapesJS/grapesjs/issues/3123
-    sector.on('change:visible', () => applyVisibility())
+    // Listen to the events that should trigger a visibility check
     editor.on('component:selected', comp => applyVisibility(comp))
+    // `change:visible` is a workaround grapesjs behavior: https://github.com/GrapesJS/grapesjs/issues/3123
+    editor.on('change:visible', applyVisibility)
+    // `style:property:update` is useful for instantly display the flex sector when selecting display: inline-flex;
+    editor.on('style:property:update', () => applyVisibility())
     function applyVisibility(comp: Component = editor.getSelected()) {
+      editor.off('change:visible', applyVisibility) // Avoid infinite loop
       requestAnimationFrame(() => {
+        if(!comp) return // No selection yet
         const computedDisplay = comp?.view?.el && getComputedStyle(comp.view.el)['display'] as string || ''
         const isFlex = computedDisplay === 'flex' || computedDisplay === 'inline-flex'
         const parent = comp.parent()
@@ -78,6 +81,7 @@ export default (editor: Editor) => {
           sector.getProperties()
             .forEach(p => p.set('visible', FLEX_ITEM_PROPS.includes(p.getId())))
         }
+        editor.on('change:visible', applyVisibility)
       })
     }
   })

package/src/ts/client/grapesjs/img.ts

@@ -144,9 +144,15 @@ export default (editor: Editor, opts) => {
       }
     })
     // Watch changes made by grapesjs and revert them if needed
-    sector.on('change:visible', () => {
-      if(sector.get('visible') !== showSector) sector.set('visible', showSector)
-    })
+    function doubleCheck() {
+      if(sector.get('visible') !== showSector){
+        sector.off('change:visible', doubleCheck)
+        sector.set('visible', showSector)
+        sector.on('change:visible', doubleCheck)
+      }
+    }
+    sector.on('change:visible', doubleCheck)
+
     // Add a new image type that handles the storage URL vs displayed URL
     domc.addType('image', {
       ...imgType,

package/src/ts/client/grapesjs/index.ts

@@ -49,7 +49,7 @@ import rateLimitPlugin from '@silexlabs/grapesjs-storage-rate-limit'
 import borderPugin from 'grapesjs-style-border'
 import backgroundPlugin from 'grapesjs-style-bg'
 import resizePanelPlugin from './resize-panel'
-import notificationsPlugin, { NotificationEditor } from '@silexlabs/grapesjs-notifications'
+import notificationsPlugin, { NOTIFICATION_CHANGED } from '@silexlabs/grapesjs-notifications'
 import keymapsDialogPlugin, { cmdKeymapsDialog } from '@silexlabs/grapesjs-keymaps-dialog'
 
 import { pagePanelPlugin, cmdTogglePages, cmdAddPage } from './page-panel'
@@ -428,16 +428,14 @@ export async function initEditor(config: EditorConfig) {
       // Add the notifications container
       document.body.querySelector('.notifications-container')?.appendChild(notificationContainer)
       // Mark the button as dirty when there are notifications
-      // TODO: move this in the notifications plugin options
-      editor.on(
-        'notifications:changed',
-        () => {
-          const notificationButton = editor.Panels.getPanel(PROJECT_BAR_PANEL_ID).view?.el.querySelector('.notifications-btn')
-          ;(editor as unknown as NotificationEditor)
-            ? notificationButton?.classList.add('project-bar__dirty')
-            : notificationButton?.classList.remove('project-bar__dirty')
-        }
-      )
+      let notificationCount = 0
+      editor.on(NOTIFICATION_CHANGED, (notifications) => {
+        const notificationButton = editor.Panels.getPanel(PROJECT_BAR_PANEL_ID).view?.el.querySelector('.notifications-btn')
+        notificationCount = Array.isArray(notifications) ? notifications.length : 0
+        notificationCount > 0
+          ? notificationButton?.classList.add('project-bar__dirty')
+          : notificationButton?.classList.remove('project-bar__dirty')
+      })
 
       // GrapesJs editor is ready
       resolve(editor)

package/src/ts/client/grapesjs/li.ts

@@ -68,7 +68,9 @@ export default (editor: Editor) => {
           defaults: '',
         },
       ],
-      shouldShow: comp => ['ul', 'ol', 'li'].includes(comp.get('tagName')?.toLowerCase() || ''),
+      shouldShow: comp => {
+        return comp && ['ul', 'ol', 'li'].includes(comp.get('tagName')?.toLowerCase() || '')
+      },
     },
   ]
 

package/src/ts/client/grapesjs/sectors.ts

@@ -46,12 +46,14 @@ export function registerSector(editor: Editor, config: SectorConfig, at?: number
   async function applyVisibility(comp: Component = editor.getSelected()) {
     const shouldShow = await config.shouldShow(comp)
     if (sector.get('visible') !== shouldShow) {
+      sector.off('change:visible', applyVisibility)
       sector.set('visible', shouldShow)
+      sector.on('change:visible', applyVisibility)
       // sector.getProperties()
       //   .forEach(p => p.set('visible', shouldShow))
     }
   }
 
-  sector.on('change:visible', () => applyVisibility())
+  sector.on('change:visible', applyVisibility)
   editor.on('component:selected', comp => applyVisibility(comp))
 }

package/src/ts/client/grapesjs/storage.ts

@@ -21,7 +21,7 @@ import { cmdLogin, eventLoggedIn, eventLoggedOut, getCurrentUser, updateUser } f
 import { addTempDataToAssetUrl, addTempDataToStyles, removeTempDataFromAssetUrl, removeTempDataFromStyles } from '../assetUrl'
 import { PublicationStatus, PublishableEditor } from './PublicationManager'
 import { ClientEvent } from '../events'
-import { ProjectData } from 'grapesjs'
+import { Page, PageProperties, ProjectData } from 'grapesjs'
 import { html, render, TemplateResult } from 'lit-html'
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
 
@@ -62,10 +62,11 @@ export const storagePlugin = (editor: PublishableEditor) => {
   // Add useful commands
   editor.Commands.add(cmdPauseAutoSave, {
     run: () => {
-      if(!editor.StorageManager.isAutosave()) throw new Error('Autosave is not enabled')
+      if(!editor.StorageManager.isAutosave()) console.warn('Autosave is not enabled')
       editor.StorageManager.setAutosave(false)
     },
     stop: () => {
+      if(editor.StorageManager.isAutosave()) console.warn('Autosave is already enabled')
       editor.editor.set('changesCount', 0)
       editor.UndoManager.clear()
       editor.StorageManager.setAutosave(true)
@@ -80,23 +81,34 @@ export const storagePlugin = (editor: PublishableEditor) => {
         const data = await websiteLoad({ websiteId: options.id, connectorId: user.storage.connectorId }) as WebsiteData
         if (data.assets) data.assets = addTempDataToAssetUrl(data.assets, options.id, user.storage.connectorId)
         if (data.styles) data.styles = addTempDataToStyles(data.styles, options.id, user.storage.connectorId)
-        //setTimeout(() => progressiveLoadPages(editor, data))
         if (!data.pages) {
           // This happens when the website was just created
           // Let grapesjs create the pages in the frontend
           return data
         } else {
-          await progressiveLoadPages(editor, data)
-          return {}
+          editor.runCommand(cmdPauseAutoSave)
+          const { pages, ...rest } = data
+          // Load any additional project data, e.g. symbols, but not the ones we progressive load
+          loader && render(getLoaderHtml('Loading styles, assets and symbols', 0, pages.length + 1), loader)
+          // Add to the project, everything but pages
+          editor.loadProjectData(rest)
+          // Add the pages to the project
+          await progressiveLoadPages(editor, pages)
+          await nextFrame()
+          // Select the first page
+          const firstPage = editor.Pages.getAll()[0]
+          if (firstPage) editor.Pages.select(firstPage)
+          loader && render(getLoaderHtml('Starting', 1, 1), loader)
+          await nextFrame()
+          editor.once('canvas:frame:load', () => editor.stopCommand(cmdPauseAutoSave))
+          return data
         }
       } catch (err) {
         editor.UndoManager.clear()
         if (err.httpStatusCode === 401) {
           editor.once(eventLoggedIn, async () => {
             try {
-              editor.runCommand(cmdPauseAutoSave)
               await editor.Storage.load(options)
-              editor.once('canvas:frame:load', () => editor.stopCommand(cmdPauseAutoSave))
             } catch (err) {
               console.error('connectorPlugin load error', err)
               throw err
@@ -115,7 +127,7 @@ export const storagePlugin = (editor: PublishableEditor) => {
       return await this.addToQueue(myData, options)
     },
 
-    async addToQueue(data: WebsiteData, options) {
+    async addToQueue(data: WebsiteData, options: { id: WebsiteId, connectorId: ConnectorId }) {
       // Handle concurrent saving
       if (lastPendingSaving && lastPendingSaving !== data) {
         // Cancel previous saving
@@ -125,7 +137,7 @@ export const storagePlugin = (editor: PublishableEditor) => {
       return this.doStore(lastPendingSaving, options)
     },
 
-    async doStore(data, options) {
+    async doStore(data: WebsiteData, options: { id: WebsiteId, connectorId: ConnectorId }) {
       if (editor.PublicationManager.status === PublicationStatus.STATUS_PENDING) {
         // Publication is pending, save is delayed
         return new Promise((resolve) => {
@@ -217,32 +229,15 @@ export const storagePlugin = (editor: PublishableEditor) => {
   }
 }
 
-async function progressiveLoadPages(editor: PublishableEditor, data: ProjectData) {
+async function progressiveLoadPages(editor: PublishableEditor, pages: Page[]) {
   editor.Pages.getAll().forEach(page => editor.Pages.remove(page))
-  const max = data.pages.length + 1
   let i = 0
-  for (const page of data.pages) {
-    loader && render(getLoaderHtml(`Loading page <strong>${++i}</strong> / ${data.pages.length}`, i, max), loader)
+  for (const page of pages) {
+    loader && render(getLoaderHtml(`Loading page <strong>${++i}</strong> / ${pages.length + 1}`, i, pages.length + 1), loader)
     //await new Promise(resolve => setTimeout(resolve, 1000 * 60 * 1000))
     await nextFrame()
     const newPage = editor.Pages.add({
       ...page,
-    })
+    } as PageProperties)
   }
-
-  // Charger les styles, assets, etc. après les pages
-  loader && render(getLoaderHtml('Loading styles and assets', data.pages.length + 1, max), loader)
-  if (data.styles) editor.setStyle(data.styles)
-  if (data.assets) editor.AssetManager.add(data.assets)
-
-  await nextFrame()
-  setTimeout(() => {
-    // FIXME: Why is this setTimeout needed?
-    editor.trigger('storage:end:load', data)
-    editor.trigger('canvas:frame:load', editor)
-  })
-
-  // Sélectionner la première page
-  const firstPage = editor.Pages.getAll()[0]
-  if (firstPage) editor.Pages.select(firstPage)
 }

package/src/ts/client/index.ts

@@ -21,6 +21,7 @@
  *
  */
 
+import { Editor } from 'grapesjs'
 import { DEV_MESSAGE } from '../constants'
 import { ClientConfig } from './config'
 import { ClientEvent } from './events'
@@ -85,9 +86,7 @@ export async function start(options = {}): Promise<void> {
 
   // Load the site
   try {
-    editor.runCommand(cmdPauseAutoSave)
     await editor.load(null)
-    editor.once('canvas:frame:load', () => editor.stopCommand(cmdPauseAutoSave))
   } catch(e) {
     if(e.httpStatusCode === 401) {
       // Unauthorized, will try to login
@@ -103,7 +102,7 @@ export async function start(options = {}): Promise<void> {
   }
 }
 
-function loaded(editor) {
+function loaded(editor: Editor) {
   document.querySelector('.silex-loader').classList.add('silex-dialog-hide')
   document.querySelector('#gjs').classList.remove('silex-dialog-hide')
   config.emit(ClientEvent.STARTUP_END, { editor, config })

package/src/ts/page.ts

@@ -17,7 +17,7 @@
 
 // Page related functions
 // This is used on the client and the server
-export function getPageSlug(pageName) {
+export function getPageSlug(pageName: string | undefined) {
   return (pageName || 'index')
     .toLowerCase()
     .replace(/[^a-z0-9 -]/g, '')

package/src/ts/plugins/server/FtpConnector.test.ts

@@ -2,6 +2,7 @@ import { ServerConfig } from '../../server/config'
 import { expect, jest, beforeEach, afterEach, it, describe } from '@jest/globals'
 import { ConnectorType, WebsiteData, WebsiteId } from '../../types'
 import { Readable } from 'stream'
+import { WEBSITE_DATA_FILE } from '../../constants'
 
 const mocks = {
   access: jest.fn(),
@@ -64,7 +65,7 @@ describe('FtpConnector website', () => {
     await connector.updateWebsite(dummySession, dummyId, dummyWebsite)
     expect(mocks.uploadFrom).toHaveBeenCalledTimes(1)
     expect(mocks.uploadFrom.mock.calls[0][0]).toBeInstanceOf(Readable)
-    expect(mocks.uploadFrom.mock.calls[0][1]).toBe(`${storageRootPath}/${dummyId}/website.json`)
+    expect(mocks.uploadFrom.mock.calls[0][1]).toBe(`${storageRootPath}/${dummyId}/${WEBSITE_DATA_FILE}`)
   })
 })
 

package/src/ts/plugins/server/FtpConnector.ts

@@ -19,7 +19,7 @@ import { Client } from 'basic-ftp'
 import { Readable } from 'stream'
 import { ConnectorFile, ConnectorFileContent, HostingConnector, StatusCallback, StorageConnector, contentToReadable, contentToString, toConnectorData, toConnectorEnum} from '../../server/connectors/connectors'
 import { requiredParam } from '../../server/utils/validation'
-import { WEBSITE_DATA_FILE, WEBSITE_META_DATA_FILE } from '../../constants'
+import { WEBSITE_DATA_FILE, WEBSITE_META_DATA_FILE, WEBSITE_PAGES_FOLDER } from '../../constants'
 import { ConnectorType, ConnectorUser, WebsiteMeta, FileMeta, JobData, JobStatus, WebsiteId, PublicationJobData, WebsiteMetaFileContent, defaultWebsiteData, WebsiteData, ConnectorOptions } from '../../types'
 import { ServerConfig } from '../../server/config'
 import { join } from 'path'
@@ -28,6 +28,7 @@ import { v4 as uuid } from 'uuid'
 import { JobManager } from '../../server/jobs'
 import { mkdtemp, rm, rmdir } from 'fs/promises'
 import { createReadStream } from 'fs'
+import { stringify, split, merge } from '../../server/utils/websiteDataSerialization'
 
 /**
  * @fileoverview FTP connector for Silex
@@ -399,7 +400,7 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
     const websiteId = requiredParam<WebsiteId>(id, 'website id')
     const path = join(this.rootPath(session), websiteId, WEBSITE_META_DATA_FILE)
     const ftp = await this.getClient(this.sessionData(session))
-    await this.write(ftp, path, JSON.stringify(data))
+    await this.write(ftp, path, stringify(data))
     this.closeClient(ftp)
   }
 
@@ -442,10 +443,10 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
     await this.mkdir(ftp, assetsPath)
     // create website data file
     const websiteDataPath = join(this.rootPath(session), id, WEBSITE_DATA_FILE)
-    await this.write(ftp, websiteDataPath, JSON.stringify(defaultWebsiteData))
+    await this.write(ftp, websiteDataPath, stringify(defaultWebsiteData))
     // create website meta data file
     const websiteMetaDataPath = join(this.rootPath(session), id, WEBSITE_META_DATA_FILE)
-    await this.write(ftp, websiteMetaDataPath, JSON.stringify({}))
+    await this.write(ftp, websiteMetaDataPath, stringify({}))
     // Clean up
     this.closeClient(ftp)
     // All good
@@ -469,16 +470,67 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
     const storageRootPath = this.rootPath(session)
     const ftp = await this.getClient(this.sessionData(session))
     const websiteDataPath = join(storageRootPath, websiteId, WEBSITE_DATA_FILE)
-    const data = await this.read(ftp, websiteDataPath)
-    this.closeClient(ftp)
-    return data
+
+    try {
+      const websiteDataStream = await this.read(ftp, websiteDataPath)
+      const websiteDataContent = await contentToString(websiteDataStream)
+
+      // Check if this is the new split format by trying to parse
+      const parsedData = JSON.parse(websiteDataContent)
+      if (parsedData.fileFormatVersion === '1.0.0') {
+        // Use the merge function to reconstruct website data
+        const pageLoader = async (pagePath: string): Promise<string> => {
+          const fullPath = join(storageRootPath, websiteId, pagePath)
+          const pageStream = await this.read(ftp, fullPath)
+          return await contentToString(pageStream)
+        }
+
+        const result = await merge(websiteDataContent, pageLoader)
+        this.closeClient(ftp)
+        return result
+      } else {
+        // Legacy format, return as is
+        this.closeClient(ftp)
+        return parsedData
+      }
+    } catch (error) {
+      this.closeClient(ftp)
+      throw error
+    }
   }
 
   async updateWebsite(session: FtpSession, websiteId: string, data: WebsiteData): Promise<void> {
     const storageRootPath = this.rootPath(session)
     const ftp = await this.getClient(this.sessionData(session))
-    const websiteDataPath = join(storageRootPath, websiteId, WEBSITE_DATA_FILE)
-    await this.write(ftp, websiteDataPath, JSON.stringify(data))
+
+    // Use the split function to create separate files for pages
+    const filesToWrite = split(data)
+
+    // **
+    // Delete pages that are not in the new website data
+    const pagesPath = join(storageRootPath, websiteId, WEBSITE_PAGES_FOLDER)
+    try {
+      const existingPageFiles = await this.readdir(ftp, pagesPath)
+      const newPageFiles = new Set(
+        filesToWrite
+          .filter(f => f.path.startsWith(WEBSITE_PAGES_FOLDER))
+          .map(f => f.path.replace(`${WEBSITE_PAGES_FOLDER}/`, ''))
+      )
+      
+      for (const existingFile of existingPageFiles) {
+        if (existingFile.name.endsWith('.json') && !newPageFiles.has(existingFile.name)) {
+          await this.unlink(ftp, join(pagesPath, existingFile.name))
+        }
+      }
+    } catch (error) {
+      // Ignore error if pages directory doesn't exist yet
+    }
+
+    for (const file of filesToWrite) {
+      const filePath = join(storageRootPath, websiteId, file.path)
+      await this.write(ftp, filePath, file.content)
+    }
+
     this.closeClient(ftp)
   }