Frontend Weblate

Frontend saat ini dibangun menggunakan Bootstrap, jQuery dan beberapa pustaka pihak ketiga.

Peramban yang didukung

Weblate mendukung rilis terbaru dan stabil dari semua peramban dan platform besar.

Peramban alternatif yang menggunakan versi terbaru WebKit, Blink, atau Gecko, baik secara langsung maupun melalui API tampilan web platform, tidak didukung secara eksplisit. Namun, Weblate seharusnya (dalam kebanyakan kasus) ditampilkan dan berfungsi dengan benar di peramban tersebut.

Peramban lama mungkin berfungsi, tetapi beberapa fiturnya mungkin terbatas.

Accessibility

Weblate targets WCAG 2.2 Level AA for new and changed user-facing functionality where practical. Use semantic HTML and Bootstrap components before adding custom interaction code.

When changing the frontend:

  • Make all interactive controls reachable and usable with a keyboard.

  • Keep focus order logical and preserve visible focus styling.

  • Prefer native buttons, links, inputs, selects, and tables over custom widgets.

  • Associate every form control with a label, help text, and validation errors where applicable.

  • Do not use color, icon shape, or position as the only way to convey state.

  • Announce dynamic status changes that are not otherwise visible to assistive technology.

  • Respect reduced-motion preferences for animation or scrolling behavior.

  • Test changed workflows with keyboard-only navigation and, when practical, a screen reader spot check.

Pengelolaan dependensi

Memasang dan mengelola pustaka pihak ketiga di sisi klien proyek Django bisa jadi agak rumit. Bagian ini menyediakan panduan langkah demi langkah tentang cara memasang dan mengelola pustaka pihak ketiga yang digunakan di sisi klien Weblate menggunakan Webpack.

Prasyarat

Sebelum melanjutkan pemasangan, pastikan Anda memiliki prasyarat berikut:

  • A supported Node.js release.

  • Pengelola paket yarn terpasang di sistem Anda.

  • Jalankan cd client.

  • Run yarn install --check-files.

Pemasangan

Untuk memasang pustaka, pertama jalankan perintah berikut:

yarn add <lib-name>

Mengimpor Pustaka

Lalu, ada dua cara untuk mengimpor pustaka:

  1. Jika ini adalah pustaka untuk seluruh proyek (digunakan/dibutuhkan di semua/sebagian besar halaman):

    • Impor pustaka di src/main.js.

    • Dan mendeklarasikannya dalam cakupan global (jika diperlukan).

  2. Jika pustaka tersebut bersifat spesifik halaman (pustaka digunakan pada halaman atau templat tertentu):

    • Buat berkas baru bernama src/<lib-name>.js.

    • Impor pustaka ke dalamnya. Lalu, masukkan ke dalam objek window agar dapat diakses secara global.

    • Tambahkan entri di webpack.config.js: <lib-name>: "src/<lib-name>.js".

    • Tambahkan nama pustaka dalam deretan excludePrefixes di mainLicenseTransform di webpack.config.js.

    • Tambahkan nama berkas lisensi dalam additionalFiles di LicensePlugin dalam deretan plugins di webpack.config.js.

    • Buat fungsi <lib-name>LicenseTransform untuk berkas lisensi yang diperkenalkan pada langkah sebelumnya dan gunakan fungsi tersebut.

    Catatan: Ganti <lib-name> dengan nama sebenarnya dari pustaka pihak ketiga.

Membangun Pustaka

Bangun pustaka yang digunakan oleh proyek, dengan menjalankan perintah berikut:

yarn build

Menyertakan Pustaka

Pustaka sekarang telah dibangun dan siap digunakan. Untuk mengaktifkannya, ikuti langkah berikut:

  1. Jika pustaka diimpor dalam src/main.js, tidak ada langkah lebih lanjut yang diperlukan (karena sudah disertakan dalam base.html).

  2. Jika pustaka diimpor dalam berkas spesifiknya src/<lib-name>.js, dalam weblate/templates gunakan tag include untuk menautkan ke berkas JavaScript statis yang dibangun:

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

Gaya pengkodean

Weblate relies on Biome for formatting and linting the JavaScript and CSS code. Django templates are formatted and linted separately by djade and djlint.

Lokalisasi

Jika Anda membutuhkan teks yang terlihat oleh pengguna dalam kode frontend, teks tersebut harus dapat dilokalisasikan. Umumnya, Anda hanya perlu membungkus teks Anda di dalam fungsi gettext, tetapi ada fitur yang lebih kompleks yang tersedia:

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"

Lihat juga

Topik terjemahan di dokumentasi Django

Ikon

Weblate saat ini menggunakan Material Design Icons, jika Anda mencari simbol baru, periksa itu.

Selain itu, ada scripts/optimize-svg untuk mengurangi ukuran SVG karena sebagian besar ikon tersemat di dalam HTML untuk memungkinkan penataan gaya jalur.