@silexlabs/silex 3.5.1-7 → 3.5.1

package/src/ts/client/grapesjs/cms/page-settings.ts

@@ -158,15 +158,13 @@ function renderSettingsSection(settings: Silex11tyPluginWebsiteSettings, editor:
       }
     </style>
     <div id="settings-${CMS_SETTINGS_SECTION_ID}" class="silex-hideable silex-hidden">
-      <div class="gjs-sm-sector-title">Silex CMS - Page settings</div>
       <div class="silex-help">
         The "Silex CMS" feature integrates <a target="_blank" href="https://www.11ty.dev/">11ty</a> static site generator and your favorite headless CMS with Silex.
-        <br>Read the <a target="_blank" href="https://docs.silex.me/en/user/cms">documentation</a> to learn more.
+        <br>Read Silex <a target="_blank" href="https://docs.silex.me/en/user/cms">documentation</a> to learn more.
       </div>
       <div class="silex-form__group col2">
         <label class="silex-form__element">
-          <h3>Create pages from data</h3>
-          <p class="silex-help">Pagination allows you to iterate over data and create multiple webiste pages from a single page in Silex. </p>
+          <p class="silex-help">Pagination allows you to iterate over data and create multiple website pages from a single page in Silex. This feature is based on <a target="_blank" href="https://www.11ty.dev/docs/pagination/">Eleventy pagination, read more in the docs</a>.</p>
           <state-editor
             ${ref(pageDataEditor)}
             id="eleventyPageData"
