@silexlabs/silex 3.0.1-alpha.0 → 3.0.2

package/package.json

@@ -1,19 +1,30 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.0.1-alpha.0",
+  "version": "3.0.2",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",
     "url": "https://lexoyo.me/"
   },
-  "main": "dist/server/index.js",
+  "main": "dist/server/server/index.js",
   "bin": {
-    "silex": "./dist/server/cli.js"
+    "silex": "./dist/server/server/cli.js"
   },
-  "license": "GPL-3.0",
+  "files": [
+    "dist/",
+    "src/",
+    "public",
+    ".silex.js",
+    ".env.default",
+    "package.json",
+    "package-lock.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "license": "AGPL-3.0-or-later",
   "engines": {
-    "node": ">=12"
+    "node": ">=18"
   },
   "watch": {
     "build:css:debug": {
@@ -30,32 +41,49 @@
     },
     "build:client:debug": {
       "patterns": [
-        "src/ts/client/"
+        "src/ts/client/",
+        "src/ts/plugins/client/"
       ],
       "extensions": [
-        "ts",
-        "js"
+        "ts"
       ]
     },
     "build:server:debug": {
       "patterns": [
         "src/ts/server/",
-        "src/plugins/"
+        "src/ts/plugins/server/"
       ],
       "extensions": [
-        "ts",
-        "js"
+        "ts"
+      ]
+    },
+    "build:plugins:server": {
+      "patterns": [
+        "src/ts/plugins/server/"
+      ],
+      "extensions": [
+        "ts"
+      ]
+    },
+    "build:plugins:client": {
+      "patterns": [
+        "src/ts/plugins/client/"
+      ],
+      "extensions": [
+        "ts"
       ]
     }
   },
   "scripts": {
     "release": "",
+    "dev": "run-p watch start:debug",
     "watch": "npm-watch",
-    "start": "node dist/server/index.js",
-    "start:debug": "cross-env FS_ROOT=`pwd`/.silex cross-env SILEX_DEBUG=true nodemon --watch dist/server dist/server/index.js",
+    "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:preview": "http-server silex/hosting -o",
     "prepublishOnly": "$npm_execpath run lint && $npm_execpath test && $npm_execpath run build",
     "preversion": "$npm_execpath run prepublishOnly",
-    "build": "run-s build:css:release build:html build:client:release build:server:release",
+    "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",
     "build:css:debug": "sass --load-path ../../node_modules --load-path node_modules src/css/index.scss dist/client/css/admin.css",
@@ -65,67 +93,89 @@
     "build:client:debug": "webpack --config webpack.debug.config.js",
     "build:server:release": "tsc -p tsconfig-server-release.json",
     "build:server:debug": "SILEX_DEBUG=true tsc -p tsconfig-server-debug.json",
-    "lint": "eslint 'src/ts/**/*.ts'",
+    "build:plugins:server": "tsc -p tsconfig-plugins-server.json",
+    "build:plugins:client": "tsc -p tsconfig-plugins-client.json",
+    "lint": "eslint \"src/ts/**/*.ts\"",
     "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"
+    "test:watch": "$npm_execpath test -- --watch",
+    "prepare": "husky"
   },
   "dependencies": {
-    "@directus/sdk": "10.3.3",
-    "@silexlabs/grapesjs-directus-storage": "1.0.15",
-    "@silexlabs/grapesjs-fonts": "1.0.12",
-    "@silexlabs/grapesjs-loading": "1.0.8",
-    "@silexlabs/grapesjs-symbols": "1.0.20",
+    "@fontsource/ubuntu": "^5.0.13",
+    "@fortawesome/fontawesome-free": "6.6.0",
+    "@silexlabs/grapesjs-filter-styles": "^1.0.0",
+    "@silexlabs/grapesjs-fonts": "^1.0.20",
+    "@silexlabs/grapesjs-keymaps-dialog": "^1.0.16",
+    "@silexlabs/grapesjs-loading": "1.0.9",
+    "@silexlabs/grapesjs-notifications": "^0.0.8",
+    "@silexlabs/grapesjs-storage-rate-limit": "^1.0.8",
+    "@silexlabs/grapesjs-symbols": "1.0.43",
     "@silexlabs/grapesjs-ui-suggest-classes": "1.0.23",
     "@silexlabs/silex-plugins": "1.0.10",
-    "adm-zip": "0.5.10",
+    "@types/archiver": "^6.0.2",
+    "adm-zip": "0.5.14",
+    "archiver": "^7.0.1",
+    "basic-ftp": "^5.0.5",
     "body-parser": "1.20.2",
     "cli": "1.0.1",
     "compression": "1.7.4",
     "cookie-parser": "1.4.6",
-    "cookie-session": "2.0.0",
+    "cookie-session": "2.1.0",
     "cors": "2.8.5",
     "cross-env": "7.0.3",
-    "express": "4.18.2",
+    "crypto": "^1.0.1",
+    "dotenv": "^16.4.5",
+    "express": "4.19.2",
     "express-force-ssl": "0.3.2",
-    "formidable": "2.1.1",
-    "grapesjs": "0.21.2",
+    "formidable": "3.5.1",
+    "fs-extra": "^11.2.0",
+    "grapesjs": "^0.21.13",
     "grapesjs-blocks-basic": "1.0.2",
     "grapesjs-custom-code": "1.0.2",
+    "grapesjs-navbar": "^1.0.2",
     "grapesjs-plugin-forms": "2.0.6",
-    "grapesjs-style-filter": "1.0.2",
-    "html-minifier": "4.0.0",
-    "lit-html": "2.7.4",
+    "grapesjs-style-bg": "^2.0.2",
+    "grapesjs-style-border": "1.0.4",
+    "grapesjs-style-filter": "^1.0.2",
+    "html-minifier": "^4.0.0",
+    "lit-html": "3.2.1",
     "mkdirp": "3.0.1",
-    "node_modules-path": "2.0.7",
+    "node_modules-path": "2.0.8",
     "node-fetch": "2.6.9",
     "normalize.css": "8.0.1",
+    "npm-run-all": "^4.1.5",
     "object-path": "0.11.8",
     "promise-sequential": "1.1.1",
-    "sass": "1.63.6",
-    "serve-static": "1.15.0"
+    "sass": "1.77.8",
+    "serve-static": "1.15.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
-    "@types/express": "4.17.17",
-    "@types/jest": "29.5.2",
-    "@types/node": "20.3.1",
-    "@typescript-eslint/eslint-plugin": "5.60.0",
-    "@typescript-eslint/parser": "5.60.0",
-    "css-loader": "6.8.1",
-    "eslint": "8.43.0",
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@types/express": "4.17.21",
+    "@types/jest": "^29.5.12",
+    "@types/node": "22.1.0",
+    "@typescript-eslint/eslint-plugin": "6.10.0",
+    "@typescript-eslint/parser": "6.10.0",
+    "css-loader": "7.1.2",
+    "dedent": "^1.5.3",
+    "eslint": "8.53.0",
     "file-loader": "6.2.0",
-    "jest": "29.5.0",
-    "jest-environment-jsdom": "29.5.0",
+    "http-server": "^14.1.1",
+    "husky": "^9.1.7",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "livereload": "0.9.3",
-    "nodemon": "2.0.22",
-    "npm-run-all": "4.1.5",
-    "npm-watch": "0.11.0",
+    "nodemon": "3.1.4",
+    "npm-watch": "0.13.0",
     "pug-cli": "1.0.0-alpha6",
-    "style-loader": "3.3.3",
-    "ts-jest": "29.1.0",
-    "ts-loader": "9.4.3",
-    "typescript": "5.1.3",
-    "webpack": "5.88.0",
+    "style-loader": "4.0.0",
+    "ts-jest": "29.2.4",
+    "ts-loader": "9.5.1",
+    "typescript": "5.5.4",
+    "webpack": "5.93.0",
     "webpack-cli": "5.1.4"
   },
   "repository": {

package/public/silex.js

@@ -1,25 +1,24 @@
-// 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
+/*
+ * 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/>.
+ */
+
+/**
+ * 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/css/_variables.scss

@@ -1,33 +1,37 @@
-// $silexlightergrey: #ddd;
-// $silexlightgrey: #535353;
-// $silexmediumgrey: #444;
-// $silexmediumdarkgrey: #393939;
-// $silexdarkgrey: #2f2f2f;
-// $silexdarkergrey: #2a2a2a;
-// $silexlightblue: #7bc0ff;
-
-$primaryColor: #444;
+// All colors
+// /!\ Duplicated in the grapesjs/index.ts too => keep in sync
+$primaryColor: #333333;
 $secondaryColor: #ddd;
-$tertiaryColor: #5e85a8;
-$quaternaryColor: #7bc0ff;
-$darkerPrimaryColor: #363636;
+$tertiaryColor: #8873FE;
+$quaternaryColor: #A291FF;;
+$darkerPrimaryColor: #292929;
 $lighterPrimaryColor: #575757;
+
 $topBarHeight: 40px;
 $projectBarWidth: 35px;
 $projectPanelWidth: 13%;
 $projectPanelMinWidth: 150px;
-$transitionSpeedMedium: .35s;
-$transitionSpeedSlow: .5s;
+$viewsPanelWidth: 25%; // 15% is grapesjs default
+$viewsProjectPanelWidth: 13%;
+$footerHeight: 30px;
+$transitionSpeedMedium: .15s;
+$transitionSpeedSlow: .30s;
 $prefix: 'gjs-';
 $pn-prefix: '#{$prefix}pn-';
 $cv-prefix: '#{$prefix}cv-';
 $z-dialog-inline: 10;
+$z-loader: 10;
+$z-views-options-buttons: 5;
+
+$fontFamily: 'Ubuntu', sans-serif;
 
 :root {
-  --primaryColor: #444;
-  --secondaryColor: #ddd;
-  --tertiaryColor: #5e85a8;
-  --quaternaryColor: #7bc0ff;
-  --darkerPrimaryColor: #363636;
-  --lighterPrimaryColor: #575757;
+  --primaryColor: #{$primaryColor};
+  --secondaryColor: #{$secondaryColor};
+  --tertiaryColor: #{$tertiaryColor};
+  --quaternaryColor: #{$quaternaryColor};
+  --darkerPrimaryColor: #{$darkerPrimaryColor};
+  --lighterPrimaryColor: #{$lighterPrimaryColor};
+  --viewsPanelWidth: #{$viewsPanelWidth};
+  --viewsProjectPanelWidth: #{$viewsProjectPanelWidth};
 }

package/src/css/dialog.scss

@@ -18,17 +18,50 @@
   background-color: variables.$primaryColor;
   z-index: variables.$z-dialog-inline;
   border-radius: 3px;
+  border: 2px solid variables.$lighterPrimaryColor;
+  box-shadow: 0 0 10px 0 variables.$lighterPrimaryColor;
   display: flex;
   flex-direction: column;
-  padding: 10px;
+  header {
+    padding: 10px;
+    border-bottom: 1px solid variables.$lighterPrimaryColor;
+  }
   main {
     flex-grow: 1;
+    padding: 10px;
+    max-height: 50vh;
+    overflow-y: auto;
   }
   footer {
-    padding: 5px;
+    padding: 10px;
     text-align: right;
+    border-top: 1px solid variables.$lighterPrimaryColor;
   }
   a {
     color: variables.$quaternaryColor;
   }
+  header > * {
+    margin: 0;
+  }
+}
+
+.silex-help {
+  margin: 10px 0;
+  padding: 10px;
+  border: 1px solid variables.$lighterPrimaryColor;
+  border-radius: 3px;
+  background-color: variables.$lighterPrimaryColor;
+  color: variables.$secondaryColor;
+  font-size: small;
+  p {
+    margin: 0;
+  }
+  a {
+    color: variables.$quaternaryColor;
+  }
+}
+
+:focus-visible {
+  outline: 2px solid variables.$tertiaryColor;
+  outline-offset: 2px;
 }

package/src/css/fonts.scss

@@ -0,0 +1,31 @@
+@use "variables" as *;
+.fonts-dialog {
+  .gjs-mdl-dialog {
+    width: 100%;
+    max-width: unset;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .gjs-mdl-content {
+    flex: 1 1 auto;
+  }
+  .silex-form__element {
+    margin-bottom: 80px;
+  }
+  .silex-list li {
+    border-bottom: none;
+  }
+  h2 {
+    border-radius: 0;
+    background-color: transparent;
+  }
+  footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px !important;
+    background-color: $primaryColor;
+  }
+}

package/src/css/footer.scss

@@ -0,0 +1,12 @@
+@use "variables" as *;
+// Footer is sticky at the bottom of the stage
+.gjs-pn-footer {
+  bottom: 0;
+  left: $projectBarWidth;
+  right: var(--viewsPanelWidth);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  height: $footerHeight;
+}

package/src/css/grapesjs-light.scss

@@ -0,0 +1,180 @@
+// Comes from gramateria
+/* Overwrite GrapeJS css */
+
+.gjs-cm-editor#gjs-cm-css #gjs-cm-title,
+.gjs-cm-editor#gjs-cm-htmlmixed #gjs-cm-title,
+.gjs-two-color,
+.gjs-four-color,
+.gjs-color-warn, .gjs-sm-sector .gjs-sm-field input, .gjs-clm-tags .gjs-sm-field input, .gjs-sm-sector .gjs-clm-field input, .gjs-clm-tags .gjs-clm-field input, .gjs-sm-sector .gjs-sm-field select, .gjs-clm-tags .gjs-sm-field select, .gjs-sm-sector .gjs-clm-field select, .gjs-clm-tags .gjs-clm-field select {
+    color: #464973;
+}
+
+.gjs-one-bg {
+    background-color: #f6f7f9;
+}
+
+.gjs-block:hover {
+    box-shadow: 0 3px 4px 0 rgba(204, 210, 251, 0.42);
+}
+
+.gjs-category-title,
+.gjs-sm-sector .gjs-sm-title,
+.gjs-clm-tags .gjs-sm-title,
+.gjs-block-category .gjs-title,
+.gjs-layer-title {
+    background-color: #eee;
+    border-bottom: 1px solid rgba(121, 121, 121, 0.25);
+}
+
+/* text editor color */
+
+
+.gjs-cm-editor #gjs-cm-title {
+    background-color: rgba(164, 190, 241, 0.2);
+}
+
+.cm-s-hopscotch.CodeMirror {
+    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2f3c54+0,414251+100 */
+    background: #2f3c54;
+    /* Old browsers */
+    background: -moz-linear-gradient(-45deg, #2f3c54 0%, #414251 100%);
+    /* FF3.6-15 */
+    background: -webkit-linear-gradient(-45deg, #2f3c54 0%, #414251 100%);
+    /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(135deg, #2f3c54 0%, #414251 100%);
+    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f3c54', endColorstr='#414251', GradientType=1);
+    /* IE6-9 fallback on horizontal gradient */
+    color: #999;
+}
+
+.cm-s-hopscotch .CodeMirror-gutters {
+    background: #232c3c;
+}
+
+
+/* class name */
+.gjs-clm-tags #gjs-clm-close,
+.gjs-clm-tags #gjs-clm-checkbox {
+    color: #444;
+}
+
+.gjs-three-bg {
+    background-color: #f6f7f9;
+}
+
+/* select box */
+.gjs-field-arrow-u {
+    border-bottom: 4px solid #444;
+}
+
+.gjs-field-arrow-d {
+    border-top: 4px solid #444;
+}
+
+
+.gjs-field .gjs-d-s-arrow {
+    border-top: 4px solid rgb(68, 68, 68);
+}
+
+.gjs-pn-btn.fa:before,
+.gjs-block.fa:before {
+    color: #262c42;
+}
+
+.gjs-block {
+    background: #fff;
+}
+
+.gjs-blocks-c {
+    padding-bottom: 6px;
+}
+
+.gjs-field select.gjs-devices {
+    padding: 2px;
+}
+
+.gjs-color-warn,
+.gjs-sm-sector .gjs-sm-field input,
+.gjs-clm-tags .gjs-sm-field input,
+.gjs-sm-sector .gjs-clm-field input,
+.gjs-clm-tags .gjs-clm-field input,
+.gjs-sm-sector .gjs-sm-field select,
+.gjs-clm-tags .gjs-sm-field select,
+.gjs-sm-sector .gjs-clm-field select,
+.gjs-clm-tags .gjs-clm-field select {
+    color: #000;
+}
+
+#gjs-mdl-c .header-menus {
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+}
+
+label.gjs-import-file {
+    padding:10px 30px;
+    border:1px dashed #ddd;
+    font-size:13px;
+    background:#fff;
+}
+
+label.gjs-import-file:hover{
+    cursor:pointer;
+    border-color:var(--theme-color);
+}
+
+.CodeMirror {
+    height: 400px;
+}
+
+button.exportgram {
+    margin-left: 10px;
+    padding: 4px 10px;
+    background: #444;
+    color: #fff;
+    border-radius: 20px;
+}
+
+.html-wrapper,
+.css-wrapper {
+    width: 49%;
+    float: left;
+}
+
+.html-wrapper h4,
+.css-wrapper h4 {
+    margin: 4px 0 4px;
+}
+
+.gjs-mdl-dialog {
+    max-width: none;
+}
+
+.clear-fix {
+    width: 100%;
+    clear: both;
+}
+
+.css-wrapper {
+    margin-left: 2%;
+}
+
+
+
+.gjs-sm-sectors .gjs-radio-items .gjs-radio-item {
+    background: #585858;
+}
+
+label.gjs-radio-item-label,
+.gjs-sm-sectors .gjs-radio-item .fa {
+    color: #fff;
+}
+
+.gjs-four-color-h:hover {
+    color: var(--theme-color);
+}
+
+.iframe-wrapper{
+    padding-bottom:30px;
+}