@silexlabs/silex 3.0.0-alpha.100

package/src/ts/plugins/client/template.ts

@@ -0,0 +1,192 @@
+/*
+ * 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/>.
+ */
+
+// Silex serves /clients
+// @ts-ignore
+import { onAll } from '../client/utils.js'
+// @ts-ignore
+import { ClientEvent } from '../client/events.js'
+
+// You need to serve lit-html at /js/lit-html/
+// @ts-ignore
+import {html, render} from '../js/lit-html/lit-html.js'
+// @ts-ignore
+import {styleMap} from '../js/lit-html/directives/style-map.js'
+
+const silex = window['silex']
+
+const pluginName = 'template'
+const templateType = 'templateType'
+const templateKey = 'template'
+
+export default async (config, opts: any = {}) => {
+  config.on(ClientEvent.GRAPESJS_END, () => {
+    const editor = silex.getEditor()
+    // Add the new trait to all component types
+    editor.DomComponents.getTypes().map(type => {
+      const originalType = editor.DomComponents.getType(type.id)
+      editor.DomComponents.addType(type.id, {
+        model: {
+          defaults: {
+            traits: [
+              // Keep the type original traits
+              ...originalType.model.prototype.defaults.traits,
+              // Add the new trait
+              {
+                label: false,
+                type: templateType,
+                name: pluginName,
+              },
+            ]
+          }
+        }
+      })
+    })
+
+    function doRender(el) {
+      const template = editor.getSelected()?.get(templateKey) || {}
+      const taStyle = opts.styles?.textarea ?? styleMap({
+        backgroundColor: 'var(--darkerPrimaryColor)',
+      })
+      const sepStyle = opts.styles?.sep ?? styleMap({ height: '10px' })
+      const labels = {
+        before: html`<strong>Before</strong> the element`,
+        replace: html`<strong>Replace</strong> the element's children`,
+        after: html`<strong>After</strong> the element`,
+        attributes: html`HTML attributes`,
+        classname: html`CSS classes`,
+        style: html`CSS styles`,
+      }
+      render(html`
+      <div>
+        <h3>Template</h3>
+        <p>This will be inserted in the published version</p>
+      </div>
+      ${['classname', 'attributes', 'style'].map(id => html`
+      <label>
+        ${labels[id]}
+        <input
+          id="template-${id}"
+          .value=${template[id] || ''}
+          style=${taStyle}
+          />
+      </label>
+      `)}
+      ${['before', 'replace', 'after'].map(id => html`
+        <label
+          for="template-${id}"
+          >${labels[id]}</label>
+        <textarea
+          id="template-${id}"
+          style=${taStyle}
+          .value=${template[id] || ''}
+          ></textarea>
+      `)}
+    `, el)
+    }
+
+    editor.TraitManager.addType(templateType, {
+      createInput({ trait }) {
+        // Create a new element container and add some content
+        const el = document.createElement('div')
+        el.classList.add('gjs-one-bg')
+        // update the UI when a page is added/renamed/removed
+        editor.on('page', () => doRender(el))
+        doRender(el)
+        // this will be the element passed to onEvent and onUpdate
+        return el
+      },
+      // Update the component based on UI changes
+      // `elInput` is the result HTMLElement you get from `createInput`
+      onEvent({ elInput, component, event }) {
+        const template = {
+          before: elInput.querySelector('#template-before').value,
+          replace: elInput.querySelector('#template-replace').value,
+          after: elInput.querySelector('#template-after').value,
+          attributes: elInput.querySelector('#template-attributes').value,
+          classname: elInput.querySelector('#template-classname').value,
+          style: elInput.querySelector('#template-style').value,
+        }
+
+        // Store the new template
+        if (Object.values(template).filter(val => !!val && !!cleanup(val)).length > 0) {
+          component.set(templateKey, template)
+        } else {
+          component.set(templateKey)
+        }
+      },
+      // Update UI on the component change
+      onUpdate({ elInput, component }) {
+        doRender(elInput)
+      },
+    })
+
+    // Make html attribute
+    // Quote strings, no values for boolean
+    function makeAttribute(key, value) {
+      switch (typeof value) {
+      case 'boolean': return value ? key : ''
+      default: return `${key}="${value}"`
+      }
+    }
+    // Remove empty lines in templates
+    function cleanup(template) {
+      return template
+        // split in lines
+        .split('\n')
+        // remove lines with only spaces
+        .map(line => line.trim())
+        .filter(line => !!line)
+        // put back together
+        .join('\n')
+    }
+    editor.on(ClientEvent.PUBLISH_START, () => {
+      // Insert templates
+      onAll(editor, c => {
+        const template = c.get(templateKey)
+        const toHTML = c.toHTML
+        const classes = c.getClasses()
+        const before = cleanup(template?.before || '')
+        const replace = cleanup(template?.replace || '')
+        const after = cleanup(template?.after || '')
+        const classname = cleanup(template?.classname || '')
+        const style = cleanup(template?.style || '')
+        const attributes = cleanup(template?.attributes || '')
+        // Store the initial method
+        if (!c.has('tmpHtml')) c.set('tmpHtml', toHTML)
+        // Override the method
+        c.toHTML = () => {
+          return `${before
+          }${c.get('tagName') ? `<${c.get('tagName')}
+            ${Object.entries(c.get('attributes') as object).map(([key, value]) => makeAttribute(key, value)).join(' ')}
+            ${classes.length || classname ? `class="${classes.join(' ')} ${classname}"` : ''}
+            ${attributes}
+            ${style ? `style="${style}"` : ''}
+            >` : ''}${replace || c.getInnerHTML()
+          }${c.get('tagName') ? `</${c.get('tagName')}>` : ''}${after
+          }`
+        }
+      })
+    })
+    editor.on(ClientEvent.PUBLISH_END, () => {
+      onAll(editor, c => {
+        // Restore the original method
+        c.toHTML = c.get('tmpHtml')
+      })
+    })
+  })
+}

