Extension to manage cms content from static files

[empiricompany]

Hello, I developed this extension initially because I needed to have the content of CMS (static blocks and pages) on the file system so that it could be read by purgecss to prevent the loss of any used classes. But it is proving to be very useful also for working with complex static blocks that include a lot of HTML markup, making it challenging to work with them from the backend.

What do you think of this approach? Do you see any security issues?

This is the extension if you want to take a look:

https://github.com/magemega/openmage-mm_cmscontentfilemode

I hope it can be useful to others as well. I am experimenting with it for a new theme that utilizes gulp with purgecss, scss, alpinejs.

[kiatng]

+1 for tracking in git for changes done in the files.

[colinmollenhour]

Yes, for large projects it seems the CMS management ends up being handled largely by developers anyway and not non-coder users so having blocks and pages in the database rather than a git repo becomes a hassle. Would be very interesting to completely replace the db backend (perhaps optionally) with a git repo, similar to how Github wiki works.

How do you run PurgeCSS in this context? Have you considered pre-warming the pages with a full-page cache and using that to run PurgeCSS?

Another potential solution (not mutually exclusive to using files for CMS) could be to replace how CSS files are generated (\Mage_Core_Model_Design_Package::_mergeFiles) with a modern tool like Webpack. One problem with Magento is there is no package.json file out of the box so it is hard to include some JS/CSS projects effectively and you don't get all of the nice features of modern builders. On one project I created a mini JS project in js/bundle/ that builds some JS files and then we simply include those files in the XML like js/bundle/dist/.... I could see CSS being handled this way somehow as well. For example, _mergeFiles could generate a Webpack script and execute Webpack instead of directly merging the files. Probably would be pretty slow though and a lot of effort to wire up..

[fballiano]

just a bit off-topic but starting with http2 I suggest everybody to disable merging js/css, lighthouse is angrier about one-big-file than many-small-ones, plus the merging historically generated a ton of files that weren't properly cached because many parts were duplicated among different pages (home, category, product, checkout). So I have a "signing" module which adds a "?v=xxx" to all css/js urls, cache is honored and google is happy.

[empiricompany]

@colinmollenhour many interesting ideas could be implemented by creating a new block based on static files.

Initially, I quickly attempted to read the relevant tables directly from Node.js, but then I realized that it would require remote access to MySQL, which is better to avoid.

I have configured purgecss with these paths; it is not extremely accurate as it potentially can include other base classes and rwd (responsive web design) that are not used if the template is overwritten
It would be necessary to implement a generator of precise paths based on the templates actually used.

purgecss: {
    content: [
        '../../../../app/design/frontend/base/default/**/*.phtml',
        '../../../../app/design/frontend/rwd/default/**/*.phtml',
        '../../../../app/design/frontend/rwd/lightclean/**/*.phtml',
        '../../../../app/design/frontend/rwd/lightclean/**/*.html',
        '../../../../js/*.js',
        '../**/js/*.js',
        'js/*.js'
    ],
},

I use the same paths to generate classes with tailwindcss.
I'm having a lot of fun playing with tailwindcss classes and alpinejs in the CMS content and my theme files.

As FPC I use Lesti with storage in Redis (thanks to your usefull cache backend ❤️) and I don't have a way to read the contents for purgecss.

I was also thinking about working on _mergecss to make it do more things. It would be great to have it handle Sass compilation, but I don't know how to do it outside of Node.js (run a procedure on server side? but i don't want nodejs on production so...).

For the js, it's minified and combined through another gulp task, only those belonging to my theme under the skin/ directory. The rest is handled on the server side through the pagespeed module.
In fact, I wanted to suggest distributing the minified version of Prototype, product_options.js,, configurable.js etc.. and all the libraries used in the frontend.

Another idea is to enable a mode to automatically create all cache thumbnails in webp format by default, and here I refer back to your previous discussion #3627.
This way, I have the original images in their format and a cache with significantly reduced sizes.

Last but not least in my new theme, I also use htmx, and it's fantastic! In just a few minutes, i added ajax for the layered navigation filters, sidebar cart update and other things with a very tiny js footprint

[empiricompany]

One idea I have is to have Tailwind CSS compile the files, generate a CSS, and automatically add it to the layout. It would be amazing. But how can I run PostCSS on the server side?

[colinmollenhour]

