WebsiteBaker Community Forum

General Community => Development 2.10.x and up => Topic started by: bupaje on December 04, 2025, 05:55:16 PM

Title: Web Awesome
Post by: bupaje on December 04, 2025, 05:55:16 PM
I first tried WebsiteBaker many years ago for a personal site and have been a fan ever since. I later used it for a secondary company site, but aside from occasional updates I haven’t done much with it in almost 20 years. Recently I decided to try the free version of Web Awesome on the site and wanted to suggest that a module developer or someone on the core team take a look at it to see if it’s worth integrating—there are some very cool components in there. With a little help from ChatGPT I set up a few simple tests: I’m using it for the cards on the home page at https://www.enduracladcoatings.com/
 and the image comparison component on this page is particularly nifty: https://www.enduracladcoatings.com/industrial-coatings/frc-flexible-rubber-coating/
.
Title: Re: Web Awesome
Post by: sternchen8875 on December 05, 2025, 01:05:41 AM
Hi, it's been a long time ;-)
I think there's absolutely nothing wrong with an addon in the form of a module. I had already thought about the image plugin myself, I just lack the time for it. As you know, there are various ways of implementing it using JS, JQuery or even with CSS.
As for Cards, I can't say anything yet, as I'd have to look into that first. If I understand it correctly, the output result is quite similar to the Members module. Members is a module that has been on my to-do list for a long time, and I'm still using it myself.
I'd be happy if you could stay on it.
Title: Re: Web Awesome
Post by: bupaje on December 05, 2025, 06:52:54 PM
Hi. Web Awesome is a set of ready-made web components (buttons, tabs, tooltips, etc.) you can drop into a website to add modern UI features with minimal code -sort of like LEGO pieces for website interfaces. It uses HTML style tags to add the component/structure which you can use along with your coding. https://webawesome.com/docs/components

Here is the code showing the tags for the image comparison component - 3 sec vid > https://www.dropbox.com/scl/fi/fufyd1txyb0sd01268v9i/Recording-2025-12-05-094740.mp4?rlkey=9kqgb7bk371hotrsaztsow06g&st=6iiyvc5d&dl=0 (https://www.dropbox.com/scl/fi/fufyd1txyb0sd01268v9i/Recording-2025-12-05-094740.mp4?rlkey=9kqgb7bk371hotrsaztsow06g&st=6iiyvc5d&dl=0) :

  <wa-comparison position="50">
    <img slot="before"
         src="https://www.enduracladcoatings.com/media/products/before1.jpg"
         alt="Before – uncoated/aged surface">
    <img slot="after"
         src="https://www.enduracladcoatings.com/media/products/after1.jpg"
         alt="After – refinished with Endura-Clad">
  </wa-comparison>

Again not very knowledgeable about it - I just saw the email announcement and did a quick test drive and thought it might be a way to quickly add some cool bits to a site.