How to add meta data to generated files?

[Chris2011]

I will try to use this plugin for handlebars: https://github.com/shannonmoeller/handlebars-layouts to create a layout file where I can just change the content inside. Each site will have the same layout but different content, index (startpage), imprint, contact, about me, etc. Not only the content will be different, also the meta data for the part of the files like different title for every page or other stuff. Maybe also activating the link of the menu when I navigate from the startpage to contact to get contact highlighted.

Without any testing atm, just had a look into the code, is there anything simple to use a json file or whatever is possible to change the {title} for example for each file that I have?

Atm, I use gulp 2, but it is deprecated and updating it will be more stress than creating it new and for this I had some gulp tasks to replace placeholders with the stuff. I never used real handlebars for this project until now but I already used handlebars and I know that the template() function will take the context and I see in your vite config, that I can add data to the context, but is there a possibility somehow to make the context specific to the pages or partials?

At the end, I will have a number of generated html files, which have the same header and footer but in the header there is different data, based on the file.

[Chris2011]

It is possible, that I don't need the handlebars-layout plugin due to a reading of this blog post: https://cloudfour.com/thinks/the-hidden-power-of-handlebars-partials/. So this is just a side note :)

[alexlafroscia]

I think you’re right about that! Since partials can be passed a “block” to sort of “inject” into them, I think you could handle your needs for “layout” partials without needing any extra plugins.

[Chris2011]

Ok, after reading the blog post, it was really removing the handlebars-layout plugin with vanilla handlebar features (partials, inline-partials, etc.). So I think I answered the question by my own, the data will be also part of the hbs files and will be loaded as includes/partials and will change the placeholder with the data. I was just wondering if this is just possible with JSON and not with hbs :)

[alexlafroscia]

I was just wondering if this is just possible with JSON and not with hbs

I think that maybe the Context feature could help you with this, though that provides “global” variables that you can evaluate in Handlebars. There is not a way to configure Context on a per-HTML-file-being-processed basis, but you can pass a Context object when configuring the Handlebars plugin and each “key” in the object becomes a variable that resolves to the “value”.

This test shows what I mean

vite-plugin-handlebars/__tests__/variables.ts

Lines 10 to 18 in e4c6885

	test('it processes Handlebars variables', async () => {
	const temp = await factory.createStructure({
	'index.html': '<p>{{foo}}</p>',
	});
	const result = await build(temp.dir, { context: { foo: 'bar' } });
	const html = getHtmlSource(result);
	expect(html).toContain('<p>bar</p>');
	});

This would at least allow you to keep your configuration in a JSON file that you import in your Vite config and then pass along to your templates that way. You could keep the variables in YAML instead if that suited you better, or environment variables... whatever! I personally am using this on a personal project to keep data about navigation (the page names and hrefs) as an array that can be accessed by different parts of the site that need them (header, footer, etc)