@silexlabs/silex 3.5.0 → 3.5.1-2

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

@@ -0,0 +1,124 @@
+import { Component, Editor } from 'grapesjs'
+import { ClientConfig } from '../../config'
+
+export default function(editor: Editor/*, opts: EleventyPluginOptions*/): void {
+  // **
+  // Shortcode
+  editor.BlockManager.add('eleventy-shortcode', {
+    label: 'Shortcode',
+    category: 'Eleventy',
+    content: { type: 'eleventy-shortcode' },
+    media: '<span style="font-size: 50px;">{%</span>',
+  })
+  editor.DomComponents.addType('eleventy-shortcode', {
+    model: {
+      defaults: {
+        traits: [{
+          type: 'shortcode-name',
+          label: 'Shortcode name',
+          name: 'shortcode_name',
+          placeholder: 'shortcode_name',
+        }, {
+          type: 'shortcode-attributes',
+          label: 'Shortcode attributes',
+          name: 'shortcode_attributes',
+          placeholder: 'param1, "example param 2"',
+        }],
+      },
+      init() {
+        let pending = false
+        editor.on('component:add component:remove component:mount', model => {
+          if (pending) return
+          setTimeout(() => {
+            // FIXME: why do we need a timeout?
+            if (model.parent() === this || model === this) {
+              pending = true
+              updateShortcode(this)
+              pending = false
+            }
+          }, 500)
+        })
+      },
+    },
+  })
+  function updateShortcode(component: Component) {
+    const { shortcode_attributes, shortcode_name } = component.get('attributes')
+    const componentsToKeep = component.components()
+      .filter(c => c.view?.el?.nodeType === 1)
+    if (componentsToKeep.length) {
+      // Paired shortcode
+      component.components(`
+        {% ${shortcode_name} ${shortcode_attributes ?? ''} %}
+        <div class="replace_content"></div>
+        {% end${shortcode_name} %}
+        `)
+      const replaceContentDiv = component.components().find(c => c.getClasses().includes('replace_content'))
+      if (!replaceContentDiv) {
+        console.error('No replace_content found', { component, componentsToKeep })
+        return
+      }
+      replaceContentDiv.replaceWith(componentsToKeep)
+    } else {
+      component.components(`
+        {% ${shortcode_name} ${shortcode_attributes ?? ''} %}
+        `)
+    }
+  }
+  editor.TraitManager.addType('shortcode-name', {
+    onEvent({ component }) {
+      updateShortcode(component)
+    },
+  })
+  editor.TraitManager.addType('shortcode-attributes', {
+    onEvent({ component }) {
+      updateShortcode(component)
+    },
+  })
+  // **
+  // Select element
+  editor.BlockManager.add('eleventy-select', {
+    label: 'select',
+    category: 'Eleventy',
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 9c0-.6-.5-1-1.3-1H3.4C2.5 8 2 8.4 2 9v6c0 .6.5 1 1.3 1h17.4c.8 0 1.3-.4 1.3-1V9zm-1 6H3V9h18v6z"></path><path d="M18.5 13l1.5-2h-3zM4 11.5h11v1H4z"></path></svg>',
+    content: { type: 'eleventy-select' },
+  })
+  editor.DomComponents.addType('eleventy-select', {
+    model: {
+      defaults: {
+        tagName: 'select',
+        droppable: true,
+        // // Prevent the drop down from opening on click
+        // script: function() {
+        //   this.addEventListener('mousedown', event => {
+        //     event.preventDefault()
+        //   })
+        // },
+      },
+    },
+  })
+  // **
+  // Option element
+  editor.BlockManager.add('eleventy-option', {
+    label: 'option',
+    category: 'Eleventy',
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
+    content: { type: 'eleventy-option' },
+  })
+  editor.DomComponents.addType('eleventy-option', {
+    model: {
+      defaults: {
+        tagName: 'option',
+        droppable: false,
+        //draggable: 'select, optgroup', // Sometimes we need a container between the select and the option to have states inside the loop
+        traits: [
+          {
+            type: 'text',
+            label: 'Value',
+            name: 'value',
+            placeholder: 'Value',
+          },
+        ],
+      },
+    },
+  })
+}

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

@@ -0,0 +1,163 @@
+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: 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 gjs-pn-active gjs-four-color',
+    command: COMMAND_PREVIEW_TOGGLE,
+    togglable: false,
+    attributes: { title: 'Enable/Disable data source preview (Ctrl+Alt+V)' }
+  }, {
+    // Separator for visual grouping of data source buttons in the panel
+    id: 'data-source-separator',
+    className: 'data-source-separator',
+    command: () => {},
+    togglable: false,
+    attributes: { title: '' }
+  }], { at: 0 })
+
+  // 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('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, () => {
+    isActive = false
+    updatePreviewActiveButton(editor)
+  })
+
+  // 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) 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 }
+  `, () => {
+    setRefreshButtonState(editor, 'ready')
+  })
+  editor.on(DATA_SOURCE_ERROR, (error: Error) => {
+    console.error('Data source error', error)
+    setRefreshButtonState(editor, 'error')
+  })
+  editor.on(DATA_SOURCE_DATA_LOAD_START, () => {
+    setRefreshButtonState(editor, 'loading')
+  })
+
+  // Register keyboard shortcuts for data source actions
+  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,214 @@
+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 `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
+      }
+    }
+
+    // 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
+      }
+    }
+
+    // Final fallback to index-based name (1-indexed)
+    return `Page ${index + 1}`
+  } catch (e) {
+    console.error('Error generating display name for item:', e)
+    // Final fallback to index-based name (1-indexed)
+    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: {},
+}]