@silexlabs/silex 3.0.1-0 → 3.0.1

package/src/ts/client/publish-fonts.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 { ClientSideFile, ClientSideFileType, ClientSideFileWithContent } from '../types'
+import { cmdGetHtml } from '@silexlabs/grapesjs-fonts/src/commands'
+
+/**
+ * @fileoverview Make sure custom script blocks include script tags when published
+ */
+
+export default async function (config) {
+  config.addPublicationTransformers({
+    transformFile(file: ClientSideFile): ClientSideFile {
+      const fileWithContent = file as ClientSideFileWithContent
+      if(fileWithContent.type === ClientSideFileType.HTML && fileWithContent.content) {
+        const htmlLinks = config.getEditor().runCommand(cmdGetHtml)
+        fileWithContent.content = fileWithContent.content.replace(/<\/head>/, `${htmlLinks}</head>`)
+      }
+      return file
+    },
+  })
+}

package/src/ts/client/utils.ts

@@ -15,12 +15,64 @@
  * 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, cbk) {
+export function onAll(editor: Editor, cbk: (c: Component) => void) {
   editor.Pages.getAll()
     .forEach(page => {
       page.getMainComponent()
         .onAll(c => cbk(c))
     })
 }
+
+/**
+ * SHA256 hash a string
+ */
+export async function hashString(str: string): Promise<string> {
+  if (crypto.subtle != undefined) {
+    // Convert the string to an ArrayBuffer
+    const encoder = new TextEncoder()
+    const data = encoder.encode(str)
+
+    // Hash the data with SHA-256
+    const hashBuffer = await crypto.subtle.digest('SHA-256', data)
+
+    // Convert the ArrayBuffer to hex string
+    const hashArray = Array.from(new Uint8Array(hashBuffer))
+    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
+
+    return hashHex
+  }
+  else {return 'local'}
+}
+
+/**
+ * Select the <body> element in the editor.
+ * @param editor The GrapesJS editor.
+ */
+export function selectBody(editor: Editor): void {
+  editor.select(editor.DomComponents.getWrapper())
+}
+
+/**
+ * Checks if an element is a text or input field.
+ * @param element The element to check.
+ */
+export function isTextOrInputField(element: HTMLElement): boolean {
+  if(element.getAttribute('type') === 'submit') return false
+  const isInput: boolean = element.tagName === 'INPUT'
+  const isOtherFormElement: boolean = ['TEXTAREA', 'OPTION', 'OPTGROUP', 'SELECT', 'BUTTON'].includes(element.tagName)
+
+  return isInput || isOtherFormElement
+}
+
+/**
+ * Makes every word in a string start with an uppercase letter.
+ * @param str The string to title-case.
+ * @param sep The separator between words.
+ */
+export function titleCase(str: string, sep: string = ' '): string {
+  const split = str.split(sep)
+  return split.map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(sep)
+}

package/src/ts/constants.ts

@@ -45,8 +45,39 @@ export const API_WEBSITE_READ = '/'
 export const API_WEBSITE_WRITE = '/'
 export const API_WEBSITE_CREATE = '/'
 export const API_WEBSITE_DELETE = '/'
+export const API_WEBSITE_DUPLICATE = '/duplicate'
 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'
+
+// Env vars (build time)
+// Get env vars from webpack
+// @see webpack.config.js
+declare const SILEX_VERSION_ENV: string
+export let SILEX_VERSION
+try { SILEX_VERSION = SILEX_VERSION_ENV } catch (e) {
+  // fallback to default value
+  SILEX_VERSION = SILEX_VERSION || '3.0.0'
+}
+
+export const DEV_MESSAGE = `
+__________________________________________________________
+
+  Create static websites visually, with dynamic content,
+  in the free spirit of the web.
+  
+  ███████ ██ ██      ███████ ██   ██     ██    ██ ██████
+  ██      ██ ██      ██       ██ ██      ██    ██      ██
+  ███████ ██ ██      █████     ███       ██    ██  █████
+       ██ ██ ██      ██       ██ ██       ██  ██       ██
+  ███████ ██ ███████ ███████ ██   ██       ████   ██████ ${SILEX_VERSION.slice(1)}
+  
+  Users are expected to contribute:
+  
+  * Web designers: https://docs.silex.me/en/user/contribute
+  * Developers: https://docs.silex.me/en/dev/contribute
+  
+__________________________________________________________
+`

package/src/ts/page.ts

@@ -18,7 +18,7 @@
 // Page related functions
 // This is used on the client and the server
 export function getPageSlug(pageName) {
-  return pageName
+  return (pageName || 'index')
     .toLowerCase()
     .replace(/[^a-z0-9 -]/g, '')
     // Collapse whitespace and replace by -
@@ -26,6 +26,6 @@ export function getPageSlug(pageName) {
     // Collapse dashes
     .replace(/-+/g, '-')
 }
-export function getPageLink(pageName = 'index') {
+export function getPageLink(pageName) {
   return `./${getPageSlug(pageName)}.html`
 }

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

@@ -15,16 +15,19 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-//import {html, render} from 'lit-html'
-//import {styleMap} from 'lit-html/directives/style-map.js'
-//import { onAll } from '@silexlabs/silex/dist/client/utils.js'
-import { onAll } from '../../client/utils.js'
-import { ClientEvent } from '../../client/events.js'
+throw new Error('This file is obsolete, templates have been replaced by Silex CMS plugin: https://github.com/silexlabs/silex-cms/')
 
-//// @ts-ignore
-//import {html, render} from '/node_modules/lit-html/lit-html.js'
-//// @ts-ignore
-//import {styleMap} from '/node_modules/lit-html/directives/style-map.js'
+// 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']
 
@@ -32,14 +35,43 @@ const pluginName = 'template'
 const templateType = 'templateType'
 const templateKey = 'template'
 
-export default async (config, opts: any = {}) => {
-  // @ts-ignore
-  const { html, render } = await import('/node_modules/lit-html/lit-html.js')
-  // @ts-ignore
-  const { styleMap } = await import('/node_modules/lit-html/directives/style-map.js')
+function createCodeEditor(editor, mode = 'htmlmixed', singleLine = false) {
+  const options = {
+    readOnly: false,
+    codeName: mode,
+  } as any
+  if(singleLine) {
+    options.lineWrapping = false
+    options.lineNumbers = false
+    options.indentWithTabs = false
+  } else {
+    options.lineNumbers = true
+    options.lineWrapping = true
+  }
+
+  return editor.CodeManager.createViewer(options)
+}
 
+export default async (config, opts: any = {}) => {
   config.on(ClientEvent.GRAPESJS_END, () => {
     const editor = silex.getEditor()
+    // Get the necessary code editors
+    const editors = {
+      before: createCodeEditor(editor),
+      replace: createCodeEditor(editor),
+      after: createCodeEditor(editor),
+      attributes: createCodeEditor(editor, 'text', true),
+      classname: createCodeEditor(editor, 'text', true),
+      style: createCodeEditor(editor, 'css', true),
+    }
+    const is1line = {
+      before: false,
+      replace: false,
+      after: false,
+      attributes: true,
+      classname: true,
+      style: true,
+    }
     // Add the new trait to all component types
     editor.DomComponents.getTypes().map(type => {
       const originalType = editor.DomComponents.getType(type.id)
@@ -64,7 +96,7 @@ export default async (config, opts: any = {}) => {
     function doRender(el) {
       const template = editor.getSelected()?.get(templateKey) || {}
       const taStyle = opts.styles?.textarea ?? styleMap({
-        backgroundColor: 'var(--darkerPrimaryColor)',
+        xxbackgroundColor: 'var(--darkerPrimaryColor)',
       })
       const sepStyle = opts.styles?.sep ?? styleMap({ height: '10px' })
       const labels = {
@@ -76,31 +108,61 @@ export default async (config, opts: any = {}) => {
         style: html`CSS styles`,
       }
       render(html`
+      <style>
+        .CodeMirror {
+          height: 100%;
+        }
+      </style>
       <div>
         <h3>Template</h3>
         <p>This will be inserted in the published version</p>
       </div>
-      ${['classname', 'attributes', 'style'].map(id => html`
-      <label>
+      ${[
+    'classname',
+    'attributes',
+    'style',
+    'before',
+    'replace',
+    'after',
+  ].map(id => html`
+      <label data-contain="${id}" class="template-wrapper-${id}">
         ${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)
+      el.querySelectorAll('[data-contain]').forEach(container => {
+        const id = container.getAttribute('data-contain')
+        const codeEditor = editors[id]
+        container.appendChild(codeEditor.getElement())
+        codeEditor.getElement().style.display = 'block'
+        codeEditor.getElement().style.height = is1line[id] ? '' : '200px'
+        codeEditor.getElement().style.width = '100%'
+        codeEditor.setContent(template[id] ?? '')
+        codeEditor.refresh()
+      })
+      // Make sure we apply the changes when the user presses any key
+      // The events should be triggered by the trait manager (call onEvent) but it doesn't work for "delete" key for example
+      el.onkeyup = () => {
+        applyChanges(editor.getSelected())
+      }
+    }
+
+    function applyChanges(component) {
+      const template = {
+        before: editors.before.getContent(),
+        replace: editors.replace.getContent(),
+        after: editors.after.getContent(),
+        attributes: editors.attributes.getContent(),
+        classname: editors.classname.getContent(),
+        style: editors.style.getContent(),
+      }
+
+      // Store the new template
+      if (Object.values(template).filter(val => !!val && !!cleanup(val)).length > 0) {
+        component.set(templateKey, template)
+      } else {
+        component.set(templateKey)
+      }
     }
 
     editor.TraitManager.addType(templateType, {
@@ -117,21 +179,7 @@ export default async (config, opts: any = {}) => {
       // 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)
-        }
+        applyChanges(component)
       },
       // Update UI on the component change
       onUpdate({ elInput, component }) {
@@ -158,39 +206,41 @@ export default async (config, opts: any = {}) => {
         // 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')).map(([key, value]) => makeAttribute(key, value)).join(' ')}
+    if (opts.publication !== false) {
+      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
-          }`
-        }
+            }${c.get('tagName') ? `</${c.get('tagName')}>` : ''}${after
+            }`
+          }
+        })
       })
-    })
-    editor.on(ClientEvent.PUBLISH_END, () => {
-      onAll(editor, c => {
-        // Restore the original method
-        c.toHTML = c.get('tmpHtml')
+      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/Cache.ts

@@ -23,6 +23,10 @@ export function noCache (req, res, next) {
 }
 
 export function withCache(req, res, next) {
-  res.header('Cache-Control', 'public,max-age=86400,immutable') // 24h
-  next()
+  if (req.url.endsWith('.html') || req.url.endsWith('/')) {
+    noCache(req, res, next)
+  } else {
+    res.header('Cache-Control', 'public,max-age=86400,immutable') // 24h
+    next()
+  }
 }

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

@@ -0,0 +1,146 @@
+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 ZIP_ICON = '/assets/download.png'
+
+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 ''
+  }
+}