kener/docs/i18n.md

title, description

title	description
i18n | Kener	Kener supports multiple languages. You can add translations to your site.

i18n

You can add translations to your site. By default it is set to en. Available translations are present in src/lib/locales/ folders in the root directory. You can add more translations by adding a new file in the src/lib/locales folder.

How to enable a translation

Kener has made it simple to add new translations.

Step 1

Copy and update the translation file in the locales folder. The translation file should be a json file with the locale code as the name of the file. For example, en.json, fr.json, de.json.

↓ Show File ↑ Hide File

{
    "%status for %duration": "%status for %duration",
    "14 Days": "14 Days",
    "30 Days": "30 Days",
    "60 Days": "60 Days",
    "7 Days": "7 Days",
    "90 Days": "90 Days",
    "Availability per Component": "Availability per Component",
    "Back": "Back",
    "Badge Copied": "Badge Copied",
    "Badge": "Badge",
    "Browse Events": "Browse Events",
    "Code Copied": "Code Copied",
    "Copy Code": "Copy Code",
    "Copy Link": "Copy Link",
    "DEGRADED": "DEGRADED",
    "DOWN": "DOWN",
    "Dark": "Dark",
    "Days": "Days",
    "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Embed this monitor using <script> or <iframe> in your app.",
    "Embed": "Embed",
    "Get SVG badge for this monitor": "Get SVG badge for this monitor",
    "Get a LIVE Status for this monitor": "Get a LIVE Status for this monitor",
    "IDENTIFIED": "IDENTIFIED",
    "INVESTIGATING": "INVESTIGATING",
    "Incident Updates": "Incident Updates",
    "LIVE Status": "LIVE Status",
    "Lasted for about %lastedFor": "Lasted for about %lastedFor",
    "Light": "Light",
    "Link Copied": "Link Copied",
    "MAINTENANCE": "MAINTENANCE",
    "MONITORING": "MONITORING",
    "Maintenance Completed": "Maintenance Completed",
    "Maintenance in Progress": "Maintenance in Progress",
    "Mode": "Mode",
    "No Data": "No Data",
    "No Incident in %date": "No Incident in %date",
    "No Incidents": "No Incidents",
    "No Monitor Found": "No Monitor Found",
    "No Updates Yet": "No Updates Yet",
    "Ongoing Incidents": "Ongoing Incidents",
    "Pinging": "Pinging",
    "RESOLVED": "RESOLVED",
    "Recent Incidents": "Recent Incidents",
    "Recent Maintenances": "Recent Maintenances",
    "Share this monitor using a link with others": "Share this monitor using a link with others",
    "Share": "Share",
    "Standard": "Standard",
    "Started %startedAt, lasted for %lastedFor": "Started %startedAt, lasted for %lastedFor",
    "Started %startedAt, still ongoing": "Started %startedAt, still ongoing",
    "Started %startedAt, will last for %lastedFor more": "Started %startedAt, will last for %lastedFor more",
    "Starts %startedAt, will last for %lastedFor": "Starts %startedAt, will last for %lastedFor",
    "Starts %startedAt": "Starts %startedAt",
    "Status OK": "Status OK",
    "Status": "Status",
    "Switch to your timezone": "Switch to your timezone",
    "Theme": "Theme",
    "Timezone set to %tz": "Timezone set to %tz",
    "Today": "Today",
    "UP": "UP",
    "Upcoming Maintenance": "Upcoming Maintenance",
    "Updates": "Updates",
    "Uptime": "Uptime"
}

Step 2

Open src/lib/locales/locales.json and add the locale code and the name of the language.

[
    {
        "code": "en",
        "name": "English"
    },
    {
        "code": "hi",
        "name": "हिन्दी"
    },
    {
        "code": "zh-CN",
        "name": "中文"
    },
    {
        "code": "ja",
        "name": "日本語"
    },
    {
        "code": "vi",
        "name": "Tiếng Việt"
    },
    {
        "code": "fr",
        "name": "Français"
    }
]

Step 3

Open src/lib/i18n/client.js and add the locale code to the locales array.

import { ru, enUS, hi, de, zhCN, vi, ja, nl, da, fr, ko } from "date-fns/locale"

This should be valid for the date-fns library. You can find the list of locales here.

Next add a mapping in the locales object.

const locales = { ru, en: enUS, hi, dk: de, "zh-CN": zhCN, vi, ja, nl, dk: da, fr, ko }

Step 4

Restart the server and you will see a dropdown in the navbar to select the language.

DO NOT forget to raise a PR with the new translation file so that others can use it too.

Variables

There are few variables that you you should not change,

• %status : This will be replaced by the status
• %lastedFor : This will be replaced by the duration the incident lasted
• %startedAt : This will be replaced by the time the incident started
• %date : This will be replaced by the date
• %duration : This will be replaced by the duration

Dates

The localization for dates are still not there. We are working on it and will be available soon.