Internationalization

Kite supports English and Chinese. Plugins use the SDK's internationalization utilities to share this language setting. Each plugin manages its own translations, and plugin text updates when the user changes Kite's language.

Translation Files

Store translations in src/locales/en.json and src/locales/zh.json. Both files must have exactly the same key structure, or the build fails:

{
  "navigation": {
    "workloads": "Workload tools",
    "deployment": "Deployment"
  },
  "actions": {
    "refresh": "Refresh {{name}}"
  }
}

Configure Internationalization

Import the translation files and call createPluginI18n() in src/i18n.ts:

import { createPluginI18n } from '@kite-dev/plugin-sdk/i18n'

import en from './locales/en.json'
import zh from './locales/zh.json'

export const {
  resources: translations,
  label,
  useTranslation,
} = createPluginI18n({ en, zh })

createPluginI18n provides two ways to use translations:

• label(key): use it for route titles, menu labels, and tab labels in plugin.config.tsx. It returns the English and Chinese text for a key, which Kite displays in the current language.
• useTranslation(): use it in page components to resolve keys in the current language.

Use label in Configuration

import { lazy } from 'react'
import { definePlugin } from '@kite-dev/plugin-sdk'

import { label, translations } from './src/i18n'

const WorkloadsPage = lazy(() => import('./src/pages/workloads'))

export default definePlugin({
  i18n: translations,
  routes: [
    { id: 'workloads', path: '', title: label('navigation.workloads'), element: <WorkloadsPage /> },
  ],
  menus: [
    { id: 'workloads', label: label('navigation.workloads'), route: 'workloads' },
  ],
})

Use t in Pages

Import useTranslation from your local src/i18n.ts in page components:

import { Button } from '@kite-dev/plugin-sdk/ui'

import { useTranslation } from '../i18n'

export function RefreshButton({ name, onClick }: { name: string; onClick: () => void }) {
  const { t } = useTranslation()
  return <Button onClick={onClick}>{t('actions.refresh', { name })}</Button>
}

• Keys passed to t('key') have TypeScript autocomplete.
• Use t('key', { name }) to interpolate in a message. i18next plural syntax is also supported.
• The hook also returns language, such as zh or en, for localized date and number formatting.

Behavior

• Page translations load with the plugin. You do not need to register a namespace manually. Kite removes the translations when the plugin is disabled.
• Translation keys must exist in both en.json and zh.json, with matching nesting at every level. Otherwise, the build fails.
• Missing translations display the raw key, such as actions.refresh, without throwing a runtime error.