Weblate フロントエンド

フロントエンドは、現在 Bootstrap、jQuery、およびサードパーティの数少ないライブラリを使用して構築されています。

対応ブラウザ

Weblate supports the latest, stable releases of all major browsers and platforms.

Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Weblate should (in most cases) display and function correctly in these browsers as well.

Older browsers might work, but some features might be limited.

依存関係の管理

The yarn package manager is used to update third party libraries. The configuration lives in scripts/yarn and there is a wrapper script scripts/yarn-update to upgrade the libraries, build them and copy to correct locations in weblate/static/vendor, where all third partly frontend code is located. The Weblate specific code should be placed directly in weblate/static or feature specific subdirectories (for example weblate/static/editor).

Adding new third-party library typically consists of:

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

コーディングスタイル

Weblate は、JavaScript ファイルと CSS ファイルの両方のコードフォーマットに Prettier を使用しています。

また ESLint を使用して JavaScript コードを検査します。

現地語化

フロントエンドのコードでユーザーに表示するテキストが必要な場合は、現地語化が可能な文字列であることが必要です。ほとんどの場合、テキストを 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'

参考

Translation topic in the Django documentation

アイコン

Weblate では現在、マテリアルデザインのアイコンを使用しています。新しいシンボルアイコンをお探しの方は Material Design Icons もしくは Material Design Resources を確認してください。

また、ほとんどのアイコンが HTML に埋め込まれていて、パスをスタイルで設定できるため、SVG のサイズを小さくする :file:'scripts/optimize-svg' を用意しました。