@silexlabs/silex 3.4.0 → 3.5.1-1

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

@@ -0,0 +1,137 @@
+import { Editor } from 'grapesjs'
+import { ClientConfig } from '../../config'
+import { COMMAND_REFRESH, COMMAND_PREVIEW_ACTIVATE, COMMAND_PREVIEW_DEACTIVATE, DATA_SOURCE_CHANGED, DATA_SOURCE_DATA_LOAD_CANCEL, DATA_SOURCE_DATA_LOAD_END, DATA_SOURCE_DATA_LOAD_START, DATA_SOURCE_ERROR, COMMAND_PREVIEW_TOGGLE, PREVIEW_DEACTIVATED, PREVIEW_ACTIVATED } from '@silexlabs/grapesjs-data-source'
+
+document.querySelector('head')?.insertAdjacentHTML('beforeend', `
+  <style>
+  .data-source-refresh {
+    &.fa-refresh:before {
+      content: "\\f021";
+      font-weight: 900;
+    }
+    &.fa-refresh:hover {
+      transform: rotate(180deg);
+      transition: transform 0.5s;
+    }
+    &.fa-spinner:before {
+      content: "\\f110";
+      font-weight: 900;
+    }
+    &.fa-spinner {
+      animation: fa-spin 2s infinite linear;
+    }
+    &.fa-exclamation-triangle:before {
+      content: "\\f071";
+      font-weight: 900;
+    }
+  }
+  .data-source-preview-toggle {
+    &.fa-table:before {
+      content: "\\f0ce";
+      font-weight: 900;
+    }
+    &.gjs-pn-active {
+      background-color: rgba(0, 0, 0, 0.15);
+    }
+  }
+  .gjs-pn-btn.data-source-separator {
+    min-width: 1px;
+    height: 24px;
+    min-height: auto;
+    background-color: rgba(255, 255, 255, 0.2);
+    margin: 0 15px 0 10px;
+    padding: 0;
+    pointer-events: none;
+    cursor: default;
+  }
+  </style>
+`)
+
+const REFRESH_BUTTON_BASE_CLASS = 'fa fa-fw data-source-refresh'
+
+export default function(editor: Editor/*, opts: EleventyPluginOptions*/): void {
+  // Get the panel to add buttons at specific positions
+  const panel = editor.Panels.getPanel('options')
+  const panelButtons = panel.get('buttons')
+
+  // Add data source buttons at the beginning of the options panel
+  panelButtons.add([{
+    id: 'refresh-data-sources',
+    className: `${REFRESH_BUTTON_BASE_CLASS} fa-refresh`,
+    command: () => {
+      // Refresh all data sources
+      editor.runCommand(COMMAND_REFRESH)
+    },
+    togglable: false,
+    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)' },
+  }, {
+    // Visual separator after data source buttons
+    id: 'data-source-separator',
+    className: 'data-source-separator',
+    command: () => {}, // No action on click
+    togglable: false,
+    attributes: { title: '' },
+  }], { at: 0 })
+
+  // Listen for preview activation/deactivation events to update the button icon and tooltip
+  editor.on(PREVIEW_ACTIVATED, () => {
+    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)' })
+    }
+  })
+  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)' })
+    }
+  })
+
+  // 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, () => {
+    const button = editor.Panels.getButton('options', 'refresh-data-sources')
+    if (button) {
+      button.set('className', `${REFRESH_BUTTON_BASE_CLASS} fa-spinner`)
+      button.set('title', 'Refreshing data sources (loading dynamic content)...')
+    }
+  })
+  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')
+    }
+  })
+  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')
+    }
+  })
+
+  // Add keyboard shortcuts
+  editor.Keymaps.add('data-source:refresh', 'ctrl+alt+r', COMMAND_REFRESH, {
+    prevent: true,
+  })
+  editor.Keymaps.add('data-source:preview-toggle', 'ctrl+alt+v', COMMAND_PREVIEW_TOGGLE, {
+    prevent: true,
+  })
+}

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

