@silexlabs/silex 3.0.0-alpha.21

package/package.json

@@ -0,0 +1,170 @@
+{
+  "name": "@silexlabs/silex",
+  "description": "Free and easy website builder for everyone.",
+  "version": "3.0.0-alpha.21",
+  "version:backwardcompat": "3.0.0",
+  "author": {
+    "name": "Alex Hoyau",
+    "url": "https://lexoyo.me/"
+  },
+  "main": "dist/server/index.js",
+  "bin": {
+    "silex": "./dist/server/cli.js"
+  },
+  "license": "GPL-3.0",
+  "engines": {
+    "node": ">=12"
+  },
+  "watch": {
+    "build:css:debug": {
+      "patterns": [
+        "src/css/"
+      ],
+      "extensions": "scss"
+    },
+    "build:html:debug": {
+      "patterns": [
+        "src/html/"
+      ],
+      "extensions": "pug"
+    },
+    "build:client:debug": {
+      "patterns": [
+        "src/ts/client/"
+      ],
+      "extensions": [
+        "ts",
+        "js"
+      ]
+    },
+    "build:server:debug": {
+      "patterns": [
+        "src/ts/server/",
+        "src/plugins/"
+      ],
+      "extensions": [
+        "ts",
+        "js"
+      ]
+    }
+  },
+  "scripts": {
+    "release": "",
+    "watch": "npm-watch",
+    "start": "node dist/server/index.js",
+    "start:debug": "cross-env SILEX_DEBUG=true nodemon --watch dist/server dist/server/index.js",
+    "prepublishOnly": "npm run lint && npm test && npm run build",
+    "preversion": "npm run prepublishOnly",
+    "build": "run-s build:css:release build:html build:client:release build:server:release",
+    "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",
+    "build:html": "pug src/html/index.pug --out dist/client/ --no-debug",
+    "build:html:debug": "pug src/html/debug.pug --pretty --out dist/client/ && mv dist/client/debug.html dist/client/index.html",
+    "build:client:release": "webpack --config webpack.config.js",
+    "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'",
+    "lint:fix": "npm run lint -- --fix",
+    "test": "node --experimental-vm-modules `node_modules jest`/jest/bin/jest.js",
+    "test:watch": "npm test -- --watch"
+  },
+  "dependencies": {
+    "@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-symbols": "1.0.18",
+    "@silexlabs/grapesjs-ui-suggest-classes": "1.0.23",
+    "@silexlabs/silex-plugins": "^1.0.6",
+    "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",
+    "cross-env": "7.0.3",
+    "express": "4.18.2",
+    "express-force-ssl": "0.3.2",
+    "formidable": "2.1.1",
+    "grapesjs": "0.21.1",
+    "grapesjs-blocks-basic": "1.0.1",
+    "grapesjs-custom-code": "1.0.1",
+    "grapesjs-plugin-forms": "2.0.5",
+    "grapesjs-style-filter": "1.0.1",
+    "html-minifier": "^4.0.0",
+    "lit-html": "2.7.2",
+    "mkdirp": "3.0.1",
+    "node_modules-path": "2.0.7",
+    "node-fetch": "^2.6.9",
+    "normalize.css": "8.0.1",
+    "object-path": "0.11.8",
+    "promise-sequential": "1.1.1",
+    "sass": "1.62.0",
+    "serve-static": "1.15.0"
+  },
+  "devDependencies": {
+    "@types/express": "4.17.17",
+    "@types/jest": "29.5.1",
+    "@types/node": "18.16.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
+    "css-loader": "6.7.3",
+    "eslint": "8.39.0",
+    "file-loader": "6.2.0",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "livereload": "^0.9.3",
+    "nodemon": "2.0.22",
+    "npm-run-all": "4.1.5",
+    "npm-watch": "0.11.0",
+    "pug-cli": "1.0.0-alpha6",
+    "style-loader": "3.3.2",
+    "ts-jest": "^29.1.0",
+    "ts-loader": "9.4.2",
+    "typescript": "5.0.4",
+    "webpack": "5.80.0",
+    "webpack-cli": "5.0.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/silexlabs/Silex.git"
+  },
+  "keywords": [
+    "page builder",
+    "cloud",
+    "SaaS",
+    "template builder",
+    "web page editor",
+    "html5 editor",
+    "free",
+    "open source",
+    "online editor",
+    "silex website",
+    "free",
+    "website builder",
+    "online",
+    "silex website builder",
+    "silex.me",
+    "silex",
+    "html editor",
+    "free website builder",
+    "silex cms",
+    "online website builder open source",
+    "Create a free website",
+    "Wix.com open source alternative",
+    "designer",
+    "webdesigner",
+    "web master",
+    "webmaster",
+    "open source CMS",
+    "CSS3",
+    "HTML5",
+    "Javascript",
+    "WYSIWYG",
+    "github",
+    "silex",
+    "jekyll"
+  ]
+}

