@silexlabs/silex 3.0.0-alpha.30 → 3.0.0-alpha.32

package/dist/client/js/main.js.LICENSE.txt

@@ -23,7 +23,7 @@
  * Date: 2023-03-08T15:28Z
  */
 
-/*! @silexlabs/grapesjs-loading - 1.0.7 */
+/*! @silexlabs/grapesjs-loading - 1.0.8 */
 
 /*! grapesjs-style-filter - 1.0.1 */
 

package/dist/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLIENT_CONFIG_FILE_NAME = void 0;
+exports.CLIENT_CONFIG_FILE_NAME = 'silex.js';

package/dist/page.js

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

package/dist/server/cli.js

@@ -12,6 +12,9 @@ const options = (0, cli_1.parse)({
     'ssl-certificate': [false, 'Path to SSL certificate', 'file'],
     'force-https-trust-xfp-header': [false, 'Sets the trustXFPHeader param of the express module "cookie-session". Use only with --force-https', 'boolean'],
     'session-secret': ['s', 'Session secret', 'string'],
+    'cors-url': ['', 'Enable CORS for URL (can be "*")', 'string'],
+    'client-config': ['', 'Path to client config file to be served on .silex-client.js', 'string'],
+    'fs-root': ['', 'Path to the root folder where to store websites. Used by the default backend (fs).', 'string'],
 }, {});
 if (options.config)
     process.env.CONFIG = options.config;
@@ -31,4 +34,10 @@ if (options['force-https-trust-xfp-header'])
     process.env.SILEX_FORCE_HTTPS_TRUST_XFP_HEADER = options['force-https-trust-xfp-header'];
 if (options['session-secret'])
     process.env.SILEX_SESSION_SECRET = options['session-secret'];
+if (options['cors-url'])
+    process.env.SILEX_CORS_URL = options['cors-url'];
+if (options['client-config'])
+    process.env.SILEX_CLIENT_CONFIG = options['client-config'];
+if (options['fs-root'])
+    process.env.FS_ROOT = options['fs-root'];
 require("./index");

package/dist/server/config.js

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ServerConfig = void 0;
 const silex_plugins_1 = require("@silexlabs/silex-plugins");
 const path_1 = require("path");
+const constants_1 = require("../constants");
+const express_1 = require("express");
+const promises_1 = require("fs/promises");
+const events_1 = require("../events");
 class ServerConfig extends silex_plugins_1.Config {
     url;
     debug;
@@ -20,10 +24,36 @@ exports.ServerConfig = ServerConfig;
 async function default_1() {
     const port = process.env.PORT || '6805';
     const debug = process.env.SILEX_DEBUG === 'true';
+    const clientConfigPath = process.env.SILEX_CLIENT_CONFIG;
     const url = process.env.SERVER_URL || `http://localhost:${port}`;
     const config = new ServerConfig(url, debug, port, '/api');
+    if (clientConfigPath) {
+        config.on(events_1.EVENT_STARTUP_START, async ({ app }) => {
+            console.log(`> Serving client side config ${clientConfigPath} at ${constants_1.CLIENT_CONFIG_FILE_NAME}`);
+            const router = (0, express_1.Router)();
+            app.use(router);
+            let clientConfig = (await (0, promises_1.readFile)(clientConfigPath)).toString();
+            router.get(`/${constants_1.CLIENT_CONFIG_FILE_NAME}`, async (res, req, next) => {
+                if (config.debug) {
+                    console.log('[Debug mode] Reloading config file', clientConfigPath);
+                    clientConfig = (await (0, promises_1.readFile)(clientConfigPath)).toString();
+                }
+                req.header('Content-Type', 'application/javascript').send(clientConfig);
+            });
+        });
+    }
+    if (process.env.CONFIG) {
+        const userConfigPath = process.env.CONFIG;
+        console.log('> Loading user config', userConfigPath);
+        try {
+            await config.addPlugin(userConfigPath, {});
+        }
+        catch (e) {
+            throw new Error(`User config file ${userConfigPath} error: ${e.message}`);
+        }
+    }
     const configFilePath = (0, path_1.resolve)(__dirname, '../../.silex.js');
-    console.log('Loading config', configFilePath);
+    console.log('> Loading config', configFilePath);
     try {
         await config.addPlugin(configFilePath, {});
     }
@@ -35,16 +65,6 @@ async function default_1() {
             throw new Error(`Error in config file ${configFilePath}: ${e.message}`);
         }
     }
-    if (process.env.CONFIG) {
-        const userConfigPath = process.env.CONFIG;
-        console.log('Loading user config', userConfigPath);
-        try {
-            await config.addPlugin(userConfigPath, {});
-        }
-        catch (e) {
-            throw new Error(`User config file ${userConfigPath} not found: ${e.message}`);
-        }
-    }
     return config;
 }
 exports.default = default_1;

