HTML 2 Fragments Collection

HTML2Fragments Collection is a command-line tool designed to simplify the conversion of pure HTML pages into reusable Liferay Fragments collections. The primary objective is to divide the raw HTML into individual components, which can then be transformed into Liferay Fragments. This process also includes incorporating the associated styles, referred to as "Themes," and including the necessary JavaScript files. To ensure compatibility and prevent conflicts with Liferay's default styles, the styles are scoped specifically to the Wrapper element.

How to Use

• To install the command-line tool, use the following command: 
  npm i html-2-fragments-collection -g.
• Edit your HTML file and add the following attributes to each HTML element that you want to convert into a Liferay Fragment:

Important Note:

The command-line tool has been developed to provide a starting point for the design migration process and simplify the conversion of static HTML components into reusable Liferay Fragments. As part of this process, the tool will scope your styles to ensure they are applied correctly within Liferay. However, this may result in some changes to your styles.

It is possible that you may need to modify the styles after they have been parsed to fine-tune and fix any issues. The tool will generate a Liferay Fragment Collection Project where you can find all your resources located in the resources folder. Once you have made the necessary modifications, you can easily execute the following commands to package the Fragment collection and prepare it for deployment in Liferay:

npm i html-2-fragments-collection 
liferay-design u

By running these commands, you will install any required dependencies and compress the Fragment collection, making it ready for deployment.