package/src/ts/plugins/client/website-info.ts

@@ -0,0 +1,84 @@
+/*
+ * 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 { ClientEvent } from '../../client/events.js'
+import { WebsiteMeta } from '../../types.js'
+
+interface WebsiteInfoOptions {
+  websiteId: string
+  connectorId: string
+  appendTo: 'commands' | 'options' | 'views' | 'project-bar-container' | 'project-bar-panel' | 'views-container'
+}
+
+// Silex plugin
+export default async function(config) {
+  let websiteMeta: WebsiteMeta | null = null
+  config.on(ClientEvent.GRAPESJS_START, async () => {
+    // GrapesJs plugin
+    const grapesPlugin = (editor, opts: Partial<WebsiteInfoOptions>) => {
+      const options = {
+        appendTo: 'commands',
+        ...opts,
+      } as WebsiteInfoOptions
+      editor.on('storage:end:load', async () => {
+        // Get website meta data
+        const { websiteId, connectorId } = options
+        // Get the website meta data
+        websiteMeta = await config.api.websiteMetaRead({ websiteId, connectorId })
+        displayWebsiteMeta()
+      })
+      return {}
+    }
+
+    // Add the plugin to the GrapeJS
+    config.grapesJsConfig.plugins.push(grapesPlugin)
+    config.grapesJsConfig.pluginsOpts[grapesPlugin.toString()] = {
+      websiteId: config.websiteId,
+      connectorId: config.storageId,
+    }
+  })
+
+  config.on(ClientEvent.GRAPESJS_END, async ({editor}) => {
+    // Detect when the page changes
+    editor.on('page:select', async () => {
+      displayWebsiteMeta()
+    })
+  })
+
+
+  // Display the website meta data
+  function displayWebsiteMeta() {
+    // Get or create the container
+    const container = document.querySelector('#gjs-website-meta') ?? (function() {
+      const c = document.createElement('div')
+      c.id = 'gjs-website-meta'
+      c.classList.add('gjs-website-meta')
+      // Add the container to the UI
+      // Add the name of the website in the top bar
+      const topBar = document.querySelector('.gjs-pn-devices-c')
+      topBar?.appendChild(c)
+      return c
+    })()
+    // Get the current page
+    const currentPage = config.getEditor().Pages?.getSelected()
+    // Display the website meta data
+    container.innerHTML = `
+        ${websiteMeta?.imageUrl ? `<div class="gjs-website-meta-image" style="background: url(${websiteMeta?.imageUrl});"></div>` : ''}
+        <div class="gjs-website-meta-name">${websiteMeta?.name ?? 'Unknown'} | ${currentPage.get('name') ?? currentPage.get('type')}</div>
+      `
+  }
+}

package/src/ts/plugins/server/AuthPlugin.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 express from 'express'
+// import { Directus } from '@directus/sdk'
+
+export default async function(config, opts = {}) {
+//  config.on('silex:startup:start', ({app}) => {
+//    const router = express.Router()
+//    router.post(['/publish', '/website', '/assets'], async function(req, res, next) {
+//      try {
+//        const token = req.body.token || opts.directusToken
+//        const directus = new Directus(opts.directusUrl)
+//        directus.storage.auth_token = token
+//        const me = await directus.users.me.read()
+//        next()
+//      } catch(err) {
+//        console.error('Publish failed in auth module. Did you provide a directus token?', err.message)
+//        res.status(403).json({ message: err.message })
+//      }
+//    })
+//    app.use(router)
+//  })
+}

package/src/ts/plugins/server/Cache.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/>.
+ */
+
+export function noCache (req, res, next) {
+  res.header('Cache-Control', 'private,no-cache,no-store,must-revalidate,proxy-revalidate')
+  res.header('Expires', '-1')
+  res.header('Pragma', 'no-cache')
+  next()
+}
+
+export function withCache(req, res, next) {
+  res.header('Cache-Control', 'public,max-age=86400,immutable') // 24h
+  next()
+}

