@silexlabs/silex 3.0.1-alpha.0 → 3.0.2

package/src/ts/client/utils.ts

@@ -1,9 +1,78 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { Component, Editor } from 'grapesjs'
 
 // Browse all elements of all pages
-export function onAll(editor, 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

@@ -1,5 +1,83 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
 /**
  * @fileoverview define constants for Silex client and server
  */
 
+export const WEBSITE_DATA_FILE = 'website.json'
+export const WEBSITE_META_DATA_FILE = 'meta.json'
+
+export const DEFAULT_WEBSITE_ID = 'default'
+export const DEFAULT_LANGUAGE = 'en'
 export const CLIENT_CONFIG_FILE_NAME = 'silex.js'
+
+export const API_PATH = '/api'
+
+export const API_CONNECTOR_PATH = '/connector'
+export const API_CONNECTOR_USER = '/user'
+export const API_CONNECTOR_LIST = '/'
+export const API_CONNECTOR_LOGOUT = '/logout'
+export const API_CONNECTOR_LOGIN = '/login'
+export const API_CONNECTOR_SETTINGS = '/settings'
+export const API_CONNECTOR_LOGIN_CALLBACK = '/login/callback'
+
+export const API_PUBLICATION_PATH = '/publication'
+export const API_PUBLICATION_PUBLISH = '/'
+export const API_PUBLICATION_STATUS = '/publication/status'
+
+export const API_WEBSITE_PATH = '/website'
+export const API_WEBSITE_READ = '/'
+export const API_WEBSITE_WRITE = '/'
+export const API_WEBSITE_CREATE = '/'
+export const API_WEBSITE_DELETE = '/'
+export const API_WEBSITE_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/externs.ts

@@ -1 +1,18 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
 

package/src/ts/page.ts

@@ -1,7 +1,24 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
 // Page related functions
 // This is used on the client and the server
-export function getPageSlug(pageName = 'index') {
-  return pageName
+export function getPageSlug(pageName) {
+  return (pageName || 'index')
     .toLowerCase()
     .replace(/[^a-z0-9 -]/g, '')
     // Collapse whitespace and replace by -
@@ -9,6 +26,6 @@ export function getPageSlug(pageName = 'index') {
     // Collapse dashes
     .replace(/-+/g, '-')
 }
-export function getPageLink(pageName = 'index') {
+export function getPageLink(pageName) {
   return `./${getPageSlug(pageName)}.html`
 }

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

@@ -0,0 +1,246 @@
+/*
+ * 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/>.
+ */
+
+throw new Error('This file is obsolete, templates have been replaced by Silex CMS plugin: https://github.com/silexlabs/silex-cms/')
+
+// 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'
+
+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)
+      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({
+        xxbackgroundColor: '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`
+      <style>
+        .CodeMirror {
+          height: 100%;
+        }
+      </style>
+      <div>
+        <h3>Template</h3>
+        <p>This will be inserted in the published version</p>
+      </div>
+      ${[
+    'classname',
+    'attributes',
+    'style',
+    'before',
+    'replace',
+    'after',
+  ].map(id => html`
+      <label data-contain="${id}" class="template-wrapper-${id}">
+        ${labels[id]}
+      </label>
+      `)}
+    `, 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, {
+      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 }) {
+        applyChanges(component)
+      },
+      // 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')
+    }
+    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
+            }`
+          }
+        })
+      })
+      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

@@ -0,0 +1,32 @@
+/*
+ * 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) {
+  if (req.url.endsWith('.html') || req.url.endsWith('/')) {
+    noCache(req, res, next)
+  } else {
+    res.header('Cache-Control', 'public,max-age=86400,immutable') // 24h
+    next()
+  }
+}