ReuseHTML (alpha version)

This tool is meant for developers that want to create HTML components for their static web sites.

Why use ReuseHTML ?

ReuseHTML lets you breakdown your HTML page into HTML components to use them again in another page. This makes your code more readable and maintainable.

Disclaimer

This tool is not a rendering engine, it is not meant to be used on runtime or for some server side rendering. ReuseHTML will generate some static pages that will be ready-to-be-served files.

However this tool could be used in any process for parsing and HTML generation.

Getting started

$3

npm install --save-dev reuse-html

$3

Create a .reuse-html.json file.
``
{
"project": "[mandatory] Abolute path to your project",
"components": "[mandatory] [relativeToProject] Components folder path",
"build": "[relativeToProject][default=build/] Build folder path where the generated files will be stored",
"ressources": "[relativeToProject] Ressources path or array of path that will simply be copied to the build folder",
"pages": [mandatory] [relativeToProject]
}
`

$3

`
{
"project": "/src/app",
"components": "components",
"build": "../../build",
"ressources": [
"index.css",
"index.js",
"ressources", //folder
"styles", //folder
"js"
],
"pages": [
"index.html",
"pages" // folder
]
}
`

$3

Add a script in your package.json
`
{
...
scripts : {
...
"reuse" : "reuse-html"
...
}
...
}
`
Then launch with npm run reuse.

Example

##### Lets take an example
This is a simple web page with some redundant code.

`html













Title

My Article 1

Some text

My Second Article

Another Text

`

Here, except the content, the articles have the same structure ; a title h3 and a content p.

##### Lets take break it down

In your componentsfolder, create a folder MyArticle then, create a file myArticle.html inside.
`


My Second Article

Another Text


`
Then we replace the article by the tag MyArticle that corresponds to our new HTML component.

`html













Title






`
We reduced our code but unfortunately, this will render 2 articles with the same content. To solve this, you need to use data- attributes.

##### Give parameters
`


`
Change myArticle.html
`


$title

$content


`

##### Use a component in a component
A component can call another component. If you create a component MyTitle, you could use it in the MyArticle component.
`


$title

$content


`


##### File parameter
In some cases, some txt file could be used as parameter. Simply write data-content="file:content.txt" . Here content.txt will be used as content.

##### On runtime content generation
Even on static webpages, there are still some little part that are generated on runtime (events, infos, articles). To do so add a myArticle.jsonfile in the MyArticlefolder with this content :
`
{"export" : true}
`
Now, your component can be generated on runtime with reuseHTML.createElement('MyArticle'). This will return some DOM element to append to a node.

##### Javascript and CSS (alpha)
One javascript file myArticle.js and one CSS file myArticle.csscan be added in the MyArticle`. They will be automatically be copied in the build folder.
Recursive loading (loading component dependencies) is not working.

Issues ?

Please post an issue here : https://github.com/bravo671/reuse-html