Reuse-html NPM

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

Install ReuseHTML

npm install --save-dev reuse-html

Configuration file

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]
}

Example of config

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

Start the process

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.

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Reuse HTML Test</title>
		<meta name="description" content="This is a sample website"/>
		<meta name="author" content="reuse html devs" />
		<meta name="keywords" content="reuse html sample test web site" />
		<link rel="stylesheet" href="./stylesheet.css" type="text/css" />
	</head>
 <body>
		<h1>Title</h1>
		<article>
			<h3>My Article 1</h3>
			<p>Some text</p>
		</article>
		<article>
			<h3>My Second Article</h3>
			<p>Another Text</p>
		</article>
</body>
</html>

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.

<article>
	<h3>My Second Article</h3>
	<p>Another Text</p>
</article>

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

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Reuse HTML Test</title>
		<meta name="description" content="This is a sample website"/>
		<meta name="author" content="reuse html devs" />
		<meta name="keywords" content="reuse html sample test web site" />
		<link rel="stylesheet" href="./stylesheet.css" type="text/css" />
	</head>
 <body>
		<h1>Title</h1>
		<My-Article/>
		<My-Article/>
</body>
</html>

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

<MyArticle data-title="My article 1" data-content="Some text"/>
<MyArticle data-title="My article 2" data-content="Another Text"/>

Change myArticle.html

<article>
	<h3>$title</h3>
	<p>$content</p>
</article>

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.

<article>
	<MyTitle>$title</MyTitle>
	<p>$content</p>
</article>

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.