package/public/example-config.js

@@ -0,0 +1,31 @@
+export default async function(config, options) {
+    //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',
+            },
+        },
+    }
+}

package/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

package/readme.md

@@ -0,0 +1,51 @@
+[![status of silex.me instance](https://monitoshi.lexoyo.me/badge/1525963562293-6552)](https://editor.silex.me) [![Join the chat at https://gitter.im/silex-website-builder/community](https://badges.gitter.im/silex-website-builder/community.svg)](https://gitter.im/silex-website-builder/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
+![Silex UI](https://github.com/silexlabs/www.silex.me/raw/gh-pages/assets/silex-ui.gif)
+
+## About Silex, live web creation.
+
+| :fire:        Developers can test silex v3 with `npx silex-website-builder`   |
+|-------------------------------------------------------------------------------|
+
+Silex, is a free and open source website builder in the cloud. Create websites directly in the browser without writing code. And it is suitable for professional designers to produce great websites without constraints. Silex is also known as the HTML5 editor.
+
+Brought to you by Silex Labs team, promoting free software. Feel free to [use the free Silex instance](https://editor.silex.me/) provided by [Silex Labs foundation](https://www.silexlabs.org/).
+
+Silex for makers and web designers who want a free alternative to Webflow or other closed source website builders:
+
+* [Use Silex online for free](https://editor.silex.me)
+* [Silex desktop app (works offline, with your local files)](https://github.com/silexlabs/silex-desktop/)
+* [Silex official website](http://www.silex.me/)
+* [Documentation wiki](https://github.com/silexlabs/Silex/wiki)
+* [Silex forums](https://github.com/silexlabs/Silex/issues)
+* [subscribe to Silex news by email (a few messages per year)](http://eepurl.com/F48q5) and follow us on [Facebook](http://www.facebook.com/silexlabs), [Twitter](https://twitter.com/silexlabs)
+
+
+Silex for professionals, agencies and hosting companies:
+
+* [Install Silex on your computer or server](https://github.com/silexlabs/Silex/wiki/How-to-Host-An-Instance-of-Silex#as-a-web-app-silex-web-version) (basically this is `npm install -g silex-website-builder && silex`)
+* If you know HTML and CSS here is how to [add your own components to the "+" menu](https://github.com/silexlabs/Silex/wiki/Create-Silex-components)
+* If you are a designer, here is how to [add your own templates to Silex](https://github.com/silexlabs/Silex/wiki/Create-templates-for-Silex)
+* If you are a freelance designer and wants to create Silex website for clients, [please leave your email here](http://eepurl.com/gjYnib)
+* If you are looking for a designer to help you create your website, [please leave your email here](http://eepurl.com/gjYnib)
+* [Hire a contributor from this list](https://github.com/silexlabs/Silex/graphs/contributors) or [from one](https://github.com/silexlabs/unifile/graphs/contributors) [of these](https://github.com/silexlabs/CloudExplorer2/graphs/contributors) [other lists](https://github.com/silexlabs/drag-drop-stage-component/graphs/contributors)
+
+
+Other links
+
+* [Silex meta repository for Silex contribution](https://github.com/silexlabs/silex-meta)
+* [Silex is dual licensed under GPL or MPL](http://www.silexlabs.org/silex/silex-licensing/)
+* [Road map](https://github.com/silexlabs/Silex/milestones)
+* [Change log](https://github.com/silexlabs/Silex/pulls?utf8=%E2%9C%93&q=is%3Apr)
+* [Open positions, join the team](https://github.com/silexlabs/Silex/issues?q=is%3Aissue+is%3Aopen+label%3A%22open+position%22)
+* [Become a core contributor with these issues to get started](https://github.com/silexlabs/Silex/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)
+* [Testers, docs and other help wanted annoucements](https://github.com/silexlabs/Silex/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
+
+## Dependencies
+
+The upstream projects we use in Silex are all listed in [Silex meta package](https://github.com/silexlabs/silex-meta)
+
+## Github stars history
+
+[![Star History Chart](https://api.star-history.com/svg?repos=silexlabs/Silex&type=Timeline)](https://star-history.com/#silexlabs/Silex&Timeline)
+

package/src/css/_mixins.scss

@@ -0,0 +1,8 @@
+@mixin silex-ui-full {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+

package/src/css/_variables.scss

@@ -0,0 +1,33 @@
+// $silexlightergrey: #ddd;
+// $silexlightgrey: #535353;
+// $silexmediumgrey: #444;
+// $silexmediumdarkgrey: #393939;
+// $silexdarkgrey: #2f2f2f;
+// $silexdarkergrey: #2a2a2a;
+// $silexlightblue: #7bc0ff;
+
+$primaryColor: #444;
+$secondaryColor: #ddd;
+$tertiaryColor: #5e85a8;
+$quaternaryColor: #7bc0ff;
+$darkerPrimaryColor: #363636;
+$lighterPrimaryColor: #575757;
+$topBarHeight: 40px;
+$projectBarWidth: 35px;
+$projectPanelWidth: 13%;
+$projectPanelMinWidth: 150px;
+$transitionSpeedMedium: .35s;
+$transitionSpeedSlow: .5s;
+$prefix: 'gjs-';
+$pn-prefix: '#{$prefix}pn-';
+$cv-prefix: '#{$prefix}cv-';
+$z-dialog-inline: 10;
+
+:root {
+  --primaryColor: #444;
+  --secondaryColor: #ddd;
+  --tertiaryColor: #5e85a8;
+  --quaternaryColor: #7bc0ff;
+  --darkerPrimaryColor: #363636;
+  --lighterPrimaryColor: #575757;
+}

package/src/css/dialog.scss

@@ -0,0 +1,34 @@
+@use "variables";
+@use "mixins";
+
+.silex-main {
+  transition: opacity variables.$transitionSpeedMedium .5s ease;
+}
+.silex-dialog {
+  transition: opacity variables.$transitionSpeedMedium ease;
+}
+.silex-dialog-hide {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity variables.$transitionSpeedMedium ease, visibility variables.$transitionSpeedSlow 1s ease;
+}
+
+.silex-dialog-inline {
+  position: absolute;
+  background-color: variables.$primaryColor;
+  z-index: variables.$z-dialog-inline;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  main {
+    flex-grow: 1;
+  }
+  footer {
+    padding: 5px;
+    text-align: right;
+  }
+  a {
+    color: variables.$quaternaryColor;
+  }
+}

package/src/css/grapesjs.scss

@@ -0,0 +1,44 @@
+@use "variables" as *;
+
+#gjs {
+  flex: 1 1 auto;
+}
+
+
+.#{$prefix} {
+  @each $cnum, $ccol in (one, $primaryColor), (two, $secondaryColor), (three, $tertiaryColor), (four, $quaternaryColor) {
+    &#{$cnum} {
+      &-bg {
+        background-color: $ccol;
+      }
+
+      &-color {
+        color: $ccol;
+
+        &-h:hover {
+          color: $ccol;
+        }
+      }
+    }
+  }
+}
+.#{$cv-prefix}canvas,
+.#{$pn-prefix}panel,
+.#{$pn-prefix}commands {
+  left: $projectBarWidth;
+}
+.#{$pn-prefix}project-bar-panel,
+.#{$pn-prefix}views,
+.#{$pn-prefix}options,
+.#{$pn-prefix}views-container {
+  left: auto;
+}
+.#{$cv-prefix}canvas {
+  width: calc(85% - $projectBarWidth);
+}
+.#{$pn-prefix}devices-c {
+  .#{$prefix}device-label {
+    display: none;
+  }
+}
+

package/src/css/index.scss

@@ -0,0 +1,22 @@
+/* Normalize css */
+@use "normalize.css/normalize";
+@use "grapesjs/src/styles/scss/main";
+
+/* Silex styles imports */
+@use "silex";
+@use "loader";
+@use "dialog";
+@use "grapesjs";
+@use "project-bar";
+@use "page-panel";
+
+.container-png::before {
+  content: " ";
+  background-image: url("../assets/container.png");
+  height: 30px;
+  width: 30px;
+  margin: auto;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+

package/src/css/loader.scss

@@ -0,0 +1,10 @@
+@use "variables";
+@use "mixins";
+
+.silex-loader {
+  @include mixins.silex-ui-full;
+  display: flex;
+  color: variables.$secondaryColor;
+  justify-content: center;
+  align-items: center;
+}

package/src/css/page-panel.scss

@@ -0,0 +1,65 @@
+@use "variables" as *;
+
+.page-panel-container {
+  .pages__wrapper {
+    height: inherit;
+  }
+  .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;
+    }
+    .pages__page {
+      display: flex;
+      align-items: center;
+      background-color: $darkerPrimaryColor;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+      cursor: pointer;
+      &:hover {
+        background-color: $primaryColor;
+        .pages__page-name {
+          color: $quaternaryColor;
+        }
+      }
+    }
+    .pages__page-selected {
+      background-color: $lighterPrimaryColor;
+      cursor: default;
+      .pages__page-name {
+        color: $quaternaryColor;
+      }
+    }
+    .pages__main.pages__single-page .pages__remove-btn {
+      visibility: hidden;
+    }
+    .pages__page-name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: 13px;
+      font-size: initial;
+      text-transform: capitalize;
+      padding: 10px 6px;
+      flex: 1;
+      text-align: left;
+    }
+    .pages__icon {
+      padding: 10px 6px;
+      cursor: pointer;
+    }
+    .pages__icon:hover {
+      color: $quaternaryColor;
+    }
+  }
+  .#{$pn-prefix}buttons {
+    flex-direction: column;
+    .#{$pn-prefix}btn {
+    }
+    .#{$pn-prefix}btn:first-child {
+    }
+  }
+}

package/src/css/project-bar.scss

@@ -0,0 +1,102 @@
+@use "variables" as *;
+
+// squeeze the stage iframe when panel is open
+iframe.enable-squeeze.gjs-frame {
+  transition: width $transitionSpeedMedium, height $transitionSpeedMedium, left $transitionSpeedMedium;
+}
+iframe.enable-squeeze.silex-squeeze-left {
+  --project-panel-width: max(150px, 15.7%); /* Why 16? Also sass vars do not work here */
+  left: var(--project-panel-width);
+  width: calc(100% - var(--project-panel-width));
+}
+// button bar
+.#{$pn-prefix}project-bar-panel {
+  width: $projectBarWidth;
+  padding: 0;
+  .#{$pn-prefix}buttons {
+    flex-direction: column;
+    min-height: 100vh;
+    justify-content: flex-start;
+    .project-bar-spacer {
+      flex: 1;
+    }
+    .#{$pn-prefix}btn {
+      margin: 5px 0 0;
+      padding: 5px;
+      &.#{$pn-prefix}active {
+        background-color: $lighterPrimaryColor;
+        width: $projectBarWidth;
+        box-shadow: none;
+     }
+    }
+  }
+  .logo {
+    background-image: url('../assets/logo-silex-small.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-color: transparent;
+  }
+}
+
+// panels
+.#{$pn-prefix}project-bar-container {
+  top: $topBarHeight;
+  width: $projectPanelWidth;
+  min-width: $projectPanelMinWidth;
+  height: calc(100% - $topBarHeight);
+  background-color: $lighterPrimaryColor;
+  &:not(.gjs-hidden) {
+    display: flex; // let the child take the whole height
+    flex-direction: column;
+  }
+  .project-bar__panel:not(.gjs-hidden) {
+    flex: 1;
+    display: flex; // let the child take the whole height
+    flex-direction: column;
+    background-color: $primaryColor;
+    overflow: auto;
+    .gjs-layer {
+      background-color: $primaryColor;
+    }
+  }
+  .project-bar__panel > *:not(header) {
+    flex: 1;
+    display: initial;
+   }
+   .project-bar__panel-header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 5px;
+      border-bottom: 1px solid $lighterPrimaryColor;
+      .project-bar__panel-header-title {
+        flex: 1 1 auto;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: 3px 0;
+        margin: 0;
+        font-size: large;
+        font-weight: 600;
+      }
+      .project-bar__panel-header-button {
+        cursor: pointer;
+        font-size: large;
+        font-weight: 400;
+        span {
+          position: relative;
+          left: -6px;
+          top: 6px;
+          font-weight: bolder;
+          background-color: #444;
+          border-radius: 100%;
+          display: inline-block;
+          line-height: 13px;
+        }
+      }
+      .project-bar__panel-header-button:hover {
+        color: $quaternaryColor;
+      }
+    }
+  }
+