Contributing to Translations

Below is a guide on how to contribute by translating the site into your language.

Section 1. Adding a new language

If you're planning to translate this website to a language that this site hasn't been translated into, the first step would be to add the new language into the site.

Add the language into Nuxt.js' config

In nuxt.config.ts, search for a line starting with i18n. Just a few lines underneath it, you should find a line that starts with locales:

  modules: ['@nuxtjs/i18n'],

  i18n: { // !! i18n here
    vueI18n: './i18n.config.ts',
    locales: ['en', 'id'], // !! locales here
    defaultLocale: 'en',
  },

  $production: {
    devtools: { enabled: false }
  },

In that locales variable, add your new language code. If you don't know the language code, you should be able to get it by searching up "(language) language code". For example, if you're translating this into French, you should search "french language code" into your favorite search engine.
It doesn't really matter what kind of language code you use, but if you can, try to use the two-letter ones. If the language varies greatly by region (e.g. Portugal Portuguese vs Brazilian Portuguese), feel free to break this convention.
To add the language code to the list, put , '(your-language-code)' right before the ].
It should then look something like this:

    locales: ['en', 'id', 'br-pt'],

Adding the language's name

In /assets/types/lang.ts, search for a line starting with export const langNameMap. This contains a "map" of the language's code to the language's name. It should look something like this:

/** A map from a language ID to its name in that language. */
export const langNameMap = {
    en: "English",
    id: "Bahasa Indonesia",
} as { [index: string]: string | undefined };

To add your language's name into the "map", add (lang_code): "(language name)", in a new line right before the line that starts with } as {.
However, if your language code has a hyphen, you have to wrap it in quotes, like 'en-gb': "English (UK)", It should then look something like this:

export const langNameMap = {
    en: "English",
    id: "Bahasa Indonesia",
    fr: "Français",
    'br-pt': "Português (Brasil)",
} as { [index: string]: string | undefined };

Creating the language file

In /assets/lang, duplicate the en.ts file by copying it and then pasting it.
Then, rename it to something like (lang_code).ts. For example, if you're translating into German, it should be named de.ts.
You don't need to worry about the contents for now, what matters is that you've created that file out of the English language file.
We will cover editing the language file in Section 2.

Binding the language file into i18n

Now go back to the project folder. You should see a file named i18n.config.ts. Open it.
Once the file is opened, find the line that starts with import * as lang. It should be near the top of the file.
It should look something like this:

import * as langEN from '~/assets/lang/en';
import * as langID from '~/assets/lang/id';

Duplicate (copy and paste) one of those lines. It should then look something like this:

import * as langEN from '~/assets/lang/en';
import * as langID from '~/assets/lang/id';
import * as langID from '~/assets/lang/id';

Now, modify the line you just pasted, such that it refers to the language code you are adding. For example, if you're adding a Russian translation, it should look something like this:

import * as langEN from '~/assets/lang/en';
import * as langID from '~/assets/lang/id';
import * as langRU from '~/assets/lang/ru';

Now that you've imported the file into i18n, we'll need to tell it to use that import.
Look for the line that starts with export default defineI18nConfig. A few lines under that, you should find a line starting with messages:.
It should look something like this:

export default defineI18nConfig(() => ({
    // --snip--
    messages: {
        en: processLangEntry(langEN.default),
        id: processLangEntry(langID.default),
    },
}));

Duplicate one of the lines that's inside messages. It should then look something like this:

    messages: {
        en: processLangEntry(langEN.default),
        id: processLangEntry(langID.default),
        id: processLangEntry(langID.default),
    },

After that, modify your newly-pasted line such that it matches with your language code. If you're adding Chinese, for example, it should then look something like this:

    messages: {
        en: processLangEntry(langEN.default),
        id: processLangEntry(langID.default),
        zh: processLangEntry(langZH.default),
    },

If you're here, you have successfully set up the translation! Now, it's time to actually translate entries.

Section 2. Translating the entries

TODO