gia-cli/templates/default/root/src/boot.js

Guardian US Interactive CLI tool

/*global require */
const css = `
	.gia-loading {
		font-family: 'Guardian Egyptian Web';
	}
`;

// Consider putting things like title, intro copy, sources etc in here rather
// than in Ractive components – that way the reader doesn't have to wait as
// long before they can orientate themselves. Hopefully, by the time they're
// done reading, the interactive parts will have sprung to life.

// Wherever possible, prevent layout popping by 'reserving' the correct space
// for the interactive elements
const html = `
	<p class='gia-loading'>Replace me with some appropriate loading content</p>
`;

export function boot ( el ) {
	el.innerHTML = `<style>${css}</style><div>${html}</div>`;

	let params;
	try {
		params = JSON.parse( el.getAttribute( 'data-alt' ) );
	} catch ( err ) {
		params = {};
	}

	require([ '<@baseUrl@>/<@version@>/js/app.js' ], app => app.launch( el.querySelector( 'div' ), params ) );
}