Preface
I read the article Getting started with web components and I thought how can I create a product with this knowledge. A static generator came to mind because the solutions out there want to fix the problem of reusing html snippets.
The workhorse
If you don't want to browse the code, just scroll down to see the usage.
Usage
To create a page with reusable parts you have to at least create the page itself and the reusable part.
On line 3 you see the link to the reusable part.
On line 6 I added the tag which will contain the content of the reusable part.
On line 7 there is the link to our workhorse.
On line 9 the addTemplate function to add a specific reusable part to the page
The specific reusable part in this case is;
The content of the reusable is inside the template tag. And by convention the id of the template tag has the same value than the filename. Developers will recognize this pattern, because they use it for classes.
On line 73 of the workhorse code you can see there is also a addHeader function. It works as follows:
- There needs to be a header tag on the page.
- The header.html needs to exist and added to the import links of the page.
- When you call the function it has to have a title parameter
To get a better idea of how it works you can check the demo.
Is this a dream?
let me say it's a very lucid dream.
The code is more proof of concept than a product I want to ship.
At the moment the only browsers this will work on out of the box are chrome and opera.
All in all I think this could become a product with a lot more work.
