• EN
  • Work in progress "Silex CMS"

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

            hello patriciotourne

            thank you for testing silex cms

            it was supposed to be released yesterday but the deployment failed

            i'm working on it,i'll let you know when it's live!

            5 days later

            Hi! I've been trying out the integration and is looking great! I stumbled upon some problems though.

            1. For a looping container, It would be great to be able to add links to items based on content. The closest I got was adding an href Attribute with an Expression value: Container's states:Loop data (my_collection)>id(id). However, I'm not able to prepend the base url so that that id can be placed at the end. The prepend option is available in the HTML Content section however.
            2. I tryied to create a dynamic page but when publishing to Gitlab, I got this error "npm warn exec The following package was not found and will be installed: @11ty/eleventy@3.0.0-alpha.10". This is the complete log:
              Running with gitlab-runner 17.0.0~pre.88.g761ae5dd (761ae5dd)
                on green-5.saas-linux-small-amd64.runners-manager.gitlab.com/default xS6Vzpvo, system ID: s_6b1e4f06fcfd
              Preparing the "docker+machine" executor 
              Using Docker executor with image node:20 ...
              Pulling docker image node:20 ...
              Using docker image sha256:4c466ea4074f534f56d7c70dcaba389d1ac66af2599441bd7713493e8d9c6d92 for node:20 with digest node@sha256:ab71b9da5ba19445dc5bb76bf99c218941db2c4d70ff4de4e0d9ec90920bfe3f ...
              Preparing environment
              Running on runner-xs6vzpvo-project-58154927-concurrent-0 via runner-xs6vzpvo-s-l-s-amd64-1716989543-aee8f66a...
              Getting source from Git repository
              Fetching changes with git depth set to 20...
              Initialized empty Git repository in /builds/estudiantesorganizados/silex_estudiantes-organizados/.git/
              Created fresh repository.
              Checking out ed72cfdf as detached HEAD (ref is v0.0.13)...
              Skipping Git submodules setup
              $ git remote set-url origin "${CI_REPOSITORY_URL}"
              Executing "step_script" stage of the job script
              Using docker image sha256:4c466ea4074f534f56d7c70dcaba389d1ac66af2599441bd7713493e8d9c6d92 for node:20 with digest node@sha256:ab71b9da5ba19445dc5bb76bf99c218941db2c4d70ff4de4e0d9ec90920bfe3f ...
              $ npx @11ty/eleventy@canary --input=public --output=_site
              npm warn exec The following package was not found and will be installed: @11ty/eleventy@3.0.0-alpha.10
              npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
              npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
              npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
              [11ty] Problem writing Eleventy templates: (more in DEBUG output)
              [11ty] Output conflict: multiple input files are writing to `./_site/proyecto_legislativo/undefined/index.html`. Use distinct `permalink` values to resolve this conflict.
              [11ty]   1. ./public/proyecto-legislativo.html
              [11ty]   2. ./public/proyecto-legislativo.html (via DuplicatePermalinkOutputError)
              [11ty] 
              [11ty] Original error stack trace: (Repeated output has been truncated…)
              [11ty]     at TemplateMap.checkForDuplicatePermalinks (file:///root/.npm/_npx/82761691191ced73/node_modules/@11ty/eleventy/src/TemplateMap.js:776:10)
              [11ty]     at TemplateMap.cache (file:///root/.npm/_npx/82761691191ced73/node_modules/@11ty/eleventy/src/TemplateMap.js:475:8)
              [11ty]     at async TemplateWriter._createTemplateMap (file:///root/.npm/_npx/82761691191ced73/node_modules/@11ty/eleventy/src/TemplateWriter.js:324:3)
              [11ty]     at async TemplateWriter.generateTemplates (file:///root/.npm/_npx/82761691191ced73/node_modules/@11ty/eleventy/src/TemplateWriter.js:354:3)
              [11ty]     at async TemplateWriter.write (file:///root/.npm/_npx/82761691191ced73/node_modules/@11ty/eleventy/src/TemplateWriter.js:401:21)
              [11ty]     at async Eleventy.executeBuild (file:///root/.npm/_npx/82761691191ced73/node_modules/@11ty/eleventy/src/Eleventy.js:1268:10)
              [11ty] Benchmark    718ms  90%     1× (Data) `./public/index.11tydata.mjs`
              [11ty] Benchmark    716ms  90%     1× (Data) `./public/proyecto-legislativo.11tydata.mjs`
              [11ty] Wrote 0 files in 0.78 seconds (v3.0.0-alpha.10)
              Cleaning up project directory and file based variables
              ERROR: Job failed: exit code 1

            Greetings!

              Write a Reply...