@silexlabs/silex 3.0.1-0 → 3.0.1

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

@@ -16,12 +16,15 @@
  */
 
 import { getPageSlug } from '../../page'
-import { ApiConnectorLoggedInPostMessage, ApiConnectorLoginQuery, ApiPublicationPublishBody, ApiPublicationPublishQuery, ApiPublicationPublishResponse, ApiPublicationStatusQuery, ApiPublicationStatusResponse, ConnectorData, ConnectorType, ConnectorUser, JobData, JobStatus, PublicationData, PublicationJobData, PublicationSettings, WebsiteData, WebsiteId, WebsiteSettings } from '../../types'
-import { Editor, ProjectData } from 'grapesjs'
+import { ApiConnectorLoggedInPostMessage, ApiConnectorLoginQuery, ApiPublicationPublishBody, ClientSideFile, ClientSideFileType, ConnectorData, ConnectorType, ConnectorUser, JobStatus, Initiator, PublicationData, PublicationJobData, PublicationSettings, WebsiteData, WebsiteFile, WebsiteId, WebsiteSettings } from '../../types'
+import { Editor } from 'grapesjs'
 import { PublicationUi } from './PublicationUi'
 import { getUser, logout, publicationStatus, publish } from '../api'
 import { API_CONNECTOR_LOGIN, API_CONNECTOR_PATH, API_PATH } from '../../constants'
 import { ClientEvent } from '../events'
