Internationalization (i18n)

Starlight Kbd relies on Starlight’s built-in support for internationalization to provide multilingual support for keyboard shortcuts in your documentation.

See the Starlight internationalization documentation for more information on how to configure i18n in your Starlight website.

Translate keyboard type labels

By default, the Starlight Kbd plugin uses the same keyboard type label for all languages. To provide a different label for different languages, you can pass an object to the label type configuration option.

astro.config.mjs

// @ts-check
import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightKbd from 'starlight-kbd'

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightKbd({
          types: [
            {
              id: 'vim',
              label: 'Vim keybindings',
              label: {
                en: 'Vim keybindings',
                fr: 'Raccourcis Vim',
              },
              default: true,
            },
          ],
        }),
      ],
      title: 'My Docs',
    }),
  ],
})

Translate the UI

The Starlight Kbd plugin allows you to translate the default UI strings used by the plugin so that your pages with keyboard shortcuts can be fully localized and readers can enjoy a seamless experience in their preferred language.

English, French, and German translated UI strings are provided out of the box.

To provide translations for additional languages you support — or override the default ones — check the “Translate Starlight’s UI” guide in the Starlight documentation.

These are the English defaults of the existing strings Starlight Kbd ships with:

{
  "starlightKbd.kbd.keywords.then": " then ",
  "starlightKbd.kbdPicker.accessibleLabel": "Select keyboard type"
}