Frontend do Weblate

O frontend atualmente é construído a usar Bootstrap, jQuery e algumas bibliotecas de terceiros.

Navegadores suportados

Weblate oferece suporte às versões mais recentes e estáveis de todos os principais navegadores e plataformas.

Navegadores alternativos que usam a versão mais recente do WebKit, Blink ou Gecko, seja diretamente ou por meio da API de visualização da web da plataforma, não são explicitamente suportados. No entanto, o Weblate deve (na maioria dos casos) ser exibido e funcionar corretamente nesses navegadores também.

Navegadores mais antigos podem funcionar, mas alguns recursos podem ser limitados.

Gestão de dependências

O gestor de pacotes yarn é usado para atualizar bibliotecas de terceiros. A configuração reside em scripts/yarn e há um script wrapper scripts/yarn-update para atualizar as bibliotecas, construí-las e copiá-las para os locais corretos em weblate/static/vendor, onde todo o terceiro código parcialmente frontend está localizado. O código específico do Weblate deve ser posto diretamente em weblate/static ou em diretórios específico do recurso (por exemplo, weblate/static/editor).

Adicionar uma nova biblioteca de terceiros geralmente consiste em:

# Add a yarn package
yarn --cwd scripts/yarn add PACKAGE
# Edit the script to copy package to the static folder
edit scripts/yarn-update
# Run the update script
./scripts/yarn-update
# Add files to git
git add .

Estilo de codificação

Weblate depende do Prettier para a formatação do código para ficheiros JavaScript e CSS.

Também usamos ESLint para verificar o código JavaScript.

Tradução

Se precisar de qualquer texto visível para o utilizador no código do frontend, ele deve ser localizável. Na maioria dos casos, tudo que precisa é envolver o seu texto dentro da função gettext, mas existem recursos mais complexos disponíveis:

document.write(gettext('this is to be translated'));

var object_count = 1 // or 0, or 2, or 3, ...
s = ngettext('literal for the singular case',
        'literal for the plural case', object_count);

fmts = ngettext('There is %s object. Remaining: %s',
        'There are %s objects. Remaining: %s', 11);
s = interpolate(fmts, [11, 20]);
// s is 'There are 11 objects. Remaining: 20'

Ícones

Weblate atualmente usa ícones de design de material. Caso esteja a procurar por um novo símbolo, verifique Material Design Icons ou Material Design Resources.

Além disso, existe scripts/optimize-svg para reduzir o tamanho do SVG, já que a maioria dos ícones são embutidos no HTML para permitir estilização dos caminhos.