@silexlabs/silex 3.0.0-alpha.21

package/src/css/silex.scss

@@ -0,0 +1,183 @@
+@use "variables" as *;
+@use "mixins";
+
+.silex-workspace {
+  @include mixins.silex-ui-full;
+  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
+  }
+  .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/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: Helvetica,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,2 @@
+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/plugins/AuthPlugin.js

@@ -0,0 +1,21 @@
+const express = require('express')
+const { Directus } = require('@directus/sdk')
+
+module.exports = 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/plugins/Cache.js

@@ -0,0 +1,11 @@
+exports.noCache = function (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()
+}
+
+exports.withCache = function (req, res, next) {
+  res.header('Cache-Control', 'public,max-age=86400,immutable') // 24h
+  next()
+}

package/src/plugins/DefaultBackend.js

@@ -0,0 +1,113 @@
+const { readFile, writeFile, mkdir, copyFile } = require('node:fs/promises')
+const { join, dirname, basename } = require('path')
+const { homedir } = require('os')
+
+//const { URLRewriter, URLTranslator } = require('cssurl')
+
+async function mkdirIfNotExists(path, options = null) {
+  try {
+    return await mkdir(path, options)
+  } catch (err) {
+    if (err.code === 'EEXIST') {
+      return
+    } else {
+      throw err
+    }
+  }
+}
+
+// Paths
+const FS_ROOT = process.env.FS_ROOT || join(homedir(), '.silex')
+const ASSETS_PATH = 'assets'
+const ASSETS_URL = 'assets'
+const HTML_PATH = ''
+const CSS_PATH = ''
+const DATA_FILE_NAME = '/.silex.data.json'
+const PUBLICATION_PATH = 'publication'
+
+function path(id = 'default') {
+  return join(FS_ROOT, id)
+}
+
+exports.assetsDir = async function (id) {
+  return join(path(id), ASSETS_PATH)
+}
+
+exports.assetUrl = async function (id, fileName) {
+  return `${ASSETS_URL}/${fileName}`
+}
+
+// Init files for projects and each project
+exports.init = async function (id) {
+  await mkdirIfNotExists(FS_ROOT)
+  const folder = path(id)
+  const uploadDir = join(folder, ASSETS_PATH)
+  await mkdirIfNotExists(uploadDir, { recursive: true, })
+}
+
+// Read project data
+exports.readData = async function (id) {
+  return readFile(path(id) + DATA_FILE_NAME)
+}
+// Write project data
+exports.writeData = async function (id, data) {
+  return writeFile(path(id) + DATA_FILE_NAME, JSON.stringify(data))
+}
+function required(prop, name) {
+  if (!prop) throw new Error(`Error missing required param ${name}`)
+}
+exports.publish = async function (id, files, data) {
+  const { assets, settings, publication } = data
+  required(assets, 'assets')
+  required(files, 'files')
+  required(id, 'id')
+  const folder = path(id)
+  const publicationDir = join(folder, publication?.path || PUBLICATION_PATH)
+
+  // HTML and CSS
+  await Promise.all(files
+    .map(async (file) => {
+      // // Process the page CSS to have correct relative URLs
+      // let css = file.css
+      // try {
+      //   if(settings?.html?.path != settings?.css?.path) {
+      //     const rewriter = new URLRewriter(function(url) {
+      //       const translator = new URLTranslator()
+      //       return translator.translate(url, settings?.html?.path, settings?.css?.path)
+      //     })
+      //     css = rewriter.rewrite(css)
+      //   }
+      // } catch (err) {
+      //   console.error('Error processing CSS', err, file)
+      //   throw new Error(`Error processing CSS. ${err.message}`)
+      // }
+      try {
+        // Paths
+        const htmlPath = join(publicationDir, file.htmlPath)
+        const cssPath = join(publicationDir, file.cssPath)
+        // Init
+        await mkdirIfNotExists(dirname(htmlPath), { recursive: true, })
+        await mkdirIfNotExists(dirname(cssPath), { recursive: true, })
+        // Write
+        await writeFile(htmlPath, file.html)
+        await writeFile(cssPath, file.css)
+      } catch (err) {
+        throw new Error(`Publication error: could not write files ${file.cssPath} and ${file.htmlPath}. ${err.message}`)
+      }
+    }))
+  // Assets
+  const assetsFolder = join(publicationDir, publication?.assets?.path || ASSETS_PATH)
+  await mkdirIfNotExists(assetsFolder, { recursive: true, })
+
+  assets.forEach(async asset => {
+    required(asset.src, 'asset\'s "src" attribute')
+    const src = join(folder, asset.src)
+    const dst = join(assetsFolder, basename(asset.src))
+    try {
+      await copyFile(src, dst)
+    } catch (err) {
+      throw new Error(`Publication error: could not copy asset file ${src} to ${dst}. ${err.message}`)
+    }
+  })
+  return publication?.url
+}

