@silexlabs/silex 3.5.1-1 → 3.5.1-2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.5.1-1",
+  "version": "3.5.1-2",
   "version:backwardcompat": "3.0.0",
   "author": "Alex Hoyau (https://lexoyo.me/)",
   "main": "dist/server/server/index.js",
@@ -99,13 +99,13 @@
   "dependencies": {
     "@fontsource/ubuntu": "^5.0.13",
     "@fortawesome/fontawesome-free": "6.6.0",
-    "@silexlabs/grapesjs-advanced-selector": "1.3.0",
-    "@silexlabs/grapesjs-data-source": "0.1.1-5",
+    "@silexlabs/grapesjs-advanced-selector": "1.3.1-0",
+    "@silexlabs/grapesjs-data-source": "0.1.1-6",
     "@silexlabs/grapesjs-filter-styles": "1.2.0",
     "@silexlabs/grapesjs-fonts": "1.2.0",
     "@silexlabs/grapesjs-keymaps-dialog": "1.2.0",
     "@silexlabs/grapesjs-loading": "1.2.0",
-    "@silexlabs/grapesjs-notifications": "0.2.0",
+    "@silexlabs/grapesjs-notifications": "0.2.1-0",
     "@silexlabs/grapesjs-storage-rate-limit": "1.2.0",
     "@silexlabs/grapesjs-symbols": "1.3.0",
     "@silexlabs/grapesjs-ui-suggest-classes": "1.2.0",

package/src/css/grapesjs.scss

@@ -233,6 +233,11 @@
 .gjs-sm-sector .gjs-sm-sector-label {
     margin-right: 0.3em
 }
+
+.fa-grip-vertical:before {
+  content: "\f58e";
+  font-weight: 900;
+}
 .gjs-sm-sector .gjs-sm-sector-title::before,
 .gjs-sm-sector .gjs-sm-sector-title::after {
     content: 'o';

package/src/css/page-panel.scss

@@ -19,13 +19,21 @@
       align-items: center;
       background-color: $darkerPrimaryColor;
       border-bottom: 1px solid rgba(0, 0, 0, 0.25);
-      cursor: pointer;
+      cursor: cursor;
+      transition: opacity 0.2s ease, background-color 0.2s ease;
       &:hover {
         background-color: $primaryColor;
         .pages__page-name {
           color: $quaternaryColor;
         }
       }
+      &:active {
+        cursor: grabbing;
+      }
+    }
+    .pages__page-dragging {
+      opacity: 0.4;
+      cursor: grabbing !important;
     }
     .pages__page-selected {
       background-color: $lighterPrimaryColor;
@@ -41,20 +49,31 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      height: 13px;
-      font-size: initial;
+      font-size: 13px;
       text-transform: capitalize;
-      padding: 10px 6px;
+      padding: 6px;
       flex: 1;
       text-align: left;
+      display: flex;
+      align-items: center;
+      gap: 4px;
     }
     .pages__icon {
-      padding: 10px 6px;
+      padding: 6px;
       cursor: pointer;
+      font-size: 12px;
     }
     .pages__icon:hover {
       color: $quaternaryColor;
     }
+    .pages__drag-handle {
+      cursor: grab;
+      opacity: 0.6;
+      flex-shrink: 0;
+      &:hover {
+        opacity: 1;
+      }
+    }
   }
   .#{$pn-prefix}buttons {
     flex-direction: column;

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

