@silexlabs/silex 3.5.0 → 3.5.1-2

package/src/css/silex.scss

@@ -60,11 +60,70 @@
 }
 
 // full screen settings
-.settings-dialog > div {
-  max-width: none;
-  width: 100%;
+.settings-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
   height: 100vh;
+  z-index: $z-dialog-inline;
+  pointer-events: auto;
   overflow: auto;
+  display: flex;
+  flex-direction: column;
+
+  .settings-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--primaryColor);
+    overflow: hidden;
+  }
+  .settings-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--gjs-border-color, #ddd);
+  }
+  .settings-header h3 {
+    margin: 0;
+    font-size: 18px;
+  }
+  .settings-close {
+    color: inherit;
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .settings-body {
+    flex: 1;
+    overflow: auto;
+    padding: 0;
+  }
+  .settings-body .silex-form {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .settings-body .silex-sidebar-dialog {
+    flex: 1;
+  }
+  footer {
+    position: fixed;
+    z-index: 10;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 20px 0;
+  }
   form.silex-form {
     padding-bottom: 100px; // leave space for fixed footer
     textarea {
@@ -91,7 +150,7 @@
     .silex-version {
       float: left;
       padding: 0 15px;
-      font-size: x-small;
+      font-size: small;
     }
   }
   .CodeMirror {
@@ -164,7 +223,7 @@ input.silex-button[type="submit"] {
     margin: 5px;
   }
   main {
-    width: 100%;
+    width: 93%;
   }
 }
 

package/src/ts/client/config.ts

@@ -29,6 +29,7 @@ import { addSection, removeSection } from './grapesjs/settings'
 // Plugins
 import publishCustomCodeBlock from './publish-custom-code-block'
 import publishFonts from './publish-fonts'
+import { EleventyPluginOptions } from './grapesjs/cms'
 
 /**
  * @fileoverview Silex client side config
@@ -118,6 +119,27 @@ export class ClientConfig extends Config {
   fontsServerUrl = 'https://fonts.googleapis.com'
   fontsApiUrl = 'https://www.googleapis.com'
 
+  /**
+   * CMS configuration options
+   * @default Default CMS configuration with enabled: true
+   */
+  cmsConfig: Partial<EleventyPluginOptions> & { enabled?: boolean } = {
+    enabled: true,
+    enable11ty: true,
+    cacheBuster: false,
+    dataSources: [],
+    dir: {
+      input: '',
+      html: '',
+      assets: 'assets',
+      css: 'css',
+    },
+    urls: {
+      css: '/css',
+      assets: '/assets',
+    },
+  }
+
   /**
    * Init GrapesJS config which depend on the config file properties
    */
@@ -179,6 +201,7 @@ export class ClientConfig extends Config {
    * Add a section to the settings dialog
    */
   addSettings(section: SettingsSection, siteOrPage: 'site' | 'page', position: 'first' | 'last' | number = 'last') {
+    console.warn('addSettings API is deprecated, use the command instead:')
     addSection(section, siteOrPage, position)
   }
 

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/breadcrumbs.ts

@@ -47,9 +47,10 @@ export default function (editor, options) {
 
   editor.on('component:selected style:target component:drag:end', () => renderBreadcrumbs())
   function renderBreadcrumbs() {
-    let component = editor.getSelected() ?? editor.Pages.getSelected().getMainComponent()
+    const selectedPage = editor.Pages?.getSelected()
+    let component = editor.getSelected() ?? selectedPage?.getMainComponent()
 
-    if(!breadcrumbsContainer) return
+    if(!breadcrumbsContainer || !component) return
 
     // Clear the breadcrumbs container
     breadcrumbsContainer.innerHTML = ''

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

@@ -0,0 +1,333 @@
+import { DataSourceType, Field, IDataSource, Type, addDataSource, addFilters, removeFilters } from '@silexlabs/grapesjs-data-source'
+import { EleventyPluginOptions, Silex11tyPluginWebsiteSettings } from './index'
+import { Editor } from 'grapesjs'
+import { i18nFilters } from './filters'
+import { ClientEvent } from '../../events'
+
+//import { cmdPauseAutoSave } from '@silexlabs/silex/src/ts/client/grapesjs/storage'
+const cmdPauseAutoSave = 'pause-auto-save'
+
+export default function(editor: Editor, opts: EleventyPluginOptions): void {
+  editor.on(`
+    ${ ClientEvent.SETTINGS_SAVE_END }
+    storage:after:load
+    `, () => {
+    updateFilters(editor, opts)
+  })
+  updateFilters(editor, opts)
+  if(opts.enable11ty) {
+    // Add the 11ty data source using the new functional API
+    const ds = new EleventyDataSource()
+    editor.runCommand(cmdPauseAutoSave)
+
+    // Add the data source
+    addDataSource(ds)
+
+    // Wait for the next tick to avoid triggering a save
+    setTimeout(() => {
+      editor.stopCommand(cmdPauseAutoSave)
+    })
+  }
+}
+
+function updateFilters(editor: Editor, opts: EleventyPluginOptions) {
+  const settings = (editor.getModel().get('settings') || {}) as Silex11tyPluginWebsiteSettings
+  if(settings.eleventyI18n) {
+    addFilters(i18nFilters)
+  } else if (!opts.i18nPlugin) {
+    removeFilters(i18nFilters)
+  }
+}
+
+export const EleventyDataSourceId = 'eleventy'
+
+export class EleventyDataSource implements IDataSource {
+  /**
+   * Unique identifier of the data source
+   * This is used to retrieve the data source from the editor
+   */
+  public id = EleventyDataSourceId
+  public label = 'Eleventy'
+  public url = ''
+  public type = 'graphql' as DataSourceType
+  public method = 'POST'
+  public headers = {}
+  public hidden = true
+  public readonly = true
+
+  private eventListeners: Record<string, ((...args: unknown[]) => void)[]> = {}
+
+  // Simple event handling
+  on(event: string, callback: (...args: unknown[]) => void): void {
+    if (!this.eventListeners[event]) {
+      this.eventListeners[event] = []
+    }
+    this.eventListeners[event].push(callback)
+  }
+
+  off(event: string, callback?: (...args: unknown[]) => void): void {
+    if (!this.eventListeners[event]) return
+    if (callback) {
+      this.eventListeners[event] = this.eventListeners[event].filter(cb => cb !== callback)
+    } else {
+      this.eventListeners[event] = []
+    }
+  }
+
+  trigger(event: string, ...args: unknown[]): void {
+    if (!this.eventListeners[event]) return
+    this.eventListeners[event].forEach(callback => callback(...args))
+  }
+
+  /**
+   * Implement IDatasource
+   */
+  async connect(): Promise<void> {}
+  isConnected(): boolean { return true }
+
+  /**
+   * Implement IDatasource
+   */
+  getQuery(/*expressions: Expression[]*/): string { return '' }
+
+  /**
+   * Implement IDatasource
+   */
+  getTypes(): Type[] {
+    return [{
+      id: 'string',
+      label: 'String',
+      dataSourceId: 'eleventy',
+      fields: [],
+    }, {
+      id: 'number',
+      label: 'Number',
+      dataSourceId: 'eleventy',
+      fields: [],
+    }, {
+      id: 'date',
+      label: 'Date',
+      dataSourceId: 'eleventy',
+      fields: [],
+    }, {
+      id: 'page',
+      label: 'page',
+      dataSourceId: 'eleventy',
+      fields: [{
+        id: 'url',
+        label: 'url',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'fileSlug',
+        label: 'fileSlug',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'filePathStem',
+        label: 'filePathStem',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'date',
+        label: 'date',
+        typeIds: ['date'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'inputPath',
+        label: 'inputPath',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'outputPath',
+        label: 'outputPath',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'outputFileExtension',
+        label: 'outputFileExtension',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'lang',
+        label: 'lang',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }],
+    }, {
+      id: 'pagination',
+      label: 'pagination',
+      dataSourceId: 'eleventy',
+      fields: [{
+        id: 'hrefs',
+        label: 'hrefs',
+        typeIds: ['string'],
+        kind: 'list',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'href',
+        label: 'href',
+        typeIds: ['paginationHref'],
+        kind: 'object',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'pageNumber',
+        label: 'pageNumber',
+        typeIds: ['number'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'pages',
+        label: 'pages',
+        typeIds: ['page'],
+        kind: 'list',
+        dataSourceId: 'eleventy',
+      }],
+    }, {
+      id: 'paginationHref',
+      label: 'paginationHref',
+      dataSourceId: 'eleventy',
+      fields: [{
+        id: 'next',
+        label: 'next',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'previous',
+        label: 'previous',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'first',
+        label: 'first',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'last',
+        label: 'last',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }],
+    }, {
+      id: 'eleventy',
+      label: 'eleventy',
+      dataSourceId: 'eleventy',
+      fields: [{
+        id: 'version',
+        label: 'version',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'generator',
+        label: 'generator',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'env',
+        label: 'env',
+        typeIds: ['env'],
+        kind: 'object',
+        dataSourceId: 'eleventy',
+      }]
+    }, {
+      id: 'env',
+      label: 'env',
+      dataSourceId: 'eleventy',
+      fields: [{
+        id: 'root',
+        label: 'root',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'config',
+        label: 'config',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'source',
+        label: 'source',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'runMode',
+        label: 'runMode',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }],
+    }, {
+      id: 'locale_link',
+      label: 'locale_link',
+      dataSourceId: 'eleventy',
+      fields: [{
+        id: 'url',
+        label: 'url',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'lang',
+        label: 'lang',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'label',
+        label: 'label',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }],
+    }]
+  }
+
+  /**
+   * Implement IDatasource
+   */
+  getQueryables(): Field[] {
+    return [{
+      id: 'page',
+      label: 'page',
+      typeIds: ['page'],
+      kind: 'object',
+      dataSourceId: 'eleventy',
+    //}, {
+    //  id: 'eleventy',
+    //  label: 'eleventy',
+    //  typeIds: ['eleventy'],
+    //  kind: 'object',
+    //  dataSourceId: 'eleventy',
+    //}, {
+    //  id: 'env',
+    //  label: 'env',
+    //  typeIds: ['env'],
+    //  kind: 'object',
+    //  dataSourceId: 'eleventy',
+    }]
+  }
+
+  fetchValues(query: string): Promise<unknown> {
+    console.log('fetch', {query})
+    throw new Error('not implemented yet')
+  }
+}
+
+export class EleventyDataSourceTest extends EleventyDataSource {
+}