Оболонка Weblate¶

Поточну версію оболонки побудовано з використанням Bootstrap, jQuery і декількох сторонніх бібліотек.

Підтримувані браузери¶

У Weblate передбачено підтримку найсвіжіших стабільних випусків усіх основних браузерів та програмних платформ.

Підтримки альтернативних браузерів, які використовують найсвіжішу версію WebKit, Blink або Gecko безпосередньо або за допомогою програмного інтерфейсу перегляду даних інтернету платформи, явним чином не передбачено. Втім, Weblate має (у більшості випадків) показувати дані і працювати належним чином і у цих браузерах.

Застарілі браузери можуть працювати, але працездатність деяких можливостей у них може бути обмежено.

Керування залежностями¶

Встановлення та керування бібліотеками 3rd party у клієнті проєкту django може бути дещо складним. Цей розділ містить покрокову інструкцію щодо встановлення та керування бібліотеками сторонніх розробників, які використовуються клієнтською частиною Weblate за допомогою Webpack.

Передумови¶

Перш ніж приступити до встановлення, переконайтеся, що у вас є наступні передумови:

Nodejs версії 14 або вище.
У вашій системі встановлено менеджер пакунків yarn.
Запустити cd client.
Запустити yarn install

Установлення¶

При встановленні бібліотеки спершу віддайте таку команду:

yarn add <lib-name>

Importing the Library¶

Існує два способи імпортувати бібліотеку:

Якщо це бібліотека всього проєкту (використовується/потрібна на всіх/більшості сторінок):
- Імпортуйте бібліотеку в src/main.js.
- І оголосити його в глобальній області видимості (якщо потрібно).
Якщо це сторінка-специфічна бібліотека (бібліотека використовується в конкретній сторінці або шаблоні):
- Створіть новий файл з назвою src/<lib-name>.js.
- Import the library in it. Then inject it into the window object to be globally accessible.
- Додайте запис до 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.
Примітка: Замініть <lib-name> на справжню назву сторонньої бібліотеки.

Building the Library¶

Зберіть бібліотеки, що використовуються проєктом, запустивши таку команду:

yarn build

Including the Library¶

Тепер бібліотека зібрана і готова до використання. Щоб включити її, виконайте наступні кроки:

Якщо бібліотеку було імпортовано в rc/main.js, подальших дій не потрібно (оскільки вона вже включена в base.html).
Якщо бібліотека була імпортована в окремому файлі src/<lib-name>.js, в weblate/templates використовуйте теги include для посилання на зібраний статичний файл JavaScript:

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

Стиль програмного коду¶

Weblate використовує Biome для форматування та оптимізації коду JavaScript та CSS.

Локалізація¶

Якщо вам потрібен будь-який видимий користувачеві текст у коді бібліотеки, цей текст потрібно локалізувати. У більшості випадків вам достатньо огорнути ваш текст у функцію gettext, але доступні й складніші можливості:

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 для уможливлення застосування стилю до контурів.