Internationalization

Statusfy was designed with i18n in mind and has some built-in capabilities to provide a better user (and Web Crawler Bot 🤓) experience.

Features

Automatic routes generation prefixed with locale code

For any extra languages, locale-prefixed URLs will be generated. For Example, suppose your Status Page System supports three languages: Spanish, French, and English as the default language, you will have the following pages in your project:

# English
/
/history
/incidents/**
/...

# Spanish
/es/
/es/history
/es/incidents/**
/es/...

# French
/fr/
/fr/history
/fr/incidents/**
/fr/...

SEO

Statusfy attemps to add some metadata to improve your pages SEO. Here's what it does:

  • Add a lang attribute containing current locale's ISO code to the <html> tag.
  • Generate Alternate URLs: <link rel="alternate" hreflang="x"> tags for every language configured in the configration file. For each language, the ISO code is used as hreflang attribute's value.
  • Generate og:locale and og:locale:alternate meta tags as defined in the Open Graph protocol.

ADVERTENCIA

You should set a valid URL in the baseUrl field (more info in the Config Reference) to your production domain in order to make Alternate URLs fully-qualified.

Translations messages lazy-loading

By default, all the translation messages are lazy-loaded, and downloaded when a user selects a language. This speeds up the initial load of the Website and lightens its overall weight.

Redirection based on browser language

Statusfy attempts to redirect users to their preferred language by detecting their browser's language. It sets a cookie after the first redirection in order to prevent redirecting users every time they visit your Website.

NOTE

This behavior is only available on the Server Rendered Mode.

Configuration

By default, Statusfy assumes that your default language is English. But it can be easily changed in your config file, modifying the defaultLocale field:

{
  defaultLocale: 'es'
}

You can also indicate what are the available languages updating the locales field in your config file:

{
  locales: [
    { code: 'es', iso: 'es-US', name: 'Español' },
    { code: 'fr', iso: 'fr-FR', name: 'Français' }
  ]
}

Please note the fields for each language definition, they are really important and are used for many reasons:

  • code: The two-letter representation (ISO 639-1 format) of the language. It is used when prefixing the URLs.
  • iso: The identification of the language in a two-letter representation (in ISO 639-1 format) with an optional region (in ISO 3166-1 Alpha 2 format). More information here. It is used when attempting to improve the pages SEO.
  • name: An user-friendly name for the Language. It's used in the language switcher located in the Footer of each page.

Finally, you must create the translation files (is JSON format) for your languages in the ./locales folder.

/locales/es.json
/locales/fr.json

Now, you can translate the title, the description and the systems of your Status Page System, and also define extra links in the Footer of the Website:

{
  "title": "Statusfy Demo",
  "description": "Un maravilloso Sistema de Página de Estado de código abierto.",
  "links": {
    "contact": "https://statusfy.co/es/contact",
    "suport": "https://statusfy.co/es/support",
    "home": "https://statusfy.co/es/"
  },
  "systems": {
    "items": {
      "cdn": {
        "title": "CDN"
      },
      "conversions": {
        "title": "Conversiones",
        "description": "Conversión de un archivo a otro"
      },
      "site-delivery": {
        "title": "Entrega del Sitio"
      },
      "api": {
        "title": "API",
        "description": "Los puntos finales del API a los que cualquier desarrollador puede acceder"
      }
    }
  }
}

We recommend that must be defined the Title and Description of the Website and at least the title of each System. The description of the Systems will be displayed as Tooltips at the Systems section in the Home Page of the Website:

System Tooltip

IMPORTANT

Currently, Statusfy comes only with the System Interface Translation for two languages: English and Spanish. If you want to use another language, you must copy one of these translations and translate it into your desired language.


🤓 We're open to any contribution that translates Statusfy to other languages.

Last Updated: 11/13/2018, 8:39:22 PM
Want to keep up with the latest news, tips and tricks from Statusfy?
Subscribe to our Newsletter!