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 section 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

Antes de prosseguir com a instalação, certifique-se de ter os seguintes pré-requisitos:

  • Versão 14 ou superior do Nodejs.

  • O gerenciador de pacotes ‘yarn’ instalado no seu sistema.

  • Execute cd client.

  • Execute yarn install

Instalação

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

yarn add <lib-name>

Importing the Library

Em seguida, existem duas maneiras de importar a biblioteca:

  1. If it is a project-wide library (it is used/needed in all/most pages):
    • Import the library in src/main.js.

    • And declare it in the global scope (if needed).

  2. 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. Then inject it into the window object to be globally accessible.

    • Add an entry in webpack.config.js: <lib-name>: "src/<lib-name>.js".

    • Add library name in excludePrefixes array in mainLicenseTransform in webpack.config.js.

    • Add license file name in additionalFiles in LicensePlugin in plugins array in webpack.config.js.

    • Create a <lib-name>LicenseTransfrom function for the license file introduced in the previous steps and use it.

    Note: Replace <lib-name> with the actual name of the 3rd party library.

Building the Library

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

yarn build

Including the Library

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

  1. If the library was imported in src/main.js, no further steps are required (as it is already included in base.html).

  2. 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'

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