@silexlabs/silex 3.0.0-alpha.97 → 3.0.0

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

@@ -16,13 +16,15 @@
  */
 
 import { getPageSlug } from '../../page'
-import { ApiConnectorLoggedInPostMessage, ApiConnectorLoginQuery, ApiPublicationPublishBody, ClientSideFile, ClientSideFileType, ConnectorData, ConnectorType, ConnectorUser, JobStatus, PublicationData, PublicationJobData, PublicationSettings, WebsiteData, WebsiteFile, WebsiteId, WebsiteSettings } from '../../types'
+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
@@ -210,27 +212,10 @@ 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)
-    // 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
+  async getPublicationData(projectData, siteSettings): Promise<PublicationData> {
     // Data to publish
     // See assetUrl.ts which is a default transformer, always present
     this.setPublicationTransformers()
-    const projectData = this.editor.getProjectData() as WebsiteData
-    const siteSettings = this.editor.getModel().get('settings') as WebsiteSettings
     // Build the files structure
     const files: ClientSideFile[] = (await this.getHtmlFiles(siteSettings))
       .flatMap(file => ([{
@@ -250,7 +235,13 @@ export class PublicationManager {
           //   .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)
+          //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,
@@ -261,14 +252,45 @@ export class PublicationManager {
     // 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.resetPublicationTransformers()
+    // Let plugins transform the data
     transformFiles(this.editor, data)
     this.editor.trigger(ClientEvent.PUBLISH_DATA, data)
+    // 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 }
+      this.editor.trigger(ClientEvent.PUBLISH_START, {projectData, siteSettings})
+      // 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
+      // Get the data to publish
+      const data = await this.getPublicationData(projectData, siteSettings)
+      // Use the publication API
       const [url, job] = await publish({
         websiteId,
         hostingId: this.settings.connector.connectorId,
@@ -278,12 +300,6 @@ export class PublicationManager {
       })
       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)
@@ -302,41 +318,58 @@ export class PublicationManager {
   }
 
   async getHtmlFiles(siteSettings: WebsiteSettings): Promise<WebsiteFile[]> {
-    return this.editor.Pages.getAll().map(page => {
-      const pageSettings = page.get('settings') as WebsiteSettings
+    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()
+
+      // Get the content from GrapesJS
+      const body = page.getMainComponent()
+      const cssContent = this.editor.getCss({ component: body })
+      const htmlContent = this.editor.getHtml({ component: body })
+
       // Transform the file paths
       const slug = getPageSlug(page.get('name'))
-      const cssInitialPath = `/css/${slug}.css`
+      const cssInitialPath = `/css/${slug}-${await hashString(cssContent)}.css`
       const htmlInitialPath = `/${slug}.html`
-      const cssPermalink = transformPermalink(this.editor, cssInitialPath, ClientSideFileType.CSS)
+      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)
-      const body = this.editor.getHtml({ component })
+
+      // Let plugins transform the data
+      this.editor.trigger(ClientEvent.PUBLISH_PAGE, { page, siteSettings, pageSettings })
+
+      // 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>
+<meta charset="UTF-8">
 <link rel="stylesheet" href="${cssPermalink}" />
 ${siteSettings?.head || ''}
 ${pageSettings?.head || ''}
-<title>${getSetting('title')}</title>
-<link rel="icon" href="${getSetting('favicon')}" />
+${ title ? `<title>${ title }</title>` : '' }
+${ favicon ? `<link rel="icon" href="${favicon}" />` : '' }
 ${['description', 'og:title', 'og:description', 'og:image']
-    .map(prop => `<meta property="${prop}" content="${getSetting(prop)}"/>`)
+    .filter(prop => !!getSetting(prop))
+    .map(prop => `<meta name="${prop}" property="${prop}" content="${getSetting(prop)}"/>`)
     .join('\n')
 }
 </head>
-${body}
+${htmlContent}
 </html>`,
-        css: this.editor.getCss({ component }),
+        css: cssContent,
         cssPath,
         htmlPath,
       }
-    })
+    }))
   }
 
   async trackProgress() {

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

@@ -125,13 +125,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' },
+        label: '<span class="fa-solid fa-upload"></span><span class="silex-button--small">Publish</span>',
+      })
     })
     return el
   }
@@ -158,6 +161,9 @@ export class PublicationUi {
   }
   async renderOpenDialog(job: PublicationJobData, status: PublicationStatus): Promise<TemplateResult> {
     return html`
+    <header>
+      <h3>Publication</h3>
+    </header>
     <main>
       ${this.isPending(status) ? html`
         <p>Publication in progress</p>
@@ -188,8 +194,6 @@ export class PublicationUi {
           <summary>Logs</summary>
           <pre style="
             max-width: 100%;
-            max-height: 50vh;
-            overflow: auto;
             font-size: x-small;
             " >${unsafeHTML(cleanupLogEntry(job.logs))}
           </pre>
@@ -200,8 +204,6 @@ export class PublicationUi {
           <summary>Errors</summary>
           <pre style="
             max-width: 100%;
-            max-height: 50vh;
-            overflow: auto;
             font-size: x-small;
             "
           >${unsafeHTML(cleanupLogEntry(job.errors))}