@silexlabs/silex 3.0.0-alpha.100

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

@@ -0,0 +1,263 @@
+/*
+ * 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/>.
+ */
+
+import { Component, CssRule, Editor, ObjectStrings, Page } from 'grapesjs'
+import { ClientSideFile, ClientSideFileType, ClientSideFileWithPermalink, PublicationData } from '../types'
+import { onAll } from './utils'
+
+/**
+ * @fileoverview Silex publication transformers are used to control how the site is rendered and published
+ * Here we call path the path on the connector (either storage or hosting)
+ * We call permalink the path at which the resource is served
+ * This is where pages and assets paths and permalinks are set
+ * Here we also update background images urls, assets url and links to match the new permalinks
+ */
+
+// Properties names used to store the original methods on the components and styles
+const ATTRIBUTE_METHOD_STORE_HTML = 'tmp-pre-publication-transformer-tohtml'
+const ATTRIBUTE_METHOD_STORE_SRC = 'tmp-pre-publication-transformer-src'
+const ATTRIBUTE_METHOD_STORE_ATTRIBUTES_SRC = 'tmp-pre-publication-transformer-attributes-src'
+const ATTRIBUTE_METHOD_STORE_INLINE_CSS = 'tmp-pre-publication-transformer-inline-css'
+const ATTRIBUTE_METHOD_STORE_HREF = 'tmp-pre-publication-transformer-href'
+const ATTRIBUTE_METHOD_STORE_CSS = 'tmp-pre-publication-transformer-tocss'
+
+/**
+ * Interface for publication transformers
+ * They are added to the config object with config.addPublicationTransformer()
+ */
+export interface PublicationTransformer {
+  // Temporarily override how components render at publication by grapesjs
+  renderComponent?(component: Component, toHtml: () => string): string | undefined
+  // Temporarily override how styles render at publication by grapesjs
+  renderCssRule?(rule: CssRule, initialRule: () => ObjectStrings): ObjectStrings | undefined
+  // Transform files after they are rendered and before they are published
+  transformFile?(file: ClientSideFile): ClientSideFile
+  // Define files URLs
+  transformPermalink?(link: string, type: ClientSideFileType): string
+  // Define where files are published
+  transformPath?(path: string, type: ClientSideFileType): string
+}
+
+export function validatePublicationTransformer(transformer: PublicationTransformer): void {
+  // List all the properties
+  const allowedProperties = [
+    'renderComponent',
+    'renderCssRule',
+    'transformFile',
+    'transformPermalink',
+    'transformPath',
+  ]
+
+  // Check that there are no unknown properties
+  Object.keys(transformer).forEach(key => {
+    if(!allowedProperties.includes(key)) {
+      throw new Error(`Publication transformer: unknown property ${key}`)
+    }
+  })
+
+  // Check that the methods are functions
+  allowedProperties.forEach(key => {
+    if(typeof transformer[key] !== 'function' && transformer[key] !== undefined) {
+      throw new Error(`Publication transformer: ${key} must be a function`)
+    }
+  })
+}
+
+
+/**
+ * Alter the components rendering
+ * Exported for unit tests
+ */
+export function renderComponents(editor: Editor) {
+  const config = editor.getModel().get('config')
+  onAll(editor, (c: Component) => {
+    if (c.get(ATTRIBUTE_METHOD_STORE_HTML)) {
+      console.warn('Publication transformer: HTML transform already altered', c)
+    } else {
+      const initialToHTML = c.toHTML.bind(c)
+      c[ATTRIBUTE_METHOD_STORE_HTML] = c.toHTML
+      const initialGetStyle = c.getStyle.bind(c)
+      c[ATTRIBUTE_METHOD_STORE_INLINE_CSS] = c.getStyle
+      const href = c.get('attributes').href as string | undefined
+      if(href?.startsWith('./')) {
+        c[ATTRIBUTE_METHOD_STORE_HREF] = href
+        c.set('attributes', {
+          ...c.get('attributes'),
+          href: transformPermalink(editor, href, ClientSideFileType.HTML),
+        })
+      }
+      // Handle both c.attributes.src and c.attributes.attributes.src
+      // For some reason we need both
+      // Especially when the component is not on the current page, we need c.attributes.attributes.src
+      if(c.get('attributes').src) {
+        c[ATTRIBUTE_METHOD_STORE_SRC] = c.get('attributes').src
+        const src = transformPermalink(editor, c.get('attributes').src, ClientSideFileType.ASSET)
+        c.set('attributes', {
+          ...c.get('attributes'),
+          src,
+        })
+      }
+      if(c.get('src')) {
+        c[ATTRIBUTE_METHOD_STORE_ATTRIBUTES_SRC] = c.get('src')
+        const src = transformPermalink(editor, c.get('src'), ClientSideFileType.ASSET)
+        c.set('src', src)
+      }
+      c.toHTML = () => {
+        return config.publicationTransformers.reduce((html: string, transformer: PublicationTransformer) => {
+          try {
+            return transformer.renderComponent ? transformer.renderComponent(c, () => html) ?? html : html
+          } catch (e) {
+            console.error('Publication transformer: error rendering component', c, e)
+            return html
+          }
+        }, initialToHTML())
+      }
+      c.getStyle = () => transformBgImage(editor, initialGetStyle())
+    }
+  })
+}
+
+/**
+ * Alter the styles rendering
+ * Exported for unit tests
+ */
+export function renderCssRules(editor: Editor) {
+  const config = editor.getModel().get('config')
+  editor.Css.getAll().forEach((style: CssRule) => {
+    if (style[ATTRIBUTE_METHOD_STORE_CSS]) {
+      console.warn('Publication transformer: CSS transform already altered', style)
+    } else {
+      const initialGetStyle = style.getStyle.bind(style)
+      style[ATTRIBUTE_METHOD_STORE_CSS] = style.getStyle
+      style.getStyle = () => {
+        try {
+          const result = config.publicationTransformers.reduce((s: CssRule, transformer: PublicationTransformer) => {
+            return {
+              ...transformer.renderCssRule ? transformer.renderCssRule(s, initialGetStyle) ?? s : s,
+            }
+          }, transformBgImage(editor, initialGetStyle()))
+          return result
+        } catch (e) {
+          console.error('Publication transformer: error rendering style', style, e)
+          return initialGetStyle()
+        }
+      }
+    }
+  })
+}
+
+/**
+ * Transform background image url according to the transformed path of assets
+ */
+export function transformBgImage(editor: Editor, style: ObjectStrings): ObjectStrings {
+  const url = style['background-image']
+  const bgUrl = url?.match(/url\(["']?(.*?)["']?\)/)?.pop()
+  if (bgUrl) {
+    return {
+      ...style,
+      'background-image': `url(${transformPermalink(editor, bgUrl, ClientSideFileType.ASSET)})`,
+    }
+  }
+  return style
+}
+
+/**
+ * Transform files
+ * Exported for unit tests
+ */
+export function transformFiles(editor: Editor, data: PublicationData) {
+  const config = editor.getModel().get('config')
+  data.files = config.publicationTransformers.reduce((files: ClientSideFile[], transformer: PublicationTransformer) => {
+    return files.map((file, idx) => {
+      try {
+        const page = data.pages[idx] ?? null
+        return transformer.transformFile ? transformer.transformFile(file) as ClientSideFile ?? file : file
+      } catch (e) {
+        console.error('Publication transformer: error transforming file', file, e)
+        return file
+      }
+    })
+  }, data.files)
+}
+
+/**
+ * Transform files paths
+ * Exported for unit tests
+ */
+export function transformPermalink(editor: Editor, path: string, type: ClientSideFileType): string {
+  const config = editor.getModel().get('config')
+  return config.publicationTransformers.reduce((result: string, transformer: PublicationTransformer) => {
+    try {
+      return transformer.transformPermalink ? transformer.transformPermalink(result, type) ?? result : result
+    } catch (e) {
+      console.error('Publication transformer: error transforming path', result, e)
+      return result
+    }
+  }, path)
+}
+
+export function transformPath(editor: Editor, path: string, type: ClientSideFileType): string {
+  const config = editor.getModel().get('config')
+  return config.publicationTransformers.reduce((result: string, transformer: PublicationTransformer) => {
+    try {
+      return transformer.transformPath ? transformer.transformPath(result, type) ?? result : result
+    } catch (e) {
+      console.error('Publication transformer: error transforming path', result, e)
+      return result
+    }
+  }, path)
+}
+
+export function resetRenderComponents(editor: Editor) {
+  onAll(editor, (c: Component) => {
+    if (c[ATTRIBUTE_METHOD_STORE_HTML]) {
+      c.toHTML = c[ATTRIBUTE_METHOD_STORE_HTML]
+      delete c[ATTRIBUTE_METHOD_STORE_HTML]
+    }
+    if (c[ATTRIBUTE_METHOD_STORE_INLINE_CSS]) {
+      c.getStyle = c[ATTRIBUTE_METHOD_STORE_INLINE_CSS]
+      delete c[ATTRIBUTE_METHOD_STORE_INLINE_CSS]
+    }
+    if(c[ATTRIBUTE_METHOD_STORE_SRC]) {
+      c.set('attributes', {
+        ...c.get('attributes'),
+        src: c[ATTRIBUTE_METHOD_STORE_SRC],
+      })
+      delete c[ATTRIBUTE_METHOD_STORE_SRC]
+    }
+    if(c[ATTRIBUTE_METHOD_STORE_ATTRIBUTES_SRC]) {
+      c.set('src', c[ATTRIBUTE_METHOD_STORE_ATTRIBUTES_SRC])
+      delete c[ATTRIBUTE_METHOD_STORE_ATTRIBUTES_SRC]
+    }
+    if(c[ATTRIBUTE_METHOD_STORE_HREF]) {
+      c.set('attributes', {
+        ...c.get('attributes'),
+        href: c[ATTRIBUTE_METHOD_STORE_HREF],
+      })
+      delete c[ATTRIBUTE_METHOD_STORE_HREF]
+    }
+  })
+}
+
+export function resetRenderCssRules(editor: Editor) {
+  editor.Css.getAll().forEach(c => {
+    if (c[ATTRIBUTE_METHOD_STORE_CSS]) {
+      c.getStyle = c[ATTRIBUTE_METHOD_STORE_CSS]
+      delete c[ATTRIBUTE_METHOD_STORE_CSS]
+    }
+  })
+}

package/src/ts/client/utils.ts

@@ -0,0 +1,28 @@
+/*
+ * 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/>.
+ */
+
+import { Component, Editor } from 'grapesjs'
+
+
+// Browse all elements of all pages
+export function onAll(editor: Editor, cbk: (c: Component) => void) {
+  editor.Pages.getAll()
+    .forEach(page => {
+      page.getMainComponent()
+        .onAll(c => cbk(c))
+    })
+}

package/src/ts/constants.ts

@@ -0,0 +1,52 @@
+/*
+ * 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/>.
+ */
+
+/**
+ * @fileoverview define constants for Silex client and server
+ */
+
+export const WEBSITE_DATA_FILE = 'website.json'
+export const WEBSITE_META_DATA_FILE = 'meta.json'
+
+export const DEFAULT_WEBSITE_ID = 'default'
+export const DEFAULT_LANGUAGE = 'en'
+export const CLIENT_CONFIG_FILE_NAME = 'silex.js'
+
+export const API_PATH = '/api'
+
+export const API_CONNECTOR_PATH = '/connector'
+export const API_CONNECTOR_USER = '/user'
+export const API_CONNECTOR_LIST = '/'
+export const API_CONNECTOR_LOGOUT = '/logout'
+export const API_CONNECTOR_LOGIN = '/login'
+export const API_CONNECTOR_SETTINGS = '/settings'
+export const API_CONNECTOR_LOGIN_CALLBACK = '/login/callback'
+
+export const API_PUBLICATION_PATH = '/publication'
+export const API_PUBLICATION_PUBLISH = '/'
+export const API_PUBLICATION_STATUS = '/publication/status'
+
+export const API_WEBSITE_PATH = '/website'
+export const API_WEBSITE_READ = '/'
+export const API_WEBSITE_WRITE = '/'
+export const API_WEBSITE_CREATE = '/'
+export const API_WEBSITE_DELETE = '/'
+export const API_WEBSITE_LIST = '/'
+export const API_WEBSITE_ASSET_READ = '/assets'
+export const API_WEBSITE_ASSETS_WRITE = '/assets'
+export const API_WEBSITE_META_READ = '/meta'
+export const API_WEBSITE_META_WRITE = '/meta'

package/src/ts/externs.ts

@@ -0,0 +1,18 @@
+/*
+ * 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/>.
+ */
+
+

package/src/ts/page.ts

@@ -0,0 +1,31 @@
+/*
+ * 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/>.
+ */
+
+// Page related functions
+// This is used on the client and the server
+export function getPageSlug(pageName) {
+  return (pageName || 'index')
+    .toLowerCase()
+    .replace(/[^a-z0-9 -]/g, '')
+    // Collapse whitespace and replace by -
+    .replace(/\s+/g, '-')
+    // Collapse dashes
+    .replace(/-+/g, '-')
+}
+export function getPageLink(pageName) {
+  return `./${getPageSlug(pageName)}.html`
+}

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

@@ -0,0 +1,104 @@
+import { ClientConfig } from '../../client/config'
+import { ClientSideFile, ClientSideFileWithContent } from '../../types'
+
+interface PluginOptions {
+  html: {
+    url: string,
+    path: string,
+  },
+  css: {
+    url: string,
+    path: string,
+  },
+  assets: {
+    url: string,
+    path: string,
+  },
+}
+
+export default (config: ClientConfig, opts: Partial<PluginOptions>) => {
+  const options = {
+    ...opts,
+    html: {
+      url: '/',
+      path: './',
+      ...opts.html,
+    },
+    css: {
+      url: '/css', // For the HTML links
+      path: './css', // For the file system
+      permalink: '/css', // For the frontmatter
+      ...opts.css,
+    },
+    assets: {
+      url: '/',
+      path: './', // assets is already in the assets urls
+      ...opts.assets,
+    },
+  }
+
+  config.addPublicationTransformers({
+    transformPermalink: (path, type) => {
+      switch (type) {
+      case 'html':
+        console.log('Silex: transform path for 11ty', path, options.html.url + path)
+        return options.html.url + path
+      case 'css':
+        console.log('Silex: transform path for 11ty', path, options.css.url + path.replace(/\.css$/, '.css.liquid'))
+        return options.css.url + path
+          .replace(/^\/css/, '')
+          .replace(/\.css.liquid$/, '.css')
+      case 'asset':
+        console.log('Silex: transform path for 11ty', path, options.assets.url + path)
+        return options.assets.url + path
+      }
+      throw new Error(`Unknown file type ${type}`)
+    },
+    transformPath: (path, type) => {
+      switch (type) {
+      case 'html':
+        return options.html.path + path
+      case 'css':
+        const res = options.css.path + path
+          // Remove default path
+          .replace(/^\/css/, '')
+          // Change extension
+          .replace(/\.css$/, '.css.liquid')
+        return res
+      case 'asset':
+        return options.assets.path + path
+          // Remove default path
+          .replace(/^\/assets/, '')
+      }
+      throw new Error(`Unknown file type ${type}`)
+    },
+    transformFile: (file: ClientSideFile) => {
+      const fileWithContent = file as ClientSideFileWithContent
+      switch (file.type) {
+      case 'html':
+        return {
+          ...file,
+          //path: options.html.path + fileWithContent.path,
+          //content: `---\npermalink: ${options.html.url}${fileWithContent.path}\n---\n${fileWithContent.content}`
+        }
+      case 'css':
+        const path = fileWithContent.path
+          // Remove extension added in transformPath (options.css.path)
+          .replace(new RegExp(`^${options.css.path}`), '')
+          // Remove path added in transformPath (options.css.path)
+          .replace(/\.css\.liquid$/, '.css')
+        return {
+          ...file,
+          //path: options.css.path + fileWithContent.path.replace(/\.css$/, '.css.liquid'),
+          content: `---\npermalink: ${options.css.permalink}${path}\n---\n${fileWithContent.content}`
+        }
+      case 'asset':
+        return {
+          ...file,
+          //path: options.assets.path + fileWithContent.path,
+        }
+      }
+      throw new Error(`Unknown file type ${file.type}`)
+    },
+  })
+}

package/src/ts/plugins/client/publicationRenderer.ts

@@ -0,0 +1,174 @@
+/*
+ * 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/>.
+ */
+
+/**
+ * @deprecated
+ * This plugin is deprecated. Use the publication renderer plugin instead.
+ */
+console.warn('This plugin is deprecated. Use the publication renderer plugin instead.')
+throw 'This plugin is deprecated. Use the publication renderer plugin instead.'
+
+/* Usage:
+  import publicationRenderer from 'https://unpkg.com/@silexlabs/silex@latest/dist/plugins/client/plugins/client/publicationRenderer'
+  await config.addPlugin(publicationRenderer, {
+    css: {
+      frontMatter: true,
+      ext: '.css.liquid',
+      path: '../../../pages'
+    },
+    html: {
+      frontMatter: false,
+      path: '../../../_includes'
+    },
+    assets: {
+      path: '../../../',
+      url: '/',
+    },
+  })
+*/
+
+import { getPageSlug } from '../../page.js'
+import { ClientSideFile } from '../../types.js'
+import { onAll } from '../../client/utils.js'
+import { ClientEvent } from '../../client/events.js'
+import { Page } from 'grapesjs'
+
+export default (config, opts: any = {}) => {
+  const options = {
+    autoHomePage: false,
+    ...opts,
+    html: {
+      frontMatter: false,
+      ext: '.html',
+      url: '/',
+      path: './',
+      ...opts.html,
+    },
+    css: {
+      frontMatter: false,
+      ext: '.css',
+      url: '/css',
+      path: './css',
+      ...opts.css,
+    },
+    assets: {
+      url: '/',
+      path: './',
+      ...opts.assets,
+    },
+  }
+  config.on(ClientEvent.STARTUP_END, ({ editor }) => {
+    editor.on(ClientEvent.PUBLISH_START, () => {
+      // Update assets URL to display outside the editor
+      const assetsFolderUrl = options.assets.url
+      if (assetsFolderUrl) {
+        // Concat the paths, handles the trailing and leading slashes
+        const publishedUrl = path => `${assetsFolderUrl.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`
+        // New URLs for assets, according to site config
+        onAll(editor, c => {
+          // Attributes
+          if (c.get('type') === 'image') {
+            const src = c.get('src')
+            c.set('tmp-src', src)
+            c.set('src', publishedUrl(src))
+          }
+          //// Inline styles
+          //// This is handled by the editor.Css.getAll loop
+          //const bgUrl = c.getStyle()['background-image']?.match(/url\('(.*)'\)/)?.pop()
+          //if(bgUrl) {
+          //  c.set('tmp-bg-url', bgUrl)
+          //  c.setStyle({
+          //    ...c.getStyle(),
+          //    'background-image': `url('${publishedUrl(bgUrl)}')`,
+          //  })
+          //}
+        })
+        editor.Css.getAll()
+          .forEach(c => {
+            const bgUrl = c.getStyle()['background-image']?.match(/url\('(.*)'\)/)?.pop()
+            if (bgUrl) {
+              c.setStyle({
+                ...c.getStyle(),
+                'background-image': `url('${publishedUrl(bgUrl)}')`,
+              })
+              c.set('tmp-bg-url-css' as any, bgUrl)
+            }
+          })
+      }
+      editor.Pages.getAll().forEach(page => {
+        if (page.get('type') === 'main' && options?.autoHomePage) {
+          page.set('slug', 'index')
+        } else {
+          page.set('slug', getPageSlug(page.get('name') || page.get('type')))
+        }
+      })
+    })
+    editor.on(ClientEvent.PUBLISH_END, () => {
+      const assetsFolderUrl = options.assets.url
+      // Reset asset URLs
+      if (assetsFolderUrl) {
+        onAll(editor, c => {
+          if (c.get('type') === 'image' && c.has('tmp-src')) {
+            c.set('src', c.get('tmp-src'))
+            c.set('tmp-src')
+          }
+        //// This is handled by the editor.Css.getAll loop
+        //if(c.getStyle()['background-image'] && c.has('tmp-bg-url')) {
+        //  c.setStyle({
+        //    ...c.getStyle(),
+        //    'background-image': `url('${c.get('tmp-bg-url')}')`,
+        //  })
+        //  c.set('tmp-bg-url')
+        //}
+        })
+        editor.Css.getAll()
+          .forEach(c => {
+            if (c.has('tmp-bg-url-css' as any)) {
+              c.setStyle({
+                ...c.getStyle(),
+                'background-image': `url('${c.get('tmp-bg-url-css' as any)}')`,
+              })
+              c.set('tmp-bg-url-css' as any)
+            }
+          })
+      }
+    })
+    //editor.on(ClientEvent.PUBLISH_DATA, data => {
+    //  data.pages.forEach((page: Page, idx) => {
+    //    const file = data.files[idx] as ClientSideFile
+    //    console.log('Silex: publication renderer: page', page, file)
+    //    // CSS
+    //    if(file.type === 'css') {
+    //    file.cssPath = file.cssPath.replace(/\.css$/, options.css.ext)
+    //    file.cssPath = options.css.path + file.cssPath
+    //    if (options.css.frontMatter) {
+    //      file.css = `---\npermalink: ${options.css.url}/${page.slug}.css\n---\n${file.css}`
+    //    }
+    //    // HTML
+    //    file.htmlPath = file.htmlPath.replace(/\.html$/, options.html.ext)
+    //    file.htmlPath = options.html.path + file.htmlPath
+    //    if (options.html.frontMatter) {
+    //      file.html = `---\npermalink: ${options.html.url}/${page.slug}.html\n---\n${file.html}`
+    //    }
+    //  })
+    //  data.assets.forEach((asset, idx) => {
+    //    asset.path = options.assets.path + asset.src
+    //    // The rest is handled by the editor.Css.getAll loop
+    //  })
+    //})
+  })
+}