ladle
ladle copied to clipboard
tajo
Support for static `head` injection
Is your feature request related to a problem? Please describe.
Currently, Ladle doesn't offer a built-in way to add elements to the <head>; such as styles, links and other meta
Describe the solution you'd like
Provide a field in Ladle's config.js to set <head> elements
Something like...
export default {
head: {
meta: [
{
name: "robots",
content: "noindex",
},
],
links: [
{
rel: "preconnect",
href: "https://use.typekit.net",
crossorigin: "anonymous",
},
{
rel: "preload",
as: "style",
href: "https://use.typekit.net/<insert-typekit-id>.css",
},
{
rel: "stylesheet",
href: "https://use.typekit.net/<insert-typekit-id>.css",
},
],
styles: [`.some-arbitrary-class { color: red; }`],
},
};
Describe alternatives you've considered
Currently, we're using vite-plugin-html-config inside a custom vite.config.js to set this – it does a fantastic job, but setting custom transformations is always a little scary, and we'd prefer to use something built-in
also super nit-picky, but I much prefer the term meta over their preference metas
Additional context
We're injecting head tags to set external fonts and Ladle style overrides, but this may also prove useful for users importing external CSS libraries or using frameworks like tailwindcss
I am not the biggest fan of using this datastructure-to-tags syntax. I was thinking we could just check the existence of .ladle/head.html and automatically inject it into <head />. So it would be just the standard HTML syntax.
Technically, we would use the same approach with transformIndexHtml.
Any update on this? What is the preferred method for adding style tags? i.e. loading fonts from google, etc.
In our projects, we add React.useEffect() into the main Provider and use JS to create a style tag and inject it into the head. Or you could use something like https://github.com/nfl/react-helmet
vite-plugin-html-config was also mentioned.
We don't have anything built in yet.