I don't think running Node.js via exec is so bad as long as there is a graceful fallback. This is definitely a case where it would be nice to have an "official" Docker image that has cssnano/postcss-cli built into it.

[colinmollenhour]

So I have a "signing" module which adds a "?v=xxx" to all css/js urls, cache is honored and google is happy. (@fballiano)

Sounds like this would be a great improvement to submit to core?

[fballiano]

the way I do it was depending on the git ref id, to be sure that, at every pull, the version was changing, so you know, pretty basic, to be in the core it should be done in a different way

[elidrissidev]

A hash of the file content like how most frontend bundlers do it should work fine too.

[empiricompany]

OMG! Check out this version that automagically compiles Tailwind CSS!
https://github.com/magemega/openmage-mm_cmscontentfilemode/tree/tailwindcss

[empiricompany]

this extension would be a nice complementary feature for my theme

yes i've tested lanzarote! think about tihs mechanism to catch all css and template!

[empiricompany]

the issue with bun or nodejs is that you have to run in your local development,with tailwind cli you can put in the server and compile without install anything

[fballiano]

but you wanted to have gulp and other stuff so... I think it's more polite to have it installed but ok, point of view

[empiricompany]

Hmm, no, Gulp is another way that I actually use. This is a different idea with different approach.

[empiricompany]

Today, I spent a morning providing training to a client to explain how to compile the CSS. In this case, they wouldn't have to worry about anything, and everything would remain clean and automatically compiled.

[fballiano]

I'm thinking of extending this mechanism by automatically compiling all templates and one base entry point for css! It would be revolutionary!

would do you mean? the way I'm using tailwind already scans all templates, dunno if that's what you mean

[empiricompany]

I'm thinking of extending this mechanism by automatically compiling all templates and one base entry point for css! It would be revolutionary!

would do you mean? the way I'm using tailwind already scans all templates, dunno if that's what you mean

Yes I do it in my theme as well, but I was thinking of doing everything silently on the server side in a special development mode without the need to install a local development environment.

[fballiano]

you call the tailwind binary that you have in the repo, it would be the same calling another binary. anyway..

[empiricompany]

if you see my screencast there is no watch process in my terminal to compile tailwindcss

[fballiano]

I understood that. anyway. doesn't matter.

[empiricompany]

Yes, technically it's the same, actually maybe postccs on bun is more performant. I should test it for many files. But the difference I want to explain to you is that you don't need a local development environment to configure.

[fballiano]

I understood that

[empiricompany]

UPDATE
I have added new features to the version with tailwind compiler:
https://github.com/magemega/openmage-mm_cmscontentfilemode/tree/tailwindcss

Now you can create your own tailwind.config.js inside your theme skin css directory
for example to enable preflight (disabled by default), add prefix like 'tw-' or add plugins like this:

app/design/frontend/rwd/default/css/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: '',
  corePlugins: {
    preflight: true,
  },
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

You can find default config in lib/tailwindcss/tailwind.config.js, no base CSS is added by default.
PS: If you use it with a theme not built with Tailwind CSS, I recommend you to add a prefix 'tw-' to Tailwind classes and disable preflight .

You can also create your tailwind css base to add components or extend layers
app/design/frontend/rwd/default/css/tailwind.config.js

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .my-button-primary {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  }
}

Other features:

• You can force to always compile tailwindcss even the content is not changed. Disabled in frontend for no developer IP.
• Add usefull message in backend and frontend (only if is developer ip)
  

FULL CONFIG in System -> Configuration -> Content Management

[empiricompany]

what do you think about this? 😜

you can view styles applied in tinymce editor + you can create your own template in a specific folder

PS: Everything is still very experimental, my dream is to have a page builder directly on frontend.

[addison74]

So far it looks good. Tailwind is very powerful if the size of the CSS file is reduced to the classes used in the project. From what I can see, you also considered the option of deactivating this feature in order not to create conflicts with other existing CSS frameworks (e.g. Bootstrap). Am I right?

[empiricompany]

yes, you can disable entirely tailwind or better you can config a prefix for classes like tw-bg-pink-500

[empiricompany]

NEW VERSION IS HERE! 🚀
https://github.com/magemega/openmage-mm_cmscontentfilemode
all details in the README

[fballiano]

the preview in tinymce is 💣 💥🚀!!!