@silexlabs/silex 3.0.0-alpha.39 → 3.0.0-alpha.41

package/src/ts/client/grapesjs/PublicationManager.ts

@@ -0,0 +1,333 @@
+/*
+ * 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 { getPageSlug } from '../../page'
+import { onAll } from '../utils'
+import { ApiBackendLoggedInPostMessage, ApiPublicationPublishRequestBody, ApiPublicationPublishRequestQuery, ApiPublicationPublishResponse, ApiPublicationStatusRequestQuery, ApiPublicationStatusResponse, BackendData, BackendType, JobData, JobStatus, PublicationData, PublicationJobData, PublicationSettings, WebsiteData, WebsiteId, WebsiteSettings } from '../../types'
+import { Editor, ProjectData } from 'grapesjs'
+import e from 'express'
+import { PublicationUi } from './PublicationUi'
+import { LoginStatus, loginStatus, logout, publicationStatus, publish } from '../services'
+
+/**
+ * @fileoverview Publication manager for Silex
+ * This plugin adds a publication feature to Silex
+ * It lets the user publish the website to a hosting service
+ * It can optionally display a button and a dialog
+ * Useful commands:
+ * - publish: starts the publication process and optionally open the dialog
+ * - publish-login: open the login dialog
+ * - publish-logout: logout from the hosting service and let the user choose a hosting service again
+ */
+
+// Constants
+export const cmdPublicationStart = 'publish'
+export const cmdPublicationLogin = 'publish-login'
+export const cmdPublicationLogout = 'publish-logout'
+
+// Types
+export type PublishableEditor = Editor & {
+  PublicationManager: PublicationManager
+}
+
+export enum PublicationStatus {
+  STATUS_NONE = 'STATUS_NONE',
+  STATUS_PENDING = 'STATUS_PENDING',
+  STATUS_ERROR = 'STATUS_ERROR',
+  STATUS_SUCCESS = 'STATUS_SUCCESS',
+  STATUS_LOGGED_OUT = 'STATUS_AUTH_ERROR',
+}
+
+export type PublicationManagerOptions = {
+  appendTo?: string // If not provided, no button nor dialog will be created
+  websiteId: WebsiteId
+}
+
+// plugin init cod
+export default function publishPlugin(editor, opts) {
+  (editor as PublishableEditor).PublicationManager = new PublicationManager(editor, opts)
+}
+
+function jobStatusToPublicationStatus(status: JobStatus): PublicationStatus {
+  switch (status) {
+  case JobStatus.IN_PROGRESS:
+    return PublicationStatus.STATUS_PENDING
+  case JobStatus.ERROR:
+    return PublicationStatus.STATUS_ERROR
+  case JobStatus.SUCCESS:
+    return PublicationStatus.STATUS_SUCCESS
+  }
+  throw new Error(`Unknown job status ${status}`)
+}
+
+// The publication manager class
+// This class is responsible for the publication dialog and for the publication process
+// It is added to the editor instance as editor.PublicationManager
+export class PublicationManager {
+  /**
+   * Publication dialog
+   * This class is responsible for the  UI
+   */
+  dialog?: PublicationUi
+  /**
+   * Publication settings
+   * This is the data which is stored in the website settings
+   */
+  settings: PublicationSettings
+  /**
+   * Plugin options
+   * This is the data which is passed to the plugin by grapesjs
+   */
+  options: PublicationManagerOptions
+  /**
+   * Publication job during the publication process
+   */
+  job: PublicationJobData | null = null
+  /**
+   * Publication state
+   * This is the state of the publication process
+   */
+  status: PublicationStatus = PublicationStatus.STATUS_NONE
+
+  constructor(private editor: PublishableEditor, opts: PublicationManagerOptions) {
+    this.options = {
+      appendTo: 'options',
+      ...opts,
+    } as PublicationManagerOptions
+    // Save the publication settings in the website settings
+    editor.on('storage:start:store', (data) => {
+      data.publication = this.settings
+    })
+    // load publication settings from the website
+    editor.on('storage:end:load', (data) => {
+      this.settings = data.publication ?? {}
+    })
+    // Add the publish command to the editor
+    editor.Commands.add(cmdPublicationStart, () => this.startPublication())
+    editor.Commands.add(cmdPublicationLogin, (editor: PublishableEditor, sender: any, provider: BackendData) => this.goLogin(provider))
+    editor.Commands.add(cmdPublicationLogout, () => this.goLogout())
+    // Add the publication dialog to the editor
+    if (this.options.appendTo) {
+      this.dialog = new PublicationUi(editor, {
+        appendTo: this.options.appendTo,
+      })
+    } else {
+      console.info('PublicationUi is disabled because no appendTo option is set')
+    }
+  }
+
+  async goLogin(provider: BackendData) {
+    window.open(provider.authUrl, '_blank')
+    return new Promise(resolve => {
+      const onMessage = async (event) => {
+        const data = event.data as ApiBackendLoggedInPostMessage
+        if (data?.type === 'login') {
+          window.removeEventListener('message', onMessage)
+          if (data.error) {
+            this.status = PublicationStatus.STATUS_LOGGED_OUT
+            this.settings.backend = null
+            this.dialog && this.dialog.displayError(data.message, this.job, this.status, this.settings)
+          } else {
+            this.editor.trigger('publish:login')
+            const { backend/*, user, websiteMeta */ }: LoginStatus = await loginStatus(data.backendId, provider.type, this.options.websiteId)
+            this.settings.backend = backend
+            await this.startPublication()
+          }
+        }
+      }
+      window.addEventListener('message', onMessage, false)
+    })
+  }
+
+  async goLogout() {
+    try {
+      await logout(this.settings.backend.backendId, BackendType.HOSTING)
+      this.settings.backend = null
+      this.dialog && this.dialog.displayPending(this.job, this.status, this.settings)
+    } catch (e) {
+      console.error('logout error', e)
+      this.status = PublicationStatus.STATUS_ERROR
+      this.dialog && this.dialog.displayError(e.message, this.job, this.status, this.settings)
+    }
+  }
+
+  async startPublication() {
+    if (this.status === PublicationStatus.STATUS_PENDING) throw new Error('Publication is already in progress')
+    this.status = PublicationStatus.STATUS_PENDING
+    if (!this.settings?.backend?.isLoggedIn) {
+      this.status = PublicationStatus.STATUS_LOGGED_OUT
+      this.dialog && this.dialog.displayError('Please login', this.job, this.status, this.settings)
+      return
+    }
+    this.dialog && this.dialog.displayPending(this.job, this.status, this.settings)
+    this.editor.trigger('publish:before')
+    const projectData = this.editor.getProjectData() as WebsiteData
+    const siteSettings = this.editor.getModel().get('settings') as WebsiteSettings
+    // Update assets URL to display outside the editor
+    const assetsFolderUrl = this.settings?.assets?.url
+    if (assetsFolderUrl) {
+      const publishedUrl = path => `${assetsFolderUrl}/${path.split('/').pop()}`
+      // New URLs for assets, according to site config
+      onAll(this.editor, c => {
+        // Attributes
+        if (c.get('type') === 'image') {
+          const path = c.get('src')
+          c.set('tmp-src', path)
+          c.set('src', publishedUrl(path))
+        }
+        //// Inline styles
+        //// This is handled by the editor.Css.getAll loop
+        //const bgUrl = c.getStyle()['background-image']?.match(/url\('(.*)'\)/)?.pop()
+        //if(bgUrl) {
+        //  c.set('tmp-bg-url', bgUrl)
+        //  c.setStyle({
+        //    ...c.getStyle(),
+        //    'background-image': `url('${publishedUrl(bgUrl)}')`,
+        //  })
+        //}
+      })
+      this.editor.Css.getAll()
+        .forEach(c => {
+          const bgUrl = c.getStyle()['background-image']?.match(/url\('(.*)'\)/)?.pop()
+          if (bgUrl) {
+            c.setStyle({
+              ...c.getStyle(),
+              'background-image': `url('${publishedUrl(bgUrl)}')`,
+            })
+            c.set('tmp-bg-url-css' as any, bgUrl)
+          }
+        })
+    }
+    // Build the files structure
+    const files = await this.getFiles(siteSettings)
+
+    // Create the data to send to the server
+    const data: PublicationData = {
+      ...projectData,
+      settings: siteSettings,
+      publication: this.settings,
+      files,
+    }
+    // Reset asset URLs
+    if (assetsFolderUrl) {
+      onAll(this.editor, c => {
+        if (c.get('type') === 'image' && c.has('tmp-src')) {
+          c.set('src', c.get('tmp-src'))
+          c.set('tmp-src')
+        }
+        //// This is handled by the editor.Css.getAll loop
+        //if(c.getStyle()['background-image'] && c.has('tmp-bg-url')) {
+        //  c.setStyle({
+        //    ...c.getStyle(),
+        //    'background-image': `url('${c.get('tmp-bg-url')}')`,
+        //  })
+        //  c.set('tmp-bg-url')
+        //}
+      })
+      this.editor.Css.getAll()
+        .forEach(c => {
+          if (c.has('tmp-bg-url-css' as any)) {
+            c.setStyle({
+              ...c.getStyle(),
+              'background-image': `url('${c.get('tmp-bg-url-css' as any)}')`,
+            })
+            c.set('tmp-bg-url-css' as any)
+          }
+        })
+    }
+    this.editor.trigger('publish:start', data)
+    try {
+      const id = this.options.websiteId
+      const [url, job] = await publish(
+        id,
+        data as ApiPublicationPublishRequestBody
+      )
+      this.job = job
+      this.status = jobStatusToPublicationStatus(this.job.status)
+      // Save the publication settings
+      if(this.settings.url !== url) {
+        this.settings.url = url
+        await this.editor.store(null)
+      }
+      this.trackProgress()
+    } catch (e) {
+      console.error('publish error', e)
+      if(e.code === 401) {
+        this.status = PublicationStatus.STATUS_LOGGED_OUT
+        this.settings.backend = null
+        this.dialog && this.dialog.displayError('Please login.', this.job, this.status, this.settings)
+      } else {
+        this.status = PublicationStatus.STATUS_ERROR
+        this.dialog && this.dialog.displayError(`An error occured, your site is not published. ${e.message}`, this.job, this.status, this.settings)
+      }
+      this.editor.trigger('publish:stop', { success: false, message: e.message })
+      return
+    }
+  }
+
+  async getFiles(siteSettings: WebsiteSettings) {
+    return this.editor.Pages.getAll().map(page => {
+      const pageSettings = page.get('settings') as WebsiteSettings
+      const pageName = this.settings?.autoHomePage !== false && page.get('type') === 'main' ? 'index' : (page.get('name') || page.get('type'))
+      function getSetting(name) {
+        return (pageSettings || {})[name] || (siteSettings || [])[name] || ''
+      }
+      const component = page.getMainComponent()
+      const slug = getPageSlug(pageName)
+      return {
+        html: `
+      <!DOCTYPE html>
+      <html lang="${getSetting('lang')}">
+      <head>
+      <link rel="stylesheet" href="${this.settings?.css?.url || ''}/${slug}.css" />
+      ${siteSettings?.head || ''}
+      ${pageSettings?.head || ''}
+      <title>${getSetting('title')}</title>
+      <link rel="icon" href="${getSetting('favicon')}" />
+      ${['description', 'og:title', 'og:description', 'og:image']
+    .map(prop => `<meta property="${prop}" content="${getSetting(prop)}"/>`)
+    .join('\n')
+}
+      </head>
+      ${this.editor.getHtml({ component })}
+      </html>
+      `,
+        css: this.editor.getCss({ component }),
+        cssPath: `${this.settings?.css?.path || ''}/${slug}${this.settings?.css?.ext || '.css'}`,
+        htmlPath: `${this.settings?.html?.path || ''}/${slug}${this.settings?.html?.ext || '.html'}`,
+      }
+    })
+  }
+
+  async trackProgress() {
+    try {
+      this.job = await publicationStatus(this.job.jobId)
+      this.status = jobStatusToPublicationStatus(this.job.status)
+    } catch (e) {
+      this.status = PublicationStatus.STATUS_ERROR
+      this.dialog && this.dialog.displayError(`An error occured, your site is not published. ${e.message}`, this.job, this.status, this.settings)
+      this.editor.trigger('publish:stop', { success: false, message: e.message })
+      return
+    }
+    if (this.job.status === JobStatus.IN_PROGRESS) {
+      setTimeout(() => this.trackProgress(), 2000)
+    } else {
+      this.editor.trigger('publish:stop', { success: this.job.status === JobStatus.SUCCESS, message: this.job.message })
+    }
+    this.dialog && this.dialog.displayPending(this.job, this.status, this.settings)
+  }
+}

