Frontend do Weblate

O frontend atualmente é construído usando 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.

Gerenciamento de dependências

The yarn package manager is used to update third party libraries. The configuration lives in scripts/yarn and there is a wrapper script scripts/yarn-update to upgrade the libraries, build them and copy to correct locations in weblate/static/vendor, where all third partly frontend code is located. The Weblate specific code should be placed directly in weblate/static or feature specific subdirectories (for example 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 arquivos JavaScript e CSS.

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

Localização

Se você precisar de qualquer texto visível para o usuário no código do frontend, ele deve ser localizável. Na maioria dos casos, tudo que você precisa é envolver 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 você esteja procurando 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.