• EN
  • Work in progress "Silex CMS"

A good news on this new feature !

I create the first ever no code static site with Silex from a "country" API (not a CMS this time)
Screenshot from 2023-11-17 09-13-41

I just added a container to the stage, made it loop over the continents, added a text and made it display the continent title etc. Then published and voila 🙂

It uses 11ty.dev to build the site

Looking good !!! Still not functional but close 🙂

Screenshot from 2023-11-20 16-50-44

5 days later
5 days later

Great,
I'm going to need some explanations about how the module works, its purpose and its usefulness.

I don't understand how to use it in my sites. 🙁

Sorry i'm not clear and thank you for asking! 😃

It is a silex plugin to integrate with a headless cms, such as directus.io, strapi.io, contentful.com, prismic.io, ...

For now you need to install it in silex with commands (command line) and config file

I just wrote a documentation to test this feature:

a month later
lexoyo changed the title to Work in progress "Silex CMS".

Hello
I've been working more on Silex CMS, here are some news

Static site generator

I have successfully integrated with 11ty.dev

Silex generates liquid templates compatible with 11ty, so we can generate websites with dynamic data. It is compatible with 11ty multi lingual plugin, image optimization and responsive plugin, navigation / menu

Headless CMS

I have tested several headless CMS solutions and they all work great:

If someone has time to test, I want to be sure we are also compatible with

How to test

There is a documentation explaining how to have Silex running on your local computer with the Silex CMS plugin and 11ty SSG. It involves the command line and may not work on windows

I am working on a video to demo all this

Next steps

  1. Add live preview. For now the dynamic data is not rendered on the canvas / stage
  2. Make it available without having to host your own Silex instance nor use the command line
a month later

This looks really cool! So the local version of this is already wroking?
Also: It won't be possible to make interactive components, right? So have components that make calls to the backend live and i.e. allow for user accounts etc.?

    a month later

    lexoyo so far everything looks great. I am able to integrate data from my headless cms apito.io

    I found a problem in the code generation of 11y. The template provided in the script has this in the header

    const EleventyFetch = require('@11ty/eleventy-fetch')
    module.exports = async function () {

    but after the code generation the header changes to

    import EleventyFetch from '@11ty/eleventy-fetch'
    export default async function () {

    and it results a error in the 11ty static site generation

    [11ty] Benchmark 1737ms 97% 1× (Data)./index.11tydata.js[11ty] Copied 6 files / Wrote 2 files in 1.79 seconds (v2.0.1)
    [11ty] Watching…
    [11ty] Server at http://localhost:8080/
    [11ty] File changed: index.html
    [11ty] File added: css/index-47e515d68e212a659adf78c14cfaf89181fe56af67a7c634f2508b4c41f74ce5.css
    [11ty] File changed: default/website.json
    [11ty] File changed: index.11tydata.js
    [11ty] Problem writing Eleventy templates: (more in DEBUG output)
    [11ty] Cannot use import statement outside a module (via SyntaxError)
    [11ty]
    [11ty] Original error stack trace: /Users/diablo/Projects/apito/silex-strapi-11ty/index.11tydata.js:2
    [11ty] import EleventyFetch from '@11ty/eleventy-fetch'
    [11ty] ^^^^^^
    [11ty]
    [11ty] SyntaxError: Cannot use import statement outside a module
    [11ty] at internalCompileFunction (node:internal/vm:73:18)

    Can you point me where do I change this to contribute ?

    And dont know why it appends a

    ?cache_buster=497991

    parameter at the end of my API URL ? any idea ?

    Ok so

    ?cache_buster=497991

    this is just a way to prevent caching, to make sure 11ty's very aggressive cache does not apply

    SyntaxError: Cannot use import statement outside a module

    ok this is because I updated the plugin to support 11ty version > 3
    the data file should be named with .mjs instead of .js and it is an ES module instead of old commonjs
    can you restart 11ty command line and check the file extension?

      lexoyo

      First, it needs to stop appending ?cache_buster=831275 because my server didn't support this kind of parameter and keeps getting 404. How do I stop that?

      Also seems like using the alpha version of the eleventy 3 "@11ty/eleventy": "^3.0.0-alpha.5", solves the syntax error. and now it generates .mjs data files as expected.

        fahim74 Sorry i got confused

        Please check Silex CMS plugin options here
        https://github.com/silexlabs/silex-cms?tab=readme-ov-file#options

        You will see the option esModules which you can set to false in order to support your 11ty config

        Concerning the cache buster, it is required to work cache the returned data per page, check the source code here
        https://github.com/silexlabs/silex-cms/blob/main/src/client/publication.ts#L295

        Eleventy fetch plugin may have a way to invalidate cache by hand. It is not a good thing that I can't pass arbitrary get params, they should be ignored. Could you check the eleventy plugin maybe?
        https://www.11ty.dev/docs/plugins/fetch/

          lexoyo Actually you are right

          It is not a good thing that I can't pass arbitrary get params, they should be ignored.

          I have made changes to the server and now it supports passing arbitrary parameters and ignores it.

          You will see the option esModules which you can set to false to support your 11ty config

          Thank you for pointing this out. 11ty is new to me and I might have skipped reading those options. Now everything related to 11ydata works fine.

          2 months later

          Hello

          I'm working on this again

          I'madding a section in the settings for you to configure a CMS . It is compatible with all these cms: https://docs.silex.me/en/user/cms

          Anyone has feedback or ideas?

          To manage the data sources I'm thinking about something like this

          In the end it looks more like this 🤦

          silex ui to edit data sources

          a month later

          Hi! I've read in https://docs.silex.me/en/dev/cms that Silex CMS is installed on v3.silex.me suggesting to read https://docs.silex.me/en/user/cms . In the section "Getting Started with Silex CMS" it says I can find the dialog to add a CMS in the site settings, though I'm not able to see that option; I only see

          • General
            • Site name
            • Website language
          • SEO
            • Title
            • Description
            • Favicon
          • Social
            • Title
            • Image
            • Description
          • HTML head
            I would like some help