@@ -178,14 +176,8 @@ function renderSettingsSection(settings: Silex11tyPluginWebsiteSettings, editor:
             no-states
             no-filters
           >
-            <label slot="label">Data</label>
+            <label slot="label">Pagination Data</label>
           </state-editor>
-          <label class="silex-form__element">Size
-            <input type="number" name="eleventyPageSize" .value=${settings.eleventyPageSize ?? 1}/>
-          </label>
-          <label class="silex-form__element">Reverse
-            <input type="checkbox" name="eleventyPageReverse" ?checked=${!!settings.eleventyPageReverse}/>
-          </label>
           <state-editor
             id="eleventyPermalink"
             name="eleventyPermalink"
@@ -195,14 +187,20 @@ function renderSettingsSection(settings: Silex11tyPluginWebsiteSettings, editor:
           >
             <label slot="label">Permalink</label>
           </state-editor>
+          <details class="silex-more"><summary>Advanced params</summary>
+          <label class="silex-form__element">Reverse
+            <input type="checkbox" name="eleventyPageReverse" ?checked=${!!settings.eleventyPageReverse}/>
+          </label>
+          <label class="silex-form__element">Size
+            <input type="number" name="eleventyPageSize" .value=${settings.eleventyPageSize ?? 1} placeholder="1" />
+          </label>
           <label class="silex-form__element">Available languages
-            <p class="silex-help">Silex can duplicate this page for each language and generate a different URL for each language.</p>
-            <p class="silex-help">Provide a comma separated list of languages. For example: <code>en,fr</code>. An empty value will deactivate this feature.</p>
-            <input type="text" name="silexLanguagesList" .value=${settings.silexLanguagesList ?? ''}/>
+            <p class="silex-help">Silex can duplicate this page for each language and generate a different URL for each language. Provide a comma separated list of languages. For example: <code>en,fr</code>. An empty value will deactivate this feature.</p>
+            <input type="text" name="silexLanguagesList" .value=${settings.silexLanguagesList ?? ''} placeholder="en, fr, es" />
           </label>
         </label>
         <label class="silex-form__element">
-          <h3>Navigation Plugin</h3>
+          <h3 class="gjs-sm-sector-title">Navigation Plugin</h3>
           <p class="silex-help">This 11ty plugin enables infinite-depth hierarchical navigation in Eleventy projects. Supports breadcrumbs too! <a target="_blank" href="https://www.11ty.dev/docs/plugins/navigation/">Read more about the Navigation Plugin</a>.</p>
           <label class="silex-form__element">Key
             <input type="text" name="eleventyNavigationKey" .value=${settings.eleventyNavigationKey ?? ''}/>
@@ -220,6 +218,8 @@ function renderSettingsSection(settings: Silex11tyPluginWebsiteSettings, editor:
             <input type="text" name="eleventyNavigationUrl" .value=${settings.eleventyNavigationUrl ?? ''}/>
           </label>
         </label>
+        </details>
+        <details class="silex-more"><summary>Override SEO and social settings</summary>
         <label class="silex-form__element">
           <h3>SEO</h3>
           <state-editor
@@ -279,6 +279,8 @@ function renderSettingsSection(settings: Silex11tyPluginWebsiteSettings, editor:
           >
             <label slot="label">OG Description</label>
           </state-editor>
+        </label>
+        </details>
       </div>
     </div>
     `

package/src/ts/client/grapesjs/cms/site-settings.ts

@@ -25,7 +25,6 @@ export default function(editor: Editor, opts: EleventyPluginOptions): void {
           }
           </style>
           <div id="settings-${CMS_SETTINGS_SECTION_ID}" class="silex-hideable silex-hidden">
-            <div class="gjs-sm-sector-title">Silex CMS</div>
             <div class="silex-help">
               <p>The <a target="_blank" href="https://github.com/silexlabs/silex-cms">Silex CMS feature</a> integrates with your favorite headless CMS, API or database.</p>
               <p>By adding data sources to your website you activate <a target="_blank" href="https://www.11ty.dev/docs/">11ty static site generator</a> integration. When you wil publish your website, the generated files assume you build the site with 11ty and possibly with Gitlab pages.</p>

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

@@ -55,7 +55,7 @@ export function updatePaginationStates(editor: Editor, pageIndex = 0, preventTri
           if (!body.attributes.publicStates) body.attributes.publicStates = []
           body.attributes.publicStates.push({
             hidden: true,
-            label: 'pagination.items',
+            label: 'Pagination items',
             expression: itemsExpression,
           })
         } else {
@@ -87,7 +87,7 @@ export function updatePaginationStates(editor: Editor, pageIndex = 0, preventTri
         editor.UndoManager.skip(() => {
           setState(body, 'items', {
             hidden: true,
-            label: 'pagination.items',
+            label: 'Pagination items',
             expression: itemsExpression,
           }, true, 1)
 

package/src/ts/client/grapesjs/sectors.ts

@@ -45,12 +45,19 @@ export function registerSector(editor: Editor, config: SectorConfig, at?: number
 
   // Update visibility depending on selected component
   let showSector = false
-  editor.on('component:selected', async (comp: Component) => {
-    if (!comp) return // No selection yet
+  async function update(comp: Component) {
     const shouldShow = await config.shouldShow(comp)
     showSector = shouldShow
     sector.set('visible', shouldShow)
     sector.getProperties().forEach(p => p.set('visible', shouldShow))
+  }
+  editor.on('component:selected component:update:selector', (comp) => {
+    if (!comp) return // No selection yet
+    update(comp)
+    // TODO: why is this needed? Is this because of doubleCheck?
+    setTimeout(() => update(comp), 100)
+    setTimeout(() => update(comp), 500)
+    setTimeout(() => update(comp), 1000)
   })
 
   // Watch changes made by grapesjs and revert them if needed
@@ -64,4 +71,3 @@ export function registerSector(editor: Editor, config: SectorConfig, at?: number
   }
   sector.on('change:visible', doubleCheck)
 }
-

package/src/ts/client/grapesjs/settings-sections.ts

@@ -25,7 +25,6 @@ export const defaultSections: SettingsSection[] = [{
   label: 'General',
   render: (settings, model) => html`
     <div id="settings-general" class="silex-hideable">
-      <div class="gjs-sm-sector-title">General</div>
       <div class="silex-form__group col2">
         <label class="silex-form__element">
           <h3>${isSite(model) ? 'Site name' : 'Page name'}</h3>
@@ -34,7 +33,7 @@ export const defaultSections: SettingsSection[] = [{
         </label>
         <label class="silex-form__element">
           <h3>Website language</h3>
-          <p class="silex-help">This is the default language code for this website. Example: en, fr, es...</p>
+          <p class="silex-help">This is the default language code for this website or page. Example: en, fr, es...</p>
           <input type="text" name="lang" .value=${live(settings.lang || '')}/>
         </label>
       </div>
@@ -45,7 +44,6 @@ export const defaultSections: SettingsSection[] = [{
   label: 'SEO',
   render: (settings, model) => html`
     <div id="settings-seo" class="silex-hideable silex-hidden">
-      <div class="gjs-sm-sector-title">SEO</div>
       <div class="silex-form__group col2">
         <label class="silex-form__element">
           <h3>Title</h3>
@@ -70,7 +68,6 @@ export const defaultSections: SettingsSection[] = [{
   label: 'Social',
   render: (settings, model) => html`
     <div id="settings-social" class="silex-hideable silex-hidden">
-      <div class="gjs-sm-sector-title">Social</div>
       <div class="silex-help">
         <p>Once your website is live, you can use these tools to test sharing:&nbsp;<a target="_blank" href="https://developers.facebook.com/tools/debug/">Facebook</a>,
         <a target="_blank" href="https://cards-dev.twitter.com/validator">Twitter</a>,
@@ -79,14 +76,14 @@ export const defaultSections: SettingsSection[] = [{
       <div class="silex-form__group col2">
         <label class="silex-form__element">
           <h3>Title</h3>
-          <p class="silex-help">The title of your website displayed when a user shares your website on a social network.
+          <p class="silex-help">The title of your website or page displayed when a user shares your website on a social network.
         Do not include any branding in this title, just eye-catching phrase, e.g. "Learn everything about fishing".
         Title should be between 60 and 90 characters long.</p>
           <input type="text" name="og:title" .value=${live(settings['og:title'] || '')}/>
         </label>
         <label class="silex-form__element">
           <h3>Description</h3>
-          <p class="silex-help">Description displayed when a user shares your website on a social network. Make it catchy, and invite readers to visit your website too, e.g. "Sam's website about fishing, check it out!" Title should be between 60 and 90 characters long.</p>
+          <p class="silex-help">Description displayed when a user shares your website or page on a social network. Make it catchy, and invite readers to visit your website too, e.g. "Sam's website about fishing, check it out!" Title should be between 60 and 90 characters long.</p>
           <input type="text" name="og:description" .value=${live(settings['og:description'] || '')}/>
         </label>
         <label class="silex-form__element">
@@ -105,13 +102,11 @@ export const defaultSections: SettingsSection[] = [{
   label: 'Code',
   render: (settings, model) => html`
     <div id="settings-code" class="silex-hideable silex-hidden">
-      <div class="gjs-sm-sector-title">Code</div>
       <div class="silex-form__group">
         <label class="silex-form__element" id="${idCodeWrapper}">
-          <h3>HTML head</h3>
           <p class="silex-help">HTML code which will be inserted in the HEAD tag.</p>
         </label>
       </div>
     </div>
   `,
-}]
+}]

package/src/ts/client/grapesjs/settings.ts

@@ -58,7 +58,7 @@ function createCustomSettingsDialog(editor: Editor, opts: Record<string, unknown
   const dialog = document.createElement('div')
   dialog.className = 'settings-dialog gjs-two-color'
   dialog.innerHTML = `
-    <div class="settings-content" role="dialog" aria-modal="true" aria-labelledby="settings-title">
+    <div class="settings-content gjs-mdl-dialog" role="dialog" aria-modal="true" aria-labelledby="settings-title">
       <div class="settings-header">
         <h3 id="settings-title">${page ? 'Page settings' : 'Site Settings'}</h3>
         <button type="button" class="settings-close" title="Close" aria-label="Close settings">×</button>
@@ -331,15 +331,6 @@ function displaySettings(
   })
   render(html`
     <form class="silex-form">
-      <div class="silex-help">
-        ${isSite(model) ? html`
-          <p>Here you can set the name of your website, SEO and social networks sharing data.</p>
-          <p>These settings are overriden by the page settings, <a href="https://github.com/silexlabs/Silex/wiki/Settings" target="_blank">more info about settings here</a>.</p>
-        ` : html`
-          <p>Here you can set the name of your page, SEO and social networks sharing data.</p>
-          <p>These settings override the site settings, <a href="https://github.com/silexlabs/Silex/wiki/Settings" target="_blank">more info about settings here</a>.</p>
-        `}
-      </div>
       <section class="silex-sidebar-dialog">
         <aside class="silex-bar">
           <ul class="silex-list silex-list--menu" aria-label="Settings sections">

package/src/css/light.scss

@@ -1,7 +0,0 @@
-$primaryColor: #DDD;
-$secondaryColor: #222;
-$tertiaryColor: #B2A3FE;
-$quaternaryColor: #A1D9FF;
-$quaternaryColor: #FF3333;
-$darkerPrimaryColor: #E0E0E0;
-$lighterPrimaryColor: #F0F0F0;