@silexlabs/silex 3.4.0 → 3.5.1-1

package/.silex.js

@@ -56,9 +56,6 @@ module.exports = async function(config, options) {
           .concat(config.debug ? [{
             route: '/',
             path: './',
-          }, {
-            route: '/js/',
-            path: nodeModules('@silexlabs/silex-cms') + '/@silexlabs/silex-cms/',
           }, {
             // why is this needed when running locally?
             route: '/css/',

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

@@ -4,6 +4,7 @@ import { Editor, EditorConfig } from 'grapesjs';
 import { PublicationTransformer } from './publication-transformers';
 import * as api from './api';
 import { SettingsSection } from './grapesjs/settings-sections';
+import { EleventyPluginOptions } from './grapesjs/cms';
 /**
  * @fileoverview Silex client side config
  */
@@ -67,6 +68,13 @@ export declare class ClientConfig extends Config {
      */
     fontsServerUrl: string;
     fontsApiUrl: string;
+    /**
+     * CMS configuration options
+     * @default Default CMS configuration with enabled: true
+     */
+    cmsConfig: Partial<EleventyPluginOptions> & {
+        enabled?: boolean;
+    };
     /**
      * Init GrapesJS config which depend on the config file properties
      */

package/dist/client/client/grapesjs/cms/DataSource.d.ts

@@ -0,0 +1,43 @@
+import { DataSourceType, Field, IDataSource, Type } from '@silexlabs/grapesjs-data-source';
+import { EleventyPluginOptions } from './index';
+import { Editor } from 'grapesjs';
+export default function (editor: Editor, opts: EleventyPluginOptions): void;
+export declare const EleventyDataSourceId = "eleventy";
+export declare class EleventyDataSource implements IDataSource {
+    /**
+     * Unique identifier of the data source
+     * This is used to retrieve the data source from the editor
+     */
+    id: string;
+    label: string;
+    url: string;
+    type: DataSourceType;
+    method: string;
+    headers: {};
+    hidden: boolean;
+    readonly: boolean;
+    private eventListeners;
+    on(event: string, callback: (...args: unknown[]) => void): void;
+    off(event: string, callback?: (...args: unknown[]) => void): void;
+    trigger(event: string, ...args: unknown[]): void;
+    /**
+     * Implement IDatasource
+     */
+    connect(): Promise<void>;
+    isConnected(): boolean;
+    /**
+     * Implement IDatasource
+     */
+    getQuery(): string;
+    /**
+     * Implement IDatasource
+     */
+    getTypes(): Type[];
+    /**
+     * Implement IDatasource
+     */
+    getQueryables(): Field[];
+    fetchValues(query: string): Promise<unknown>;
+}
+export declare class EleventyDataSourceTest extends EleventyDataSource {
+}

package/dist/client/client/grapesjs/cms/blocks.d.ts

@@ -0,0 +1,2 @@
+import { Editor } from 'grapesjs';
+export default function (editor: Editor): void;

package/dist/client/client/grapesjs/cms/buttons.d.ts

@@ -0,0 +1,2 @@
+import { Editor } from 'grapesjs';
+export default function (editor: Editor): void;

package/dist/client/client/grapesjs/cms/collection-pages.d.ts

@@ -0,0 +1,4 @@
+import { EleventyPluginOptions } from './index';
+import { Editor } from 'grapesjs';
+export declare const EVENT_UPDATE_PAGE_LIST = "update:collection:pages:list";
+export default function (editor: Editor, opts: EleventyPluginOptions): void;

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

@@ -0,0 +1,9 @@
+/**
+ * @fileoverview DataSource configuration with defaults
+ */
+import { EleventyPluginOptions } from './index';
+import { Editor } from 'grapesjs';
+/**
+ * Default for the data source plugin to work without config
+ */
+export declare function getZeroConfig(editor: Editor): EleventyPluginOptions;

package/dist/client/client/grapesjs/cms/filters.d.ts

@@ -0,0 +1,3 @@
+import { Filter } from '@silexlabs/grapesjs-data-source';
+export declare const eleventyFilters: Filter[];
+export declare const i18nFilters: Filter[];

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

@@ -0,0 +1,44 @@
+import { DataSourceEditorOptions } from '@silexlabs/grapesjs-data-source';
+import { WebsiteSettings } from '../../../types';
+import { Editor } from 'grapesjs';
+export declare const CMS_SETTINGS_SECTION_ID = "CMS_SETTINGS_SECTION_ID";
+export interface EleventyPluginOptions extends DataSourceEditorOptions {
+    esModule?: boolean;
+    enable11ty?: boolean;
+    cacheBuster?: boolean;
+    fetchPluginSettings?: object | false;
+    i18nPlugin?: boolean;
+    dir?: {
+        input?: string;
+        html?: string;
+        assets?: string;
+        css?: string;
+    };
+    urls?: {
+        css?: string;
+        assets?: string;
+    };
+}
+export interface Silex11tyPluginWebsiteSettings extends WebsiteSettings {
+    eleventyPageData?: string;
+    eleventyPermalink?: string;
+    eleventyPageSize?: string;
+    eleventyPageReverse?: boolean;
+    silexLanguagesList?: string;
+    silexLanguagesDefault?: string;
+    eleventyNavigationKey?: string;
+    eleventyNavigationTitle?: string;
+    eleventyNavigationOrder?: string;
+    eleventyNavigationParent?: string;
+    eleventyNavigationUrl?: string;
+    eleventySeoTitle?: string;
+    eleventySeoDescription?: string;
+    eleventyFavicon?: string;
+    eleventyOGImage?: string;
+    eleventyOGTitle?: string;
+    eleventyOGDescription?: string;
+    eleventyI18n?: boolean;
+    eleventyFetch?: boolean;
+    eleventyImage?: boolean;
+}
+export default function (editor: Editor, options?: Partial<EleventyPluginOptions>): Editor;

package/dist/client/client/grapesjs/cms/liquid.d.ts

@@ -0,0 +1,59 @@
+import { Expression, Filter, Property, State, StateId, UnariOperator, BinaryOperator } from '@silexlabs/grapesjs-data-source';
+import { Component } from 'grapesjs';
+export interface BinaryCondition {
+    operator: BinaryOperator;
+    expression: Expression;
+    expression2: Expression;
+}
+export interface UnaryCondition {
+    operator: UnariOperator;
+    expression: Expression;
+}
+export type Condition = BinaryCondition | UnaryCondition;
+/**
+ * Generate liquid instructions which echo the value of an expression
+ */
+export declare function echoBlock(component: Component, expression: Expression): string;
+/**
+ * Generate liquid instructions which echo the value of an expression, on 1 line
+ */
+export declare function echoBlock1line(component: Component, expression: Expression): string;
+/**
+ * Generate liquid instructions which define a variable for later use
+ * This is used for components states
+ */
+export declare function assignBlock(stateId: StateId, component: Component, expression: Expression): string;
+/**
+ * Generate liquid instructions which start and end a loop over the provided expression
+ * This is used for components states
+ */
+export declare function loopBlock(component: Component, expression: Expression): [start: string, end: string];
+/**
+ * Generate liquid instructions which define a variable for later use
+ * This is used for components states
+ */
+export declare function ifBlock(component: Component, condition: Condition): [start: string, end: string];
+/**
+ * Pagination data has no filter and no states in it
+ */
+export declare function getPaginationData(expression: Property[]): string;
+/**
+ * Convert an expression to liquid code
+ */
+export declare function getLiquidBlock(component: Component, expression: Expression): {
+    variableName: string;
+    liquid: string;
+}[];
+export declare function getNextVariableName(component: Component, numNextVar: number): string;
+/**
+ * Get the liquid assign statement for the expression
+ * The expression must
+ * - start with a property or state
+ * - once it has a filter it canot have a property again
+ * - state can only be the first token
+ *
+ * Example of return value: `countries.continent.countries | first.name`
+ */
+export declare function getLiquidStatement(expression: Expression, variableName: string, lastVariableName?: string): string;
+export declare function getLiquidStatementProperties(properties: (Property | State)[]): string;
+export declare function getLiquidStatementFilters(filters: Filter[]): string;

package/dist/client/client/grapesjs/cms/page-settings.d.ts

@@ -0,0 +1,6 @@
+import { EleventyPluginOptions } from './index';
+import { Editor } from 'grapesjs';
+/**
+ * Main function to add the settings to the page
+ */
+export default function (editor: Editor, opts: EleventyPluginOptions): void;

package/dist/client/client/grapesjs/cms/publication.d.ts

@@ -0,0 +1,60 @@
+import { Page, Editor } from 'grapesjs';
+import { IDataSource, StateId, Token } from '@silexlabs/grapesjs-data-source';
+import { EleventyPluginOptions, Silex11tyPluginWebsiteSettings } from './index';
+import { ClientConfig } from '../../config';
+import { WebsiteSettings, PublicationData } from '../../../types';
+export default function (editor: Editor, options: EleventyPluginOptions): void;
+export declare function getPermalink(page: Page, permalink: Token[], isCollectionPage: boolean, slug: string): string | null;
+/**
+ * Get the front matter for a given page
+ */
+export declare function getFrontMatter(page: Page, settings: Silex11tyPluginWebsiteSettings, slug: string, collection: string, lang?: string): string;
+/**
+ * Get the body states for a given page
+ */
+export declare function getBodyStates(page: Page): string;
+export declare function transformPage(editor: Editor, data: {
+    page: Page;
+    siteSettings: WebsiteSettings;
+    pageSettings: Silex11tyPluginWebsiteSettings;
+}): void;
+/**
+ * Transform the files to be published
+ * This hook is called just before the files are written to the file system
+ * Exported for unit tests
+ */
+export declare function transformFiles(editor: Editor, options: EleventyPluginOptions, data: PublicationData, config: ClientConfig): void;
+/**
+ * Exported for unit tests
+ */
+export declare function queryToDataFile(dataSource: IDataSource, queryStr: string, options: EleventyPluginOptions, page: Page, lang: string | null, fetchPlugin: object | false): string;
+export declare function makeFetchCall(options: {
+    key: string;
+    url: string;
+    method: string;
+    headers: string;
+    query: string;
+}): string;
+export declare function makeFetchCallEleventy(options: {
+    key: string;
+    url: string;
+    method: string;
+    headers: string;
+    query: string;
+}, fetchPlugin: object): string;
+/**
+ * Check if a state is an attribute
+ * Exported for unit tests
+ */
+export declare function isAttribute(label: string): boolean;
+/**
+ * Build the attributes string for a given component
+ * Handle attributes which appear multiple times (class, style)
+ * Append to the original attributes
+ * Exported for unit tests
+ */
+export declare function buildAttributes(originalAttributes: Record<string, string>, attributeStates: {
+    stateId: StateId;
+    label: string;
+    value: string;
+}[]): string;

package/dist/client/client/grapesjs/cms/site-settings.d.ts

@@ -0,0 +1,3 @@
+import { EleventyPluginOptions } from './index';
+import { Editor } from 'grapesjs';
+export default function (editor: Editor, opts: EleventyPluginOptions): void;

package/dist/client/client/grapesjs/cms/states.d.ts

@@ -0,0 +1,8 @@
+import { Editor } from 'grapesjs';
+export default function (editor: Editor): void;
+/**
+ * Update pagination states for a page with the ability to control which page index to show
+ * @param editor - The GrapesJS editor instance
+ * @param pageIndex - The current page index (0-based) for pagination preview. Use 0 for publication.
+ */
+export declare function updatePaginationStates(editor: Editor, pageIndex?: number, preventTrigger?: boolean): void;

package/dist/client/client/grapesjs/cms/traits.d.ts

@@ -0,0 +1,8 @@
+import { Editor } from 'grapesjs';
+/**
+ * @fileoverview
+ * This adds these traits to all components:
+ *   - unwrap the component
+ */
+export declare const UNWRAP_ID = "plugin-unwrap";
+export default function (editor: Editor): void;

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

@@ -1,4 +1,13 @@
+import { SettingsSection } from './settings-sections';
+import { Editor } from 'grapesjs';
 export declare const cmdOpenSettings = "open-settings";
-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;
+export declare const cmdAddSection = "settings:add-section";
+export declare const cmdRemoveSection = "settings:remove-section";
+export interface AddSectionOption {
+    section: SettingsSection;
+    siteOrPage: 'site' | 'page';
+    position: 'first' | 'last' | number;
+}
+export declare const settingsDialog: (editor: Editor, opts: Record<string, unknown>) => void;
+export declare function addSection(section: SettingsSection, siteOrPage: 'site' | 'page', position: 'first' | 'last' | number): void;
+export declare function removeSection(id: string, siteOrPage: 'site' | 'page'): void;

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

@@ -1 +1,2 @@
-export default function (editor: any): void;
+import { Editor } from 'grapesjs';
+export default function (editor: Editor): void;

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

@@ -20,3 +20,4 @@ export declare function isTextOrInputField(element: HTMLElement): boolean;
  * @param sep The separator between words.
  */
 export declare function titleCase(str: string, sep?: string): string;
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait?: number): (...args: Parameters<T>) => void;

package/dist/client/constants.d.ts

@@ -3,7 +3,8 @@
  */
 export declare const WEBSITE_DATA_FILE = "website.json";
 export declare const WEBSITE_META_DATA_FILE = "meta.json";
-export declare const WEBSITE_PAGES_FOLDER = "src";
+export declare const LEGACY_WEBSITE_PAGES_FOLDER = "src";
+export declare const WEBSITE_PAGES_FOLDER = "pages";
 export declare const DEFAULT_WEBSITE_ID = "default";
 export declare const DEFAULT_LANGUAGE = "en";
 export declare const CLIENT_CONFIG_FILE_NAME = "silex.js";

package/dist/client/css/admin.css

@@ -322,6 +322,7 @@ template {
   --lighterPrimaryColor: #575757;
   --viewsPanelWidth: 25%;
   --viewsProjectPanelWidth: 13%;
+  --footerHeight: 30px;
 }
 
 /* stylelint-disable */
@@ -3991,25 +3992,83 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   overflow: hidden;
 }
 
-.settings-dialog > div {
-  max-width: none;
-  width: 100%;
+.settings-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
   height: 100vh;
+  z-index: 10;
+  pointer-events: auto;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.settings-dialog .settings-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primaryColor);
+  overflow: hidden;
+}
+.settings-dialog .settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--gjs-border-color, #ddd);
+}
+.settings-dialog .settings-header h3 {
+  margin: 0;
+  font-size: 18px;
+}
+.settings-dialog .settings-close {
+  color: inherit;
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.settings-dialog .settings-body {
+  flex: 1;
   overflow: auto;
+  padding: 0;
+}
+.settings-dialog .settings-body .silex-form {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.settings-dialog .settings-body .silex-sidebar-dialog {
+  flex: 1;
+}
+.settings-dialog footer {
+  position: fixed;
+  z-index: 10;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 20px 0;
 }
-.settings-dialog > div form.silex-form {
+.settings-dialog form.silex-form {
   padding-bottom: 100px;
 }
-.settings-dialog > div form.silex-form textarea {
+.settings-dialog form.silex-form textarea {
   min-height: 250px;
 }
-.settings-dialog > div .silex-form__element {
+.settings-dialog .silex-form__element {
   padding: 10px 5px;
   border: 1px solid #575757;
   margin: 10px 0;
   width: 98%;
 }
-.settings-dialog > div footer {
+.settings-dialog footer {
   position: fixed;
   z-index: 10;
   bottom: 0;
@@ -4018,15 +4077,15 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   padding: 20px 0;
   background-color: #333333;
 }
-.settings-dialog > div footer > *:last-child {
+.settings-dialog footer > *:last-child {
   margin-right: 30px;
 }
-.settings-dialog > div footer .silex-version {
+.settings-dialog footer .silex-version {
   float: left;
   padding: 0 15px;
-  font-size: x-small;
+  font-size: small;
 }
-.settings-dialog > div .CodeMirror {
+.settings-dialog .CodeMirror {
   min-height: 400px;
   height: auto;
 }
@@ -4102,7 +4161,7 @@ input.silex-button[type=submit]:hover {
 }
 .silex-sidebar-dialog main,
 .silex-bar main {
-  width: 100%;
+  width: 93%;
 }
 
 ol.silex-list,
@@ -4208,7 +4267,7 @@ form.silex-form .silex-form__group.col2 {
   justify-content: center;
   align-items: center;
   background-color: #333333;
-  z-index: 10;
+  z-index: 11;
   opacity: 1;
   font-size: 1.25rem;
   letter-spacing: 0.025em;
@@ -4473,10 +4532,10 @@ form.silex-form .silex-form__group.col2 {
 .page-panel-container .pages {
   display: flex;
   flex-direction: column;
+  margin-bottom: 30px;
 }
 .page-panel-container .pages .pages__main {
   flex: 1;
-  border: 1px solid #292929;
   background-color: #333333;
   min-height: 20vh;
 }
@@ -4927,6 +4986,10 @@ form.silex-form .silex-form__group.col2 {
   outline: 1px solid #8873FE;
 }
 
+.gjs-cv-canvas {
+  height: calc(100% - var(--gjs-canvas-top) - var(--footerHeight));
+}
+
 .gjs-pn-buttons {
   justify-content: unset;
 }
@@ -5066,6 +5129,17 @@ form.silex-form .silex-form__group.col2 {
 
 .fa-diamond:before {
   content: "\f3a5";
+  font-weight: 900;
+}
+
+.fa-rotate-left:before {
+  content: "\f2ea";
+  font-weight: 900;
+}
+
+.fa-rotate-right:before {
+  content: "\f2f9";
+  font-weight: 900;
 }
 
 .gjs-sm-sector .gjs-sm-sector-label {

package/dist/client/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" translate="no"><head><title>Silex</title><meta name="description" content="This is a public instance of Silex website builder. Build websites in the browser"><link rel="shortcut icon" href="assets/favicon.png?725630"><style>body {
+<!DOCTYPE html><html lang="en" translate="no"><head><title>Silex</title><meta name="description" content="This is a public instance of Silex website builder. Build websites in the browser"><link rel="shortcut icon" href="assets/favicon.png?829209"><style>body {
   background-color: #444444;
   font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
@@ -7,5 +7,5 @@
   transition: opacity 0.25s 0.25s ease-in-out;
 }
 </style></head><body class="silex-loading"><div class="silex-loader silex-dialog" role="status" aria-live="polite" aria-busy="true">Loading
-</div><link rel="stylesheet" type="text/css" href="css/admin.css?689891"><main class="silex-workspace"><div class="silex-main silex-dialog-hide silex-ui-full" id="gjs"></div></main><script src="js/main.js?689891"></script><script>silex.start()
+</div><link rel="stylesheet" type="text/css" href="css/admin.css?289074"><main class="silex-workspace"><div class="silex-main silex-dialog-hide silex-ui-full" id="gjs"></div></main><script src="js/main.js?289074"></script><script>silex.start()
 // From here silex.config is available and Silex is getting started</script></body></html>