How to use templating and fetch API for web pages?

This is how the starter page for Photoveda looks like but this is currently work in progress. My point is, you can create a web page like this using html templates , fetch API , some boilterplate and glue code.

First the boilerplate code.

starter-screen.tpl

[embed]

Now you have the code that invokes this template to create the result in screenshot.

start.html

[embed]

Lines 31 to 46 is where the magic occurs.

async function loadTemplate(filename) { const res = await fetch(filename) const text = await res.text()

document.body.insertAdjacentHTML(‘beforeend’, text) return document.body.lastElementChild }

Promise.all([ loadTemplate(‘./assets/templates/launch-screen/starter-screen.tpl’), ]).then(templates => { templates.forEach(el => { let clone = el.content.cloneNode(true); document.getElementById(‘startscreen’).appendChild(clone); }) })

Enjoy. There is always more than one way to skin a cat and I love this JS method to load HTML and CSS self contained in template code very scalable.