diff --git a/11ty-test/hosting/index.html b/11ty-test/hosting/index.html index f450506..67f00c2 100644 --- a/11ty-test/hosting/index.html +++ b/11ty-test/hosting/index.html @@ -2,7 +2,7 @@ pagination: data: ds_39ihty.languages size: 1 -permalink: "{% assign var_global_6 = ds_39ihty.languages | first %}{% assign var_global_7 = var_global_6.name %}{{ var_global_7 }}" +permalink: "{% assign var_global_0 = state_iuth-9752_items | first %}{% assign var_global_1 = var_global_0.name | slugify %}{{ var_global_1 }}" --- {% assign state_iuth-9752_pagination = pagination %} diff --git a/11ty-test/storage/default/website.json b/11ty-test/storage/default/website.json index ab898c2..560b5b1 100644 --- a/11ty-test/storage/default/website.json +++ b/11ty-test/storage/default/website.json @@ -1 +1 @@ -{"assets":[],"styles":[{"selectors":["#inue"],"style":{"padding":"10px"}}],"pages":[{"frames":[{"component":{"type":"wrapper","stylable":["background","background-color","background-image","background-repeat","background-attachment","background-position","background-size"],"attributes":{"id":"ijqc"},"components":[{"type":"text","attributes":{"id":"inue"},"components":[{"type":"textnode","content":"Insert your text here"}],"privateStates":[{"id":"innerHTML","expression":[]}]}],"nameForDataSource":"","publicStates":[{"id":"pagination","hidden":true,"label":"Pagination","expression":[{"options":{"filter":"{}"},"type":"property","propType":"field","fieldId":"languages","label":"languages","typeIds":["Language"],"dataSourceId":"ds_39ihty","kind":"list"}]},{"id":"items","hidden":true,"label":"pagination.items","expression":[{"label":"Unused items label","type":"property","propType":"field","fieldId":"languages","dataSourceId":"ds_39ihty","typeIds":["languages"],"kind":"list"}]},{"id":"pages","hidden":true,"label":"pagination.pages","expression":[{"label":"Unused pages label","type":"property","propType":"field","fieldId":"languages","dataSourceId":"ds_39ihty","typeIds":["languages"],"kind":"list"}]},{"id":"eleventySeoTitle","label":"eleventySeoTitle","hidden":true,"expression":[]},{"id":"eleventySeoDescription","label":"eleventySeoDescription","hidden":true,"expression":[]},{"id":"eleventyFavicon","label":"eleventyFavicon","hidden":true,"expression":[]},{"id":"eleventyOGImage","label":"eleventyOGImage","hidden":true,"expression":[]},{"id":"eleventyOGTitle","label":"eleventyOGTitle","hidden":true,"expression":[]},{"id":"eleventyOGDescription","label":"eleventyOGDescription","hidden":true,"expression":[]},{"id":"eleventyPageData","label":"eleventyPageData","hidden":true,"expression":[{"options":{"filter":"{}"},"type":"property","propType":"field","fieldId":"continents","label":"continents","typeIds":["Continent"],"dataSourceId":"ds_39ihty","kind":"list"}]},{"id":"eleventyPermalink","label":"eleventyPermalink","hidden":true,"expression":[{"options":{},"type":"property","propType":"field","fieldId":"languages","label":"languages","typeIds":["Language"],"dataSourceId":"ds_39ihty","kind":"list"},{"type":"filter","id":"first","label":"first","options":{}},{"type":"property","propType":"field","fieldId":"name","label":"name","typeIds":["String"],"dataSourceId":"ds_39ihty","kind":"scalar","options":{}}]},{"id":"ijqc-do1nss4wml","expression":[],"label":"new-state"}],"id-plugin-data-source":"iuth-9752"},"id":"wtYFTcqmbTsXKu7q"}],"type":"main","id":"tE76lAVWbNKM7r8s","settings":{"eleventyPageSize":"1","eleventyPageData":"[{\"options\":{\"filter\":\"{}\"},\"type\":\"property\",\"propType\":\"field\",\"fieldId\":\"languages\",\"label\":\"languages\",\"typeIds\":[\"Language\"],\"dataSourceId\":\"ds_39ihty\",\"kind\":\"list\"}]","eleventyPermalink":"[{\"options\":{},\"type\":\"property\",\"propType\":\"field\",\"fieldId\":\"languages\",\"label\":\"languages\",\"typeIds\":[\"Language\"],\"dataSourceId\":\"ds_39ihty\",\"kind\":\"list\"},{\"type\":\"filter\",\"id\":\"first\",\"label\":\"first\",\"options\":{}},{\"type\":\"property\",\"propType\":\"field\",\"fieldId\":\"name\",\"label\":\"name\",\"typeIds\":[\"String\"],\"dataSourceId\":\"ds_39ihty\",\"kind\":\"scalar\",\"options\":{}}]","eleventySeoTitle":"[]","eleventySeoDescription":"[]","eleventyFavicon":"[]","eleventyOGImage":"[]","eleventyOGTitle":"[]","eleventyOGDescription":"[]","head":""}},{"name":"New page","frames":[{"component":{"type":"wrapper","stylable":["background","background-color","background-image","background-repeat","background-attachment","background-position","background-size"],"nameForDataSource":"","publicStates":[]},"id":"XWnRUJzxYZi3KkkN"}],"id":"bXBXethuIsNjUYe4N"}],"dataSources":[{"id":"ds_39ihty","label":"New data source","type":"graphql","url":"https://countries.trevorblades.com/graphql","method":"POST","headers":{"content-type":"application/json"},"readonly":false}],"settings":{"eleventyI18n":"on","eleventyFetch":"on","eleventyPageData":"[]","eleventyPermalink":"[]","eleventySeoTitle":"[]","eleventySeoDescription":"[]","eleventyFavicon":"[]","eleventyOGImage":"[]","eleventyOGTitle":"[]","eleventyOGDescription":"[]","head":""},"fonts":[],"symbols":[],"publication":{"connector":{"connectorId":"fs-hosting","type":"HOSTING","displayName":"File system hosting","icon":"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202L6%2022%2018%2022%2018%207%2012%202%206%202Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18%202L12%202%2012%208%2018%208%2018%202Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E","disableLogout":true,"isLoggedIn":true,"oauthUrl":null,"color":"#ffffff","background":"#006400"}}} \ No newline at end of file +{"assets":[],"styles":[],"pages":[{"name":"aaa","frames":[{"component":{"type":"wrapper","stylable":["background","background-color","background-image","background-repeat","background-attachment","background-position","background-size"],"attributes":{"id":"i77k"},"nameForDataSource":"","privateStates":[],"id-plugin-data-source":"i77k-4896","publicStates":[{"id":"pagination","hidden":true,"label":"pagination","expression":[{"label":"Unused pagination label","type":"property","propType":"field","fieldId":"pagination","dataSourceId":"eleventy","typeIds":["pagination"],"kind":"object"}]},{"id":"items","hidden":true,"label":"pagination.items","expression":[{"label":"Unused items label","type":"property","propType":"field","fieldId":"continents","dataSourceId":"ds_39ihty","typeIds":["continents"],"kind":"list"}]},{"id":"pages","hidden":true,"label":"pagination.pages","expression":[{"label":"Unused pages label","type":"property","propType":"field","fieldId":"continents","dataSourceId":"ds_39ihty","typeIds":["continents"],"kind":"list"}]},{"id":"eleventySeoTitle","label":"eleventySeoTitle","hidden":true,"expression":[]},{"id":"eleventySeoDescription","label":"eleventySeoDescription","hidden":true,"expression":[]},{"id":"eleventyFavicon","label":"eleventyFavicon","hidden":true,"expression":[]},{"id":"eleventyOGImage","label":"eleventyOGImage","hidden":true,"expression":[]},{"id":"eleventyOGTitle","label":"eleventyOGTitle","hidden":true,"expression":[]},{"id":"eleventyOGDescription","label":"eleventyOGDescription","hidden":true,"expression":[]},{"id":"eleventyPageData","label":"eleventyPageData","hidden":true,"expression":[{"options":{},"type":"property","propType":"field","fieldId":"continents","label":"continents","typeIds":["Continent"],"dataSourceId":"ds_39ihty","kind":"list"}]},{"id":"eleventyPermalink","label":"eleventyPermalink","hidden":true,"expression":[]}]},"id":"XWnRUJzxYZi3KkkN"}],"id":"bXBXethuIsNjUYe4N","settings":{"name":"aaa","eleventyPageSize":"122","eleventyPageReverse":"on","eleventyPageData":"[{\"options\":{},\"type\":\"property\",\"propType\":\"field\",\"fieldId\":\"continents\",\"label\":\"continents\",\"typeIds\":[\"Continent\"],\"dataSourceId\":\"ds_39ihty\",\"kind\":\"list\"}]","eleventyPermalink":"[{\"type\":\"state\",\"storedStateId\":\"items\",\"label\":\"pagination.items\",\"componentId\":\"i77k-4896\",\"exposed\":true},{\"type\":\"filter\",\"id\":\"first\",\"label\":\"first\",\"options\":{}},{\"type\":\"property\",\"propType\":\"field\",\"fieldId\":\"name\",\"label\":\"name\",\"typeIds\":[\"String\"],\"dataSourceId\":\"ds_39ihty\",\"kind\":\"scalar\",\"options\":{}},{\"type\":\"filter\",\"id\":\"slugify\",\"label\":\"slugify (11ty)\",\"options\":{}},{\"type\":\"filter\",\"id\":\"prepend\",\"label\":\"prepend\",\"options\":{\"value\":\"[{\\\"type\\\":\\\"property\\\",\\\"propType\\\":\\\"field\\\",\\\"fieldId\\\":\\\"fixed\\\",\\\"label\\\":\\\"Fixed value\\\",\\\"kind\\\":\\\"scalar\\\",\\\"typeIds\\\":[\\\"String\\\"],\\\"options\\\":{\\\"value\\\":\\\"/test/\\\"}}]\"}},{\"type\":\"filter\",\"id\":\"append\",\"label\":\"append\",\"options\":{\"value\":\"[{\\\"type\\\":\\\"property\\\",\\\"propType\\\":\\\"field\\\",\\\"fieldId\\\":\\\"fixed\\\",\\\"label\\\":\\\"Fixed value\\\",\\\"kind\\\":\\\"scalar\\\",\\\"typeIds\\\":[\\\"String\\\"],\\\"options\\\":{\\\"value\\\":\\\"/index.html\\\"}}]\"}}]","eleventySeoTitle":"[]","eleventySeoDescription":"[]","eleventyFavicon":"[]","eleventyOGImage":"[]","eleventyOGTitle":"[]","eleventyOGDescription":"[]","head":""},"type":"main"}],"dataSources":[{"id":"ds_39ihty","label":"New data source","type":"graphql","url":"https://countries.trevorblades.com/graphql","method":"POST","headers":{"content-type":"application/json"},"readonly":false}],"settings":{"eleventyI18n":"on","eleventyFetch":"on","eleventyPageData":"[]","eleventyPermalink":"[]","eleventySeoTitle":"[]","eleventySeoDescription":"[]","eleventyFavicon":"[]","eleventyOGImage":"[]","eleventyOGTitle":"[]","eleventyOGDescription":"[]","head":""},"fonts":[],"symbols":[],"publication":{"connector":{"connectorId":"fs-hosting","type":"HOSTING","displayName":"File system hosting","icon":"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202L6%2022%2018%2022%2018%207%2012%202%206%202Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18%202L12%202%2012%208%2018%208%2018%202Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E","disableLogout":true,"isLoggedIn":true,"oauthUrl":null,"color":"#ffffff","background":"#006400"}}} \ No newline at end of file diff --git a/Dockerfile b/Dockerfile index 070f301..21ed1b4 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,3 +1,5 @@ +# docker build -t linter . +# docker run -v `pwd`/src:/silex/src --rm linter FROM node:lts COPY . /silex diff --git a/src/client/DataSource.ts b/src/client/DataSource.ts index ae15870..cc0c4bf 100644 --- a/src/client/DataSource.ts +++ b/src/client/DataSource.ts @@ -73,186 +73,186 @@ class EleventyDataSource extends Backbone.Model implement fields: [], }, { id: 'page', - label: 'Page', + label: 'page', dataSourceId: 'eleventy', fields: [{ id: 'url', - label: 'Url', + label: 'url', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'fileSlug', - label: 'File slug', + label: 'fileSlug', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'filePathStem', - label: 'File path stem', + label: 'filePathStem', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'date', - label: 'Date', + label: 'date', typeIds: ['date'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'inputPath', - label: 'Input path', + label: 'inputPath', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'outputPath', - label: 'Output path', + label: 'outputPath', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'outputFileExtension', - label: 'Output file extension', + label: 'outputFileExtension', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'lang', - label: 'Lang', + label: 'lang', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }], }, { id: 'pagination', - label: 'Pagination', + label: 'pagination', dataSourceId: 'eleventy', fields: [{ id: 'hrefs', - label: 'Hrefs', + label: 'hrefs', typeIds: ['string'], kind: 'list', dataSourceId: 'eleventy', }, { id: 'href', - label: 'Href', + label: 'href', typeIds: ['paginationHref'], kind: 'object', dataSourceId: 'eleventy', }, { id: 'pageNumber', - label: 'Page number', + label: 'pageNumber', typeIds: ['number'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'pages', - label: 'Pages', + label: 'pages', typeIds: ['page'], kind: 'list', dataSourceId: 'eleventy', }], }, { id: 'paginationHref', - label: 'Pagination href', + label: 'paginationHref', dataSourceId: 'eleventy', fields: [{ id: 'next', - label: 'Next', + label: 'next', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'previous', - label: 'Previous', + label: 'previous', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'first', - label: 'First', + label: 'first', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'last', - label: 'Last', + label: 'last', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }], }, { id: 'eleventy', - label: 'Eleventy', + label: 'eleventy', dataSourceId: 'eleventy', fields: [{ id: 'version', - label: 'Version', + label: 'version', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'generator', - label: 'Generator', + label: 'generator', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'env', - label: 'Env', + label: 'env', typeIds: ['env'], kind: 'object', dataSourceId: 'eleventy', }] }, { id: 'env', - label: 'Env', + label: 'env', dataSourceId: 'eleventy', fields: [{ id: 'root', - label: 'Root', + label: 'root', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'config', - label: 'Config', + label: 'config', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'source', - label: 'Source', + label: 'source', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'runMode', - label: 'Run mode', + label: 'runMode', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }], }, { id: 'locale_link', - label: 'Link', + label: 'locale_link', dataSourceId: 'eleventy', fields: [{ id: 'url', - label: 'Url', + label: 'url', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'lang', - label: 'Lang', + label: 'lang', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', }, { id: 'label', - label: 'Label', + label: 'label', typeIds: ['string'], kind: 'scalar', dataSourceId: 'eleventy', @@ -266,19 +266,19 @@ class EleventyDataSource extends Backbone.Model implement getQueryables(): Field[] { return [{ id: 'page', - label: 'Page', + label: 'page', typeIds: ['page'], kind: 'object', dataSourceId: 'eleventy', //}, { // id: 'eleventy', - // label: 'Eleventy', + // label: 'eleventy', // typeIds: ['eleventy'], // kind: 'object', // dataSourceId: 'eleventy', //}, { // id: 'env', - // label: 'Env', + // label: 'env', // typeIds: ['env'], // kind: 'object', // dataSourceId: 'eleventy', diff --git a/src/client/liquid.ts b/src/client/liquid.ts index fafba47..3809fad 100644 --- a/src/client/liquid.ts +++ b/src/client/liquid.ts @@ -36,7 +36,7 @@ export function echoBlock(component: Component, expression: Expression): string /** * Generate liquid instructions which echo the value of an expression, on 1 line */ -export function echoBlock1line(component: Component | null | undefined, expression: Expression): string { +export function echoBlock1line(component: Component, expression: Expression): string { if (expression.length === 0) throw new Error('Expression is empty') if (expression.length === 1 && expression[0].type === 'property' && expression[0].fieldId === FIXED_TOKEN_ID) { return expression[0].options?.value as string ?? '' @@ -171,7 +171,7 @@ export function getPaginationData(expression: Property[]): string { /** * Convert an expression to liquid code */ -export function getLiquidBlock(component: Component | null | undefined, expression: Expression): { variableName: string, liquid: string }[] { +export function getLiquidBlock(component: Component, expression: Expression): { variableName: string, liquid: string }[] { if (expression.length === 0) return [] const result = [] as { variableName: string, liquid: string }[] const firstToken = expression[0] @@ -199,8 +199,8 @@ export function getLiquidBlock(component: Component | null | undefined, expressi return result } -export function getNextVariableName(component: Component | null | undefined, numNextVar: number): string { - return `var_${component?.ccid || 'global'}_${numNextVar}` +export function getNextVariableName(component: Component, numNextVar: number): string { + return `var_${component.ccid}_${numNextVar}` } /** diff --git a/src/client/page-settings.ts b/src/client/page-settings.ts index d89acc8..86063ae 100644 --- a/src/client/page-settings.ts +++ b/src/client/page-settings.ts @@ -1,9 +1,28 @@ -import { removeState, setState, toExpression } from '@silexlabs/grapesjs-data-source' +import { DataSourceEditor, removeState, setState, toExpression } from '@silexlabs/grapesjs-data-source' import { ClientConfig } from '@silexlabs/silex/src/ts/client/config' //import { ClientEvent } from '@silexlabs/silex/src/ts/client/events' import { EleventyPluginOptions, Silex11tyPluginWebsiteSettings } from '../client' import { html } from 'lit' import { Page } from 'grapesjs' +import {ref, createRef, Ref} from 'lit/directives/ref.js' + +const paginationWarning: Ref = createRef() + +/** + * Main function to add the settings to the page + */ +export default function(config: ClientConfig, opts: EleventyPluginOptions): void { + if(!opts.enable11ty) return // Do not add the settings if 11ty is disabled + config.on('silex:startup:end', () => { + const editor = config.getEditor() as DataSourceEditor + editor.on(/* ClientEvent.SETTINGS_SAVE_START */'silex:settings:save:start', (page: Page) => updateBodyStates(editor, page)) + config.addSettings({ + id: 'cms', + label: 'CMS', + render: (settings: Silex11tyPluginWebsiteSettings) => render(settings, config), + }, 'page') + }) +} /** * Set the state on the body component @@ -32,44 +51,46 @@ function stateOnBody(editor, value, name, body) { } } -export default function(config: ClientConfig, opts: EleventyPluginOptions): void { - if(!opts.enable11ty) return // Do not add the settings if 11ty is disabled - config.on('silex:startup:end', () => { - const editor = config.getEditor() - editor.on('silex:settings:save:start' /*ClientEvent.SETTINGS_SAVE_START*/, (page: Page) => { - const settings = page?.get('settings') as Silex11tyPluginWebsiteSettings | undefined - if (settings) { - // Set the state on the body component - // This is only useful to build the GraphQL query - const body = page.getMainComponent() - stateOnBody(editor, settings.eleventySeoTitle, 'eleventySeoTitle', body) - stateOnBody(editor, settings.eleventySeoDescription, 'eleventySeoDescription', body) - stateOnBody(editor, settings.eleventyFavicon, 'eleventyFavicon', body) - stateOnBody(editor, settings.eleventyOGImage, 'eleventyOGImage', body) - stateOnBody(editor, settings.eleventyOGTitle, 'eleventyOGTitle', body) - stateOnBody(editor, settings.eleventyOGDescription, 'eleventyOGDescription', body) - stateOnBody(editor, settings.eleventyPageData, 'eleventyPageData', body) - stateOnBody(editor, settings.eleventyPermalink, 'eleventyPermalink', body) - } - }) - config.addSettings({ - id: 'cms', - label: 'CMS', - render: (settings: Silex11tyPluginWebsiteSettings) => { - setTimeout(() => { - // Update the settings form when the selection changed without recreating the form - (document.querySelectorAll('#settings-cms input') as NodeListOf) - .forEach((input: HTMLInputElement) => { - switch (input.type) { - case 'checkbox': - input.checked = !!settings[input.name] - break - default: - input.value = settings[input.name] ?? '' - } - }) - }) - return html` +/** + * Set the state on the body component + * This is only useful to build the GraphQL query + */ +function updateBodyStates(editor: DataSourceEditor, page: Page) { + paginationWarning.value?.classList.add('silex-hidden') + if (page) { + const settings = page?.get('settings') as Silex11tyPluginWebsiteSettings | undefined + if (settings) { + const body = page.getMainComponent() + stateOnBody(editor, settings.eleventySeoTitle, 'eleventySeoTitle', body) + stateOnBody(editor, settings.eleventySeoDescription, 'eleventySeoDescription', body) + stateOnBody(editor, settings.eleventyFavicon, 'eleventyFavicon', body) + stateOnBody(editor, settings.eleventyOGImage, 'eleventyOGImage', body) + stateOnBody(editor, settings.eleventyOGTitle, 'eleventyOGTitle', body) + stateOnBody(editor, settings.eleventyOGDescription, 'eleventyOGDescription', body) + stateOnBody(editor, settings.eleventyPageData, 'eleventyPageData', body) + stateOnBody(editor, settings.eleventyPermalink, 'eleventyPermalink', body) + } + } +} + +/** + * Render the settings form + */ +function render(settings: Silex11tyPluginWebsiteSettings, config: ClientConfig) { + setTimeout(() => { + // Update the settings form when the selection changed without recreating the form + (document.querySelectorAll('#settings-cms input') as NodeListOf) + .forEach((input: HTMLInputElement) => { + switch (input.type) { + case 'checkbox': + input.checked = !!settings[input.name] + break + default: + input.value = settings[input.name] ?? '' + } + }) + }) + return html`