title = "Welcome to my page"
body = '''
Hello world
'''
And then inside a component:
def render
<div>
<h1>{t(:title)}</h1>
<p>{t(:body)}</p>
</div>
end
If the user has accept-lang: en-US they would get translations from .intl.en-US.toml or .intl.en.toml... it should always try to find the best language for the user based on their browser preferences, and then there should probably be a way to override this setting with a cookie.
I think that would be a good start. Then at some later point it will have to support date formats and pluralization rules.
Would be nice to implement something that matches the JavaScript Intl API.
A cool feature would be that if a component has to fall back on another language than the parent node, it could set the lang-attribute on the outer node...
So if you're reading a page in Spanish and a component doesn't have translations in Spanish and has to fall back to English, it would generate this:
<html lang="es-CO">
<head>
<title>Hola mundo</title>
</head>
<body>
<h1>Bienvenido a mi página</1>
<p>Hola hola, este párrafo está traducido al español.</p>
<div lang="en-US" class="myComponent-abc123">
<p>This component only has English translations so this is the English translation that is being fallen back upon</p>
</div>
</body>
</div>
This way all content on the page will have the correct lang specified even when there are multiple languages on a page.
I like that CSS files are close to the component files, so why not I18n files too?
So you would have:
where
MyComponent.intl.en-US.toml
contains:And then inside a component:
If the user has
accept-lang: en-US
they would get translations from.intl.en-US.toml
or.intl.en.toml
... it should always try to find the best language for the user based on their browser preferences, and then there should probably be a way to override this setting with a cookie.I think that would be a good start. Then at some later point it will have to support date formats and pluralization rules. Would be nice to implement something that matches the JavaScript Intl API.
A cool feature would be that if a component has to fall back on another language than the parent node, it could set the
lang
-attribute on the outer node...So if you're reading a page in Spanish and a component doesn't have translations in Spanish and has to fall back to English, it would generate this:
This way all content on the page will have the correct
lang
specified even when there are multiple languages on a page.