package/src/ts/plugins/server/DownloadConnector.ts

@@ -0,0 +1,148 @@
+import { createWriteStream } from 'fs'
+import archiver from 'archiver'
+import { ConnectorOptions, ConnectorType, ConnectorUser, JobData, JobStatus, PublicationJobData, WebsiteId } from '../../types'
+import { ConnectorFile, ConnectorSession, HostingConnector } from '../../server/connectors/connectors'
+import { tmpdir } from 'os'
+import { JobManager } from '../../server/jobs'
+import { ServerConfig } from '../../server/config'
+import { ServerEvent } from '../../server/events'
+
+import { Request, Response } from 'express'
+
+type DownloadConnectorSession = ConnectorSession;
+
+type DownloadConnectorOptions = object
+
+const svg = '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 464c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16h48v80c0 17.7 14.3 32 32 32h80V448c0 8.8-7.2 16-16 16H64zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V154.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0H64zm48 112c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H128c-8.8 0-16 7.2-16 16zm0 64c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H128c-8.8 0-16 7.2-16 16zm-6.3 71.8L82.1 335.9c-1.4 5.4-2.1 10.9-2.1 16.4c0 35.2 28.8 63.7 64 63.7s64-28.5 64-63.7c0-5.5-.7-11.1-2.1-16.4l-23.5-88.2c-3.7-14-16.4-23.8-30.9-23.8H136.6c-14.5 0-27.2 9.7-30.9 23.8zM128 336h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H128c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/></svg>'
+const encodedSvg = encodeURIComponent(svg)
+const ZIP_ICON = `data:image/svg+xml,${encodedSvg}`
+
+export default class implements HostingConnector<DownloadConnectorSession> {
+  connectorId = 'download-connector'
+  displayName = 'Download zip file'
+  icon = ZIP_ICON
+  disableLogout = false
+  options: DownloadConnectorOptions
+  connectorType = ConnectorType.HOSTING
+  color = '#ffffff'
+  background = '#006400'
+
+  constructor(config: ServerConfig) {
+    // Add a route to serve the zip file
+    config.on(ServerEvent.STARTUP_END, ({app}) => {
+      app.get('/download/:tmpZipFile', async (req: Request, res: Response) => {
+        const path = `${tmpdir()}/${req.params.tmpZipFile}`
+        res.sendFile(path, {}, (err) => {
+          if (err) {
+            console.error('[DownloadConnector] Error while sending file', err)
+            res.status(500).send(`
+              <h1>Error</h1>
+              <p>There was an error while getting the zip file of your website</p>
+              <p>${err.message}</p>
+            `)
+          }
+        })
+      })
+    })
+  }
+
+  getOptions(formData: object): ConnectorOptions {
+    return {}
+  }
+
+  async getOAuthUrl(session: DownloadConnectorSession): Promise<null> { return null }
+
+  async getLoginForm(session: DownloadConnectorSession, redirectTo: string): Promise<string | null> {
+    return null
+  }
+  async getSettingsForm(session: DownloadConnectorSession, redirectTo: string): Promise<string | null> {
+    return null
+  }
+
+  async isLoggedIn(session: DownloadConnectorSession): Promise<boolean> {
+    return true
+  }
+
+  async setToken(session: DownloadConnectorSession, query: object): Promise<void> {}
+
+  async logout(session: DownloadConnectorSession): Promise<void> {}
+
+  async getUser(session: DownloadConnectorSession): Promise<ConnectorUser | null> {
+    return null
+  }
+
+  async publish(session: DownloadConnectorSession, websiteId: WebsiteId, files: ConnectorFile[], jobManager: JobManager): Promise<JobData> {
+    const job = jobManager.startJob(`Publishing to ${this.displayName}`) as PublicationJobData
+    this.startPublishingInBackground(session, websiteId, files, job)
+    return job
+  }
+
+  async startPublishingInBackground(session: DownloadConnectorSession, websiteId: WebsiteId, files: ConnectorFile[], job: PublicationJobData): Promise<void> {
+    const fileName = `${websiteId}-${Date.now()}-${Math.random().toString(36).substring(7)}.zip`
+    return new Promise<string>((resolve, reject) => {
+      let resolved = false
+      try {
+        // Generate a temporary path for the zip file, in the OS tmp folder, with the website id, the date and random string
+        const path = `${tmpdir()}/${fileName}`
+        // create a file to stream archive data to.
+        const output = createWriteStream(path)
+        const archive = archiver('zip', {
+          zlib: { level: 9 } // Sets the compression level.
+        })
+
+        // Listen to archive events
+        // listen for all archive data to be written
+        // 'close' event is fired only when a file descriptor is involved
+        output.on('close', function () {
+          !resolved && resolve(path)
+          resolved = true
+        })
+
+        // good practice to catch warnings (ie stat failures and other non-blocking errors)
+        archive.on('warning', function (err) {
+          if (err.code === 'ENOENT') {
+            // log warning
+          } else {
+            !resolved && reject(err)
+            resolved = true
+          }
+        })
+
+        // good practice to catch this error explicitly
+        archive.on('error', function (err) {
+          !resolved && reject(err)
+          resolved = true
+        })
+
+        // pipe archive data to the filey
+        archive.pipe(output)
+
+        // append files
+        for (const file of files) {
+          job.message = `Adding ${file.path} to the zip file`
+          // Handle content as string, buffer or readable
+          archive.append(file.content, { name: file.path })
+        }
+
+        // finalize the archive (ie we are done appending files but streams have to finish yet)
+        job.message = 'Finalizing the zip file'
+        return archive.finalize()
+          .then(() => path)
+      } catch (err) {
+        console.error('Error while creating the zip file', err)
+        job.message = `Error while creating the zip file: ${err.message}`
+        job.status = JobStatus.ERROR
+        !resolved && reject(err)
+        resolved = true
+      }
+    })
+      .then(path => {
+        job.message = `Zip file created, <a href="/download/${fileName}" target="_blank">download it now</a>`
+        job.status = JobStatus.SUCCESS
+      })
+  }
+
+  async getUrl(session: DownloadConnectorSession, websiteId: WebsiteId): Promise<string> {
+    return ''
+  }
+}

