@silexlabs/silex 3.3.1-4 → 3.3.1-6

package/dist/plugins/server/server/utils/websiteDataSerialization.js

@@ -0,0 +1,127 @@
+"use strict";
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringify = stringify;
+exports.split = split;
+exports.merge = merge;
+const page_1 = require("../../page");
+const constants_1 = require("../../constants");
+/**
+ * Serialize JSON with stable formatting for git
+ * - Uses 2-space indentation for readability
+ * - Sorts object keys deterministically to avoid random diffs
+ */
+function stringify(data) {
+    return JSON.stringify(data, sortKeys, 2);
+}
+/**
+ * Sort object keys for consistent output across serializations
+ */
+function sortKeys(key, value) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+        const sorted = {};
+        Object.keys(value).sort().forEach(k => {
+            sorted[k] = value[k];
+        });
+        return sorted;
+    }
+    return value;
+}
+/**
+ * Split website data into multiple files
+ * Returns array of files to create/update
+ */
+function split(websiteData) {
+    const files = [];
+    // Split pages into separate files
+    const pages = websiteData.pages?.map((page) => {
+        const pageName = getPageName(page);
+        const slug = (0, page_1.getPageSlug)(pageName);
+        const fileName = `${slug}-${page.id}.json`;
+        const filePath = `${constants_1.WEBSITE_PAGES_FOLDER}/${fileName}`;
+        files.push({
+            path: filePath,
+            content: stringify(page)
+        });
+        return {
+            name: pageName,
+            id: page.id,
+            isFile: true,
+        };
+    }) || [];
+    // Create main website data file without pages content
+    const websiteDataWithoutPages = {
+        ...websiteData,
+        fileFormatVersion: '1.0.0',
+        pages,
+    };
+    files.push({
+        path: constants_1.WEBSITE_DATA_FILE,
+        content: stringify(websiteDataWithoutPages)
+    });
+    return files;
+}
+/**
+ * Reconstruct website data from main file and page loader function
+ * The pageLoader function will be called for each page that needs to be loaded
+ */
+async function merge(websiteDataContent, pageLoader) {
+    const websiteDataOb = JSON.parse(websiteDataContent);
+    const { fileFormatVersion, ...websiteData } = websiteDataOb;
+    // Check file format version
+    if (fileFormatVersion && fileFormatVersion !== '1.0.0') {
+        console.warn('Website data file format version mismatch', fileFormatVersion, '!=', '1.0.0');
+    }
+    // Handle legacy format (no split pages) or empty pages
+    if (!websiteData.pages || websiteData.pages.length === 0) {
+        return websiteData;
+    }
+    // Check if pages are already embedded (legacy format)
+    if (websiteData.pages[0] && !websiteData.pages[0].isFile) {
+        return websiteData;
+    }
+    // Load pages from separate files
+    const pages = await Promise.all(websiteData.pages.map(async (pageRef) => {
+        if (pageRef.isFile) {
+            const pageName = pageRef.name;
+            const slug = (0, page_1.getPageSlug)(pageName);
+            const fileName = `${slug}-${pageRef.id}.json`;
+            const filePath = `${constants_1.WEBSITE_PAGES_FOLDER}/${fileName}`;
+            try {
+                const pageContent = await pageLoader(filePath);
+                return JSON.parse(pageContent);
+            }
+            catch (error) {
+                console.warn(`Could not load page file: ${filePath}`, error);
+                return pageRef;
+            }
+        }
+        return pageRef;
+    }));
+    return {
+        ...websiteData,
+        pages,
+    };
+}
+/**
+ * Get page name from page object
+ */
+function getPageName(page) {
+    return page.getName ? page.getName() : page.name;
+}
+//# sourceMappingURL=websiteDataSerialization.js.map

package/dist/plugins/server/server/utils/websiteDataSerialization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"websiteDataSerialization.js","sourceRoot":"","sources":["../../../../../src/ts/server/utils/websiteDataSerialization.ts"],"names":[],"mappings":"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"}