package/src/plugins/ExpressPlugin.js

@@ -0,0 +1,30 @@
+const bodyParser = require('body-parser')
+const compression = require('compression')
+const cookieParser = require('cookie-parser')
+const session = require('cookie-session')
+
+module.exports = async function(config, opts = {}) {
+  // Options with defaults
+  const options = {
+    jsonLimit: process.env.SILEX_EXPRESS_JSON_LIMIT || '1mb',
+    textLimit: process.env.SILEX_EXPRESS_TEXT_LIMIT || '10mb',
+    sessionName: process.env.SILEX_SESSION_NAME || 'silex-session',
+    sessionSecret: process.env.SILEX_SESSION_SECRET || 'replace this session secret in env vars',
+    ...opts,
+  }
+
+  config.on('silex:startup:start', ({app}) => {
+    // compress gzip when possible
+    app.use(compression())
+
+    // cookie & session
+    app.use(bodyParser.json({limit: options.jsonLimit}))
+    app.use(bodyParser.text({limit: options.textLimit}))
+    app.use(cookieParser())
+    app.use(session({
+      name: options.sessionName,
+      secret: options.sessionSecret,
+    }))
+  })
+}
+

package/src/plugins/HooksPlugin.js

@@ -0,0 +1,58 @@
+import { Config } from '../config'
+import { EVENT_WRITE_END, EVENT_ASSET_WRITE_END } from './WebsitePlugin'
+import { EVENT_PUBLISH_END } from './PublishPlugin'
+import fetch from 'node-fetch'
+import { projectPath, assetsDir } from '../project'
+
+// type HooksOptions = {
+//   gitUrl?: string
+//   buildUrl?: string
+// }
+
+const rootPath = process.env.DATA_FOLDER
+
+module.exports = async function(config, opts = {}) {
+  // Options with defaults
+  const options = {
+    gitUrl: process.env.SILEX_HOOK_GIT,
+    buildUrl: process.env.SILEX_HOOK_BUILD,
+    ...opts
+  }
+  config.on(EVENT_WRITE_END, async ({ res, req, projectId, data }) => {
+    if(options.gitUrl) {
+      await hook(options.gitUrl, {
+        path: projectPath(projectId),
+        message: 'Change from Silex',
+      })
+    }
+  })
+  config.on(EVENT_ASSET_WRITE_END, async ({ res, req, projectId, uploadDir, form, data }) => {
+    if(options.gitUrl) {
+      await hook(options.gitUrl, {
+        path: projectPath(projectId),
+        message: 'Change from Silex',
+      })
+    }
+  })
+  config.on(EVENT_PUBLISH_END, async ({ projectId, files, req, res }) => {
+    if(options.buildUrl) {
+      await hook(options.buildUrl)
+    }
+  })
+}
+
+async function hook(url, params = {}) {
+  if(url) {
+    const urlObj = new URL(url)
+    console.log('Calling hook', {url})
+    try {
+      Object.keys(params)
+        .forEach(key => urlObj.searchParams.append(key, params[key]))
+      return fetch(urlObj.toString())
+    } catch(error) {
+      console.log('Hook call failed', {url, error})
+      return null
+    }
+  }
+}
+

package/src/plugins/PublishPlugin.js

@@ -0,0 +1,69 @@
+const express = require('express')
+const { resolve } = require('path')
+
+const { noCache } = require('./Cache')
+const { minify } = require('html-minifier')
+
+const router = express.Router()
+
+// type PublishOptions = {
+//   statusUrl?: string
+// }
+
+module.exports = async function(config, opts = {}) {
+  const options = {
+    // Defaults
+    statusUrl: process.env.SILEX_PUBLICATION_STATUS_URL,
+    backend: 'src/plugins/DefaultBackend.js',
+    // Options
+    ...opts,
+  }
+
+  // Link to the desired backend
+  const backend = resolve(__dirname, '../..', options.backend)
+  const { publish } = require(backend)
+
+  config.on('silex:startup:start', ({app}) => {
+    // Start publication
+    router.post('/publish', async function(req, res) {
+      const { pages, files, id } = req.body.data
+      if (!pages || !id) {
+        console.error('Error in the request, pages and id parmas required', {id})
+        res.status(400).send({
+          message: 'Error in the request, pages and id parmas required',
+        })
+      } else {
+        // Optim
+        files.forEach(file => {
+          file.html = minify(file.html, {
+            continueOnParseError: true,
+            collapseInlineTagWhitespace: true,
+            collapseWhitespace: true,
+            minifyCSS: true,
+            minifyJS: true,
+            removeScriptTypeAttributes: true,
+            removeStyleLinkTypeAttributes: true,
+          }).trim()
+        })
+        // Publication
+        await config.emit(EVENT_PUBLISH_START, { id, files, req})
+        let url
+        try {
+          url = await publish(id, files, req.body.data)
+        } catch (err) {
+          console.error('Error publishing the website', err)
+          res.status(500).json({ message: `Error publishing the website. ${err.message}`})
+          return
+        }
+        const mutable = { id, files, req, res, url, statusUrl: options.statusUrl }
+        await config.emit(EVENT_PUBLISH_END, mutable)
+        res.json({
+          url: mutable.url,
+          statusUrl: mutable.statusUrl,
+        })
+      }
+    })
+
+    app.use(noCache,  router)
+  })
+}

