@silexlabs/silex 3.0.0-alpha.52 → 3.0.0-alpha.55

package/dist/plugins/server/types.d.ts

@@ -134,8 +134,24 @@ export type ApiConnectorUserQuery = {
 };
 export type ApiConnectorUserResponse = ConnectorUser;
 export declare const defaultWebsiteData: WebsiteData;
+export interface Component {
+    type: string;
+    content?: string;
+    attributes: {
+        [key: string]: string;
+    };
+    components: Component[];
+}
+export interface Page {
+    id: string;
+    name: string;
+    slug: string;
+    frames: {
+        component: Component;
+    }[];
+}
 export interface WebsiteData {
-    pages: any[];
+    pages: Page[];
     assets: Asset[];
     styles: Style[];
     settings: WebsiteSettings;
@@ -161,21 +177,6 @@ export interface Font {
     value: string;
     variants: string[];
 }
-export interface Frame {
-    component: {
-        type: string;
-        stylable: string[];
-    };
-    components: Component[];
-}
-export interface Component {
-    type: string;
-    content?: string;
-    attributes: {
-        [key: string]: string;
-    };
-    conponents: Component[];
-}
 export declare enum Unit {
     PX = "px"
 }

package/dist/plugins/server/types.js

@@ -37,6 +37,17 @@ exports.defaultWebsiteData = {
 //symbols: [],
 //publication: {},
 };
+//export interface Frame {
+//  component: { type: string, stylable: string[] },
+//  components: Component[],
+//}
+//
+//export interface Component {
+//  type: string,
+//  content?: string,
+//  attributes: { [key: string]: string },
+//  conponents: Component[],
+//}
 var Unit;
 (function (Unit) {
     Unit["PX"] = "px";

package/dist/plugins/server/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/ts/types.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;;;AAmBH,MAAa,QAAS,SAAQ,KAAK;IACY;IAA7C,YAAY,OAAe,EAAkB,cAAsB;QACjE,KAAK,CAAC,OAAO,CAAC,CAAA;QAD6B,mBAAc,GAAd,cAAc,CAAQ;QAEjE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,cAAc,EAAE,OAAO,CAAC,CAAA;IACpD,CAAC;CACF;AALD,4BAKC;AA+CD,KAAK;AACL,cAAc;AACD,QAAA,kBAAkB,GAAgB;AAC7C,YAAY;AACZ,aAAa;AACb,aAAa;AACb,eAAe;AACf,YAAY;AACZ,cAAc;AACd,kBAAkB;CACJ,CAAA;AA8ChB,IAAY,IAEX;AAFD,WAAY,IAAI;IACd,iBAAS,CAAA;AACX,CAAC,EAFW,IAAI,oBAAJ,IAAI,QAEf;AAkCD,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,qCAAe,CAAA;IACf,iCAAW,CAAA;AACb,CAAC,EAJW,kBAAkB,kCAAlB,kBAAkB,QAI7B;AA+CD;;GAEG;AACH,IAAY,aAGX;AAHD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,oCAAmB,CAAA;AACrB,CAAC,EAHW,aAAa,6BAAb,aAAa,QAGxB;AAuDD;;GAEG;AACH,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,wCAA2B,CAAA;IAC3B,gCAAmB,CAAA;IACnB,4BAAe,CAAA;AACjB,CAAC,EAJW,SAAS,yBAAT,SAAS,QAIpB"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/ts/types.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;;;AAmBH,MAAa,QAAS,SAAQ,KAAK;IACY;IAA7C,YAAY,OAAe,EAAkB,cAAsB;QACjE,KAAK,CAAC,OAAO,CAAC,CAAA;QAD6B,mBAAc,GAAd,cAAc,CAAQ;QAEjE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,cAAc,EAAE,OAAO,CAAC,CAAA;IACpD,CAAC;CACF;AALD,4BAKC;AA+CD,KAAK;AACL,cAAc;AACD,QAAA,kBAAkB,GAAgB;AAC7C,YAAY;AACZ,aAAa;AACb,aAAa;AACb,eAAe;AACf,YAAY;AACZ,cAAc;AACd,kBAAkB;CACJ,CAAA;AAuDhB,0BAA0B;AAC1B,oDAAoD;AACpD,4BAA4B;AAC5B,GAAG;AACH,EAAE;AACF,8BAA8B;AAC9B,iBAAiB;AACjB,qBAAqB;AACrB,0CAA0C;AAC1C,4BAA4B;AAC5B,GAAG;AAEH,IAAY,IAEX;AAFD,WAAY,IAAI;IACd,iBAAS,CAAA;AACX,CAAC,EAFW,IAAI,oBAAJ,IAAI,QAEf;AAkCD,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,qCAAe,CAAA;IACf,iCAAW,CAAA;AACb,CAAC,EAJW,kBAAkB,kCAAlB,kBAAkB,QAI7B;AA+CD;;GAEG;AACH,IAAY,aAGX;AAHD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,oCAAmB,CAAA;AACrB,CAAC,EAHW,aAAa,6BAAb,aAAa,QAGxB;AAuDD;;GAEG;AACH,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,wCAA2B,CAAA;IAC3B,gCAAmB,CAAA;IACnB,4BAAe,CAAA;AACjB,CAAC,EAJW,SAAS,yBAAT,SAAS,QAIpB"}

package/dist/server/server/api/publicationApi.js

@@ -74,7 +74,7 @@ function default_1(config) {
             const hostingConnector = await getHostingConnector(session, config, hostingId);
             const storage = await getStorageConnector(session, config, storageId);
             const filesList = await Promise.all(files.map(async (file) => {
-                const prefix = constants_1.API_WEBSITE_ASSET_READ.replace(/^\//, '');
+                const prefix = constants_1.API_WEBSITE_ASSET_READ;
                 const fileWithContent = file;
                 const fileWithSrc = file;
                 if (!fileWithContent.content && !fileWithSrc.src)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.0.0-alpha.52",
+  "version": "3.0.0-alpha.55",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",

package/src/ts/client/assetUrl.ts

@@ -0,0 +1,182 @@
+import { API_PATH, API_WEBSITE_ASSET_READ, API_WEBSITE_PATH } from '../constants'
+import { Asset, Component, ConnectorId, Page, Style, WebsiteId } from '../types'
+
+// Orging and path
+const SERVER_URL = `${window.location.origin}${window.location.pathname}`
+
+/**
+ * Function to convert a path from it stored version to the one we give to grapesjs
+ * Stored version is like `/assets/image.webp`
+ * Grapesjs version is like `/api/website/assets/image.webp?websiteId=47868975&connectorId=gitlab`
+ * @param path the path to convert
+ * @param websiteId the website ID
+ * @param storageId the storage connector ID
+ * @returns the converted path
+ */
+function storedToDisplayed(path: string, websiteId: WebsiteId, storageId: ConnectorId): string {
+  const url = new URL(path, SERVER_URL)
+  url.pathname = url.pathname.replace(/^\/assets/, '')
+  url.pathname = `${API_PATH}${API_WEBSITE_PATH}${API_WEBSITE_ASSET_READ}${url.pathname}`
+  url.searchParams.set('websiteId', websiteId)
+  url.searchParams.set('connectorId', storageId)
+  const result = '/' + url.toString().replace(new RegExp(`^${SERVER_URL}`), '')
+  return result
+}
+
+/**
+ * Function to convert a path from the one we give to grapesjs to the stored version
+ * Grapesjs version is like `/api/website/assets/image.webp?websiteId=47868975&connectorId=gitlab`
+ * Stored version is like `/assets/image.webp`
+ * @param path the path to convert
+ * @returns the converted path
+ */
+function displayedToStored(path: string): string {
+  const url = new URL(path, SERVER_URL)
+  url.pathname = url.pathname.replace(new RegExp(`^${API_PATH}${API_WEBSITE_PATH}${API_WEBSITE_ASSET_READ}`), '')
+  url.pathname = `/assets${url.pathname}`
+  url.searchParams.delete('websiteId')
+  url.searchParams.delete('connectorId')
+  const result = '/' + url.toString().replace(new RegExp(`^${SERVER_URL}`), '')
+  return result
+}
+
+
+/**
+ * Update asset URL to use the current storage connector and website ID
+ * Assets URLs are stored in the project data in the form `/assets/image.webp`
+ * This function adds the API path and the connectorId and websiteId like so: `/api/website/assets/image.webp?websiteId=47868975&connectorId=gitlab`
+ */
+export function addTempDataToAssetUrl(assets: Asset[], websiteId: WebsiteId, storageId: ConnectorId): Asset[] {
+  return assets.map((asset: Asset) => {
+    return {
+      ...asset,
+      src: storedToDisplayed(asset.src, websiteId, storageId),
+    }
+  })
+}
+
+/**
+ * Remove the temporary data from the asset URL
+ * Remove the API path and the connectorId and websiteId like so: `/assets/image.webp`
+ */
+export function removeTempDataFromAssetUrl(assets: Asset[]): Asset[] {
+  return assets.map((asset: Asset) => {
+    // Return the asset with the new URL
+    return {
+      ...asset,
+      src: displayedToStored(asset.src),
+    }
+  })
+}
+
+/**
+ * Reucrsive function to update the asset URL in the components
+ */
+function addTempDataToComponents(component: Component, websiteId: WebsiteId, storageId: ConnectorId): Component {
+  // Update the asset URL in the component
+  const newComponent = {
+    ...component,
+    attributes: {
+      ...component.attributes,
+      src: component.attributes?.src ? storedToDisplayed(component.attributes.src, websiteId, storageId) : undefined,
+    },
+  }
+  // Update the asset URL in the children
+  if (newComponent.components) {
+    newComponent.components = newComponent.components.map((childComponent: Component) => {
+      return addTempDataToComponents(childComponent, websiteId, storageId)
+    })
+  }
+  return newComponent
+}
+
+/**
+ * Reucrsive function to update the asset URL in the components
+ */
+function removeTempDataFromComponents(component: Component): Component {
+  // Update the asset URL in the component
+  const newComponent = {
+    ...component,
+    attributes: {
+      ...component.attributes,
+      src: component.attributes?.src ? displayedToStored(component.attributes.src) : undefined,
+    },
+  }
+  // Update the asset URL in the children
+  if (newComponent.components) {
+    newComponent.components = newComponent.components.map((childComponent: Component) => {
+      return removeTempDataFromComponents(childComponent)
+    })
+  }
+  return newComponent
+}
+
+/**
+ * Add temp data to pages
+ */
+export function addTemDataToPages(pages: Page[], websiteId: WebsiteId, storageId: ConnectorId): Page[] {
+  return pages.map((page: Page) => {
+    return {
+      ...page,
+      frames: page.frames.map(frame => ({
+        ...frame,
+        component: addTempDataToComponents(frame.component, websiteId, storageId),
+      }))
+    }
+  })
+}
+
+/**
+ * Remove temp data from asset URL in the components
+ */
+export function removeTempDataFromPages(pages: Page[]): Page[] {
+  return pages.map((page: Page) => {
+    return {
+      ...page,
+      frames: page.frames.map(frame => ({
+        ...frame,
+        component: removeTempDataFromComponents(frame.component),
+      }))
+    }
+  })
+}
+
+/**
+ * Add data to stylesheets
+ */
+export function addTempDataToStyles(styles: Style[], websiteId: WebsiteId, storageId: ConnectorId): Style[] {
+  const pattern = /url\((["']?)([^"']+?)\1\)/g
+  return styles.map((style: Style) => {
+    if (style.style && style.style['background-image']) {
+      const urls = [...style.style['background-image'].matchAll(pattern)].map(match => storedToDisplayed(match[2], websiteId, storageId))
+      style = {
+        ...style,
+        style: {
+          ...style.style,
+          'background-image': urls.map(url => `url('${url}')`).join(', '),
+        },
+      }
+    }
+    return style
+  })
+}
+
+/**
+ * Remove temp data from stylesheets
+ */
+export function removeTempDataFromStyles(styles: Style[]): Style[] {
+  const pattern = /url\((["']?)([^"']+?)\1\)/g
+  return styles.map((style: Style) => {
+    if (style.style && style.style['background-image']) {
+      const urls = [...style.style['background-image'].matchAll(pattern)].map(match => displayedToStored(match[2]))
+      style = {
+        ...style,
+        style: {
+          ...style.style,
+          'background-image': urls.map(url => `url('${url}')`).join(', '),
+        },
+      }
+    }
+    return style
+  })
+}

package/src/ts/client/grapesjs/PublicationManager.ts

@@ -23,6 +23,7 @@ import { getUser, logout, publicationStatus, publish } from '../api'
 import { API_CONNECTOR_LOGIN, API_CONNECTOR_PATH, API_PATH } from '../../constants'
 import { ClientEvent } from '../events'
 import { resetRenderComponents, resetRenderCssRules, transformPermalink, transformFiles, transformPath, renderComponents } from '../publication-transformers'
+import { removeTempDataFromAssetUrl } from '../assetUrl'
 
 /**
  * @fileoverview Publication manager for Silex
@@ -207,6 +208,8 @@ export class PublicationManager {
     this.setPublicationTransformers()
     const projectData = this.editor.getProjectData() as WebsiteData
     const siteSettings = this.editor.getModel().get('settings') as WebsiteSettings
+    // Remove temporary data for editing
+    projectData.assets = removeTempDataFromAssetUrl(projectData.assets)
     // Build the files structure
     const files: ClientSideFile[] = (await this.getHtmlFiles(siteSettings))
       .flatMap(file => ([{
@@ -218,17 +221,21 @@ export class PublicationManager {
         content: file.css,
         type: ClientSideFileType.CSS,
       } as ClientSideFile]))
-      .concat(projectData.assets.map(asset => {
+      .concat(projectData.assets
+        .map(asset => {
         // Remove /assets that is added by grapesjs
-        const initialPath = `/${asset.src}`
-          .replace(/^\/assets/, '/') // Remove /assets that is added by grapesjs, FIXME: why leave '/'? make it absolute? brakes the dashboard
-        const path = transformPath(this.editor, initialPath, ClientSideFileType.ASSET)
-        return {
-          ...asset,
-          path,
-          type: ClientSideFileType.ASSET, // Replaces grapesjs's 'image' type
-        } as ClientSideFile
-      }))
+          const initialPath = asset.src
+          // Remove /assets that is added by grapesjs
+            .replace(/^\/assets/, '')
+          // Transform the file paths with the transformers
+          const path = transformPath(this.editor, initialPath, ClientSideFileType.ASSET)
+          console.info('asset transform xxxxxx ================>', asset.src, initialPath, path)
+          return {
+            ...asset,
+            path,
+            type: ClientSideFileType.ASSET, // Replaces grapesjs's 'image' type
+          } as ClientSideFile
+        }))
 
     // Create the data to send to the server
     const data: PublicationData = {

package/src/ts/client/grapesjs/storage.ts

@@ -15,22 +15,21 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ConnectorId, WebsiteId, WebsiteData, ConnectorUser, ConnectorType, ApiError } from '../../types'
+import { ConnectorId, WebsiteId, WebsiteData, ConnectorUser, ConnectorType, ApiError, Asset, Page, Component, Style } from '../../types'
 import { websiteLoad, websiteSave } from '../api'
 import { cmdLogin, eventLoggedIn, eventLoggedOut, getCurrentUser, updateUser } from './LoginDialog'
+import { addTemDataToPages, addTempDataToAssetUrl, addTempDataToStyles, removeTempDataFromAssetUrl, removeTempDataFromPages, removeTempDataFromStyles } from '../assetUrl'
 
-async function wait(ms: number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms)
-  })
-}
 export const storagePlugin = (editor) => {
   editor.Storage.add('connector', {
     async load(options: { id: WebsiteId, connectorId: ConnectorId }): Promise<WebsiteData> {
       try {
         const user: ConnectorUser = await getCurrentUser(editor) ?? await updateUser(editor, ConnectorType.STORAGE, options.connectorId)
         if(user) {
-          const data = await websiteLoad({websiteId: options.id, connectorId: user.storage.connectorId})
+          const data = await websiteLoad({websiteId: options.id, connectorId: user.storage.connectorId}) as WebsiteData
+          data.assets = addTempDataToAssetUrl(data.assets, options.id, user.storage.connectorId)
+          data.pages = addTemDataToPages(data.pages, options.id, user.storage.connectorId)
+          data.styles = addTempDataToStyles(data.styles, options.id, user.storage.connectorId)
           return data
         } else {
           return new Promise((resolve, reject) => {
@@ -59,6 +58,9 @@ export const storagePlugin = (editor) => {
       try {
         if(await getCurrentUser(editor)) {
           const user = await getCurrentUser(editor)
+          data.assets = removeTempDataFromAssetUrl(data.assets)
+          data.pages = removeTempDataFromPages(data.pages)
+          data.styles = removeTempDataFromStyles(data.styles)
           await websiteSave({websiteId: options.id, connectorId: user.storage.connectorId, data})
         } else {
           editor.once(eventLoggedIn, () => {

package/src/ts/client/publication-transformers.test.ts

@@ -48,7 +48,7 @@ describe('publication-transformers', () => {
     mockData = {
       files: [mockFile],
       pages: [{} as Page],
-    } as PublicationData
+    } as any as PublicationData
     transformer = {
       renderComponent: jest.fn(),
       renderCssRule: jest.fn(),

package/src/ts/plugins/client/11ty.ts

@@ -55,19 +55,15 @@ export default (config: ClientConfig, opts: Partial<PluginOptions>) => {
     transformPath: (path, type) => {
       switch (type) {
       case 'html':
-        console.log('Silex: transform path for 11ty', path, options.html.path + path)
         return options.html.path + path
       case 'css':
-        console.log('Silex: transform path for 11ty', path, options.css.path + path.replace(/\.css$/, '.css.liquid'), path.replace(/^\/css/, ''))
         const res = options.css.path + path
           // Remove default path
           .replace(/^\/css/, '')
           // Change extension
           .replace(/\.css$/, '.css.liquid')
-        console.log({res})
         return res
       case 'asset':
-        console.log('Silex: transform path for 11ty', path, options.assets.path + path)
         return options.assets.path + path
           // Remove default path
           .replace(/^\/assets/, '')
@@ -75,8 +71,6 @@ export default (config: ClientConfig, opts: Partial<PluginOptions>) => {
       throw new Error(`Unknown file type ${type}`)
     },
     transformFile: (file: ClientSideFile) => {
-      console.log('Silex: transform file for 11ty', file)
-
       const fileWithContent = file as ClientSideFileWithContent
       switch (file.type) {
       case 'html':

package/src/ts/plugins/server/GitlabConnector.ts

@@ -36,6 +36,7 @@ export interface GitlabOptions {
   //metaRepo: string
   //metaRepoFile: string
   repoPrefix: string
+  scope: string
 }
 
 interface GitlabToken {
@@ -124,6 +125,7 @@ export default class GitlabConnector implements StorageConnector {
       //metaRepo: 'silex-meta',
       //metaRepoFile: 'websites.json',
       repoPrefix: 'silex_',
+      scope: 'api', // 'api+read_api+read_user+read_repository+write_repository+email+sudo+profile+openid'
       ...opts,
     } as GitlabOptions
     if(!this.options.clientId) throw new Error('Missing Gitlab client ID')
@@ -299,8 +301,7 @@ export default class GitlabConnector implements StorageConnector {
       codeVerifier,
       codeChallenge,
     }
-    const scope = 'api+read_api+read_user+read_repository+write_repository+email+sudo+profile+openid'
-    return `https://gitlab.com/oauth/authorize?client_id=${this.options.clientId}&redirect_uri=${redirect_uri}&response_type=code&state=${session.gitlab.state}&scope=${scope}&code_challenge=${codeChallenge}&code_challenge_method=S256`
+    return `https://gitlab.com/oauth/authorize?client_id=${this.options.clientId}&redirect_uri=${redirect_uri}&response_type=code&state=${session.gitlab.state}&scope=${this.options.scope}&code_challenge=${codeChallenge}&code_challenge_method=S256`
   }
 
   getOptions(formData: object): object {

package/src/ts/server/api/publicationApi.ts

@@ -124,7 +124,7 @@ export default function (config: ServerConfig): Router {
 
       // Load the content if necessary
       const filesList: ConnectorFile[] = await Promise.all(files.map(async (file: ClientSideFile) => {
-        const prefix = API_WEBSITE_ASSET_READ.replace(/^\//, '')
+        const prefix = API_WEBSITE_ASSET_READ
         const fileWithContent = file as ClientSideFileWithContent
         const fileWithSrc = file as ClientSideFileWithSrc
         if(!fileWithContent.content && !fileWithSrc.src) throw new PublicationError('Missing content or src in file', 400)

package/src/ts/server/connectors/FsStorage.ts

@@ -259,3 +259,4 @@ export class FsStorage implements StorageConnector<FsSession> {
     return await fs.readFile(path)
   }
 }
+

package/src/ts/types.ts

@@ -96,8 +96,29 @@ export const defaultWebsiteData: WebsiteData = {
   //publication: {},
 } as WebsiteData
 
+
+// **
+// Grapesjs types
+// From grapesjs, not imported because it breaks the build on the server side
+export interface Component {
+  type: string,
+  content?: string,
+  attributes: { [key: string]: string },
+  components: Component[],
+}
+
+export interface Page {
+  id: string,
+  name: string,
+  slug: string,
+  // TODO: why is this here? settings: WebsiteSettings,
+  frames: {
+    component: Component,
+  }[]
+}
+
 export interface WebsiteData {
-  pages: any[], // Page[], // From grapesjs, not imported because it breaks the build on the server side
+  pages: Page[],
   assets: Asset[],
   styles: Style[],
   //name: string,
@@ -128,23 +149,23 @@ export interface Font {
   variants: string[],
 }
 
-export interface Frame {
-  component: { type: string, stylable: string[] },
-  components: Component[],
-}
-
-export interface Component {
-  type: string,
-  content?: string,
-  attributes: { [key: string]: string },
-  conponents: Component[],
-}
+//export interface Frame {
+//  component: { type: string, stylable: string[] },
+//  components: Component[],
+//}
+//
+//export interface Component {
+//  type: string,
+//  content?: string,
+//  attributes: { [key: string]: string },
+//  conponents: Component[],
+//}
 
 export enum Unit {
   PX = 'px',
 }
 
-export interface Asset     {
+export interface Asset {
   type: string,
   src: string,
   unitDim: Unit,