import { removeState, setState, toExpression } from '@silexlabs/grapesjs-data-source' import { CMS_SETTINGS_SECTION_ID, EleventyPluginOptions, Silex11tyPluginWebsiteSettings } from './index' import { html, TemplateResult } from 'lit-html' import { Page, Editor, Component } from 'grapesjs' import { WebsiteSettings } from '../../../types' import { ClientEvent } from '../../events' import { cmdAddSection } from '../settings' import { createRef, ref } from 'lit-html/directives/ref.js' /** * Main function to add the settings to the page */ export default function(editor: Editor, opts: EleventyPluginOptions): void { if (!opts.enable11ty) return // Do not add the settings if 11ty is disabled editor.on(ClientEvent.SETTINGS_SAVE_END, handleSettingsSaveEnd(editor)) editor.on(ClientEvent.SETTINGS_CLOSE, handleSettingsClose(editor)) editor.runCommand(cmdAddSection, { section: { id: CMS_SETTINGS_SECTION_ID, label: 'CMS', render: (settings: WebsiteSettings, page: Backbone.Model) => { currentPage = page as Page return renderSettingsSection(settings, editor, currentPage) }, }, siteOrPage: 'page', position: 'last', }) } // Store original settings for revert functionality let originalSettings: Silex11tyPluginWebsiteSettings | null = null let currentPage: Page | undefined function handleSettingsSaveEnd(editor: Editor) { return (page: Page) => { updateBodyStates(editor, page) currentPage = null originalSettings = null } } function handleSettingsClose(editor: Editor) { return () => { if (currentPage && originalSettings) { const currentSettings = currentPage.get('settings') as Silex11tyPluginWebsiteSettings || {} // Revert the whole settings object if it was changed if (JSON.stringify(currentSettings) !== JSON.stringify(originalSettings)) { currentPage.set('settings', originalSettings) updateBodyStates(editor, currentPage) } } currentPage = null originalSettings = null } } function updateTemporarySettings(editor: Editor, page: Page, pageDataEditor: HTMLInputElement | undefined): void { if (!pageDataEditor) return originalSettings = page.get('settings') as WebsiteSettings const eleventyPageData = pageDataEditor.value || '' page.set('settings', { ...originalSettings, eleventyPageData, } as Silex11tyPluginWebsiteSettings) updateBodyStates(editor, page) } /** * Set the state on the body component * This is only useful to build the GraphQL query */ function stateOnBody(editor: Editor, value: string, name: string, body: Component): void { if (value) { const expression = toExpression(value) if (expression) { setState(body, name, { label: name, hidden: true, expression, }) } else { removeState(body, name) editor.runCommand('notifications:add', { type: 'error', message: `Invalid JSON for ${name}`, group: 'Errors in your settings', }) } } else { removeState(body, name) } } /** * Set the state on the body component * This is only useful to build the GraphQL query */ const bodyStateKeys: (keyof Silex11tyPluginWebsiteSettings)[] = [ 'eleventySeoTitle', 'eleventySeoDescription', 'eleventyFavicon', 'eleventyOGImage', 'eleventyOGTitle', 'eleventyOGDescription', 'eleventyPageData', 'eleventyPermalink', ] function updateBodyStates(editor: Editor, page: Page): void { if (page) { const settings = page?.get('settings') as Silex11tyPluginWebsiteSettings | undefined if (settings) { const body = page.getMainComponent() for (const key of bodyStateKeys) { stateOnBody(editor, (settings as Record)[key], key, body) } } } } /** * Render the settings form */ function renderSettingsSection(settings: Silex11tyPluginWebsiteSettings, editor: Editor, page: Page): TemplateResult { const body = page.getMainComponent() const pageDataEditor = createRef() setTimeout(() => { // Update all input fields with their corresponding values from settings // This is needed because we change things without refreshing the DOM in JS ;(document.querySelectorAll(` #settings-${CMS_SETTINGS_SECTION_ID} input, #settings-${CMS_SETTINGS_SECTION_ID} state-editor `) as NodeListOf) .forEach((input: HTMLInputElement) => { const value = settings[input.name] if (input.type === 'checkbox') { input.checked = !!value } else if (typeof value !== 'undefined') { input.value = value } else { input.value = '' } }) }) return html`

The "Silex CMS" feature integrates 11ty static site generator and your favorite headless CMS with Silex.

Tip: Click the “?” icons to view inline help about pagination, expressions, and permalinks.

Related links to the docs:

` }