package/src/ts/client/grapesjs/PublicationUi.ts

@@ -0,0 +1,320 @@
+/*
+ * 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 { html, render, TemplateResult } from 'lit-html'
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
+//import { map } from 'lit-html/directives/map.js'
+import { cmdPublicationLogin, cmdPublicationLogout, cmdPublicationStart, PublicationStatus, PublishableEditor } from './PublicationManager'
+import { BackendData, BackendType, PublicationJobData, PublicationSettings } from '../../types'
+import { backendList } from '../services'
+
+/**
+ * @fileoverview define the publication dialog
+ * This is the UI of the publication feature
+ * It is a dialog which allows the user to login to a backend and publish the website
+ * It also displays the publication status and logs during the publication process
+ * This class is used by the PublicationManager
+ * This is optional, you can use the PublicationManager without this UI
+ */
+
+// **
+// Constants
+export const cmdPublish = 'publish-open-dialog'
+
+// **
+// Types
+export type PublicationDialogOptions = {
+  appendTo: string
+}
+
+// **
+// Utils
+function cleanupLogEntry(arr: string[][]): string {
+  return arr[arr.length - 1]
+    ?.map(str => str.replace(/\[.*\]/g, '').trim())
+    ?.filter(str => !!str)
+    ?.join('\n')
+}
+
+/**
+ * Class to manage the publication dialog
+ */
+export class PublicationUi {
+  /**
+   * Dialog state
+   */
+  private isOpen = false
+  /**
+   * Dialog content
+   */
+  private errorMessage = ''
+  /**
+   * Dialog element
+   * This is the DOM element of the dialog
+   */
+  private el: HTMLElement
+
+  /**
+   * Initialize the dialog and the publish button
+   */
+  constructor(private editor: PublishableEditor, private options: PublicationDialogOptions) {
+    // Reference to the dialog element
+    this.el = this.createDialogElements()
+    // Add the publish command to the editor
+    const openDialog = () => this.openDialog()
+    const closeDialog = () => this.closeDialog()
+    editor.Commands.add(cmdPublish, {
+      run(editor: PublishableEditor) { openDialog() },
+      stop(editor: PublishableEditor) { closeDialog() },
+    })
+  }
+
+  // **
+  // Convenient state checkers
+  isSuccess(status: PublicationStatus) {
+    return status === PublicationStatus.STATUS_SUCCESS
+  }
+  isPending(status: PublicationStatus) {
+    return status === PublicationStatus.STATUS_PENDING
+  }
+  isError(status: PublicationStatus) {
+    return status === PublicationStatus.STATUS_ERROR
+  }
+  isLoggedOut(status: PublicationStatus) {
+    return status === PublicationStatus.STATUS_LOGGED_OUT
+  }
+
+  // **
+  // Functions to open and close the dialog
+  getDialogElements(): { el: HTMLElement, primary: HTMLElement, secondary: HTMLElement } {
+    const el = document.querySelector('#publish-dialog') as HTMLElement
+    const primary = el?.querySelector('#publish-button--primary') as HTMLElement
+    const secondary = el?.querySelector('#publish-button--secondary') as HTMLElement
+    if(!el || !primary || !secondary) throw new Error('Publication dialog elements not found')
+    return { el, primary, secondary }
+  }
+  createDialogElements(): HTMLElement {
+    // Create the dialog element
+    const el = document.createElement('div')
+    el.id = 'publish-dialog'
+    el.className = 'silex-dialog-inline silex-dialog gjs-two-color'
+    document.body.append(el)
+    // Create the publish button
+    this.editor.Panels.addButton(this.options.appendTo, {
+      id: 'publish-button',
+      className: 'silex-button--size publish-button',
+      command: cmdPublish,
+      attributes: { title: 'Publish' },
+      label: '<span class="fa-solid fa-upload"></span><span class="silex-button--small">Publish</span>',
+    })
+    return el
+  }
+  move(rect) {
+    Object.keys(rect).forEach(key => this.el.style[key] = rect[key] + 'px')
+  }
+
+  // **
+  // Functions to render the dialog
+  private async renderDialog(job: PublicationJobData, status: PublicationStatus, settings: PublicationSettings) {
+    try {
+      if(this.isOpen && (!status || !settings)) throw new Error('PublicationUi: open but no status or settings')
+      render(html`
+      ${!this.isOpen ? '' : settings.backend ? await this.renderOpenDialog(job, status, settings) : await this.renderLoginDialog(status, settings)}
+    `, this.el)
+      if (this.isOpen) {
+        this.el.classList.remove('silex-dialog-hide')
+      } else {
+        this.el.classList.add('silex-dialog-hide')
+      }
+    } catch (err) {
+      console.error('Error while rendering the dialog', err)
+    }
+  }
+  async renderOpenDialog(job: PublicationJobData, status: PublicationStatus, settings: PublicationSettings): Promise<TemplateResult> {
+    return html`
+    <main>
+      ${this.isPending(status) ? html`
+        <p>Publication in progress</p>
+      ` : ''}
+      ${this.isSuccess(status) ? html`
+        <p>Publication success</p>
+        ${settings.url ? html`<a href="${settings.url}" target="_blank">Click here to view the published website</a>` : ''}
+      ` : ''}
+      ${this.isError(status) || this.isLoggedOut(status) ? html`
+        <p>Publication error</p>
+        <div>${unsafeHTML(this.errorMessage)}</div>
+      ` : ''}
+      ${job && job.message ? html`
+        <div>${unsafeHTML(job.message)}</div>
+      ` : ''}
+      ${this.isPending(status) ? html`
+        <progress
+          value=""
+          style="width: 100%;"
+        ></progress>
+      ` : ''}
+      ${job && job.logs?.length ? html`
+        <br><details>
+          <summary>Logs</summary>
+          <pre style="
+            max-width: 100%;
+            max-height: 50vh;
+            overflow: auto;
+            font-size: x-small;
+            "
+          >${unsafeHTML(cleanupLogEntry(job.logs))}
+          </pre>
+        </details>
+      ` : ''}
+      ${job && job.errors?.length ? html`
+        <br><details>
+          <summary>Errors</summary>
+          <pre style="
+            max-width: 100%;
+            max-height: 50vh;
+            overflow: auto;
+            font-size: x-small;
+            "
+          >${unsafeHTML(cleanupLogEntry(job.errors))}
+          </pre>
+        </details>
+      ` : ''}
+    </main>
+    <footer>
+      ${this.isPending(status) || this.isLoggedOut(status) ? '' : html`
+        <button
+          class="silex-button silex-button--primary"
+          id="publish-button--primary"
+          @click=${() => this.editor.Commands.run(cmdPublicationStart)}
+        >Publish</button>
+      `}
+      ${this.isLoggedOut(status) ? html`
+        <button
+          class="silex-button silex-button--primary"
+          id="publish-button--primary"
+          @click=${() => this.editor.Commands.run(cmdPublicationLogin)}
+        >Login</button>
+      `: settings.backend.disableLogout ? '' : html`
+        <button
+          class="silex-button silex-button--secondary"
+          id="publish-button--secondary"
+          @click=${() => this.editor.Commands.run(cmdPublicationLogout)}
+        >Logout</button>
+      `}
+      <button
+        class="silex-button silex-button--secondary"
+        id="publish-button--secondary"
+        @click=${() => this.editor.Commands.stop(cmdPublish)}
+      >Close</button>
+    </footer>
+    `
+  }
+  async renderLoginDialog(status: PublicationStatus, settings: PublicationSettings): Promise<TemplateResult> {
+    try {
+      const hostingProviders = await backendList(BackendType.HOSTING)
+      const loggedProvider: BackendData = hostingProviders.find(provider => provider.isLoggedIn)
+
+      if (loggedProvider) {
+        settings.backend = loggedProvider
+        this.editor.Commands.run(cmdPublicationStart)
+        return html``
+      }
+      return html`
+      <main>
+        <p>You need to login to publish your website</p>
+        ${this.isError(status) || this.isLoggedOut(status) ? html`
+          <p>Login error</p>
+          <div>${unsafeHTML(this.errorMessage)}</div>
+        ` : ''}
+        ${hostingProviders.map(backend => html`
+          <button
+            class="silex-button silex-button--primary"
+            id="publish-button--primary"
+            @click=${() => this.editor.Commands.run(cmdPublicationLogin, backend)}
+          >Login with ${backend.backendId}</button>
+        `)}
+      </main>
+      <footer>
+        <button
+          class="silex-button silex-button--secondary"
+          id="publish-button--secondary"
+          @click=${() => this.editor.Commands.stop(cmdPublish)}
+        >Close</button>
+      </footer>
+    `
+    } catch (err) {
+      console.error(err)
+      return html`
+      <header>
+        <h3>Oops</h3>
+      </header>
+      <main>
+        <p>Unable to load hosting providers</p>
+        <p>Something went wrong: ${err.message}</p>
+      </main>
+      <footer>
+        <button
+          class="silex-button silex-button--secondary"
+          id="publish-button--secondary"
+          @click=${() => this.editor.Commands.stop(cmdPublish)}
+        >Close</button>
+      </footer>
+    `
+    }
+  }
+  displayPending(job: PublicationJobData, status: PublicationStatus, settings: PublicationSettings) {
+    this.errorMessage = null
+    this.renderDialog(job, status, settings)
+  }
+  displayError(message: string, job: PublicationJobData, status: PublicationStatus, settings: PublicationSettings) {
+    console.error(message, job?.message)
+    this.errorMessage = message
+    this.renderDialog(job, status, settings)
+  }
+  async closeDialog() {
+    this.isOpen = false
+    this.renderDialog(null, null, null)
+  }
+  async toggleDialog() {
+    if (this.isOpen) this.closeDialog()
+    else this.openDialog()
+  }
+  async openDialog() {
+    this.isOpen = true
+
+    // Position
+    const buttonEl = this.editor.Panels.getPanel('options')?.view.el.querySelector('.publish-button')
+    if(buttonEl) {
+      const rect = buttonEl.getBoundingClientRect()
+
+      const width = 450
+      const padding = 10 * 2
+      const minHeight = 50
+      this.move({
+        left: rect.right - width - padding,
+        top: rect.bottom + 10,
+        width,
+        minHeight,
+      })
+    } else {
+      console.error('Unable to find publish button')
+    }
+
+    // Publication
+    this.editor.Commands.run(cmdPublicationStart)
+  }
+}