@silexlabs/silex 3.0.0-alpha.97 → 3.0.0

package/.env.default

@@ -8,7 +8,7 @@ SILEX_PORT=6805 # 6805 is the date of sexual revolution started in paris france
 SILEX_HOST=localhost
 SILEX_PROTOCOL=http
 SILEX_DEBUG=FALSE
-SILEX_CONFIG=
+SILEX_SERVER_CONFIG=
 SILEX_SSL_PORT=
 SILEX_FORCE_HTTPS=
 SILEX_SSL_PRIVATE_KEY=
@@ -17,3 +17,4 @@ SILEX_FORCE_HTTPS_TRUST_XFP_HEADER=
 SILEX_CORS_URL=
 SILEX_CLIENT_CONFIG=
 SILEX_FS_ROOT=
+SILEX_FS_HOSTING_ROOT=

package/README.md

@@ -1,12 +1,12 @@
-[![status of silex.me instance](https://monitoshi.lexoyo.me/badge/1525963562293-6552)](https://editor.silex.me)
+[![status of silex.me instance](https://monitoshi.lexoyo.me/badge/1525963562293-6552)](https://v3.silex.me)
 
 ![Silex UI](https://github.com/silexlabs/www.silex.me/raw/gh-pages/assets/silex-ui.gif)
 
 Brought to you by [Alex Hoyau](https://www.patreon.com/lexoyo) and [Silex contributors](https://github.com/silexlabs/Silex/graphs/contributors).
 
-You can help make Silex sustainable by being part of the community, contributing documentation or making a financial contribution. [Let's chat - every little bit helps!](https://github.com/silexlabs/Silex/discussions)
+Help make Silex sustainable by being [part of the community](https://community.silex.me/), [contributing documentation](https://docs.silex.me/), [making a financial contribution](https://opencollective.com/silex), [report bugs](https://github.com/silexlabs/Silex/issues).
 
-## About Silex, live web creation.
+## Silex
 
 Silex is a no-code tool for building websites. It also lets you code when needed. It can be used online, offline or in a JAMStack project.
 
@@ -15,9 +15,9 @@ Silex lets you create websites without coding, but it also has built-in editors
 Useful links
 
 * [Official website](https://www.silex.me/)
-* [Road map (please help defining tasks and prioritising)](https://github.com/orgs/silexlabs/projects/1/views/7)
+* [Road map (please help defining tasks and prioritising)](https://roadmap.silex.me)
 * [Bug report in Github issues](https://github.com/silexlabs/Silex/issues)
-* [Forums in Github discussions](https://github.com/silexlabs/Silex/discussions)
+* [Forums in Github discussions](https://community.silex.me)
 * [Silex meta package with more source code](https://github.com/silexlabs/silex-meta)
 
 Here are the main features of Silex website builder:
@@ -48,13 +48,15 @@ There is a desktop application that you can install on your computer which may b
 
 You can also run Silex locally or on your server using `npx`, `npm`, or `Docker`.
 
+Check the [developer docs](https://docs.silex.me/en/dev) for configuration options and integration with your js projects.
+
 #### Using npx
 
 ```bash
 npx @silexlabs/silex
 ```
 
-This command will run Silex with the entry point being `src/ts/server/cli.ts`.
+This command will run Silex with default config.
 
 #### Using Docker
 
@@ -62,7 +64,7 @@ This command will run Silex with the entry point being `src/ts/server/cli.ts`.
 docker run -p 6805:6805 silexlabs/silex
 ```
 
-This command will run Silex in a Docker container with the entry point being `src/ts/server/index.ts`.
+This command will run Silex in a Docker container.
 
 #### Using npm
 
@@ -72,11 +74,31 @@ First, install Silex as a dev dependency in your project:
 npm install --save-dev @silexlabs/silex
 ```
 
-Then, you can run Silex with the `silex` command. The entry point is `src/ts/server/cli.ts`.
+Then, you can run Silex with the `silex` command in your `package.json` scripts:
+
+```json
+{
+  "scripts": {
+    "start": "silex"
+  }
+}
+```
 
 ## Configuration
 
-You can configure Silex using environment variables and command-line options. All available options can be found in `src/ts/server/cli.ts`.
+You can configure Silex using environment variables and command-line options. All available options can be found in the [developer docs](https://docs.silex.me/en/dev) as well as in the code: [`src/ts/server/cli.ts`](./src/ts/server/cli.ts).
+
+Check the example config files - which are the same as plugins in Silex, in the [`examples/`](./examples/) folder. To test these configs, start Silex locally like this:
+
+```sh
+$ npx silex --client-config=./examples/client-config-transformers.js --server-config=`pwd`/examples/server-config-plugins.js 
+```
+
+Or like this:
+
+```sh
+$ SILEX_CLIENT_CONFIG=./examples/client-config-transformers.js SILEX_SERVER_CONFIG=`pwd`/examples/server-config-plugins.js npm run start:debug
+```
 
 ## Contributing
 

package/dist/client/client/api.d.ts

@@ -8,6 +8,7 @@ export declare enum ApiRoute {
     WEBSITE_READ = "/api/website/",
     WEBSITE_WRITE = "/api/website/",
     WEBSITE_DELETE = "/api/website/",
+    WEBSITE_DUPLICATE = "/api/website/duplicate",
     WEBSITE_CREATE = "/api/website/",
     WEBSITE_LIST = "/api/website/",
     WEBSITE_ASSETS_READ = "/api/website/assets",
@@ -54,6 +55,10 @@ export declare function websiteDelete({ websiteId, connectorId }: {
     websiteId: WebsiteId;
     connectorId?: ConnectorId;
 }): Promise<void>;
+export declare function websiteDuplicate({ websiteId, connectorId }: {
+    websiteId: WebsiteId;
+    connectorId?: ConnectorId;
+}): Promise<void>;
 export declare function websiteCreate({ websiteId, data, connectorId }: {
     websiteId: WebsiteId;
     data: WebsiteMetaFileContent;

package/dist/client/client/assetUrl.d.ts

@@ -43,9 +43,12 @@ export declare function addTempDataToPages(pages: Page[], websiteId: WebsiteId,
 export declare function removeTempDataFromPages(pages: Page[]): Page[];
 /**
  * Add data to stylesheets
+ *   e.g. linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url('/assets/qIg7JPRc.webp'), linear-gradient(#0ca311 0%, #0ca311 100%)
  */
 export declare function addTempDataToStyles(styles: Style[], websiteId: WebsiteId, storageId: ConnectorId): Style[];
 /**
  * Remove temp data from stylesheets
+ * The property `background-image` contains the URLs of the assets and other values,
+ *   e.g. `linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url('/api/website/assets/qIg7JPRc.webp?websiteId=default&connectorId=fs-storage'), linear-gradient(#0ca311 0%, #0ca311 100%)`
  */
 export declare function removeTempDataFromStyles(styles: Style[]): Style[];

package/dist/client/client/config.d.ts

@@ -3,6 +3,7 @@ import { ConnectorId, WebsiteId } from '../types';
 import { Editor, EditorConfig } from 'grapesjs';
 import { PublicationTransformer } from './publication-transformers';
 import * as api from './api';
+import { SettingsSection } from './grapesjs/settings-sections';
 /**
  * @fileoverview Silex client side config
  */
@@ -30,6 +31,20 @@ export declare class ClientConfig extends Config {
      * debug mode
      */
     debug: boolean;
+    /**
+     * Add hash in the file name of CSS at the time of publication
+     * If true, CSS files of generated pages will look like `page-name.123456.css`  instead of `page-name.css`
+     * This is useful to avoid caching issues
+     * @default true
+     */
+    addHashInCssFileName: boolean;
+    /**
+     * Replaced elements
+     * This is a list of elements which support the object-fit and object-position CSS properties
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
+     * When selected, Silex will show the object-fit and object-position properties in the style panel
+     */
+    replacedElements: string[];
     /**
      * Grapesjs config
      */
@@ -51,8 +66,24 @@ export declare class ClientConfig extends Config {
      * Publication transformers let plugins change files before they are published
      */
     publicationTransformers: Array<PublicationTransformer>;
+    /**
+     * Reset publication transformers
+     */
+    resetPublicationTransformers(): void;
     /**
      * Add a publication transformer(s)
      */
     addPublicationTransformers(transformers: PublicationTransformer | PublicationTransformer[]): void;
+    /**
+     * Add a section to the settings dialog
+     */
+    addSettings(section: SettingsSection, siteOrPage: 'site' | 'page', position?: 'first' | 'last' | number): void;
+    /**
+     * Remove a section from the settings dialog
+     */
+    removeSettings(id: string, siteOrPage: 'site' | 'page'): void;
+    /**
+     * Add default plugins
+     */
+    addDefaultPlugins(): Promise<void>;
 }

package/dist/client/client/events.d.ts

@@ -4,11 +4,17 @@ export declare enum ClientEvent {
     GRAPESJS_START = "silex:grapesjs:start",
     GRAPESJS_END = "silex:grapesjs:end",
     PUBLISH_START = "silex:publish:start",
+    PUBLISH_PAGE = "silex:publish:page",
     PUBLISH_DATA = "silex:publish:data",
     PUBLISH_END = "silex:publish:end",
     PUBLISH_ERROR = "silex:publish:error",
     PUBLISH_LOGIN_START = "silex:publish:login:start",
     PUBLISH_LOGIN_END = "silex:publish:login:end",
     ASSET_WRITE_END = "silex:asset:write:end",
-    WRITE_END = "silex:write:end"
+    WRITE_END = "silex:write:end",
+    SETTINGS_OPEN = "silex:settings:open",
+    SETTINGS_CLOSE = "silex:settings:close",
+    SETTINGS_SAVE_START = "silex:settings:save:start",
+    SETTINGS_SAVE_END = "silex:settings:save:end",
+    SETTINGS_SECTION_CHANGE = "silex:settings:section-change"
 }

package/dist/client/client/grapesjs/PublicationManager.d.ts

@@ -1,4 +1,4 @@
-import { ConnectorData, PublicationJobData, PublicationSettings, WebsiteFile, WebsiteId, WebsiteSettings } from '../../types';
+import { ConnectorData, PublicationData, PublicationJobData, PublicationSettings, WebsiteFile, WebsiteId, WebsiteSettings } from '../../types';
 import { Editor } from 'grapesjs';
 import { PublicationUi } from './PublicationUi';
 /**
@@ -60,6 +60,7 @@ export declare class PublicationManager {
     constructor(editor: PublishableEditor, opts: PublicationManagerOptions);
     goLogin(connector: ConnectorData): Promise<unknown>;
     goLogout(): Promise<void>;
+    getPublicationData(projectData: any, siteSettings: any): Promise<PublicationData>;
     /**
      * Start the publication process
      * This is the command "publish"

package/dist/client/client/grapesjs/css-props.d.ts

@@ -0,0 +1,6 @@
+import { Editor } from 'grapesjs';
+/**
+ * @fileoverview Adds various css properties
+ */
+declare const _default: (editor: Editor, opts: any) => void;
+export default _default;

package/dist/client/client/grapesjs/img.d.ts

@@ -0,0 +1,6 @@
+import { Editor } from 'grapesjs';
+/**
+ * @fileoverview This plugin adds CSS properties object-fit and object-position to the image component.
+ */
+declare const _default: (editor: Editor, opts: any) => void;
+export default _default;

package/dist/client/client/grapesjs/index.d.ts

@@ -1,5 +1,5 @@
 import { Editor, EditorConfig } from 'grapesjs';
-import { ConnectorId, WebsiteId } from '../../types';
-export declare function getEditorConfig(id: WebsiteId, connectorId: ConnectorId, rootUrl: string): EditorConfig;
+import { ClientConfig } from '../config';
+export declare function getEditorConfig(config: ClientConfig): EditorConfig;
 export declare function initEditor(config: EditorConfig): Promise<Editor>;
 export declare function getEditor(): Editor;

package/dist/client/client/grapesjs/new-page-dialog.d.ts

@@ -1,2 +1,2 @@
 export declare const cmdOpenNewPageDialog = "new-page-dialog";
-export declare const newPageDialog: any;
+export declare const newPageDialog: (editor: any, opts: any) => void;

package/dist/client/client/grapesjs/page-panel.d.ts

@@ -1,3 +1,3 @@
 export declare const cmdTogglePages = "pages:open-panel";
 export declare const cmdAddPage = "pages:add";
-export declare const pagePanelPlugin: any;
+export declare const pagePanelPlugin: (editor: any, opts: any) => void;

package/dist/client/client/grapesjs/project-bar.d.ts

@@ -1 +1,17 @@
+import { Editor } from 'grapesjs';
+export interface PanelObject {
+    command: string | ((editor: Editor) => void);
+    text: string;
+    className: string;
+    attributes: {
+        title?: string;
+        containerClassName?: string;
+    };
+    buttons?: {
+        command: string;
+        text: string;
+        className: string;
+    }[];
+}
 export declare const projectBarPlugin: (editor: any, opts: any) => void;
+export declare function addButton(editor: Editor, panel: PanelObject): void;

package/dist/client/client/grapesjs/resize-panel.d.ts

@@ -0,0 +1 @@
+export default function (editor: any): void;

package/dist/client/client/grapesjs/rich-text.d.ts

@@ -1 +1,4 @@
-export declare const richTextPlugin: any;
+import { RichTextEditorAction } from 'grapesjs';
+export declare const orderedList: RichTextEditorAction;
+export declare const unorderedList: RichTextEditorAction;
+export declare const richTextPlugin: (editor: any, opts: any) => void;

package/dist/client/client/grapesjs/semantic.d.ts

@@ -1 +1 @@
-export declare const semanticPlugin: any;
+export declare const semanticPlugin: (editor: any, opts: any) => void;

package/dist/client/client/grapesjs/settings-sections.d.ts

@@ -0,0 +1,15 @@
+import { WebsiteSettings } from '../../types';
+export declare const idCodeWrapper = "settings-head-wrapper";
+export declare function isSite(model: any): boolean;
+export interface SettingsSection {
+    id: string;
+    label: string;
+    render: (settings: WebsiteSettings, model: any) => any;
+}
+/**
+ * This is the settings dialog default sections
+ * Each section has an entry in the sidebar
+ * Each section render as part of the settings form
+ * The form is submitted to save the settings with all FormData
+ */
+export declare const defaultSections: SettingsSection[];

package/dist/client/client/grapesjs/settings.d.ts

@@ -1,2 +1,4 @@
 export declare const cmdOpenSettings = "open-settings";
-export declare const settingsDialog: any;
+export declare const settingsDialog: (editor: any, opts: any) => void;
+export declare function addSection(section: any, siteOrPage: 'site' | 'page', position: 'first' | 'last' | number): void;
+export declare function removeSection(id: any, siteOrPage: 'site' | 'page'): void;

package/dist/client/client/grapesjs/symbolDialogs.d.ts

@@ -1,3 +1,3 @@
 export declare const cmdPromptAddSymbol = "symbol-prompt-add";
-declare const _default: any;
+declare const _default: (editor: any, opts: any) => void;
 export default _default;

package/dist/client/client/grapesjs/view-buttons.d.ts

@@ -0,0 +1 @@
+export default function (editor: any): void;

package/dist/client/client/index.d.ts

@@ -1,4 +1,14 @@
+/**
+ * @fileoverview
+ * Defines the entry point of Silex client side application
+ *
+ */
+import { ClientConfig } from './config';
 export * from './expose';
+/**
+ * Expose the config object
+ */
+export declare let config: ClientConfig;
 /**
  * Start Silex, called from host HTML page with window.silex.start()
  */

package/dist/client/client/publication-transformers.d.ts

@@ -1,5 +1,5 @@
 import { Component, CssRule, Editor, ObjectStrings } from 'grapesjs';
-import { ClientSideFile, ClientSideFileType, PublicationData } from '../types';
+import { ClientSideFile, ClientSideFileType, Initiator, PublicationData } from '../types';
 /**
  * Interface for publication transformers
  * They are added to the config object with config.addPublicationTransformer()
@@ -8,9 +8,10 @@ export interface PublicationTransformer {
     renderComponent?(component: Component, toHtml: () => string): string | undefined;
     renderCssRule?(rule: CssRule, initialRule: () => ObjectStrings): ObjectStrings | undefined;
     transformFile?(file: ClientSideFile): ClientSideFile;
-    transformPermalink?(link: string, type: ClientSideFileType): string;
+    transformPermalink?(link: string, type: ClientSideFileType, initiator: Initiator): string;
     transformPath?(path: string, type: ClientSideFileType): string;
 }
+export declare const publicationTransformerDefault: PublicationTransformer;
 export declare function validatePublicationTransformer(transformer: PublicationTransformer): void;
 /**
  * Alter the components rendering
@@ -35,7 +36,7 @@ export declare function transformFiles(editor: Editor, data: PublicationData): v
  * Transform files paths
  * Exported for unit tests
  */
-export declare function transformPermalink(editor: Editor, path: string, type: ClientSideFileType): string;
+export declare function transformPermalink(editor: Editor, path: string, type: ClientSideFileType, initiator: Initiator): string;
 export declare function transformPath(editor: Editor, path: string, type: ClientSideFileType): string;
 export declare function resetRenderComponents(editor: Editor): void;
 export declare function resetRenderCssRules(editor: Editor): void;

package/dist/client/client/publish-custom-code-block.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @fileoverview Make sure custom script blocks include script tags when published
+ */
+export default function (config: any): Promise<void>;

package/dist/client/client/publish-fonts.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @fileoverview Make sure custom script blocks include script tags when published
+ */
+export default function (config: any): Promise<void>;

package/dist/client/client/utils.d.ts

@@ -1,2 +1,6 @@
 import { Component, Editor } from 'grapesjs';
 export declare function onAll(editor: Editor, cbk: (c: Component) => void): void;
+/**
+ * SHA256 hash a string
+ */
+export declare function hashString(str: string): Promise<string>;

package/dist/client/constants.d.ts

@@ -22,6 +22,7 @@ export declare const API_WEBSITE_READ = "/";
 export declare const API_WEBSITE_WRITE = "/";
 export declare const API_WEBSITE_CREATE = "/";
 export declare const API_WEBSITE_DELETE = "/";
+export declare const API_WEBSITE_DUPLICATE = "/duplicate";
 export declare const API_WEBSITE_LIST = "/";
 export declare const API_WEBSITE_ASSET_READ = "/assets";
 export declare const API_WEBSITE_ASSETS_WRITE = "/assets";