@silexlabs/silex 3.0.0-alpha.48 → 3.0.0-alpha.49

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

@@ -0,0 +1,63 @@
+/*
+ * 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'
+
+interface WebsiteInfoOptions {
+  websiteId: string
+  connectorId: string
+  appendTo: 'commands' | 'options' | 'views' | 'project-bar-container' | 'project-bar-panel' | 'views-container'
+}
+
+export default async function(config) {
+  config.on(ClientEvent.GRAPESJS_START, async () => {
+    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
+        const websiteMeta = await config.api.websiteMetaRead({ websiteId, connectorId })
+        displayWebsiteMeta(websiteMeta)
+      })
+      return {}
+    }
+
+    config.grapesJsConfig.plugins.push(grapesPlugin)
+    config.grapesJsConfig.pluginsOpts[grapesPlugin.toString()] = {
+      websiteId: config.websiteId,
+      connectorId: config.storageId,
+    }
+    function displayWebsiteMeta(websiteMeta) {
+      // Create the container
+      const container = document.createElement('div')
+      container.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(container)
+      // Display the website meta data
+      container.innerHTML = `
+        <div class="gjs-website-meta-image" style="background: url(${websiteMeta.imageUrl});"></div>
+        <div class="gjs-website-meta-name">${websiteMeta.name}</div>
+      `
+    }
+  })
+}

package/src/ts/plugins/server/GitlabConnector.ts

@@ -119,7 +119,7 @@ export default class GitlabConnector implements StorageConnector {
   constructor(private config: ServerConfig, opts: Partial<GitlabOptions>) {
     this.options = {
       branch: 'main',
-      assetsFolder: '',
+      assetsFolder: 'assets',
       metaRepo: 'silex-meta',
       metaRepoFile: 'websites.json',
       ...opts,
@@ -131,7 +131,7 @@ export default class GitlabConnector implements StorageConnector {
   // **
   // Convenience methods for the Gitlab API
   private getAssetPath(path: string): string {
-    return `${this.options.assetsFolder}${path}`
+    return encodeURIComponent(`${this.options.assetsFolder}${path}`)
   }
 
   private async createFile(session: GitlabSession, websiteId: WebsiteId, path: string, content: string, isBase64 = false): Promise<void> {
@@ -375,7 +375,6 @@ export default class GitlabConnector implements StorageConnector {
       const { content } = result
       const contentDecoded = Buffer.from(content, 'base64').toString('utf8')
       const websites = (JSON.parse(contentDecoded) as MetaRepoFileContent).websites
-      console.log('listWebsites', {websites, contentDecoded, content, result})
       return Object.entries(websites).map(([websiteId, {meta, createdAt, updatedAt}]) => ({
         websiteId,
         createdAt: new Date(createdAt),
@@ -514,7 +513,7 @@ export default class GitlabConnector implements StorageConnector {
       } catch (e) {
         // If the file does not exist, create it
         if (e.statusCode === 404 || e.httpStatusCode === 404 || e.message.endsWith('A file with this name doesn\'t exist')) {
-          await this.createFile(session, websiteId, file.path, content, true)
+          await this.createFile(session, websiteId, this.getAssetPath(file.path), content, true)
         } else {
           throw e
         }
@@ -537,6 +536,7 @@ export default class GitlabConnector implements StorageConnector {
     if(!response.ok) throw new ApiError(`Gitlab API error: ${json?.message ?? json?.error ?? response.statusText}`, response.status)
     // From base64 string to buffer
     const buf = Buffer.from(json.content, 'base64')
+    // Return the image bytes
     return buf
   }
 

package/src/ts/plugins/server/SslPlugin.ts

@@ -47,18 +47,18 @@ export default async function(config, opts = {}) {
     // SSL
     // force ssl if the env var SILEX_FORCE_HTTPS is set
     if (options.forceHttps) {
-      console.log('> [SslPlugin] Force SSL option is enabled')
+      console.info('> [SslPlugin] Force SSL option is enabled')
       app.set('forceSSLOptions', {
         trustXFPHeader: !!options.trustXFPHeader,
       })
       router.use(forceSSL)
     } else {
-      console.log('> [SslPlugin] Force SSL option is disabled, env var SILEX_FORCE_HTTPS not set')
+      console.info('> [SslPlugin] Force SSL option is disabled, env var SILEX_FORCE_HTTPS not set')
     }
 
     // SSL certificate
     if (options.privateKey && options.certificate) {
-      console.log('> [SslPlugin] SSL certificate is enabled, found certificate:', options.certificate)
+      console.info('> [SslPlugin] SSL certificate is enabled, found certificate:', options.certificate)
       try {
         const privateKey = readFileSync(options.privateKey).toString()
         const certificate = readFileSync(options.certificate).toString()
@@ -71,13 +71,13 @@ export default async function(config, opts = {}) {
         }
 
         createServer(sslServerOptions, this).listen(options.sslPort, () => {
-          console.log('> [SslPlugin] Listening on port ', options.sslPort)
+          console.info('> [SslPlugin] Listening on port ', options.sslPort)
         })
       } catch (e) {
         console.error('> [SslPlugin] Load certificate failed.', e)
       }
     } else {
-      console.log('> [SslPlugin] Certificate disabled, env vars SILEX_SSL_CERTIFICATE and SILEX_SSL_PRIVATE_KEY not set')
+      console.info('> [SslPlugin] Certificate disabled, env vars SILEX_SSL_CERTIFICATE and SILEX_SSL_PRIVATE_KEY not set')
     }
     app.use(router)
   })

package/src/ts/plugins/server/StaticPlugin.ts

@@ -48,6 +48,9 @@ export default async function(config, opts = {}) {
       }, {
         route: '/',
         path: join(__dirname, '../../../../..', 'dist', 'client'),
+      }, {
+        route: '/',
+        path: join(__dirname, '../../../../..', 'dist', 'plugins', 'client'),
       },
     ]
     // add project route for source maps
@@ -57,6 +60,7 @@ export default async function(config, opts = {}) {
       }] : []),
     ...opts,
   }
+  console.info('> [StaticPlugin] Serving static files')
 
   config.on(ServerEvent.STARTUP_START, ({app}) => {
     const router = express.Router()

package/src/ts/server/config.ts

@@ -103,7 +103,7 @@ export class ServerConfig extends Config {
   async addRoutes(app: Application) {
     const path = process.env.SILEX_CLIENT_CONFIG
     if (path) {
-      console.log(`> Serving client side config ${path} at ${CLIENT_CONFIG_FILE_NAME}`)
+      console.info(`> Serving client side config ${path} at ${CLIENT_CONFIG_FILE_NAME}`)
       try {
         // Load the client config file
         let clientConfig = (await readFile(path as string)).toString()
@@ -111,7 +111,7 @@ export class ServerConfig extends Config {
         app.get(`/${CLIENT_CONFIG_FILE_NAME}`, async (req: Request, res: Response) => {
           // Reload each time in debug mode
           if (this.debug) {
-            console.log('[Debug mode] Reloading config file', path)
+            console.info('[Debug mode] Reloading config file', path)
             clientConfig = (await readFile(path)).toString()
           }
           // Send the config file
@@ -143,7 +143,7 @@ export class ServerConfig extends Config {
    */
   async loadUserConfig() {
     if (this.userConfigPath) {
-      console.log('> Loading user config', this.userConfigPath)
+      console.info('> Loading user config', this.userConfigPath)
       try {
         // Initiate the process with the config file which is just another plugin
         await this.addPlugin(this.userConfigPath, {})
@@ -158,12 +158,11 @@ export class ServerConfig extends Config {
    * This is the main config file
    */
   async loadSilexConfig() {
-    console.log('> Loading config', this.configFilePath)
+    console.info('> Loading config', this.configFilePath)
     try {
       // Initiate the process with the config file which is just another plugin
       await this.addPlugin(this.configFilePath, {})
     } catch(e) {
-      console.log(e.requireStack[0])
       // Check if the error is about the config file not found and not another module not found in the config file
       if(e.code === 'MODULE_NOT_FOUND' && (!e.requireStack || !e.requireStack.find(path => path === this.configFilePath))) {
         console.info('> /!\\ Config file not found', this.configFilePath)

package/src/ts/server/connectors/FsStorage.ts

@@ -32,7 +32,7 @@ import { fileURLToPath } from 'url'
 if(!globalThis.__dirname) {
   // @ts-ignore
   globalThis.__dirname = dirname(process.cwd() + '/src/ts/server/connectors/FsStorage.ts')
-  console.log('Redefining __dirname', globalThis.__dirname)
+  console.info('Redefining __dirname', globalThis.__dirname)
 }
 
 type FsSession = ConnectorSession

package/src/ts/server/express.ts

@@ -33,7 +33,7 @@ export function create(config: ServerConfig): Application {
   // CORS
   const options = config.expressOptions
   if (options.cors) {
-    console.log('> CORS are ENABLED:', options.cors)
+    console.info('> CORS are ENABLED:', options.cors)
     app.use(cors({
       origin: options.cors,
     }))
@@ -45,7 +45,7 @@ export function create(config: ServerConfig): Application {
   app.use(bodyParser.json({ limit: options.jsonLimit }))
   app.use(bodyParser.text({ limit: options.textLimit }))
   app.use(bodyParser.urlencoded({ limit: options.urlencodedLimit }))
-  console.log('> Session name:', options.sessionName)
+  console.info('> Session name:', options.sessionName)
   app.use(cookieParser() as any)
   app.use(session({
     name: options.sessionName,

package/dist/client/client/grapesjs/website-info.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (config: any, opts?: any) => void;
-export default _default;

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

@@ -1,39 +0,0 @@
-import { ClientEvent } from '../events'
-import { websiteMetaRead } from '../api'
-import { WebsiteMeta, WebsiteMetaFileContent } from '../../types'
-
-export default (config, opts: any = {}) => {
-  config.on(ClientEvent.STARTUP_END, async ({ editor }) => {
-    console.log('websiteMetaPlugin STARTUP')
-    console.log('websiteMetaPlugin storage:end:load')
-    // Get website meta data
-    const websiteMeta = await websiteMetaRead({websiteId: config.websiteId, connectorId: config.connectorId})
-    // Display in the editor
-    displayWebsiteMeta(editor, websiteMeta)
-    editor.on('storage:end:load', async () => {
-    })
-  })
-}
-
-function displayWebsiteMeta(editor, websiteMeta: WebsiteMeta) {
-  // Check if the container exists in the UI
-  let container = document.querySelector('.gjs-website-meta')
-  if(!container) {
-    // Create the container
-    container = document.createElement('div')
-    container.classList.add('gjs-website-meta')
-    // Add the container to the UI
-    editor.Panels.add('gjs-website-meta', {
-      id: 'gjs-website-meta',
-      el: container,
-      visible: true,
-    })
-  }
-  // Display the website meta data
-  container.innerHTML = `
-      <div class="gjs-website-meta-title">Website</div>
-      <div class="gjs-website-meta-name">${websiteMeta.name}</div>
-      <div class="gjs-website-meta-image" style="background: ${websiteMeta.imageUrl}"></div>
-    `
-  console.log('displayWebsiteMeta', websiteMeta, container)
-}