+import { resetRenderComponents, resetRenderCssRules, transformPermalink, transformFiles, transformPath, renderComponents, renderCssRules } from '../publication-transformers'
+import { displayedToStored } from '../assetUrl'
+import { hashString } from '../utils'
 
 /**
  * @fileoverview Publication manager for Silex
@@ -74,6 +77,9 @@ function jobStatusToPublicationStatus(status: JobStatus): PublicationStatus {
   throw new Error(`Unknown job status ${status}`)
 }
 
+// Orging and path, should we use config.rootUrl?
+const SERVER_URL = window.location.origin + window.location.pathname.replace(/\/$/, '')
+
 // 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
@@ -146,6 +152,27 @@ export class PublicationManager {
   }
 
   async goLogin(connector: ConnectorData) {
+    let preventDefault = false
+    this.editor.trigger(ClientEvent.PUBLISH_LOGIN_START, { connector, publicationManager: this, preventDefault: () => preventDefault = true })
+    if(preventDefault) {
+      this.status = PublicationStatus.STATUS_NONE
+      this.dialog && this.dialog.displayPending(this.job, this.status)
+      return
+    }
+    // Check if the user is already logged in
+    if(connector.isLoggedIn) {
+      this.settings = {
+        ...this.settings, // In case there are options
+        connector,
+      }
+      this.status = PublicationStatus.STATUS_NONE
+      // Save the website with the new settings
+      // WIP: prevent saving during publication
+      // await this.editor.store(null)
+      // Display the dialog
+      this.dialog && this.dialog.displayPending(this.job, this.status)
+      return
+    }
     this.settings = {}
     this.status = PublicationStatus.STATUS_LOGGED_OUT
     this.dialog && this.dialog.displayPending(this.job, this.status)
@@ -153,8 +180,8 @@ export class PublicationManager {
       connectorId: connector.connectorId,
       type: connector.type,
     }
-    window.open(connector.oauthUrl || `${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN}?connectorId=${params.connectorId}&type=${params.type}`, '_blank')
-    return new Promise(resolve => {
+    window.open(connector.oauthUrl || `${SERVER_URL}${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN}?connectorId=${params.connectorId}&type=${params.type}`, '_blank')
+    return new Promise<void>((resolve, reject) => {
       const onMessage = async (event) => {
         const data = event.data as ApiConnectorLoggedInPostMessage
         if (data?.type === 'login') {
@@ -163,6 +190,7 @@ export class PublicationManager {
             this.status = PublicationStatus.STATUS_LOGGED_OUT
             this.settings = {}
             this.dialog && this.dialog.displayError(data.message, this.job, this.status)
+            reject(new Error(data.message))
           } else {
             this.editor.trigger(ClientEvent.PUBLISH_LOGIN_END)
             //const uesr = await getUser({type: connector.type, connectorId: data.connectorId})
@@ -170,10 +198,12 @@ export class PublicationManager {
             this.settings.options = data.options
             this.status = PublicationStatus.STATUS_NONE
             // Save the website with the new settings
-            this.editor.store(null)
+            // WIP: prevent saving during publication
+            // await this.editor.store(null)
             // Display the dialog
             this.dialog && this.dialog.displayPending(this.job, this.status)
             //await this.startPublication()
+            resolve()
           }
         }
       }
@@ -193,49 +223,111 @@ export class PublicationManager {
     }
   }
 
-  /**
-   * Start the publication process
-   * This is the command "publish"
-   */
-  async startPublication() {
-    if (this.status === PublicationStatus.STATUS_PENDING) throw new Error('Publication is already in progress')
-    this.status = PublicationStatus.STATUS_PENDING
-    this.job = null
-    this.dialog && this.dialog.displayPending(this.job, this.status)
-    this.editor.trigger(ClientEvent.PUBLISH_START)
-    const projectData = this.editor.getProjectData() as WebsiteData
-    const siteSettings = this.editor.getModel().get('settings') as WebsiteSettings
+  async getPublicationData(projectData, siteSettings, preventDefault: () => void): Promise<PublicationData> {
+    // Data to publish
+    // See assetUrl.ts which is a default transformer, always present
+    this.setPublicationTransformers()
     // Build the files structure
-    const files = await this.getFiles(siteSettings)
-
+    const files: ClientSideFile[] = (await this.getHtmlFiles(siteSettings, preventDefault))
+      .flatMap(file => ([{
+        path: file.htmlPath, // Already "transformed" in getHtmlFiles
+        content: file.html,
+        type: ClientSideFileType.HTML,
+      } as ClientSideFile, {
+        path: file.cssPath, // Already "transformed" in getHtmlFiles
+        content: file.css,
+        type: ClientSideFileType.CSS,
+      } as ClientSideFile]))
+      .concat(projectData.assets
+        .map(asset => {
+          // TODO: is this needed?
+          // // Remove /assets that is added by grapesjs
+          // const initialPath = asset.src
+          //   .replace(/^\/assets/, '')
+          // Transform the file paths with the transformers
+          const path = transformPath(this.editor, asset.src, ClientSideFileType.ASSET)
+          //const src = transformPermalink(this.editor, asset.src, ClientSideFileType.ASSET)
+          // This is done in transformPermalink and transformPath but other transformers may change it
+          // So we do this only using displayedToStored for the path
+          // As path is used to download the asset
+          const src = displayedToStored(asset.src)
+            // Remove the /asset prefix to keep only the file name
+            .replace(/^\/assets\//, '')
+          return {
+            ...asset,
+            path,
+            src,
+            type: ClientSideFileType.ASSET, // Replaces grapesjs's 'image' type
+          } as ClientSideFile
+        }))
     // Create the data to send to the server
     const data: PublicationData = {
       ...projectData,
+      assets: projectData.assets.map(asset => ({
+        ...asset,
+        src: displayedToStored(asset.src),
+      })),
       settings: siteSettings,
       publication: this.settings,
       files,
     }
-    this.editor.trigger(ClientEvent.PUBLISH_DATA, data)
-    const storageUser = this.editor.getModel().get('user') as ConnectorUser
-    if(!storageUser) throw new Error('User not logged in to a storage connector')
-    if(!this.settings.connector?.connectorId) throw new Error('User not logged in to a hosting connector')
+    this.resetPublicationTransformers()
+    // Let plugins transform the data
+    transformFiles(this.editor, data)
+    this.editor.trigger(ClientEvent.PUBLISH_DATA, { data, preventDefault, publicationManager: this })
+    // Return the data
+    return data
+  }
+
+  /**
+   * Start the publication process
+   * This is the command "publish"
+   */
+  async startPublication() {
     try {
+      if (this.status === PublicationStatus.STATUS_PENDING) throw new Error('Publication is already in progress')
+      this.status = PublicationStatus.STATUS_PENDING
+      this.job = null
+      this.dialog && this.dialog.displayPending(this.job, this.status)
+      // Get the data to publish, clone the objects because plugins can change it
+      const projectData = { ...this.editor.getProjectData() as WebsiteData }
+      const siteSettings = { ...this.editor.getModel().get('settings') as WebsiteSettings }
+      let preventDefaultStart = false
+      this.editor.trigger(ClientEvent.PUBLISH_START, {projectData, siteSettings, preventDefault: () => preventDefaultStart = true, publicationManager: this })
+      if(preventDefaultStart) {
+        this.status = PublicationStatus.STATUS_NONE
+        this.dialog && this.dialog.displayPending(this.job, this.status)
+        return
+      }
+      // Get the data to publish
+      let preventDefaultData = false
+      const data = await this.getPublicationData(projectData, siteSettings, () => preventDefaultData = true)
+      if(preventDefaultData) {
+        this.status = PublicationStatus.STATUS_NONE
+        this.dialog && this.dialog.displayPending(this.job, this.status)
+        return
+      }
+      // User and where to publish
+      const storageUser = this.editor.getModel().get('user') as ConnectorUser
+      if(!storageUser) throw new Error('User not logged in to a storage connector')
+      if(!this.settings.connector?.connectorId) throw new Error('User not logged in to a hosting connector')
       const websiteId = this.options.websiteId
+      const storageId = storageUser.storage.connectorId
+      // Use the publication API
       const [url, job] = await publish({
         websiteId,
         hostingId: this.settings.connector.connectorId,
-        storageId: storageUser.storage.connectorId,
+        storageId,
         data: data as ApiPublicationPublishBody,
         options: this.settings.options,
       })
+
+      // in gitlab pages situation, getUrl from gitlabHostingConnector gives publication url obtained with Gitlab API pages
+      console.info('Gitlab url: ', url)
+      // could be used in an future UI
+
       this.job = job
       this.status = jobStatusToPublicationStatus(this.job.status)
-      // Save the publication settings
-      // Useless because the url is useful after publish only
-      //if(this.settings.url !== url) {
-      //  this.settings.url = url
-      //  await this.editor.store(null)
-      //}
       this.trackProgress()
     } catch (e) {
       console.error('publish error', e)
@@ -253,37 +345,61 @@ export class PublicationManager {
     }
   }
 
-  async getFiles(siteSettings: WebsiteSettings) {
-    return this.editor.Pages.getAll().map(page => {
-      const pageSettings = page.get('settings') as WebsiteSettings
+  async getHtmlFiles(siteSettings: WebsiteSettings, preventDefault): Promise<WebsiteFile[]> {
+    return Promise.all(this.editor.Pages.getAll().map(async page => {
+      // Clone the settings because plugins can change them
+      siteSettings = { ...siteSettings }
+      const pageSettings = { ...page.get('settings') as WebsiteSettings }
+      // Utility function to get a setting from the page or the site settings
       function getSetting(name) {
         return (pageSettings || {})[name] || (siteSettings || [])[name] || ''
       }
-      const component = page.getMainComponent()
-      const slug = page.get('slug') || getPageSlug(page.get('name') || page.get('type'))
+
+      // Get the content from GrapesJS
+      const body = page.getMainComponent()
+      const cssContent = this.editor.getCss({ component: body })
+      console.time(`getHtml ${page.getId()} ${page.get('name')}`)
+      const htmlContent = this.editor.getHtml({ component: body })
+      console.timeEnd(`getHtml ${page.getId()} ${page.get('name')}`)
+
+      // Transform the file paths
+      const slug = getPageSlug(page.get('name'))
+      const cssInitialPath = `/css/${slug}-${await hashString(cssContent)}.css`
+      const htmlInitialPath = `/${slug}.html`
+      const cssPermalink = transformPermalink(this.editor, cssInitialPath, ClientSideFileType.CSS, Initiator.HTML)
+      const cssPath = transformPath(this.editor, cssInitialPath, ClientSideFileType.CSS)
+      const htmlPath = transformPath(this.editor, htmlInitialPath, ClientSideFileType.HTML)
+
+      // Let plugins transform the data
+      this.editor.trigger(ClientEvent.PUBLISH_PAGE, { page, siteSettings, pageSettings, preventDefault, publicationManager: this })
+
+      // Useful data for HTML result
+      const title = getSetting('title')
+      const favicon = getSetting('favicon')
+      // Return the HTML file
       return {
-        html: `
-      <!DOCTYPE html>
-      <html lang="${getSetting('lang')}">
-      <head>
-      <link rel="stylesheet" href="/css/${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)}"/>`)
+        html: `<!DOCTYPE html>
+<html lang="${getSetting('lang')}">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="${cssPermalink}" />
+${siteSettings?.head || ''}
+${pageSettings?.head || ''}
+${ title ? `<title>${ title }</title>` : '' }
+${ favicon ? `<link rel="icon" href="${favicon}" />` : '' }
+${['description', 'og:title', 'og:description', 'og:image']
+    .filter(prop => !!getSetting(prop))
+    .map(prop => `<meta name="${prop}" property="${prop}" content="${getSetting(prop)}"/>`)
     .join('\n')
 }
-      </head>
-      ${this.editor.getHtml({ component })}
-      </html>
-      `,
-        css: this.editor.getCss({ component }),
-        cssPath: `/${slug}.css`,
-        htmlPath: `/${slug}.html`,
+</head>
+${htmlContent}
+</html>`,
+        css: cssContent,
+        cssPath,
+        htmlPath,
       }
-    })
+    }))
   }
 
   async trackProgress() {
@@ -304,4 +420,14 @@ export class PublicationManager {
     }
     this.dialog && this.dialog.displayPending(this.job, this.status)
   }
+
+  private setPublicationTransformers() {
+    renderComponents(this.editor)
+    renderCssRules(this.editor)
+  }
+
+  private resetPublicationTransformers() {
+    resetRenderComponents(this.editor)
+    resetRenderCssRules(this.editor)
+  }
 }

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

@@ -21,6 +21,9 @@ import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
 import { cmdPublicationLogin, cmdPublicationLogout, cmdPublicationStart, PublicationStatus, PublishableEditor } from './PublicationManager'
 import { ConnectorData, ConnectorType, PublicationJobData, PublicationSettings } from '../../types'
 import { connectorList } from '../api'
+import { defaultKms } from './keymaps'
+import { titleCase } from '../utils'
+import { ClientEvent } from '../events'
 
 /**
  * @fileoverview define the publication dialog
@@ -36,6 +39,12 @@ import { connectorList } from '../api'
 // Constants
 export const cmdPublish = 'publish-open-dialog'
 
+// **
+// Semantic Icons
+const svgConnector = '<svg width="100%" height="100%" viewBox="0 0 44 23" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g><g><path d="M2,11.427c0,0 3.846,-2.655 7.376,0c3.531,2.656 7.45,0 7.45,0" style="fill:none;stroke:#a291ff;stroke-width:4px;"/></g><path d="M32.165,6.424l9.156,0" style="fill:none;stroke:#a291ff;stroke-width:4px;"/><path d="M32.165,2l0,18.854" style="fill:none;stroke:#a291ff;stroke-width:4px;"/><path d="M32.165,16.43l9.156,0" style="fill:none;stroke:#a291ff;stroke-width:4px;"/><path d="M26.253,20.854c-5.203,0 -9.427,-4.224 -9.427,-9.427c-0,-5.203 4.224,-9.427 9.427,-9.427l5.912,-0l0,18.854l-5.912,0Z" style="fill:none;stroke:#a291ff;stroke-width:4px;"/></g></svg>'
+const svgSuccess = '<svg viewBox="0 0 40 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><path d="M3,12.969l11.868,11.869l21.838,-21.838" style="fill:none;stroke:#37bf76;stroke-width:6px;"/></svg>'
+const svgError = '<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g><path d="M3,28.915l25.915,-25.915" style="fill:none;stroke:#cf4443;stroke-width:6px;"/><path d="M28.915,28.915l-25.915,-25.915" style="fill:none;stroke:#cf4443;stroke-width:6px;"/></g></svg>'
+
 // **
 // Types
 export type PublicationDialogOptions = {
@@ -71,6 +80,8 @@ export class PublicationUi {
 
   public settings: PublicationSettings
 
+  private sender = null
+
   /**
    * Initialize the dialog and the publish button
    */
@@ -80,8 +91,12 @@ export class PublicationUi {
     // Add the publish command to the editor
     const openDialog = () => this.openDialog()
     const closeDialog = () => this.closeDialog()
+    const setSender = sender => this.sender = sender
     editor.Commands.add(cmdPublish, {
-      run(editor: PublishableEditor) { openDialog() },
+      run(editor: PublishableEditor, sender) {
+        setSender(sender)
+        openDialog()
+      },
       stop(editor: PublishableEditor) { closeDialog() },
     })
   }
@@ -106,12 +121,9 @@ export class PublicationUi {
 
   // **
   // 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 }
+  userContent: TemplateResult | null = null
+  setUserContent(content: TemplateResult) {
+    this.userContent = content
   }
   createDialogElements(): HTMLElement {
     // Create the dialog element
@@ -119,13 +131,16 @@ export class PublicationUi {
     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>',
+    // Let the other buttons be added, we want to be last
+    setTimeout(() => {
+      // 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 (${titleCase(defaultKms.kmOpenPublish.keys, '+')})` },
+        label: '<span class="fa-solid fa-upload"></span><span class="silex-button--small">Publish</span>',
+      })
     })
     return el
   }
@@ -143,6 +158,8 @@ export class PublicationUi {
     `, this.el)
       if (this.isOpen) {
         this.el.classList.remove('silex-dialog-hide')
+        const primaryBtn = this.el.querySelector('.silex-button--primary') as HTMLElement
+        if (primaryBtn) primaryBtn.focus()
       } else {
         this.el.classList.add('silex-dialog-hide')
       }
@@ -152,79 +169,83 @@ export class PublicationUi {
   }
   async renderOpenDialog(job: PublicationJobData, status: PublicationStatus): Promise<TemplateResult> {
     return html`
+    <header>
+      <span>${unsafeHTML(svgConnector)} Connected to <span class="connector">${this.settings.connector.displayName}</span></span>
+      ${this.settings.connector.disableLogout ? '' : html`
+      <button
+        class="silex-button silex-button--secondary"
+        id="publish-button--secondary"
+        @click=${() => this.editor.Commands.run(cmdPublicationLogout)}
+      >Disconnect
+      </button>`}
+    </header>
     <main>
-      ${this.isPending(status) ? html`
-        <p>Publication in progress</p>
-      ` : ''}
-      ${this.isReady(status) ? html`
-        <p>You are connected to ${this.settings.connector.displayName}</p><p>Click on the publish button to publish your website</p>
-        ${this.settings.options && Object.entries(this.settings.options).length && html`<p>Publication options: <ul>${ Object.entries(this.settings.options).map(([key, value]) => html`<li>${key}: ${value}</li>`) }</ul></p>`}
-      ` : ''}
-      ${this.isSuccess(status) ? html`
-        <p>Publication success</p>
-        ${this.settings.url ? html`<p><a href="${this.settings.url}" target="_blank">Click here to view the published website</a></p>` : ''}
-      ` : ''}
-      ${this.isError(status) || this.isLoggedOut(status) ? html`
-        <p>Publication error</p>
-        <div>${unsafeHTML(this.errorMessage)}</div>
-      ` : ''}
-      ${job && job.message ? html`
-        <p>${unsafeHTML(job.message)}</p>
-      ` : ''}
-      ${this.isPending(status) ? html`
-        <progress
-          value=""
-          style="width: 100%;"
-        ></progress>
-      ` : ''}
-      ${job && job.logs?.length && job.logs[0].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 && job.errors[0].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>
-      ` : ''}
+      ${this.userContent || html`
+        ${this.isPending(status) ? html`
+          <p>Publication in progress...</p>
+        ` : ''}
+        ${this.isReady(status) ? html`
+          <p>Click on the button below to publish your website.</p>
+          ${this.settings.options && Object.entries(this.settings.options).length && html`<p>Publication options: <ul>${ Object.entries(this.settings.options).map(([key, value]) => html`<li>${key}: ${value}</li>`) }</ul></p>`}
+        ` : ''}
+        ${this.isSuccess(status) ? html`
+          <h3 class="status">Publication success ${unsafeHTML(svgSuccess)}</h3>
+          ${this.settings.options?.websiteUrl ? html`<p><a href="${this.settings.options.websiteUrl}" target="_blank">Click here to view the published website</a></p>` : ''}
+        ` : ''}
+        ${this.isError(status) || this.isLoggedOut(status) ? html`
+          <h3 class="status">Publication error ${unsafeHTML(svgError)}</h3>
+          <details open>
+            <summary>Details</summary>
+            ${unsafeHTML(this.errorMessage)}
+          </details>
+        ` : ''}
+        ${job?.message ? html`
+          <details open>
+            <summary>Details</summary>
+            ${unsafeHTML(job.message)}
+          </details>
+        ` : ''}
+        ${this.isPending(status) ? html`
+          <progress
+            value=""
+            style="width: 100%;"
+          ></progress>
+        ` : ''}
+        ${job?.logs?.length && job.logs[0].length ? html`
+          <details>
+            <summary>Logs</summary>
+            <div class="logs">${unsafeHTML(cleanupLogEntry(job.logs))}</div>
+          </details>
+        ` : ''}
+        ${job?.errors?.length && job.errors[0].length ? html`
+          <details>
+            <summary>Errors</summary>
+            <pre style="
+              max-width: 100%;
+              font-size: x-small;
+              "
+            >${unsafeHTML(cleanupLogEntry(job.errors))}
+            </pre>
+          </details>
+        ` : ''}
+        ${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>
+        `}
+      `}
     </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, this.settings.connector)}
-        >Login</button>
-      `: this.settings.connector.disableLogout ? '' : html`
-        <button
-          class="silex-button silex-button--secondary"
-          id="publish-button--secondary"
-          @click=${() => this.editor.Commands.run(cmdPublicationLogout)}
-        >Logout</button>
-      `}
+        >Connect</button>
+      `: ''}
+      <a href="https://docs.silex.me/en/user/publish" target="_blank">Help</a>
       <button
         class="silex-button silex-button--secondary"
         id="publish-button--secondary"
@@ -237,27 +258,35 @@ export class PublicationUi {
     try {
       render(html`<main><p>Loading</p></main>`, this.el)
       const hostingConnectors = await connectorList({ type: ConnectorType.HOSTING })
-      const loggedConnector: ConnectorData = hostingConnectors.find(connector => connector.isLoggedIn)
-      if (loggedConnector) {
-        this.settings.connector = loggedConnector
+      const loggedConnectors: ConnectorData[] = hostingConnectors.filter(connector => connector.isLoggedIn)
+      if (hostingConnectors.length === 1 && loggedConnectors.length === 1) {
+        this.settings.connector = loggedConnectors[0]
         return this.renderOpenDialog(null, PublicationStatus.STATUS_NONE)
       }
+      //const loggedConnector: ConnectorData = hostingConnectors.find(connector => connector.isLoggedIn)
+      //if (loggedConnector) {
+      //  this.settings.connector = loggedConnector
+      //  return this.renderOpenDialog(null, PublicationStatus.STATUS_NONE)
+      //}
       return html`
       <main>
-        <p>You need to login to publish your website</p>
+        <p>You need to select a hosting connector to publish your website.</p>
         ${this.isError(status) || this.isLoggedOut(status) ? html`
           <p>Login error</p>
           <div>${unsafeHTML(this.errorMessage)}</div>
         ` : ''}
-        ${hostingConnectors.map(connector => html`
+        <div class="buttons">
+          ${hostingConnectors.map(connector => html`
           <button
-            class="silex-button silex-button--primary"
+            class="silex-button"
             id="publish-button--primary"
             @click=${() => this.editor.Commands.run(cmdPublicationLogin, connector)}
-          >Login with ${connector.connectorId}</button>
+          >${connector.displayName}</button>
         `)}
+        </div>
       </main>
       <footer>
+        <a href="https://docs.silex.me/en/user/publish" target="_blank">Help</a>
         <button
           class="silex-button silex-button--secondary"
           id="publish-button--secondary"
@@ -276,6 +305,7 @@ export class PublicationUi {
         <p>Something went wrong: ${err.message}</p>
       </main>
       <footer>
+        <a href="https://docs.silex.me/en/user/publish" target="_blank">Help</a>
         <button
           class="silex-button silex-button--secondary"
           id="publish-button--secondary"
@@ -297,6 +327,11 @@ export class PublicationUi {
   async closeDialog() {
     this.isOpen = false
     this.renderDialog(null, null)
+    if (this.sender && typeof this.sender.set === 'function') {
+      this.sender.set('active', 0)
+    } // Deactivate the button to make it ready to be clicked again
+    this.sender = null
+    this.editor.trigger(ClientEvent.PUBLICATION_UI_CLOSE, { publicationUi: this })
   }
   async toggleDialog() {
     if (this.isOpen) this.closeDialog()
@@ -326,5 +361,6 @@ export class PublicationUi {
     // Publication
     //this.editor.Commands.run(cmdPublicationStart)
     this.renderDialog(null, PublicationStatus.STATUS_NONE)
+    this.editor.trigger(ClientEvent.PUBLICATION_UI_OPEN, { publicationUi: this })
   }
 }