package/dist/server/{start.js → express.js}

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const express_1 = __importDefault(require("express"));
-const events_1 = require("./events");
+const events_1 = require("../events");
 async function default_1(config) {
     const app = (0, express_1.default)();
     await config.emit(events_1.EVENT_STARTUP_START, { app });

package/dist/server/index.js

@@ -27,10 +27,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const config_1 = __importDefault(require("./config"));
-const start_1 = __importDefault(require("./start"));
+const express_1 = __importDefault(require("./express"));
+const config = __importStar(require("./config"));
+const types = __importStar(require("../types"));
+const events = __importStar(require("../events"));
+const constants = __importStar(require("../constants"));
+const page = __importStar(require("../page"));
+exports.default = { config, types, events, constants, page };
 async function main() {
     const config = await (0, config_1.default)();
-    const app = await (0, start_1.default)(config);
+    const app = await (0, express_1.default)(config);
     console.info(`
 I'm ready, listening to port ${config.port}
   `);
@@ -46,7 +52,7 @@ async function startLiverReload() {
     const server = createServer({
         delay: 0,
     }, () => {
-        console.info(`\nDebug mode\nLive reload server is running.\nWatching ${dist}`);
+        console.info(`\n> Debug mode\n> Live reload server is running.\n> Watching ${dist}`);
     });
     server.watch(dist);
 }

package/dist/types.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Unit = exports.defaultSite = exports.defaultPublicationSettings = void 0;
+exports.defaultPublicationSettings = {
+    path: 'publication',
+    url: '',
+    autoHomePage: true,
+    assets: { path: 'assets', url: '/assets' },
+    html: { path: '' },
+    css: { path: 'css', url: '/css' },
+};
+exports.defaultSite = {
+    pages: [{ name: 'Main', id: 'main', frames: [{ component: { type: 'text', stylable: [] }, components: [] }] }],
+    assets: [],
+    styles: [],
+    name: 'New website',
+    settings: {
+        description: '',
+        title: '',
+        head: '',
+        lang: '',
+        favicon: '',
+        'og:title': '',
+        'og:description': '',
+        'og:image': '',
+    },
+    fonts: [],
+    symbols: [],
+    publication: exports.defaultPublicationSettings,
+};
+var Unit;
+(function (Unit) {
+    Unit["PX"] = "px";
+})(Unit = exports.Unit || (exports.Unit = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.0.0-alpha.30",
+  "version": "3.0.0-alpha.32",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",
@@ -74,21 +74,22 @@
     "@directus/sdk": "^10.3.3",
     "@silexlabs/grapesjs-directus-storage": "1.0.15",
     "@silexlabs/grapesjs-fonts": "1.0.12",
-    "@silexlabs/grapesjs-loading": "1.0.7",
+    "@silexlabs/grapesjs-loading": "1.0.8",
     "@silexlabs/grapesjs-symbols": "1.0.18",
     "@silexlabs/grapesjs-ui-suggest-classes": "1.0.23",
-    "@silexlabs/silex-plugins": "^1.0.6",
+    "@silexlabs/silex-plugins": "^1.0.10",
     "adm-zip": "0.5.10",
     "body-parser": "1.20.2",
     "cli": "^1.0.1",
     "compression": "1.7.4",
     "cookie-parser": "1.4.6",
     "cookie-session": "2.0.0",
+    "cors": "^2.8.5",
     "cross-env": "7.0.3",
     "express": "4.18.2",
     "express-force-ssl": "0.3.2",
     "formidable": "2.1.1",
-    "grapesjs": "0.21.1",
+    "grapesjs": "0.21.2",
     "grapesjs-blocks-basic": "1.0.1",
     "grapesjs-custom-code": "1.0.1",
     "grapesjs-plugin-forms": "2.0.5",

package/public/silex.js

@@ -0,0 +1,25 @@
+// This file is loaded by Silex when the user opens the editor
+// Unless you override the default config with the environment variable SILEX_CLIENT_CONFIG or the CLI option --client-config
+export default async function (config) {
+  // // For example add a GrapesJs plugin like this
+  // config.editor.plugins.push(plugin)
+  // config.editor.pluginsOpts[plugin] = {
+  // }
+  // // Or like this to override the default options
+  // // See the docs for the list of options
+  // return {
+  //   ...config,
+  //   editor: {
+  //     ...config.editor,
+  //     plugins: [
+  //       ...config.editor.plugins,
+  //       plugin,
+  //     ],
+  //     pluginsOpts: {
+  //       ...config.editor.pluginsOpts,
+  //       [plugin]: {
+  //       },
+  //     },
+  //   },
+  // }
+}

package/src/example-client-config.js

@@ -0,0 +1,47 @@
+import directusStorage from 'https://unpkg.com/@silexlabs/grapesjs-directus-storage'
+console.log('directusStorage', directusStorage, directusStorage?.default)
+
+// Use the environment variable SILEX_CLIENT_CONFIG or the CLI option --client-config to override the default config with this file
+export default async function (config, options) {
+  console.log('In example config')
+  //await config.addPlugin('gjs-blocks-basic', 'https://unpkg.com/grapesjs-blocks-basic', {
+  //    blocks: ['text', 'image', 'video', 'map'],
+  //})
+
+  // Optional plugins
+  await config.addPlugin([
+    '@silexlabs/grapesjs-directus-storage',
+    './plugins/@silexlabs/grapesjs-directus-storage/dist/index.js',
+  ], {
+    '@silexlabs/grapesjs-directus-storage': {
+      directusUrl: 'http://localhost:8055',
+    },
+    './plugins/@silexlabs/grapesjs-directus-storage/dist/index.js': {
+      directusUrl: 'http://localhost:8055',
+    },
+  })
+
+  // Return an object to override default config
+  return {
+    ...config,
+    ...options,
+    editor: {
+      ...config.editor,
+      storageManager: {
+        autoload: false,
+        type: 'directus',
+      },
+      plugins: [
+        ...config.editor.plugins,
+        directusStorage,
+      ],
+      pluginsOpts: {
+        ...config.editor.pluginsOpts,
+        [directusStorage]: {
+          directusUrl: 'http://localhost:8055',
+        },
+      },
+    },
+  }
+}
+

package/src/plugins/DefaultBackend.js

@@ -1,4 +1,4 @@
-const { readFile, writeFile, mkdir, copyFile } = require('node:fs/promises')
+const { readFile, writeFile, mkdir, copyFile, readdir, stat, rm } = require('node:fs/promises')
 const { join, dirname, basename } = require('path')
 const { homedir } = require('os')
 
@@ -20,8 +20,6 @@ async function mkdirIfNotExists(path, options = null) {
 const FS_ROOT = process.env.FS_ROOT || join(homedir(), '.silex')
 const ASSETS_PATH = 'assets'
 const ASSETS_URL = 'assets'
-const HTML_PATH = ''
-const CSS_PATH = ''
 const DATA_FILE_NAME = '/.silex.data.json'
 const PUBLICATION_PATH = 'publication'
 
@@ -45,9 +43,26 @@ exports.init = async function (id) {
   await mkdirIfNotExists(uploadDir, { recursive: true, })
 }
 
+exports.del = async function (id) {
+  const folder = path(id)
+  console.log('Delete', folder)
+  await rm(folder, {recursive: true})
+  return {ok: true}
+}
+
+// List projects
+exports.list = async function () {
+  const ids = await readdir(FS_ROOT)
+  return Promise.all(ids.map(async id => ({
+    id,
+    ...await exports.readData(id),
+    stats: await stat(path(id) + DATA_FILE_NAME),
+  })))
+}
 // Read project data
 exports.readData = async function (id) {
-  return readFile(path(id) + DATA_FILE_NAME)
+  const data = await readFile(path(id) + DATA_FILE_NAME)
+  return JSON.parse(data.toString())
 }
 // Write project data
 exports.writeData = async function (id, data) {

package/src/plugins/ExpressPlugin.js

@@ -2,6 +2,7 @@ const bodyParser = require('body-parser')
 const compression = require('compression')
 const cookieParser = require('cookie-parser')
 const session = require('cookie-session')
+const cors = require('cors')
 
 module.exports = async function(config, opts = {}) {
   // Options with defaults
@@ -10,10 +11,18 @@ module.exports = async function(config, opts = {}) {
     textLimit: process.env.SILEX_EXPRESS_TEXT_LIMIT || '10mb',
     sessionName: process.env.SILEX_SESSION_NAME || 'silex-session',
     sessionSecret: process.env.SILEX_SESSION_SECRET || 'replace this session secret in env vars',
+    cors: process.env.SILEX_CORS_URL,
     ...opts,
   }
 
   config.on('silex:startup:start', ({app}) => {
+    // CORS
+    if (options.cors) {
+      console.log('> CORS are ENABLED:', options.cors)
+      app.use(cors({
+        origin: options.cors,
+      }))
+    }
     // compress gzip when possible
     app.use(compression())
 

package/src/plugins/PublishPlugin.js

@@ -28,9 +28,9 @@ module.exports = async function(config, opts = {}) {
     router.post('/publish', async function(req, res) {
       const { pages, files, id } = req.body.data
       if (!pages || !id) {
-        console.error('Error in the request, pages and id parmas required', {id})
+        console.error('Error in the request, pages and id params required', {id})
         res.status(400).send({
-          message: 'Error in the request, pages and id parmas required',
+          message: 'Error in the request, pages and id params required',
         })
       } else {
         // Optim
@@ -46,7 +46,7 @@ module.exports = async function(config, opts = {}) {
           }).trim()
         })
         // Publication
-        await config.emit(EVENT_PUBLISH_START, { id, files, req})
+        await config.emit('silex:publish:start', { id, files, req})
         let url
         try {
           url = await publish(id, files, req.body.data)
@@ -56,7 +56,7 @@ module.exports = async function(config, opts = {}) {
           return
         }
         const mutable = { id, files, req, res, url, statusUrl: options.statusUrl }
-        await config.emit(EVENT_PUBLISH_END, mutable)
+        await config.emit('silex:publish:end', mutable)
         res.json({
           url: mutable.url,
           statusUrl: mutable.statusUrl,

package/src/plugins/WebsitePlugin.js

@@ -3,9 +3,12 @@ const { resolve } = require('path')
 const formidable = require('formidable')
 
 const { noCache } = require('./Cache')
+const { defaultSite } = require('@silexlabs/silex').default.types
 
 const EVENT_READ_START = 'EVENT_READ_START'
 const EVENT_READ_END = 'EVENT_READ_END'
+const EVENT_DELETE_START = 'EVENT_WRITE_START'
+const EVENT_DELETE_END = 'EVENT_WRITE_END'
 const EVENT_WRITE_START = 'EVENT_WRITE_START'
 const EVENT_WRITE_END = 'EVENT_WRITE_END'
 const EVENT_ASSET_READ_START = 'EVENT_ASSET_READ_START'
@@ -18,13 +21,15 @@ module.exports = async function(config, opts = {}) {
   const options = {
     // Defaults
     backend: 'src/plugins/DefaultBackend.js',
+    // Default data for new websites
+    defaultSite,
     // Options
     ...opts
   }
 
   // Link to the desired backend
   const backend = resolve(__dirname, '../..', options.backend)
-  const { assetsDir, assetUrl, init, writeData, readData } = require(backend)
+  const { assetsDir, assetUrl, init, writeData, readData, list, del } = require(backend)
 
   config.on('silex:startup:start', ({app}) => {
     const router = Router()
@@ -32,6 +37,7 @@ module.exports = async function(config, opts = {}) {
     // website specials
     router.get('/website', readWebsite)
     router.post('/website', writeWebsite)
+    router.delete('/website', deleteWebsite)
     router.get(/\/assets\/(.*)/, readAsset)
     router.post('/assets', writeAsset)
 
@@ -39,21 +45,40 @@ module.exports = async function(config, opts = {}) {
   })
 
   async function readWebsite(req, res) {
-    const id = req.query.id
-    config.emit(EVENT_READ_START, { req, id })
-    try {
-      const data = await readData(id)
-      config.emit(EVENT_READ_END, { req, res, data, id })
-      res
-        .type('application/json')
-        .send(data)
-    } catch (err) {
-      if(err.code === 'ENOENT') {
-        console.error('Read file error, website does not exist', err)
-        res.status(404).json({ message: 'Read file error, website does not exist: ' + err.message, code: err.code})
-      } else {
-        console.error('Read file error', err)
-        res.status(400).json({ message: 'Read file error: ' + err.message, code: err.code})
+    const { id } = req.query
+    if(id) {
+      // Returns a website data
+      try {
+        config.emit(EVENT_READ_START, { req, id })
+        const data = await readData(id)
+        config.emit(EVENT_READ_END, { req, res, data, id })
+        res
+          .type('application/json')
+          .send({
+            ...options.defaultSite,
+            ...data,
+          })
+      } catch (err) {
+        if(err.code === 'ENOENT') {
+          console.error('Read file error, website does not exist', err)
+          res.status(404).json({ message: 'Read file error, website does not exist: ' + err.message, code: err.code})
+        } else {
+          console.error('Read file error', err)
+          res.status(400).json({ message: err.message, code: err.code})
+        }
+      }
+    } else {
+      // list websites
+      try {
+        config.emit(EVENT_READ_START, { req, id })
+        const data = await list()
+        config.emit(EVENT_READ_END, { req, res, data, id })
+        res
+          .type('application/json')
+          .send(data)
+      } catch (err) {
+        console.error('List sites error', err)
+        res.status(400).json({ message: err.message, code: err.code })
       }
     }
   }
@@ -79,8 +104,6 @@ module.exports = async function(config, opts = {}) {
 
   async function writeWebsite(req, res) {
     const id = req.query.id
-    await init(id)
-
     const [data, err] = fromBody(req.body)
     if(err) {
       res.status(400).json({ message: 'Error writing data file, could not parse the provided body: ' + err.message, code: err.code})
@@ -88,6 +111,7 @@ module.exports = async function(config, opts = {}) {
     }
     config.emit(EVENT_WRITE_START, { req, id, data })
     try {
+      await init(id)
       await writeData(id, data)
     } catch (err) {
       console.error('Error writing data file', err)
@@ -102,6 +126,41 @@ module.exports = async function(config, opts = {}) {
     })
   }
 
+  async function deleteWebsite(req, res) {
+    const { id } = req.query
+    if(id) {
+      try {
+        config.emit(EVENT_DELETE_START, { req, id })
+        const data = await del(id)
+        config.emit(EVENT_DELETE_END, { req, res, data, id })
+        res
+          .type('application/json')
+          .send(data)
+      } catch (err) {
+        if(err.code === 'ENOENT') {
+          console.error('Delete file error, website does not exist', err)
+          res.status(404).json({ message: 'Delete file error, website does not exist: ' + err.message, code: err.code})
+        } else {
+          console.error('Delete file error', err)
+          res.status(400).json({ message: err.message, code: err.code})
+        }
+      }
+    } else {
+      // list websites
+      try {
+        config.emit(EVENT_DELETE_START, { req, id })
+        const data = await list()
+        config.emit(EVENT_DELETE_END, { req, res, data, id })
+        res
+          .type('application/json')
+          .send(data)
+      } catch (err) {
+        console.error('List sites error', err)
+        res.status(400).json({ message: err.message, code: err.code })
+      }
+    }
+  }
+
   async function readAsset(req, res) {
     const id = req.query.id
     const fileName = req.params[0]

package/src/ts/client/config.ts

@@ -1,12 +1,14 @@
-import { Config } from '@silexlabs/silex-plugins'
+import { Config, Plugin } from '@silexlabs/silex-plugins'
 import { getEditorConfig } from './grapesjs'
+import { CLIENT_CONFIG_FILE_NAME } from '../constants'
 
 /**
  * @fileoverview Silex client side config
  */
 
 const id = new URL(location.href).searchParams.get('id') || 'default'
-const rootUrl = '.'
+const lang = new URL(location.href).searchParams.get('lang') || 'en'
+const rootUrl = `${location.protocol}//${location.host}${location.pathname}`
 
 export class SilexConfig extends Config {
   /**
@@ -14,8 +16,24 @@ export class SilexConfig extends Config {
    */
   debug = false
 
+  /**
+   * language for I18n module
+   */
+  lang = lang
+
   /**
    * Grapesjs config
    */
   editor = getEditorConfig(id, rootUrl)
+
+  /**
+   * Client config url
+   * This is the url of the config file which is a plugin
+   */
+  clientConfigUrl = `${rootUrl}${CLIENT_CONFIG_FILE_NAME}`
+
+  /**
+   * GrapesJs plugins
+   */
+  grapesJsPlugins: Plugin[] = []
 }