Фронтэнд Weblate

The frontend is currently built using Bootstrap, jQuery and few third-party libraries.

Поддерживаемые браузеры

Weblate поддерживает последние стабильные релизы всех основных браузеров и платформ.

Альтернативные браузеры, которые используют последние версии WebKit, Blink, или Gecko (не важно, напрямую ли или опосредованно через API платформы) в явном виде не поддерживаются. Однако Weblate должен (в большинстве случаев) отображаться и функционировать корректно и в них.

Более старые браузеры, хотя и могут всё ещё работать, но некоторый функционал в них может быть ограничен.

Управление зависимостями

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

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

  • Nodejs version 14 or higher.

  • The yarn package manager is installed on your system.

  • Run cd client.

  • Run yarn install.

Установка

To install a library, first run the following command:

yarn add <lib-name>

Importing the Library

Then, there are two ways to import the library:

  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>

Оформление кода

Weblate relies on Biome for formatting and linting the JavaScript and CSS code.

Перевод

Should you need any user visible text in the frontend code, it should be localizable. In most cases, all you need is to wrap your text inside gettext function, but there are more complex features available:

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'

См. также

Раздел про перевод в документации Django

Иконки

В данный момент Weblate использует иконки в стиле Material Design. Если вам нужны какие-то дополнительные эмблемки, то обратите внимание на Material Design Icons или на Material Design Resources.

В дополнение к этому есть скрипт scripts/optimize-svg, который уменьшает размер этих SVG-иконок, так как большинство из них встраиваются внутрь HTML, чтобы возможно было задавать стиль контурам.