@silexlabs/silex 3.0.0-alpha.100

package/src/css/silex.scss

@@ -0,0 +1,189 @@
+@use "variables" as *;
+@use "mixins";
+
+.silex-workspace {
+  @include mixins.silex-ui-full;
+  body {
+    font-family: $fontFamily;
+  }
+  display: flex;
+  a {
+    color: inherit;
+  }
+  h2 {
+    font-size: 18px;
+    background: $lighterPrimaryColor;
+    border-radius: 8px 8px 0 0;
+    padding: 8px;
+    margin: 0;
+    font-weight: normal;
+  }
+  h3 {
+    margin: 10px 0;
+    font-size: 18px;
+    font-weight: normal;
+  }
+}
+
+.full-width {
+  width: 100%;
+}
+
+// full screen settings
+.settings-dialog > div {
+  max-width: none;
+  width: 100%;
+  max-height: 100vh;
+  overflow: auto;
+  form.silex-form {
+    padding-bottom: 100px; // leave space for fixed footer
+    textarea {
+      min-height: 250px;
+    }
+  }
+  .silex-form__element {
+    padding: 10px 5px;
+    border: 1px solid $lighterPrimaryColor;
+    margin: 10px 0;
+    width: 98%;
+  }
+  footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 20px 0;
+    background-color: $primaryColor;
+    &>*:last-child {
+      margin-right: 30px;
+    }
+    .silex-version {
+      float: left;
+      padding: 0 15px;
+      font-size: x-small;
+    }
+  }
+}
+
+button.silex-button,
+input.silex-button[type="button"],
+input.silex-button[type="submit"] {
+  cursor: pointer;
+  font-family: inherit;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e9ebeb;
+  border-bottom-color: #e1e3e3;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 rgba(14, 30, 37, .12);
+  background-color: $lighterPrimaryColor;
+  border-color: transparent;
+  padding: 5px;
+}
+
+.silex-button[disabled] {
+  opacity: .8;
+  cursor: unset;
+}
+
+.silex-button.silex-button--primary {
+  background-color: $lighterPrimaryColor;
+}
+
+.silex-button.silex-button--secondary {
+  background-color: $primaryColor;
+}
+
+.silex-button--size {
+  max-height: 30px;
+}
+
+.silex-button--small {
+  font-size: .7em;
+  padding: 0 5px;
+}
+
+.silex-input {
+  appearance: initial;
+}
+
+.silex-label {
+  display: block;
+}
+
+.silex-bar {
+  display: flex;
+  &>* {
+    margin: 5px;
+  }
+}
+
+ol.silex-list,
+ul.silex-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background-color: #575757;
+  &>li {
+    padding: 5px;
+    border-bottom: 1px solid #575757;
+    background-color: #444;
+    margin: 5px;
+  }
+  fieldset {
+    border-color: #575757;
+  }
+  h4 { // badge-like
+    display: inline-block;
+    padding: 5px;
+    padding-bottom: 2px;
+    margin: 10px 5px;
+    font-weight: normal;
+    color: #3d3d3d;
+    background-color: #c4c4c4;
+  }
+  .silex-list__item__body {
+    display: flex;
+  }
+  .silex-list__item__footer {
+    display: flex;
+    justify-content: flex-end;
+    button {
+      padding: 5px;
+      margin: 5px;
+      padding-top: 8px;
+    }
+  }
+}
+
+form.silex-form {
+  display: flex;
+  flex-direction: column;
+  footer {
+    text-align: right;
+    border-top: 1px solid $lighterPrimaryColor;
+    padding: 20px 0 10px;
+    margin: 20px 0 0;
+  }
+  button, input, optgroup, select, textarea {
+    background-color: $darkerPrimaryColor;
+    color: $secondaryColor;
+    padding: 5px;
+    border: none;
+  }
+  input[type=checkbox] {
+    margin: 5px;
+  }
+  textarea {
+    width: 98% !important;
+  }
+  .silex-form__element {
+    display: inline-flex;
+    flex-direction: column;
+  }
+  .silex-form__group.col2 {
+    column-count: 2;
+  }
+}

package/src/css/website-info.scss

@@ -0,0 +1,14 @@
+@use "variables" as *;
+
+.gjs-website-meta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+  margin-right: 10px;
+  padding: 0 10px;
+  line-height: 1;
+  min-width: 100px;
+  border: 1px solid $lighterPrimaryColor;
+  background-color: $darkerPrimaryColor;
+}

package/src/html/debug.pug

@@ -0,0 +1,8 @@
+extends index.pug
+
+block silex-start
+  script.
+    document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
+    window.silex.start({
+      debug: true,
+    })

package/src/html/index.pug

@@ -0,0 +1,39 @@
+doctype html
+html(lang="en", translate="no")
+  head
+    block head-start
+
+    block head
+      title='Silex'
+      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")
+
+    block loading
+      style.
+        body {
+          background-color: #444444;
+          font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        }
+        .silex-loader {
+          display: none;
+        }
+
+    block head-end
+
+  body.silex-loading
+    .silex-loader.silex-dialog.
+      Loading...
+
+    block includes
+      include ./templates/includes.pug
+
+    block body-start
+      include ./templates/workspace.pug
+
+    block body-end
+      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()

package/src/html/templates/includes.pug

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

package/src/html/templates/workspace.pug

@@ -0,0 +1,2 @@
+main.silex-workspace
+  #gjs.silex-main.silex-dialog-hide.silex-ui-full

package/src/ts/client/api.ts

@@ -0,0 +1,144 @@
+/*
+ * 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 } 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 } 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_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: 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: 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: 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: 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: 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: 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: 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) {
+    const json = await response.json()
+    throw new ApiError(json.message, response.status)
+  }
+
+  return response.json()
+}

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

@@ -0,0 +1,125 @@
+import { jest,  expect, describe, it, beforeEach } from '@jest/globals'
+
+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}`)
+  })
+})