@@ -0,0 +1,205 @@
+import { ClientConfig } from '../../config'
+import { CMS_SETTINGS_SECTION_ID, EleventyPluginOptions, Silex11tyPluginWebsiteSettings } from './index'
+import { Editor } from 'grapesjs'
+import { html, render } from 'lit-html'
+import { COMMAND_PREVIEW_REFRESH, COMMAND_REFRESH, DATA_SOURCE_DATA_LOAD_END, getState, getValue, toExpression, setPreviewIndex, Property } from '@silexlabs/grapesjs-data-source'
+import { TemplateResult } from 'lit-html'
+import { ClientEvent } from '../../events'
+import { cmdOpenSettings } from '../settings'
+import { updatePaginationStates } from './states'
+import { debounce } from '../../utils'
+
+// Add CSS for collection pages
+document.querySelector('head')?.insertAdjacentHTML('beforeend', `
+  <style>
+  .pages__empty {
+    padding: 16px;
+    text-align: center;
+    color: #888;
+    font-size: 12px;
+    font-style: italic;
+  }
+  .pages__page {
+    cursor: pointer;
+  }
+  .pages__page:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  </style>
+`)
+
+let currentPage = 0
+export const EVENT_UPDATE_PAGE_LIST = 'update:collection:pages:list'
+
+export default function (editor: Editor, opts: EleventyPluginOptions): void {
+  let done = false
+  editor.once(`
+    ${ ClientEvent.STARTUP_END }
+    storage:end:load
+    `, (...args) => {
+    if (done) throw new Error('FIXME: this should never happen')
+    done = true
+
+    if (!opts.enable11ty) return // Do not add the settings if 11ty is disabled
+
+    const pagesContainer = editor.Panels.getPanel('project-bar-container')
+      ?.view
+      ?.el
+      ?.querySelector('.page-panel-container')
+
+    const container = document.createElement('div')
+    pagesContainer?.appendChild(container)
+
+    // Listen for data changes and page selection
+    editor.on(`
+      ${ DATA_SOURCE_DATA_LOAD_END }
+      storage:load:end
+      page
+      `, debounce<() => void>(() => {
+  currentPage = 0
+  renderCollectionPageList(editor, container)
+}))
+
+    editor.on(`
+      ${ EVENT_UPDATE_PAGE_LIST }
+    `, debounce<() => void>(() => {
+  renderCollectionPageList(editor, container)
+  editor.runCommand(COMMAND_PREVIEW_REFRESH)
+}))
+
+    // Initial render
+    renderCollectionPageList(editor, container)
+  })
+}
+
+function renderCollectionPageList(editor: Editor, container: HTMLElement) {
+  // Guard: Ensure Pages exist, there are pages, and a selected page has a main component
+  const pages = editor.Pages
+  if (
+    !pages ||
+    pages.getAll().length === 0 ||
+    !pages.getSelected()?.getMainComponent()
+  ) {
+    return
+  }
+  render(getHtml(editor), container)
+}
+
+function getHtml(editor: Editor): TemplateResult {
+  const groups = getCollectionData(editor)
+  const result = html`
+    <header class="project-bar__panel-header">
+      <h3 class="project-bar__panel-header-title">Collection Pages</h3>
+    </header>
+    <div class="pages__wrapper">
+      <section class="pages">
+        <main class="pages__main">
+          <div class="pages__list">
+            ${groups.length === 0
+    ? html`<div class="pages__empty">
+      No collection items found.&nbsp;
+      <a
+        href="#"
+        @click=${(event: MouseEvent) => {
+    event.preventDefault()
+    editor.runCommand(cmdOpenSettings, {
+      page: editor.Pages.getSelected(),
+      sectionId: CMS_SETTINGS_SECTION_ID,
+    })
+  }}
+          >
+          Add pagination data in the page settings
+        </a>
+    </div>`
+    : groups.map((items, index) => {
+      // Temporary pagination to this particular page
+      updatePaginationStates(editor, index, true)
+      return html`
+                  <div
+                    class="pages__page ${index === currentPage ? 'pages__page-selected' : ''}"
+                    data-item-index="${index}"
+                    @click=${() => handleItemClick(editor, index)}
+                  >
+                    <div class="pages__page-name">
+                      ${getItemDisplayName(editor, index)}
+                    </div>
+                    ${index === currentPage ? html`<i class="pages__icon pages__remove-btn"></i>` : ''}
+                  </div>
+                `
+    })
+}
+          </div>
+        </main>
+      </section>
+    </div>
+  `
+  if (groups.length > 0) {
+    // Reset to current page
+    updatePaginationStates(editor, currentPage, true)
+  }
+  return result
+}
+
+function getCollectionData(editor: Editor): unknown[][] {
+  const page = editor.Pages.getSelected()
+  const body = page?.getMainComponent()
+
+  if (!body) return
+
+  const settings = page?.get('settings') as Silex11tyPluginWebsiteSettings | undefined
+  const pageData = toExpression(settings?.eleventyPageData) as (Property[] | null)
+  const pageSize = parseInt(settings?.eleventyPageSize || '1')
+
+  if (pageData && pageData.length > 0) {
+    const rawData = getValue(pageData, body as never, false)
+
+    if (Array.isArray(rawData) && rawData.length > 0) {
+      // Group rawData into chunks of size groupBy
+      const grouped: unknown[][] = []
+      for (let i = 0; i < rawData.length; i += pageSize) {
+        grouped.push(rawData.slice(i, i + pageSize))
+      }
+      return grouped
+    }
+  }
+
+  return []
+}
+
+function getItemDisplayName(editor: Editor, index: number): string {
+  try {
+    const page = editor.Pages.getSelected()
+    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 (Array.isArray(nameExpression) && nameExpression.length > 0) {
+        const name = getValue(nameExpression, body, false)
+        if (typeof name === 'string') return name
+      }
+    }
+    return `Page ${index}`
+  } catch (e) {
+    console.error('Error generating permalink for item:', e)
+  }
+
+  // Final fallback to index-based name
+  return `Page ${index + 1}`
+}
+
+function handleItemClick(editor: Editor, index: number) {
+  const page = editor.Pages.getSelected()
+  const body = page?.getMainComponent()
+  currentPage = index
+
+  if (!body) return
+
+  // Trigger the canvas refresh
+  editor.trigger(EVENT_UPDATE_PAGE_LIST)
+  // editor.Canvas.refresh()
+}

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

