elk/CONTRIBUTING.md

6.4 KiB

Contributing Guide

Hi! We are really excited that you are interested in contributing to Elk. Before submitting your contribution, please make sure to take a moment and read through the following guide.

Refer also to https://github.com/antfu/contribute.

Set up your local development environment

The package manager used to install and link dependencies must be pnpm.

To develop and test the Elk package:

  1. Fork the Elk repository to your own GitHub account and then clone it to your local device.

  2. Ensure using the latest Node.js (16.x)

  3. Elk uses pnpm v7, you must enable Corepack by running corepack enable.

  4. Check out a branch where you can work and commit your changes:

git checkout -b my-new-branch
  1. Run pnpm i in Elk's root folder

  2. Run pnpm nuxi prepare in Elk's root folder

  3. Run pnpm dev in Elk's root folder to start dev server or pnpm dev:mocked to start dev server with @elkdev@universeodon.com user.

Internalization

We are using vue-i18n via nuxt-i18n to handle internalization.

Adding a new language

  1. Add a new file in locales folder with the language code as the filename.
  2. Copy en-US and translate the strings.
  3. Add the language to the locales array in config/i18n.ts
  4. If the language is right-to-left, add dir option with rtl value, for example, for ar-EG
  5. If the language requires special pluralization rules, add pluralRule callback option, for example, for ar-EG

Check Pluralization rule callback for more info.

Messages interpolation

Most of the messages used in Elk do not require any interpolation, however, there are some messages that require interpolation: check Message Format Syntax for more info.

We're using these types of interpolation:

List interpolation

You can access the elements of the list using the object notation using the index: for example, {0} for the first element, {1} for the second, {2} for the third and so on.

Named interpolation

Elk will use named interpolation only to handle plurals for number formatting. We have 2 scenarios for this:

  • using plural with i18n-t component
  • using plural without i18n-t component

Check Custom Plural Number Formatting Entries for custom plural entries in Elk with available values for interpolation.

When using plural number formatting, we'll have always {n} available in the message, for example, You have {n} new notifications|You have {n} new notification|You have {n} new notifications or You have no new notifications|You have 1 new notification|You have {n} new notifications.

We've included v named parameter, it will be used to pass the formatted number using Intl.NumberFormat::format: will be the number with separators symbols. The exception to previous rule is when we're using plural with i18n-t component, in this case, we'll need to use {0} instead {v} to access the number.

Additionally, Elk will use compact notation for numbers for some entries, check notation and compactDisplay options: for example, 1K for 1000, 1M for 1000000, 1B for 1000000000 and so on. That entry will be available in the message using {v} named parameter (or {0} if using the message with i18n-t component).

You can run this code in your browser console to see how it works:

[1, 12, 123, 1234, 12345, 123456, 1234567].forEach((n) => {
  const acc = {}

  Array.from(['en-US', 'en-GB', 'de-DE', 'zh-CN', 'ja-JP', 'es-ES', 'fr-FR', 'cs-CZ', 'ar-EG']).forEach((l) => {
    const nf = new Intl.NumberFormat(l, {
      style: 'decimal',
      maximumFractionDigits: 0,
    })
    const nf2 = new Intl.NumberFormat(l, {
      notation: 'compact',
      compactDisplay: 'short',
      maximumFractionDigits: 1,
    })
    acc[l] = {
      number: n,
      format: nf.format(n),
      compact: nf2.format(n),
    }
  })
  console.table(acc)
})

Custom Plural Number Formatting Entries

Warning: Either {0}, {v} or {followers} should be used with the exception being custom plurals entries using the {n} placeholder.

This is the full list of entries that will be available for number formatting in Elk:

  • action.boost_count (no need to be included, we should use always en-US entry): {0} for formatted number and {n} for raw number - {0} should be use
  • action.favourite_count (no need to be included, we should use always en-US entry): {0} for formatted number and {n} for raw number - {0} should be use
  • action.reply_count (no need to be included, we should use always en-US entry): {0} for formatted number and {n} for raw number - {0} should be use
  • account.followers_count: {0} for formatted number and {n} for raw number - {0} should be use
  • account.following_count: {0} for formatted number and {n} for raw number - {0} should be use
  • account.posts_count: {0} for formatted number and {n} for raw number - {0} should be use
  • notification.followed_you_count: {followers} for formatted number and {n} for raw number - {followers} should be use
  • status.poll.count: {0} for formatted number and {n} for raw number - {0} should be use
  • time_ago_options.*: {0} for formatted number and {n} for raw number - {0} should be use: since numbers will be always small, we can also use {n}
  • timeline.show_new_items: {v} for formatted number and {n} for raw number - {v} should be use