package/src/ts/plugins/server/FtpConnector.test.ts

@@ -0,0 +1,82 @@
+import { ServerConfig } from '../../server/config'
+import { expect, jest, beforeEach, afterEach, it, describe } from '@jest/globals'
+import { ConnectorType, WebsiteData, WebsiteId } from '../../types'
+import { Readable } from 'stream'
+
+const mocks = {
+  access: jest.fn(),
+  close: jest.fn(),
+  trackProgress: jest.fn(),
+  uploadFrom: jest.fn(),
+}
+function mockClient() {
+  jest.mock('basic-ftp', () => ({
+    Client: jest.fn().mockImplementation(() => mocks),
+  }))
+}
+mockClient()
+
+const FtpConnector = (await import('./FtpConnector')).default
+
+let connector
+const storageRootPath = 'dummy storageRootPath'
+const assetsFolder = 'dummy assetsFolder'
+const dummySession = {
+  [`ftp-${ConnectorType.STORAGE}`]: {
+    host: 'dummy host',
+    user: 'dummy user',
+    pass: 'dummy pass',
+    port: 1234,
+    secure: false,
+    storageRootPath,
+  },
+}
+const dummyId: WebsiteId = 'dummy id'
+const dummyWebsite: WebsiteData = {
+  pages: [],
+  assets: [],
+  styles: [],
+  settings: {},
+  fonts: [],
+  symbols: [],
+  publication: {},
+}
+
+beforeEach(() => {
+  mockClient()
+  connector = new FtpConnector({} as ServerConfig, {
+    type: ConnectorType.STORAGE,
+    assetsFolder,
+  })
+})
+
+afterEach(async () => {
+  // FIXME: This removes the mock of Client
+  //await jest.resetAllMocks()
+  // Reset each mock
+  Object.keys(mocks).forEach(key => {
+    mocks[key].mockClear()
+  })
+})
+
+describe('FtpConnector website', () => {
+  it('should write to FTP', async () => {
+    await connector.updateWebsite(dummySession, dummyId, dummyWebsite)
+    expect(mocks.uploadFrom).toHaveBeenCalledTimes(1)
+    expect(mocks.uploadFrom.mock.calls[0][0]).toBeInstanceOf(Readable)
+    expect(mocks.uploadFrom.mock.calls[0][1]).toBe(`${storageRootPath}/${dummyId}/website.json`)
+  })
+})
+
+describe('FtpConnector assets', () => {
+  it('should write an asset to FTP', async () => {
+    const assets = [{
+      path: 'dummy path',
+      content: 'dummy content',
+    }]
+    await connector.writeAssets(dummySession, dummyId, assets)
+    expect(mocks.uploadFrom).toHaveBeenCalledTimes(1)
+    expect(mocks.uploadFrom.mock.calls[0][0]).toBeInstanceOf(Readable)
+    expect(mocks.uploadFrom.mock.calls[0][1]).toBe(`${storageRootPath}/${dummyId}/${assetsFolder}/${assets[0].path}`)
+  })
+})