My best practiced boilerplate for CMS Hub

[assi]

The source codes are here: https://github.com/100handa/my_boilerplate

This is based on HubSpot official boilerplate, but modified a lot to be more useful for who operate their website everyday in practice, and developers who wants to manage components efficiently.

I'm gonna write detail descriptions later.

Here this is.

Desctiptions

Concept

• For marketers: Anybody can operate their website who can use MS Word, Excel. No need knowledge of HTML/CSS/JavaScript and special knowledge, experience of CMS.
• For developers: If write components code once, they can reuse it again and again as pure component(this is the difference from custom modules). Decoupled View and Data. I think custom module should be View-Model.
• For visitors: Response of website is very fast.

Cutom modules and component

ex) https://github.com/100handa/my_boilerplate/tree/main/HubSpot/designs/my_themename/modules/media-obje...

In this boilerplate, custom modules don't have HTML/CSS/JavaScript in it. They are all written as component. This architecture has merits below:

• Components is reusable easily from anywhere(mainly templaets and custom modules) because this is pure view component.
• Custom modules data(fields) structure are sometimes changed from marketer's request and need to modify custom module call in templates at the same time if templates call custom modules with passing some data.
• This problems comes from that custom module render HTML. So in this boilerplate, components render HTML instead of custom modules.
• In short, custom modules are for marketers, components are for developers
• And website speed is improved because components have CSS/JavaScript. If custom modules have them, HTTP request increases as number of custom modules used in a page.

Restricted sections in comparision to dnd-area, but easy to build page.

Second feature is original sections systems. This demo below is doing:

• controls sections number
• change order of section settings
• modify section settings

demo: https://share.getcloudapp.com/Jru8wdyp

HubSpot's default section layout system is great, but I think it's too free to use in everday operation, because:

• Operatos can easily ignore website's design system
• Default section layout system is a little complex, so needs to "get used" to it with several try and errors. It's not ideal for beginners. CMS that I want to serve is that doesn't need any training, manuals, and anybody can understand easily while using.
• Marketers should use HubSpot's default section layout system when they want to create irregular pages, which is away from exsiting design systems.

To accomplish this original sections system, there is page-settings custome module that render nothing.
ex)
https://github.com/100handa/my_boilerplate/blob/main/HubSpot/designs/my_themename/templates/general....

https://github.com/100handa/my_boilerplate/tree/main/HubSpot/designs/my_themename/modules/page-setti...

And more

There are many interesting challenges in this boilerplate

• Automatically generats blog post index
• Automatically convert line break to <br> (for tiny UX improvement for maketers)
• Modify the content of rich text when it rendered

If you are interested

I'm gonna go

* HubSpot headquater at 9/6 13:30 - 15:00

* CMS Hub Informal meetup at 9/6 18:30 - 20:00

* INBOUND 22!

[assi]

I've written the description.

[Jaycee_Lewis]

Thank you, @assi!