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¶

Installing and managing 3rd party libraries in the client of a django project can be a bit tricky. This document provides a step-by-step guide on how to install and manage 3rd party libraries used by the client side of Weblate using Webpack.

Prerequisites¶

Before proceeding with an installation, make sure you have the following prerequisites:

Node.js.
Yarn package manager installed on your system.
Run cd client.
Run yarn install

1- Installation¶

To install a library, 1st run the following command:

yarn add lib

2- Importing the Library¶

Then, there are two ways to import the library:

If it is a project-wide library (it is used/needed in all/most pages):
- Import the library in src/main.js.
If it is page-specific library (library is used in a specific page or template):
- Create a new file named src/<lib-name>.js.
- Import the library in it.
- Add an entry in webpack.config.js: <lib-name>: "src/<lib-name>.js".
Note: Replace <lib-name> with the actual name of the 3rd party library.

3- Building the Library¶

Build the libraries used by the project, run the following command:

yarn build

4- Including the Library¶

Now the library is built and ready for use. To include it follow these steps:

If the library was imported in src/main.js, no further steps are required (as it is already included in base.html).
If the library was imported in its specific file src/<lib-name>.js, in weblate/templates` use the include tags to link to the built static JavaScript file:

{% load static %}
<script src="{% static 'js/vendor/<lib-name>.js' %}"></script>

Estilo de codificação¶

Weblate relies on Biome for formatting and linting the JavaScript and CSS 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'

Ver também

Tópico sobre tradução na documentação do Django

Í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.