@@ -20,7 +20,7 @@ import { ApiConnectorLoggedInPostMessage, ApiConnectorLoginQuery, ApiPublication
 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 { API_CONNECTOR_LOGIN, API_CONNECTOR_PATH, API_PATH, SILEX_VERSION } from '../../constants'
 import { ClientEvent } from '../events'
 import { resetRenderComponents, resetRenderCssRules, transformPermalink, transformFiles, transformPath, renderComponents, renderCssRules } from '../publication-transformers'
 import { hashString } from '../utils'
@@ -288,6 +288,8 @@ export class PublicationManager {
       // 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 }
+      // Check for missing SEO tags and warn user
+      this.checkSeoTags(siteSettings)
       let preventDefaultStart = false
       this.editor.trigger(ClientEvent.PUBLISH_START, {projectData, siteSettings, preventDefault: () => preventDefaultStart = true, publicationManager: this })
       if(preventDefaultStart) {
@@ -354,6 +356,158 @@ export class PublicationManager {
     return files
   }
 
+  /**
+   * Helper function to check if a viewport meta tag exists in the head content
+   * @param headContent - HTML content from head settings
+   * @returns true if viewport meta tag is found
+   */
+  private hasViewportMeta(headContent: string): boolean {
+    if (!headContent) return false
+    // Check for viewport meta tag with various formats
+    const viewportPattern = /<meta[^>]*name\s*=\s*["']viewport["'][^>]*>/i
+    return viewportPattern.test(headContent)
+  }
+
+  /**
+   * Get the default viewport meta tag if no viewport is present
+   * @param siteHead - Head content from site settings
+   * @param pageHead - Head content from page settings
+   * @returns viewport meta tag or empty string if already present
+   */
+  private ensureViewportMeta(siteHead: string, pageHead: string): string {
+    if (this.hasViewportMeta(siteHead) || this.hasViewportMeta(pageHead)) {
+      return ''
+    }
+    return '<meta name="viewport" content="width=device-width, initial-scale=1.0">'
+  }
+
+  /**
+   * Helper function to check if a generator meta tag exists in the head content
+   * @param headContent - HTML content from head settings
+   * @returns true if generator meta tag is found
+   */
+  private hasGeneratorMeta(headContent: string): boolean {
+    if (!headContent) return false
+    // Check for generator meta tag with various formats
+    const generatorPattern = /<meta[^>]*name\s*=\s*["']generator["'][^>]*>/i
+    return generatorPattern.test(headContent)
+  }
+
+  /**
+   * Get the default generator meta tag if no generator is present
+   * @param siteHead - Head content from site settings
+   * @param pageHead - Head content from page settings
+   * @returns generator meta tag or empty string if already present
+   */
+  private ensureGeneratorMeta(siteHead: string, pageHead: string): string {
+    if (this.hasGeneratorMeta(siteHead) || this.hasGeneratorMeta(pageHead)) {
+      return ''
+    }
+    return `<meta name="generator" content="Silex v${ SILEX_VERSION }">`
+  }
+
+  /**
+   * Helper function to check if a canonical link exists in the head content
+   * @param headContent - HTML content from head settings
+   * @returns true if canonical link is found
+   */
+  private hasCanonicalLink(headContent: string): boolean {
+    if (!headContent) return false
+    const canonicalPattern = /<link[^>]*rel\s*=\s*["']canonical["'][^>]*>/i
+    return canonicalPattern.test(headContent)
+  }
+
+  /**
+   * Helper function to check if alternate links exist in the head content
+   * @param headContent - HTML content from head settings
+   * @returns true if alternate links are found
+   */
+  private hasAlternateLinks(headContent: string): boolean {
+    if (!headContent) return false
+    const alternatePattern = /<link[^>]*rel\s*=\s*["']alternate["'][^>]*>/i
+    return alternatePattern.test(headContent)
+  }
+
+  /**
+   * Check for missing SEO tags and emit warnings
+   * @param siteSettings - Site settings
+   */
+  private checkSeoTags(siteSettings: WebsiteSettings): void {
+    const pages = this.editor.Pages.getAll()
+
+    // Utility function to get a setting from the page or the site settings
+    const getSetting = (pageSettings: WebsiteSettings, name: string) =>
+      (pageSettings || {})[name] || (siteSettings || {})[name] || ''
+
+    for (const page of pages) {
+      const pageSettings = page.get('settings') as WebsiteSettings || {}
+      const siteHead = siteSettings?.head || ''
+      const pageHead = pageSettings?.head || ''
+      const pageName = page.get('name') || 'Unnamed page'
+      const bodyComponent = page.getMainComponent()
+      const componentId = bodyComponent?.getId()
+      const pageId = page.getId()
+
+      // Check for lang attribute
+      const lang = getSetting(pageSettings, 'lang')
+      if (!lang || lang.trim() === '') {
+        this.editor.runCommand('notifications:add', {
+          id: `seo-validation-lang-${pageId}`,
+          type: 'warning',
+          message: `Page "${pageName}": Missing lang attribute on &lt;html&gt; tag. This is important for accessibility and SEO.`,
+          componentId,
+          group: 'seo-validation'
+        })
+      }
+
+      // Check for title
+      const title = getSetting(pageSettings, 'title')
+      if (!title || title.trim() === '') {
+        this.editor.runCommand('notifications:add', {
+          id: `seo-validation-title-${pageId}`,
+          type: 'warning',
+          message: `Page "${pageName}": Missing &lt;title&gt; tag. This is critical for SEO.`,
+          componentId,
+          group: 'seo-validation'
+        })
+      }
+
+      // Check for description
+      const description = getSetting(pageSettings, 'description')
+      if (!description || description.trim() === '') {
+        this.editor.runCommand('notifications:add', {
+          id: `seo-validation-description-${pageId}`,
+          type: 'warning',
+          message: `Page "${pageName}": Missing meta description. This is important for SEO and search results display.`,
+          componentId,
+          group: 'seo-validation'
+        })
+      }
+
+      // Check for canonical link
+      if (!this.hasCanonicalLink(siteHead) && !this.hasCanonicalLink(pageHead)) {
+        this.editor.runCommand('notifications:add', {
+          id: `seo-validation-canonical-${pageId}`,
+          type: 'warning',
+          message: `Page "${pageName}": Missing canonical link. This helps prevent duplicate content issues.`,
+          componentId,
+          group: 'seo-validation'
+        })
+      }
+
+      // Check for alternate links (hreflang for multilingual sites)
+      if (!this.hasAlternateLinks(siteHead) && !this.hasAlternateLinks(pageHead)) {
+        this.editor.runCommand('notifications:add', {
+          id: `seo-validation-alternate-${pageId}`,
+          type: 'warning',
+          message: `Page "${pageName}": Missing alternate links (hreflang). Consider adding these for multilingual sites.`,
+          componentId,
+          group: 'seo-validation'
+        })
+      }
+    }
+  }
+
   async *getHtmlFilesYield(siteSettings: WebsiteSettings, preventDefault): AsyncGenerator<WebsiteFile | undefined> {
     for (const page of this.editor.Pages.getAll()) {
       // Clone the settings because plugins can change them
@@ -395,6 +549,8 @@ export class PublicationManager {
       // Useful data for HTML result
       const title = getSetting('title')
       const favicon = getSetting('favicon')
+      const viewportMeta = this.ensureViewportMeta(clonedSiteSettings?.head || '', pageSettings?.head || '')
+      const generatorMeta = this.ensureGeneratorMeta(clonedSiteSettings?.head || '', pageSettings?.head || '')
 
       // Return the HTML file
       yield {
@@ -402,6 +558,8 @@ export class PublicationManager {
 <html lang="${getSetting('lang')}">
 <head>
 <meta charset="UTF-8">
+${viewportMeta}
+${generatorMeta}
 <link rel="stylesheet" href="${cssPermalink}" />
 ${clonedSiteSettings?.head || ''}
 ${pageSettings?.head || ''}

package/src/ts/client/grapesjs/cms/buttons.ts

@@ -58,76 +58,102 @@ export default function(editor: Editor/*, opts: EleventyPluginOptions*/): void {
   panelButtons.add([{
     id: 'refresh-data-sources',
     className: `${REFRESH_BUTTON_BASE_CLASS} fa-refresh`,
-    command: () => {
-      // Refresh all data sources
-      editor.runCommand(COMMAND_REFRESH)
-    },
+    command: COMMAND_REFRESH,
     togglable: false,
-    attributes: { title: 'Refresh data sources (reload dynamic content) - Ctrl+Alt+R' },
+    attributes: { title: 'Refresh data sources (reload dynamic content) - Ctrl+Alt+R' }
   }, {
     id: 'toggle-data-source-preview',
-    className: 'fa fa-fw data-source-preview-toggle fa-table',
-    command: {
-      run: () => editor.runCommand(COMMAND_PREVIEW_ACTIVATE),
-      stop: () => editor.runCommand(COMMAND_PREVIEW_DEACTIVATE),
-    },
-    togglable: true,
-    active: true,
-    attributes: { title: 'Enable data source preview (Ctrl+Alt+V)' },
+    className: 'fa fa-fw data-source-preview-toggle fa-table gjs-pn-active gjs-four-color',
+    command: COMMAND_PREVIEW_TOGGLE,
+    togglable: false,
+    attributes: { title: 'Enable/Disable data source preview (Ctrl+Alt+V)' }
   }, {
-    // Visual separator after data source buttons
+    // Separator for visual grouping of data source buttons in the panel
     id: 'data-source-separator',
     className: 'data-source-separator',
-    command: () => {}, // No action on click
+    command: () => {},
     togglable: false,
-    attributes: { title: '' },
+    attributes: { title: '' }
   }], { at: 0 })
 
-  // Listen for preview activation/deactivation events to update the button icon and tooltip
-  editor.on(PREVIEW_ACTIVATED, () => {
+  // Update the preview toggle button's tooltip and visual state based on activation
+  let isActive = true
+  function updatePreviewActiveButton(editor) {
     const button = editor.Panels.getButton('options', 'toggle-data-source-preview')
     if (button) {
-      button.set('active', true)
-      button.set('attributes', { title: 'Disable data source preview (Ctrl+Alt+V)' })
+      button.set('attributes', {
+        title: isActive
+          ? 'Disable data source preview (Ctrl+Alt+V)'
+          : 'Enable data source preview (Ctrl+Alt+V)'
+      })
+    }
+    const el = getPanelButtonEl(editor, 'options', '.data-source-preview-toggle')
+    if (el) {
+      if (isActive) {
+        el.classList.add('gjs-pn-active', 'gjs-four-color')
+      } else {
+        el.classList.remove('gjs-pn-active', 'gjs-four-color')
+      }
     }
+  }
+
+  // FIXME: This should not be needed as the state is alreay set in the button definition
+  setTimeout(() => updatePreviewActiveButton(editor), 1000)
+
+  editor.on(PREVIEW_ACTIVATED, () => {
+    isActive = true
+    setTimeout(() => updatePreviewActiveButton(editor))
   })
   editor.on(PREVIEW_DEACTIVATED, () => {
-    const button = editor.Panels.getButton('options', 'toggle-data-source-preview')
-    if (button) {
-      button.set('active', false)
-      button.set('attributes', { title: 'Enable data source preview (Ctrl+Alt+V)' })
-    }
+    isActive = false
+    updatePreviewActiveButton(editor)
   })
 
-  // Listen for preview activation/deactivation events to update the button tooltip and style
-  // The button now handles its own state, so these listeners are not needed.
-  editor.on(DATA_SOURCE_DATA_LOAD_START, () => {
+  // Returns the DOM element for a button in a panel using a selector
+  function getPanelButtonEl(editor, panelId, selector) {
+    const panel = editor.Panels.getPanel(panelId)
+    if (!panel) return null
+    console.log({panel, selector}, panel.view?.el, panel.view?.el?.querySelector(selector))
+    return panel.view
+      ?.el
+      ?.querySelector(selector)
+  }
+
+  // Update the refresh button's visual state and tooltip based on data source loading status
+  function setRefreshButtonState(editor, status) {
     const button = editor.Panels.getButton('options', 'refresh-data-sources')
-    if (button) {
+    if (!button) return
+    switch (status) {
+    case 'loading':
       button.set('className', `${REFRESH_BUTTON_BASE_CLASS} fa-spinner`)
       button.set('title', 'Refreshing data sources (loading dynamic content)...')
+      break
+    case 'error':
+      button.set('className', `${REFRESH_BUTTON_BASE_CLASS} fa-exclamation-triangle`)
+      button.set('title', 'Error refreshing data sources, check the notifications')
+      break
+    default:
+      button.set('className', `${REFRESH_BUTTON_BASE_CLASS} fa-refresh`)
+      button.set('title', 'Refresh data sources (reload dynamic content) - Ctrl+Alt+R')
     }
-  })
+  }
+
+  // Update refresh button state on data source events
   editor.on(`
     ${ DATA_SOURCE_DATA_LOAD_END }
     ${ DATA_SOURCE_DATA_LOAD_CANCEL }
   `, () => {
-    const button = editor.Panels.getButton('options', 'refresh-data-sources')
-    if (button) {
-      button.set('className', `${REFRESH_BUTTON_BASE_CLASS} fa-refresh`)
-      button.set('title', 'Refresh data sources (reload dynamic content) - Ctrl+Alt+R')
-    }
+    setRefreshButtonState(editor, 'ready')
   })
   editor.on(DATA_SOURCE_ERROR, (error: Error) => {
     console.error('Data source error', error)
-    const button = editor.Panels.getButton('options', 'refresh-data-sources')
-    if (button) {
-      button.set('className', `${REFRESH_BUTTON_BASE_CLASS} fa-exclamation-triangle`)
-      button.set('title', 'Error refreshing data sources, check the notifications')
-    }
+    setRefreshButtonState(editor, 'error')
+  })
+  editor.on(DATA_SOURCE_DATA_LOAD_START, () => {
+    setRefreshButtonState(editor, 'loading')
   })
 
-  // Add keyboard shortcuts
+  // Register keyboard shortcuts for data source actions
   editor.Keymaps.add('data-source:refresh', 'ctrl+alt+r', COMMAND_REFRESH, {
     prevent: true,
   })

package/src/ts/client/grapesjs/cms/collection-pages.ts

@@ -172,24 +172,33 @@ function getItemDisplayName(editor: Editor, index: number): string {
     const settings = page?.get('settings') as Silex11tyPluginWebsiteSettings | undefined
 
     const body = page?.getMainComponent()
-    if (!body) return
-
-    if (settings?.eleventySeoTitle || settings?.eleventyPermalink) {
-      // Parse the permalink expression
-      const nameExpression = toExpression(settings.eleventySeoTitle || settings.eleventyPermalink)
+    if (!body) return `Page ${index + 1}`
+
+    // Try SEO title first
+    if (settings?.eleventySeoTitle) {
+      const titleExpression = toExpression(settings.eleventySeoTitle)
+      if (Array.isArray(titleExpression) && titleExpression.length > 0) {
+        const title = getValue(titleExpression, body, false)
+        if (typeof title === 'string' && title.trim()) return title
+      }
+    }
 
-      if (Array.isArray(nameExpression) && nameExpression.length > 0) {
-        const name = getValue(nameExpression, body, false)
-        if (typeof name === 'string') return name
+    // Try permalink second
+    if (settings?.eleventyPermalink) {
+      const permalinkExpression = toExpression(settings.eleventyPermalink)
+      if (Array.isArray(permalinkExpression) && permalinkExpression.length > 0) {
+        const permalink = getValue(permalinkExpression, body, false)
+        if (typeof permalink === 'string' && permalink.trim()) return permalink
       }
     }
-    return `Page ${index}`
+
+    // Final fallback to index-based name (1-indexed)
+    return `Page ${index + 1}`
   } catch (e) {
-    console.error('Error generating permalink for item:', e)
+    console.error('Error generating display name for item:', e)
+    // Final fallback to index-based name (1-indexed)
+    return `Page ${index + 1}`
   }
-
-  // Final fallback to index-based name
-  return `Page ${index + 1}`
 }
 
 function handleItemClick(editor: Editor, index: number) {

package/src/ts/client/grapesjs/css-props.ts

@@ -243,19 +243,6 @@ export default (editor: Editor, opts) => {
       info: 'Controls content overflow in a block.',
     }, { at: 6 })
 
-    editor.StyleManager.addProperty('dimension', {
-      name: 'Scroll Behavior',
-      property: 'scroll-behavior',
-      type: 'select',
-      defaults: '',
-      options: [
-        { id: '', value: '', name: '' },
-        { id: 'auto', value: 'auto', name: 'auto' },
-        { id: 'smooth', value: 'smooth', name: 'smooth' }
-      ],
-      info: 'Sets smooth or auto scroll behavior.',
-    }, { at: 7 })
-
     editor.StyleManager.removeProperty('dimension', 'margin')
     editor.StyleManager.addProperty('dimension', {
       name: 'Margin',
@@ -794,6 +781,18 @@ export default (editor: Editor, opts) => {
       ],
       info: 'The column-span CSS property makes it possible for an element to span across all columns when its value is set to all.',
     }, { at: 9 })
+    editor.StyleManager.addProperty('extra', {
+      name: 'Scroll Behavior',
+      property: 'scroll-behavior',
+      type: 'select',
+      defaults: '',
+      options: [
+        { id: '', value: '', name: '' },
+        { id: 'auto', value: 'auto', name: 'auto' },
+        { id: 'smooth', value: 'smooth', name: 'smooth' }
+      ],
+      info: 'Sets smooth or auto scroll behavior.',
+    }, { at: 10 })
     editor.StyleManager.addProperty('extra', {
       name: 'Scroll Snap Type',
       property: 'scroll-snap-type',
@@ -824,7 +823,7 @@ export default (editor: Editor, opts) => {
         ],
       }],
       info: 'The scroll-snap-type CSS property sets the direction and mode of enforced snap points on the scroll container.',
-    }, { at: 10 })
+    }, { at: 11 })
     editor.StyleManager.addProperty('extra', {
       name: 'Scroll Padding',
       property: 'scroll-padding',
@@ -832,7 +831,7 @@ export default (editor: Editor, opts) => {
       defaults: '',
       units: ['px', 'em', 'rem', '%'],
       info: 'Defines offsets for scroll snapping.',
-    }, { at: 11 })
+    }, { at: 12 })
     editor.StyleManager.addProperty('extra', {
       name: 'Scroll Snap Align',
       property: 'scroll-snap-align',
@@ -846,7 +845,7 @@ export default (editor: Editor, opts) => {
         { id: 'center', value: 'center', name: 'center' },
       ],
       info: 'Aligns elements to scroll snaps.',
-    }, { at: 11 })
+    }, { at: 13 })
 
     editor.SelectorManager.states.add({name: 'before', label: 'Before'})
     editor.SelectorManager.states.add({name: 'after', label: 'After'})