mayu-live / framework

Mayu is a live updating server-side component-based VDOM rendering framework written in Ruby
https://mayu.live
GNU Affero General Public License v3.0
137 stars 4 forks source link

I18n #17

Open aalin opened 2 years ago

aalin commented 2 years ago

I like that CSS files are close to the component files, so why not I18n files too?

So you would have:

MyComponent.rux
MyComponent.css
MyComponent.intl.en.toml
MyComponent.intl.en-US.toml
MyComponent.intl.es-CO.toml
MyComponent.intl.sv-SE.toml

where MyComponent.intl.en-US.toml contains:

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.