reuse-html
v1.1.4
Published
This is a tool to create HTML components, and reuse them to create HTML files
Downloads
154
Maintainers
Readme
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 components
folder, 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.json
file in the MyArticle
folder 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.css
can 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