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#

O gerenciador 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 colocado 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 relies on Prettier for the code formatting for CSS files and Biome for formatting and linting the JavaScript code.

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.