@@ -0,0 +1,47 @@
+/**
+ * @fileoverview DataSource configuration with defaults
+ */
+
+import DataSourcePlugin from '@silexlabs/grapesjs-data-source'
+import { EleventyPluginOptions } from './index'
+import { Editor, EditorConfig } from 'grapesjs'
+
+const settingsEl = document.createElement('div')
+
+/**
+ * Default for the data source plugin to work without config
+ */
+export function getZeroConfig(editor: Editor): EleventyPluginOptions {
+  return {
+    view: {
+      el: () => editor.Panels.getPanel('views-container')?.view.el,
+      button: () => editor.Panels.getPanel('views')!.get('buttons')!.get('open-tm'),
+      settingsEl: () => settingsEl,
+      defaultFixed: true,
+      // Show all editors by default
+      disableStates: false,
+      disableAttributes: false,
+      disableProperties: false,
+    },
+    previewActive: true,
+    // Liquid filters - will be set by optionsToGrapesJsConfig
+    filters: [],
+    // Default data source
+    dataSources: [],
+    // Enable 11ty publication and filters
+    enable11ty: true,
+    // 11ty plugins
+    // fetchPlugin: { cache: 'no-cache' },
+    // i18nPlugin: true,
+    // Default publication paths
+    dir: {
+      input: '',
+      assets: 'assets',
+      css: 'css',
+    },
+    urls: {
+      assets: '/assets',
+      css: '/css',
+    },
+  }
+}

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

@@ -0,0 +1,53 @@
+import { Field, Filter, Options } from '@silexlabs/grapesjs-data-source'
+import { html } from 'lit-html'
+import { Component } from 'grapesjs'
+
+// Export filters for use in client.ts
+export const eleventyFilters: Filter[] = [{
+  type: 'filter',
+  id: 'log',
+  label: 'log (11ty)',
+  validate: (field: Field | null) => !!field,
+  output: type => type,
+  apply: (str) => {
+    console.info(str)
+    return str
+  },
+  options: {},
+}, {
+  type: 'filter',
+  id: 'slugify',
+  label: 'slugify (11ty)',
+  validate: (field: Field | null) => !!field && field.typeIds.map(t => t.toLowerCase()).includes('string') && field.kind === 'scalar',
+  output: type => type,
+  apply: (str) => {
+    return str?.toString().toLowerCase().replace(/\s+/g, '-')
+  },
+  options: {},
+}]
+
+export const i18nFilters: Filter[] = [{
+  type: 'filter',
+  id: 'locale_url',
+  label: 'locale_url (11ty)',
+  validate: (input: Field | null) => !!input?.typeIds.map(t => t.toLowerCase()).includes('string') && input?.kind === 'scalar',
+  apply: (input: unknown/*, options: Options*/) => input,
+  output: (input: Field | null/*, options: Options*/) => ({ ...(input || {} as Field), typeIds: ['String'] }),
+  options: {
+    locale: '',
+  },
+  quotedOptions: ['locale'],
+  optionsForm: (selected: Component, input: Field | null, options: Options) => html`
+      <label>Locale
+        <input type="text" name="locale" value="${options.locale}" />
+      </label>
+    `,
+}, {
+  type: 'filter',
+  id: 'locale_links',
+  label: 'locale_links (11ty)',
+  validate: (input: Field | null) => !!input?.typeIds.map(t => t.toLowerCase()).includes('string') && input?.kind === 'scalar',
+  apply: (input: unknown/*, options: Options*/) => ([{ url: input, lang: 'en', label: 'English' }, { url: input, lang: 'fr', label: 'Français' }]),
+  output: (input: Field | null/*, options: Options*/) => ({ ...(input || {} as Field), typeIds: ['locale_link'], kind: 'list' }),
+  options: {},
+}]

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