package/dist/server/page.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPageSlug = getPageSlug;
+exports.getPageLink = getPageLink;
+function getPageSlug(pageName) {
+    return (pageName || 'index')
+        .toLowerCase()
+        .replace(/[^a-z0-9 -]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-');
+}
+function getPageLink(pageName) {
+    return `./${getPageSlug(pageName)}.html`;
+}

package/dist/server/server/connectors/FsStorage.js

@@ -14,6 +14,7 @@ const validation_1 = require("../utils/validation");
 const constants_1 = require("../../constants");
 const stream_1 = require("stream");
 const uuid_1 = require("uuid");
+const websiteDataSerialization_1 = require("../utils/websiteDataSerialization");
 if (!globalThis.__dirname) {
     globalThis.__dirname = (0, path_1.dirname)(process.cwd() + '/src/ts/server/connectors/FsStorage.ts');
     console.info('Redefining __dirname', globalThis.__dirname);
@@ -96,7 +97,7 @@ class FsStorage {
     }
     async setWebsiteMeta(session, id, data) {
         const websiteId = (0, validation_1.requiredParam)(id, 'website id');
-        const content = JSON.stringify(data);
+        const content = (0, websiteDataSerialization_1.stringify)(data);
         const path = (0, path_1.join)(this.options.path, id, constants_1.WEBSITE_META_DATA_FILE);
         await promises_1.default.writeFile(path, content);
     }
@@ -126,12 +127,47 @@ class FsStorage {
         const id = (0, validation_1.requiredParam)(websiteId, 'website id');
         const path = (0, path_1.join)(this.options.path, id, constants_1.WEBSITE_DATA_FILE);
         const content = await promises_1.default.readFile(path);
-        return JSON.parse(content.toString());
+        const websiteDataContent = content.toString();
+        const parsedData = JSON.parse(websiteDataContent);
+        if (parsedData.fileFormatVersion === '1.0.0') {
+            const pageLoader = async (pagePath) => {
+                const fullPath = (0, path_1.join)(this.options.path, id, pagePath);
+                const pageContent = await promises_1.default.readFile(fullPath);
+                return pageContent.toString();
+            };
+            return await (0, websiteDataSerialization_1.merge)(websiteDataContent, pageLoader);
+        }
+        else {
+            return parsedData;
+        }
     }
     async updateWebsite(session, websiteId, data) {
         const id = (0, validation_1.requiredParam)(websiteId, 'website id');
-        const path = (0, path_1.join)(this.options.path, id, constants_1.WEBSITE_DATA_FILE);
-        await promises_1.default.writeFile(path, JSON.stringify(data));
+        const websitePath = (0, path_1.join)(this.options.path, id);
+        const filesToWrite = (0, websiteDataSerialization_1.split)(data);
+        await promises_1.default.mkdir(websitePath, { recursive: true });
+        const hasPageFiles = filesToWrite.some(f => f.path.startsWith(constants_1.WEBSITE_PAGES_FOLDER));
+        if (hasPageFiles) {
+            await promises_1.default.mkdir((0, path_1.join)(websitePath, constants_1.WEBSITE_PAGES_FOLDER), { recursive: true });
+        }
+        const pagesPath = (0, path_1.join)(websitePath, constants_1.WEBSITE_PAGES_FOLDER);
+        try {
+            const existingPageFiles = await promises_1.default.readdir(pagesPath);
+            const newPageFiles = new Set(filesToWrite
+                .filter(f => f.path.startsWith(constants_1.WEBSITE_PAGES_FOLDER))
+                .map(f => f.path.replace(`${constants_1.WEBSITE_PAGES_FOLDER}/`, '')));
+            for (const existingFile of existingPageFiles) {
+                if (existingFile.endsWith('.json') && !newPageFiles.has(existingFile)) {
+                    await promises_1.default.unlink((0, path_1.join)(pagesPath, existingFile));
+                }
+            }
+        }
+        catch (error) {
+        }
+        for (const file of filesToWrite) {
+            const filePath = (0, path_1.join)(websitePath, file.path);
+            await promises_1.default.writeFile(filePath, file.content);
+        }
     }
     async deleteWebsite(session, websiteId) {
         const id = (0, validation_1.requiredParam)(websiteId, 'website id');

package/dist/server/server/utils/websiteDataSerialization.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringify = stringify;
+exports.split = split;
+exports.merge = merge;
+const page_1 = require("../../page");
+const constants_1 = require("../../constants");
+function stringify(data) {
+    return JSON.stringify(data, sortKeys, 2);
+}
+function sortKeys(key, value) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+        const sorted = {};
+        Object.keys(value).sort().forEach(k => {
+            sorted[k] = value[k];
+        });
+        return sorted;
+    }
+    return value;
+}
+function split(websiteData) {
+    const files = [];
+    const pages = websiteData.pages?.map((page) => {
+        const pageName = getPageName(page);
+        const slug = (0, page_1.getPageSlug)(pageName);
+        const fileName = `${slug}-${page.id}.json`;
+        const filePath = `${constants_1.WEBSITE_PAGES_FOLDER}/${fileName}`;
+        files.push({
+            path: filePath,
+            content: stringify(page)
+        });
+        return {
+            name: pageName,
+            id: page.id,
+            isFile: true,
+        };
+    }) || [];
+    const websiteDataWithoutPages = {
+        ...websiteData,
+        fileFormatVersion: '1.0.0',
+        pages,
+    };
+    files.push({
+        path: constants_1.WEBSITE_DATA_FILE,
+        content: stringify(websiteDataWithoutPages)
+    });
+    return files;
+}
+async function merge(websiteDataContent, pageLoader) {
+    const websiteDataOb = JSON.parse(websiteDataContent);
+    const { fileFormatVersion, ...websiteData } = websiteDataOb;
+    if (fileFormatVersion && fileFormatVersion !== '1.0.0') {
+        console.warn('Website data file format version mismatch', fileFormatVersion, '!=', '1.0.0');
+    }
+    if (!websiteData.pages || websiteData.pages.length === 0) {
+        return websiteData;
+    }
+    if (websiteData.pages[0] && !websiteData.pages[0].isFile) {
+        return websiteData;
+    }
+    const pages = await Promise.all(websiteData.pages.map(async (pageRef) => {
+        if (pageRef.isFile) {
+            const pageName = pageRef.name;
+            const slug = (0, page_1.getPageSlug)(pageName);
+            const fileName = `${slug}-${pageRef.id}.json`;
+            const filePath = `${constants_1.WEBSITE_PAGES_FOLDER}/${fileName}`;
+            try {
+                const pageContent = await pageLoader(filePath);
+                return JSON.parse(pageContent);
+            }
+            catch (error) {
+                console.warn(`Could not load page file: ${filePath}`, error);
+                return pageRef;
+            }
+        }
+        return pageRef;
+    }));
+    return {
+        ...websiteData,
+        pages,
+    };
+}
+function getPageName(page) {
+    return page.getName ? page.getName() : page.name;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.3.1-4",
+  "version": "3.3.1-6",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",
@@ -81,9 +81,6 @@
     "start": "node 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",
-    "prepack": "$npm_execpath run prepublishOnly",
     "build": "run-s build:css:release build:html build:client:release build:server:release build:plugins:client build:plugins:server",
     "webpack": "webpack --config webpack.config.js",
     "build:css:release": "sass --load-path ../../node_modules --load-path node_modules --no-source-map src/css/index.scss dist/client/css/admin.css",
@@ -105,16 +102,16 @@
   "dependencies": {
     "@fontsource/ubuntu": "^5.0.13",
     "@fortawesome/fontawesome-free": "6.6.0",
-    "@silexlabs/grapesjs-advanced-selector": "1.2.1-3",
-    "@silexlabs/grapesjs-filter-styles": "1.1.0",
-    "@silexlabs/grapesjs-fonts": "1.1.1-0",
-    "@silexlabs/grapesjs-keymaps-dialog": "1.1.0",
-    "@silexlabs/grapesjs-loading": "1.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-6",
+    "@silexlabs/grapesjs-filter-styles": "1.1.1-1",
+    "@silexlabs/grapesjs-fonts": "1.1.1-2",
+    "@silexlabs/grapesjs-keymaps-dialog": "1.1.1-1",
+    "@silexlabs/grapesjs-loading": "1.1.1-4",
+    "@silexlabs/grapesjs-notifications": "0.1.1-1",
+    "@silexlabs/grapesjs-storage-rate-limit": "1.1.1-1",
+    "@silexlabs/grapesjs-symbols": "1.2.1-2",
+    "@silexlabs/grapesjs-ui-suggest-classes": "1.1.1-1",
+    "@silexlabs/silex-plugins": "1.1.1-1",
     "@types/archiver": "^6.0.2",
     "adm-zip": "0.5.14",
     "archiver": "^7.0.1",
@@ -142,7 +139,7 @@
     "html-minifier": "^4.0.0",
     "lit-html": "3.2.1",
     "mkdirp": "3.0.1",
-    "node_modules-path": "2.1.0",
+    "node_modules-path": "2.1.1-0",
     "node-fetch": "2.6.9",
     "normalize.css": "8.0.1",
     "npm-run-all": "^4.1.5",

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/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/storage.ts

@@ -86,13 +86,13 @@ export const storagePlugin = (editor: PublishableEditor) => {
           // Let grapesjs create the pages in the frontend
           return data
         } else {
+          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)
-          if (Object.keys(rest).length > 0) {
-            editor.loadProjectData(rest)
-          }
-          // Load the rest of the data
+          // 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
@@ -100,18 +100,15 @@ export const storagePlugin = (editor: PublishableEditor) => {
           if (firstPage) editor.Pages.select(firstPage)
           loader && render(getLoaderHtml('Starting', 1, 1), loader)
           await nextFrame()
-          editor.trigger('storage:end:load', data)
-          editor.trigger('canvas:frame:load', editor)
-          return {}
+          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

package/src/ts/client/index.ts

@@ -86,8 +86,6 @@ export async function start(options = {}): Promise<void> {
 
   // Load the site
   try {
-    editor.runCommand(cmdPauseAutoSave)
-    editor.once('canvas:frame:load storage:after:load', () => editor.stopCommand(cmdPauseAutoSave))
     await editor.load(null)
   } catch(e) {
     if(e.httpStatusCode === 401) {

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)
   }