package/src/plugins/SslPlugin.js

@@ -0,0 +1,66 @@
+const express = require('express')
+const { readFileSync } = require('fs')
+const { createServer } = require('https')
+const fromorceSSL = require('express-force-ssl')
+
+// interface SslOptions {
+//   forceHttps?: boolean
+//   trustXFPHeader?: boolean
+//   privateKey?: string
+//   certificate?: string
+//   sslPort?: string
+// }
+
+module.exports = async function(config, opts = {}) {
+  // Options with defaults
+  const options = {
+    forceHttps: process.env.SILEX_FORCE_HTTPS === 'true',
+    trustXFPHeader: process.env.SILEX_FORCE_HTTPS_TRUST_XFP_HEADER === 'true',
+    privateKey: process.env.SILEX_SSL_PRIVATE_KEY,
+    certificate: process.env.SILEX_SSL_CERTIFICATE,
+    sslPort: process.env.SSL_PORT || '443',
+    ...opts,
+  }
+
+  // Add routes on silex startup
+  config.on('silex:startup:start', ({app}) => {
+    const router = express.Router()
+
+    // SSL
+    // force ssl if the env var SILEX_FORCE_HTTPS is set
+    if (options.forceHttps) {
+      console.log('> Force SSL option is enabled')
+      app.set('forceSSLOptions', {
+        trustXFPHeader: !!options.trustXFPHeader,
+      })
+      router.use(forceSSL)
+    } else {
+      console.log('> Force SSL option is disabled, env var SILEX_FORCE_HTTPS not set')
+    }
+
+    // SSL certificate
+    if (options.privateKey && options.certificate) {
+      console.log('> SSL certificate is enabled, found certificate:', options.certificate)
+      try {
+        const privateKey = readFileSync(options.privateKey).toString()
+        const certificate = readFileSync(options.certificate).toString()
+
+        const sslServerOptions = {
+          key: privateKey,
+          cert: certificate,
+          requestCert: true,
+          rejectUnauthorized: false,
+        }
+
+        createServer(sslServerOptions, this).listen(options.sslPort, () => {
+          console.log('SSL: listening on port ', options.sslPort)
+        })
+      } catch (e) {
+        console.error('SSL: load certificate failed.', e)
+      }
+    } else {
+      console.log('> SSL certificate disabled, env vars SILEX_SSL_CERTIFICATE and SILEX_SSL_PRIVATE_KEY not set')
+    }
+    app.use(router)
+  })
+}

package/src/plugins/StaticPlugin.js

@@ -0,0 +1,48 @@
+const express = require('express')
+const nodeModules = require('node_modules-path')
+const serveStatic = require('serve-static')
+const { withCache } = require('./Cache')
+
+const Path = require('path')
+
+// type StaticOptions = {
+//   routes?: {
+//     path?: string
+//     route?: string
+//     module?: string
+//   }[]
+// }
+
+module.exports = async function(config, opts = {}) {
+  // Options with defaults
+  const options = {
+    rootPath: Path.join(__dirname, '../..'),
+    routes: [
+      {
+        route: '/',
+        path: 'public',
+      }, {
+        route: '/',
+        path: 'dist/client',
+      },
+    ]
+    // add project route for source maps
+    .concat(config.debug ? [{
+      route: '/',
+      path: './',
+    }] : []),
+    ...opts,
+  }
+
+  config.on('silex:startup:start', ({app}) => {
+    const router = express.Router()
+    options.routes
+      .forEach(folder => {
+        // either the module root folder or silex root folder
+        const path = Path.join(options.rootPath, folder.path || '')
+        if (!folder.route) throw new Error('The config for static module has no `route` attribute: ' + folder)
+        router.use(folder.route, serveStatic(path))
+      })
+    app.use(withCache,  router)
+  })
+}