@@ -0,0 +1,130 @@
+import dataSourcePlugin, { DataSourceEditorOptions } from '@silexlabs/grapesjs-data-source'
+import { ClientConfig } from '../../config'
+import { getZeroConfig } from './config'
+import publication from './publication'
+import pageSettings from './page-settings'
+import siteSettings from './site-settings'
+import states from './states'
+import DataSource from './DataSource'
+import merge from 'deepmerge'
+import { WebsiteSettings } from '../../../types'
+import blocks from './blocks'
+import buttons from './buttons'
+import traits from './traits'
+import collectionPages from './collection-pages'
+import { Editor } from 'grapesjs'
+import { eleventyFilters } from './filters'
+
+export const CMS_SETTINGS_SECTION_ID = 'CMS_SETTINGS_SECTION_ID'
+
+export interface EleventyPluginOptions extends DataSourceEditorOptions {
+  // Enable the publication to 11ty version > 2
+  // Default: true
+  esModule?: boolean,
+  // Enable the publication to 11ty
+  // If false, the publication will not publish to 11ty and do not display 11ty data
+  // Default: true
+  enable11ty?: boolean,
+  // Add cache buster to graphql queries
+  // Default: false
+  cacheBuster?: boolean,
+  // 11ty fetch plugin options
+  // https://www.11ty.dev/docs/plugins/fetch/
+  fetchPluginSettings?: object | false,
+  // Internationalization plugin enabled to add specific filters
+  // https://www.11ty.dev/docs/plugins/i18n/
+  i18nPlugin?: boolean,
+  // Publication paths based on 11ty file structure
+  dir?: {
+    // Directory for 11ty input files
+    // Silex will publish in /_silex/ in this directory
+    // E.g. content
+    // Default: ''
+    input?: string,
+    // Directory for the HTML pages relative to the input directory
+    // Silex will add HTML pages to this directory
+    // Default: ''
+    html?: string,
+    // Directory for the assets relative to the input directory
+    // Silex will add assets to this directory
+    // Default assets
+    assets?: string,
+    // Directory for the CSS files relative to the input directory
+    // Silex will add CSS files to this directory
+    // Default css
+    css?: string,
+  },
+  urls?: {
+    // URL where the CSS files will be accessible to the front end
+    // Default: css
+    css?: string,
+    // URL where the assets will be accessible to the front end
+    // Default: assets
+    assets?: string,
+  },
+}
+
+export interface Silex11tyPluginWebsiteSettings extends WebsiteSettings {
+  eleventyPageData?: string,
+  eleventyPermalink?: string,
+  eleventyPageSize?: string,
+  eleventyPageReverse?: boolean,
+  silexLanguagesList?: string,
+  silexLanguagesDefault?: string,
+  eleventyNavigationKey?: string,
+  eleventyNavigationTitle?: string,
+  eleventyNavigationOrder?: string,
+  eleventyNavigationParent?: string,
+  eleventyNavigationUrl?: string,
+  // SEO
+  eleventySeoTitle?: string,
+  eleventySeoDescription?: string,
+  eleventyFavicon?: string,
+  // Social
+  eleventyOGImage?: string,
+  eleventyOGTitle?: string,
+  eleventyOGDescription?: string,
+  // Client side settings
+  eleventyI18n?: boolean,
+  eleventyFetch?: boolean,
+  eleventyImage?: boolean,
+}
+
+export default function (editor: Editor, options: Partial<EleventyPluginOptions> = {}) {
+  const filters = [
+    ...eleventyFilters,
+    'liquid',
+  ]
+
+  // Options with default
+  const opts = merge(
+    getZeroConfig(editor) as EleventyPluginOptions,
+    options,
+    { arrayMerge: (_, sourceArray) => sourceArray }, // Do not merge arrays by concatenation, just replace if present
+  ) as EleventyPluginOptions
+
+  dataSourcePlugin(editor, {
+    ...opts,
+    filters,
+  } as DataSourceEditorOptions)
+
+  DataSource(editor, opts)
+  pageSettings(editor, opts)
+  siteSettings(editor, opts)
+  collectionPages(editor, opts)
+  states(editor)
+  publication(editor, opts)
+  blocks(editor)
+  buttons(editor)
+  traits(editor)
+
+  // Add styles on the editor to override the default colors
+  document.head.insertAdjacentHTML('beforeend', `<style>
+    :root {
+      --ds-lowlight: #292929 !important;
+      --tertiary-color: #a291ff !important;
+      --ds-highlight: #a291ff !important;
+    }
+  </style>`)
+  return editor
+}