Weblate ön yüzü

Ön yüz şu anda Bootstrap, jQuery ve birkaç üçüncü taraf kitaplığı kullanılarak oluşturulmuştur.

Desteklenen tarayıcılar

Weblate, tüm bilinen tarayıcıların ve platformların en yeni ve kararlı sürümlerini destekler.

Güncel WebKit, Blink ya da Gecko sürümünü kullanan alternatif tarayıcılar, doğrudan ya da platformun site görünümü API uygulaması üzerinden açıkça desteklenmez. Bununla birlikte, Weblate (çoğu durumda) bu tarayıcılarda da düzgün bir şekilde görüntülenmeli ve çalışmalıdır.

Eski tarayıcılar çalışabilir, ancak bazı özellikler sınırlı olabilir.

Bağımlılık yönetimi

Üçüncü taraf kitaplıklarını güncellemek için Yarn paket yöneticisi kullanılır. Yapılandırma scripts/yarn içindedir ve kitaplıkları yükseltmek, bunları oluşturmak ve üçüncü taraf ön yüz kodunun bulunduğu weblate/static/vendor içindeki konumlara kopyalamak için scripts/yarn-update sarmalayıcı betiği kullanılır. Weblate kodu doğrudan weblate/static içine yerleştirilmeli ya da belirli alt klasörler bulunmalıdır (weblate/static/editor gibi).

Yeni üçüncü taraf kitaplığı eklemek genellikle şu şekildedir:

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

Kodlama biçemi

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

Yerelleştirme

Ön yüz kodunda kullanıcı tarafından görülebilecek herhangi bir metne gerek duyuyorsanız, bu yerelleştirilebilir olmalıdır. Çoğu durumda yalnızca, metninizi gettext işlevinin içine kaydırmanız yeterlidir. Ancak kullanılabilecek daha karmaşık özellikler de vardır:

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'

Simgeler

Weblate şu anda material design simgelerini kullanıyor. Yeni simgeler arıyorsanız, Material Design Icons ya da Material Design Resources seçeneğini işaretleyin.

Ek olarak, SVG boyutunu küçültmek için scripts/optimize-svg kullanılır. Çünkü simgelerin çoğu yolların biçemine izin vermek için HTML içine gömülüdür.