@silexlabs/silex 3.0.1-alpha.0 → 3.0.2

package/src/html/index.pug

@@ -12,7 +12,7 @@ html(lang="en", translate="no")
       style.
         body {
           background-color: #444444;
-          font-family: Helvetica,sans-serif;
+          font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;
         }
         .silex-loader {
           display: none;
@@ -34,6 +34,6 @@ html(lang="en", translate="no")
       script(src='js/main.js')
 
     block silex-start
-      // Here you can use silex.config to hook into silex options before silex starts
       script.
-        window.silex.start()
+        silex.start()
+        // From here silex.config is available and Silex is getting started

package/src/html/templates/includes.pug

@@ -1,2 +1 @@
 link(rel='stylesheet', type='text/css', href='css/admin.css')
-

package/src/ts/client/api.ts

@@ -0,0 +1,156 @@
+/*
+ * 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 { API_CONNECTOR_LIST, API_CONNECTOR_USER, API_CONNECTOR_LOGOUT, API_CONNECTOR_PATH, API_PATH, API_PUBLICATION_PATH, API_PUBLICATION_PUBLISH, API_PUBLICATION_STATUS, API_WEBSITE_ASSET_READ, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_DELETE, API_WEBSITE_LIST, API_WEBSITE_PATH, API_WEBSITE_READ, API_WEBSITE_WRITE, API_WEBSITE_META_READ, API_WEBSITE_META_WRITE, API_WEBSITE_CREATE, API_WEBSITE_DUPLICATE } from '../constants'
+import { ApiPublicationPublishBody, ApiPublicationPublishQuery, ApiPublicationPublishResponse, ApiPublicationStatusQuery, ApiPublicationStatusResponse, ConnectorId, JobData, JobId, PublicationJobData, WebsiteId, ApiConnectorListResponse, ApiConnectorListQuery, ConnectorData, ConnectorType, ApiWebsiteReadQuery, ApiWebsiteReadResponse, WebsiteData, ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse, ApiWebsiteDeleteQuery, ApiWebsiteAssetsReadQuery, ApiWebsiteAssetsReadResponse, ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse, ClientSideFile, PublicationData, ApiConnectorUserResponse, ConnectorUser, WebsiteMeta, ApiConnectorLogoutQuery, ApiConnectorUserQuery, ApiWebsiteListResponse, ApiWebsiteListQuery, WebsiteMetaFileContent, ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse, ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse, ApiWebsiteMetaReadQuery, ApiWebsiteMetaReadResponse, ConnectorOptions, ApiError, ApiWebsiteDuplicateQuery } from '../types'
+
+export enum ApiRoute {
+  PUBLICATION_PUBLISH = API_PATH + API_PUBLICATION_PATH + API_PUBLICATION_PUBLISH,
+  PUBLICATION_STATUS = API_PATH + API_PUBLICATION_PATH + API_PUBLICATION_STATUS,
+  CONNECTOR_USER = API_PATH + API_CONNECTOR_PATH + API_CONNECTOR_USER,
+  CONNECTOR_LOGOUT = API_PATH + API_CONNECTOR_PATH + API_CONNECTOR_LOGOUT,
+  CONNECTOR_LIST = API_PATH + API_CONNECTOR_PATH + API_CONNECTOR_LIST,
+  WEBSITE_READ = API_PATH + API_WEBSITE_PATH + API_WEBSITE_READ,
+  WEBSITE_WRITE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_WRITE,
+  WEBSITE_DELETE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_DELETE,
+  WEBSITE_DUPLICATE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_DUPLICATE,
+  WEBSITE_CREATE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_CREATE,
+  WEBSITE_LIST = API_PATH + API_WEBSITE_PATH + API_WEBSITE_LIST,
+  WEBSITE_ASSETS_READ = API_PATH + API_WEBSITE_PATH + API_WEBSITE_ASSET_READ,
+  WEBSITE_ASSETS_WRITE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_ASSETS_WRITE,
+  WEBSITE_META_READ = API_PATH + API_WEBSITE_PATH + API_WEBSITE_META_READ,
+  WEBSITE_META_WRITE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_META_WRITE,
+}
+
+// Root URL of Silex server, should we use config.rootUrl ?
+let serverUrl = window.location.origin + window.location.pathname.replace(/\/$/, '')
+export function setServerUrl(url: string): void {
+  serverUrl = url
+}
+export function getServerUrl(): string {
+  return serverUrl
+}
+
+export async function getUser({type, connectorId}: {type: ConnectorType, connectorId?: ConnectorId}): Promise<ConnectorUser> {
+  return api<ApiConnectorUserQuery, null, ApiConnectorUserResponse>(ApiRoute.CONNECTOR_USER, 'GET', {
+    type,
+    connectorId,
+  }) as Promise<ConnectorUser>
+}
+
+export async function logout({type, connectorId}: {type: ConnectorType, connectorId?: ConnectorId}): Promise<void> {
+  return api<ApiConnectorLogoutQuery, null, null>(ApiRoute.CONNECTOR_LOGOUT, 'POST', { connectorId, type })
+}
+
+export async function publish({websiteId, hostingId, storageId, data, options}: {websiteId: WebsiteId, hostingId: ConnectorId, storageId: ConnectorId, data: PublicationData, options: ConnectorOptions}): Promise<[url: string, job: PublicationJobData]> {
+  const { url, job } = await api<ApiPublicationPublishQuery, ApiPublicationPublishBody, ApiPublicationPublishResponse>(
+    ApiRoute.PUBLICATION_PUBLISH,
+    'POST',
+    { websiteId, hostingId, storageId, options },
+    data
+  ) as ApiPublicationPublishResponse
+  return [url, job]
+}
+
+export async function publicationStatus({jobId}: {jobId: JobId}): Promise<PublicationJobData> {
+  return api<ApiPublicationStatusQuery, null, ApiPublicationStatusResponse>(
+    ApiRoute.PUBLICATION_STATUS,
+    'GET',
+    { jobId },
+  ) as Promise<PublicationJobData>
+}
+
+export async function connectorList({type}: {type: ConnectorType}): Promise<ConnectorData[]> {
+  const list = await api<ApiConnectorListQuery, null, ApiConnectorListResponse>(ApiRoute.CONNECTOR_LIST, 'GET', { type })
+  return list as ConnectorData[]
+}
+
+export async function websiteList({connectorId}: {connectorId?: ConnectorId}): Promise<WebsiteMeta[]> {
+  return api<ApiWebsiteListQuery, null, ApiWebsiteListResponse>(ApiRoute.WEBSITE_LIST, 'GET', { connectorId }) as Promise<WebsiteMeta[]>
+}
+
+export async function websiteLoad({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<WebsiteData> {
+  return api<ApiWebsiteReadQuery, null, ApiWebsiteReadResponse>(ApiRoute.WEBSITE_READ, 'GET', { websiteId, connectorId }) as Promise<WebsiteData>
+}
+
+export async function websiteSave({websiteId, data, connectorId}: {websiteId: WebsiteId, data: WebsiteData, connectorId?: ConnectorId}): Promise<void> {
+  const { message } = await api<ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse>(ApiRoute.WEBSITE_WRITE, 'POST', { websiteId, connectorId }, data)
+}
+
+export async function websiteDelete({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<void> {
+  await api<ApiWebsiteDeleteQuery, null, null>(ApiRoute.WEBSITE_DELETE, 'DELETE', { websiteId, connectorId })
+}
+
+export async function websiteDuplicate({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<void> {
+  await api<ApiWebsiteDuplicateQuery, null, null>(ApiRoute.WEBSITE_DUPLICATE, 'POST', { websiteId, connectorId })
+}
+
+export async function websiteCreate({websiteId, data, connectorId}: {websiteId: WebsiteId, data: WebsiteMetaFileContent, connectorId?: ConnectorId}): Promise<void> {
+  await api<ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse>(ApiRoute.WEBSITE_CREATE, 'PUT', { connectorId }, data)
+}
+
+export async function websiteMetaWrite({websiteId, data, connectorId}: {websiteId: WebsiteId, data: WebsiteMetaFileContent, connectorId?: ConnectorId}): Promise<void> {
+  await api<ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse>(ApiRoute.WEBSITE_META_WRITE, 'POST', { websiteId, connectorId }, data)
+}
+
+export async function websiteMetaRead({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<WebsiteMeta> {
+  return api<ApiWebsiteMetaReadQuery, null, ApiWebsiteMetaReadResponse>(ApiRoute.WEBSITE_META_WRITE, 'GET', { websiteId, connectorId })
+}
+
+export async function websiteAssetsLoad({path, websiteId, connectorId}: {path: string, websiteId: WebsiteId, connectorId: ConnectorId}): Promise<string> {
+  return api<ApiWebsiteAssetsReadQuery, null, ApiWebsiteAssetsReadResponse>(`${ApiRoute.WEBSITE_ASSETS_READ}/${path}`, 'GET', { websiteId, connectorId })
+}
+
+/**
+ * Not used directly, grapesjs handles the upload
+ * @see assetManager in src/ts/client/grapesjs/index.ts
+ */
+export async function websiteAssetsSave({websiteId, connectorId, files}: {websiteId: WebsiteId, connectorId: ConnectorId, files: ClientSideFile[]}): Promise<string[]> {
+  const { data } = await api<ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse>(ApiRoute.WEBSITE_ASSETS_WRITE, 'POST', { websiteId, connectorId }, files)
+  return data
+}
+
+export async function api<ReqQuery, ReqBody, ResBody>(route: ApiRoute | string, method: string, query?: ReqQuery, payload?: ReqBody): Promise<ResBody> {
+  const url = `${serverUrl}${route.toString()}?${
+    new URLSearchParams(
+      Object.entries(query)
+        .filter(([key, value]) => !!value)
+        .map(([key, value]) => [key, typeof value === 'string' ? value : JSON.stringify(value)])
+    ).toString()}`
+  const response = await fetch(url, {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: payload && JSON.stringify(payload), // assuming that the payload needs to be stringified
+    credentials: 'include', // sends the cookies with the request
+  })
+
+  if (!response.ok) {
+    let json
+    try {
+      json = await response.json()
+    } catch (err) {
+      // If the response is not JSON, throw a generic error
+      // This is the case when Silex backend has an uncatched error, e.g. expressjs 413 PayloadTooLargeError: request entity too large
+      throw new ApiError(response.statusText, response.status)
+    }
+    throw new ApiError(json.message, response.status)
+  }
+
+  return response.json()
+}

package/src/ts/client/assetUrl.test.ts

@@ -0,0 +1,164 @@
+import { jest,  expect, describe, it, beforeEach } from '@jest/globals'
+import { removeTempDataFromStyles } from './assetUrl'
+
+describe('assetUrl', () => {
+  beforeEach(() => {
+    jest.resetModules()
+    Object.defineProperty(window, 'location', {
+      value: {
+        href: 'http://localhost:6800/',
+        pathname: '',
+        origin: 'http://localhost:6800',
+      },
+    })
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/',
+      pathname: '',
+      origin: 'http://localhost:6800',
+    })
+  })
+
+  it('store url to display url', async () => {
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as stored
+    expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
+      .toBe('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+    // Convert a URL which is already as displayed
+    expect(storedToDisplayed('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
+      .toBe('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+  })
+
+  it('display url to store url', async () => {
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as displayed
+    expect(displayedToStored('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector'))
+      .toBe('/assets/test.webp')
+    // Convert a URL which is already as stored
+    expect(displayedToStored('/assets/test.webp'))
+      .toBe('/assets/test.webp')
+  })
+
+  it('store url to display url with a root path', async () => {
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/silex',
+      pathname: '/silex',
+      origin: 'http://localhost:6800',
+    })
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as stored
+    expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
+      .toBe('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+    // Convert a URL which is already as displayed
+    expect(storedToDisplayed('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
+      .toBe('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+  })
+
+  it('display url to store url with a root path', async () => {
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/silex',
+      pathname: '/silex',
+      origin: 'http://localhost:6800',
+    })
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as displayed
+    expect(displayedToStored('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector'))
+      .toBe('/assets/test.webp')
+    // Convert a URL which is already as stored
+    expect(displayedToStored('/assets/test.webp'))
+      .toBe('/assets/test.webp')
+  })
+
+  it('store url to display url with escapable chars', async () => {
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/silex%20with%20spaces',
+      pathname: '/silex%20with%20spaces',
+      origin: 'http://localhost:6800',
+    })
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as displayed
+    expect(displayedToStored('/silex%20with%20spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector'))
+      .toBe('/assets/test.webp')
+    // Convert a URL which is already as stored
+    expect(displayedToStored('/assets/test.webp'))
+      .toBe('/assets/test.webp')
+  })
+
+  it('display url to store url with escapable chars', async () => {
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/silex%20with%20spaces',
+      pathname: '/silex%20with%20spaces',
+      origin: 'http://localhost:6800',
+    })
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as stored
+    expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
+      .toBe('/silex with spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+    // Convert a URL which is already as displayed
+    expect(storedToDisplayed('/silex%20with%20spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
+      .toBe('/silex%20with%20spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+    expect(storedToDisplayed('/silex with spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
+      .toBe('/silex with spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+  })
+
+  it('store url to display url with escapable website id and connector id', async () => {
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as displayed
+    expect(displayedToStored('/api/website/assets/test.webp?websiteId=test%20id&connectorId=test%20connector'))
+      .toBe('/assets/test.webp')
+    // Convert a URL which is already as stored
+    expect(displayedToStored('/assets/test.webp'))
+      .toBe('/assets/test.webp')
+  })
+
+  it('display url to store url with escapable  website id and connector id', async () => {
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    const websiteId = 'test id'
+    const websiteIdEncoded = 'test+id'
+    const connectorId = 'test connector'
+    const connectorIdEncoded = 'test+connector'
+    // Convert a valid URL as stored
+    expect(storedToDisplayed('/assets/test.webp', websiteId, connectorId))
+      .toBe(`/api/website/assets/test.webp?websiteId=${websiteIdEncoded}&connectorId=${connectorIdEncoded}`)
+    // Convert a URL which is already as displayed
+    expect(storedToDisplayed(`/api/website/assets/test.webp?websiteId=${websiteIdEncoded}&connectorId=${connectorIdEncoded}`, websiteId, connectorId))
+      .toBe(`/api/website/assets/test.webp?websiteId=${websiteIdEncoded}&connectorId=${connectorIdEncoded}`)
+  })
+
+  it('multiple backgrounds', async () => {
+    // // FIXME: this should mock the functions but it doesnt
+    // const mocked = {
+    //   displayedToStored: jest.fn((url: string) => url),
+    //   storedToDisplayed: jest.fn((url: string) => url),
+    // }
+    // jest.mock('./assetUrl', () => (mocked))
+    //addTempDataToStyles([toStyle(bgImageDisplayed)], websiteId, connectorId)
+    //expect(mocked.displayedToStored).toBeCalledTimes(1)
+    const { addTempDataToStyles } = await import('./assetUrl')
+
+    const websiteId = 'test-id'
+    const connectorId = 'test-connector'
+    const bgImageDisplayed = `linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url('/api/website/assets/qIg7JPRc.webp?websiteId=${websiteId}&connectorId=${connectorId}'), linear-gradient(#0ca311 0%, #0ca311 100%)`
+    const bgImageStored = '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%)'
+    const selectors = ['body']
+    function toStyle(bgImage: string) {
+      return {
+        style: {
+          'background-image': bgImage,
+        },
+        selectors,
+      }
+    }
+    // From stored to displayed
+    expect(addTempDataToStyles([toStyle(bgImageStored)], websiteId, connectorId))
+      .toEqual([toStyle(bgImageDisplayed)])
+    // From displayed to displayed (error case)
+    expect(addTempDataToStyles([toStyle(bgImageDisplayed)], websiteId, connectorId))
+      .toEqual([toStyle(bgImageDisplayed)])
+    // From displayed to stored
+    expect(removeTempDataFromStyles([toStyle(bgImageDisplayed)]))
+      .toEqual([toStyle(bgImageStored)])
+    //// From stored to stored (error case)
+    expect(removeTempDataFromStyles([toStyle(bgImageStored)]))
+      .toEqual([toStyle(bgImageStored)])
+  })
+})

package/src/ts/client/assetUrl.ts

@@ -0,0 +1,254 @@
+import { API_PATH, API_WEBSITE_ASSET_READ, API_WEBSITE_PATH } from '../constants'
+import { Asset, ClientSideFileType, Component, ConnectorId, Page, Style, WebsiteId } from '../types'
+
+/**
+ * @fileoverview Helpers to manage assets URL
+ * Assets URLs are stored on storage in their "stored version": `/assets/image.webp`
+ * But the client side uses the "display version": `/api/website/assets/image.webp?websiteId=47868975&connectorId=gitlab`
+ * After loading the site data we convert all URLs to the client side version
+ * Before saving the site data we convert all URLs to the storage version
+ * During publicationn we convert all URLs to the storage version and back
+ */
+
+// Get the base URL where Silex is served
+const baseUrl = window.location.pathname.replace(/\/$/, '')
+
+// Orging and path, should we use config.rootUrl?
+const SERVER_URL = window.location.origin
+
+/**
+ * Function to convert a path from it stored version to the displayed version
+ * Stored version is like `/assets/image.webp`
+ * Grapesjs version is like `/api/website/assets/image.webp?websiteId=47868975&connectorId=gitlab`
+ * Exported for unit tests
+ */
+export function storedToDisplayed(path: string, websiteId: WebsiteId, storageId: ConnectorId): string {
+  // Check the path is a stored path
+  if (path.startsWith('/assets')) {
+    // Make an absolute URL
+    const url = new URL(path, SERVER_URL)
+    // Remove the assets folder as it is part of the saved path
+    url.pathname = url.pathname.replace(/^\/assets/, '')
+    // Add the API path and the connectorId and websiteId
+    url.pathname = `${baseUrl}${API_PATH}${API_WEBSITE_PATH}${API_WEBSITE_ASSET_READ}${url.pathname}`
+    // Add the GET params
+    url.searchParams.set('websiteId', websiteId)
+    url.searchParams.set('connectorId', storageId)
+    // Back to a relative URL, keep the path but not the origin
+    return `${decodeURIComponent(url.pathname)}${url.search}`
+    //const encodedPath = '/' + url.toString() // add a leading slash
+    //  .replace(new RegExp(`^${SERVER_URL}`), '')
+    //  .replace(/^\//, '') // remove the first slash if it exists
+    //return decodeURIComponent(encodedPath)
+  } else {
+    if(path.startsWith('<svg') || path.startsWith('data:image')) {
+      // SVG or data URL
+      return path
+    }
+    // Not a stored path, is there a problem?
+    console.warn('storedToDisplayed: path is not a stored path', path)
+    return path
+  }
+}
+
+/**
+ * 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
+ * Exported for unit tests
+ */
+export function displayedToStored(path: string): string {
+  // The path to the assets API
+  const apiPath = `${baseUrl}${API_PATH}${API_WEBSITE_PATH}${API_WEBSITE_ASSET_READ}`
+  // Check the path is a displayed path
+  if (path.startsWith(apiPath)) {
+    const url = new URL(path, SERVER_URL)
+    url.pathname = url.pathname.replace(new RegExp(`^${apiPath}`), '')
+    url.pathname = `${baseUrl}/assets${url.pathname}`
+    url.searchParams.delete('websiteId')
+    url.searchParams.delete('connectorId')
+    const encodedPath = '/' + url.toString() // add a leading slash
+      .replace(new RegExp(`^${SERVER_URL}${baseUrl}`), '')
+      .replace(/^\//, '') // remove the first slash if it exists
+    return decodeURIComponent(encodedPath)
+  } else {
+    if(path.startsWith('<svg') || path.startsWith('data:image')) {
+      // SVG or data URL
+      return path
+    }
+    console.warn('displayedToStored: path is not a displayed path', path)
+    return path
+  }
+}
+
+/**
+ * Publication transformer to convert the asset URL during publication
+ */
+export const assetsPublicationTransformer = {
+  transformPath(path: string, type: ClientSideFileType): string {
+    if(type === ClientSideFileType.ASSET) {
+      const result = displayedToStored(path)
+      return result
+    }
+    return undefined
+  },
+  transformPermalink(path: string, type: ClientSideFileType): string {
+    if(type === ClientSideFileType.ASSET) {
+      const result = displayedToStored(path)
+      return result
+    }
+    return undefined
+  },
+}
+
+/**
+ * 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 ? {
+      ...asset,
+      src: storedToDisplayed(asset.src, websiteId, storageId),
+    } : asset
+  })
+}
+
+/**
+ * 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 ? {
+      ...asset,
+      src: displayedToStored(asset.src),
+    } : asset
+  })
+}
+
+/**
+ * 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?.src ? {
+    ...component,
+    attributes: {
+      ...component.attributes,
+      src: storedToDisplayed(component.attributes.src, websiteId, storageId),
+    },
+  } : component
+  // 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?.src ? {
+    ...component,
+    attributes: {
+      ...component.attributes,
+      src: displayedToStored(component.attributes.src),
+    },
+  } : component
+  // 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 addTempDataToPages(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
+ *   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 function addTempDataToStyles(styles: Style[], websiteId: WebsiteId, storageId: ConnectorId): Style[] {
+  const regex = new RegExp(/(.*)(url\((["']?)([^"']+?)\1\))*(.*)/, 'g')
+
+  return styles.map((style: Style) => {
+    if (style.style && style.style['background-image']) {
+      const bgImage = style.style['background-image']
+        .replace(/url\((['"]?)([^'"]+)\1\)/g, (match, quote, url) => {
+          return `url(${quote}${storedToDisplayed(url, websiteId, storageId)}${quote})`
+        })
+      return {
+        ...style,
+        style: {
+          ...style.style,
+          'background-image': bgImage,
+        },
+      }
+    }
+    return 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 function removeTempDataFromStyles(styles: Style[]): Style[] {
+  const pattern = /url\((["']?)([^"']+?)\1\)/g
+  return styles.map((style: Style) => {
+    if (style.style && style.style['background-image']) {
+      const bgImage = style.style['background-image']
+        .replace(/url\((['"]?)([^'"]+)\1\)/g, (match, quote, url) => {
+          return `url(${quote}${displayedToStored(url)}${quote})`
+        })
+      return {
+        ...style,
+        style: {
+          ...style.style,
+          'background-image': bgImage,
+        },
+      }
+    }
+    return style
+  })
+}