chore: status-page translations content (openstatusHQ#2001)

* chore: status-page translations content

* chore: content

Author: mxkaske

apps/docs/astro.config.mjs

@@ -153,6 +153,10 @@ export default defineConfig({
               label: "Self host Status Page only",
               slug: "guides/self-host-status-page-only",
             },
+            {
+              label: "How to translate your status page",
+              slug: "guides/how-to-translate-status-page",
+            },
           ],
         },
         {

apps/docs/src/content/docs/guides/how-to-translate-status-page.mdx

@@ -0,0 +1,68 @@
+---
+title: How to translate your status page
+description: Enable multiple languages on your status page and contribute new translations.
+---
+
+OpenStatus status pages support multiple languages. You can configure which locales are available per page and set a default language. Visitors can switch between languages using a built-in locale switcher.
+
+## Supported locales
+
+Currently supported languages:
+
+| Code | Language |
+|------|----------|
+| `en` | English |
+| `fr` | Fran\u00e7ais |
+| `de` | Deutsch |
+
+## Enable translations on your status page
+
+1. Go to your **Dashboard** and open the status page settings.
+2. Under **Locales**, select a **Default Locale** for your page.
+3. Check **Enable locale switcher** to allow visitors to switch languages.
+4. Select which languages you want to offer.
+5. Click **Submit**.
+
+When the locale switcher is enabled, visitors will see a language dropdown on your status page. The default locale is omitted from the URL for cleaner paths (e.g., `/status` instead of `/status/en`), while non-default locales are included (e.g., `/status/fr`).
+
+## How routing works
+
+OpenStatus supports two routing modes for locales:
+
+- **Pathname routing** (subdomains like `status.openstatus.dev`): the locale appears after the slug, e.g., `/status/fr/events`.
+- **Hostname routing** (custom domains like `status.example.com`): the locale is the first path segment, e.g., `/fr/events`.
+
+In both cases, the default locale is omitted from the URL (`as-needed` prefix strategy).
+
+## Contributing a new locale
+
+Translations are open source. To add a new language:
+
+### 1. Extend the locale registry
+
+Add your locale to `packages/locales/index.ts`:
+
+```ts
+export const locales = ["en", "fr", "de", "es"] as const;
+// ...
+export const localeDetails: Record<Locale, { name: string; flag: string }> = {
+  en: { name: "English", flag: "\ud83c\uddfa\ud83c\uddf8" },
+  fr: { name: "Fran\u00e7ais", flag: "\ud83c\uddeb\ud83c\uddf7" },
+  de: { name: "Deutsch", flag: "\ud83c\udde9\ud83c\uddea" },
+  es: { name: "Espa\u00f1ol", flag: "\ud83c\uddea\ud83c\uddf8" },
+};
+```
+
+### 2. Generate the translation file
+
+Run the status page dev server:
+
+```bash
+pnpm dev:status-page
+```
+
+The `next-intl` extraction plugin will automatically create a new `apps/status-page/messages/<locale>.json` file with all translation keys pre-populated from the source locale. You can then fill in the translations.
+
+### 3. Submit a pull request
+
+Once your translations are complete, submit a PR to the [OpenStatus repository](https://github.com/openstatusHQ/openstatus). The locale will become available to all status pages after the next deployment.

apps/docs/src/content/docs/reference/status-page.mdx

@@ -12,6 +12,7 @@ A status page is a dedicated web interface provided by OpenStatus that publicly
 -   Incident communication and history.
 -   Customizable branding and domain.
 -   Multiple access control options.
+-   Multi-language support with a locale switcher.
 
 ## Configuration
 
@@ -84,6 +85,22 @@ ssh [slug]@ssh.openstatus.dev
 
 **Example:** `ssh my-service@ssh.openstatus.dev`
 
+### Translations (i18n)
+
+**Type:** Per-page configuration
+
+Enables multi-language support for your status page. You can set a default locale and optionally enable a locale switcher so visitors can choose their preferred language.
+
+**Supported locales:** `en` (English), `fr` (Français), `de` (Deutsch)
+
+**Configuration:**
+- **Default Locale** — the fallback language for your status page (defaults to `en`).
+- **Locale Switcher** — when enabled, visitors see a language dropdown. You select which locales to offer.
+
+**Routing:** The default locale is omitted from the URL (`as-needed` prefix). Non-default locales appear in the path (e.g., `/fr/events`).
+
+See [How to translate your status page](/guides/how-to-translate-status-page) for setup instructions and contributing new translations.
+
 ### White Label
 
 **Type:** Boolean (add-on feature)
@@ -95,3 +112,4 @@ Removes the "powered by openstatus.dev" footer from your status page, providing
 - **[Create Status Page](/tutorial/how-to-create-status-page)** - Step-by-step tutorial on creating a status page.
 - **[How to Configure Status Page](/tutorial/how-to-configure-status-page)** - Guide on advanced status page configuration.
 - **[Status Report Reference](/reference/status-report)** - Details on how incident statuses are managed and reported.
+- **[How to Translate Your Status Page](/guides/how-to-translate-status-page)** - Enable multiple languages and contribute translations.

apps/docs/src/content/docs/tutorial/how-to-configure-status-page.mdx

@@ -30,6 +30,7 @@ By the end of this tutorial, you'll have:
 - A customized status page with your preferred theme
 - Configured status trackers displaying data your way
 - Links to important resources
+- Multi-language support with a locale switcher
 - Preview and live configuration experience
 
 ## Status Page Customization
@@ -123,6 +124,18 @@ Let's have a closer look at your status page header navigation:
 
 ---
 
+### 4. Locales
+
+You can offer your status page in multiple languages. In the **Locales** section of your status page settings:
+
+1. Choose a **Default Locale** — the fallback language for visitors.
+2. Enable the **Locale Switcher** to let visitors pick their preferred language.
+3. Select which languages to make available.
+
+Currently supported: English, French, and German. See [How to translate your status page](/guides/how-to-translate-status-page) for details on contributing new translations.
+
+---
+
 We are continuously adding new features. Feel free to let us know what's missing!
 
 ## What you've accomplished
@@ -132,6 +145,7 @@ Excellent work! You've successfully:
 - ✅ Customized status tracker display options
 - ✅ Explored and applied theme settings
 - ✅ Added navigation links to your status page
+- ✅ Configured locales and the language switcher
 - ✅ Previewed changes before making them live
 
 ## What's next?

apps/web/public/assets/changelog/status-page-i18n.png

@@ -0,0 +1,17 @@
+---
+title: "Status Page i18n"
+description: "Translate your status page into multiple languages and let visitors switch between them."
+publishedAt: "2026-03-22"
+image: "/assets/changelog/status-page-i18n.png"
+category: "statuspage"
+author: "openstatus"
+---
+
+Status pages now support multiple languages out of the box. Configure which locales are available and set a default language for your page — visitors can switch between them with a built-in locale switcher.
+
+- **Multi-language support** - enable English, French, and German translations for your status page
+- **Per-page configuration** - choose which languages to offer and set the default locale from the dashboard
+- **Locale switcher** - visitors can switch languages directly on the status page, works with both subdomain and pathname routing
+- **Locale-aware routing** - the default locale is omitted from the URL for cleaner paths, non-default locales are included automatically
+
+Big props to [@aggmoulik](https://github.com/aggmoulik) who initiated the feature.

apps/web/src/content/pages/changelog/status-page-i18n.mdx

@@ -9,6 +9,8 @@ faq:
     answer: "Use public status pages for customer-facing services where transparency builds trust. Use private status pages (password-protected or magic link) for internal tools, client-specific deployments, or when you need to control who receives status updates."
   - question: "What's the difference between monitors and external services in page components?"
     answer: "Monitors are automatically synced with your OpenStatus uptime monitoring data and update in real-time. External services are manually managed components for third-party dependencies or systems you don't directly monitor but want to report status for."
+  - question: "Can I translate my status page into other languages?"
+    answer: "Yes, status pages support multiple languages (currently English, French, and German). You can set a default locale and enable a locale switcher so visitors choose their preferred language. Translations are open source — you can contribute new languages by adding a locale to the shared registry and running the dev server to generate the translation file."
   - question: "Can I use my own domain for the status page?"
     answer: "Yes, you can configure custom domains to host your status page on your own domain (e.g., status.yourcompany.com) instead of the default OpenStatus subdomain. This keeps the experience consistent with your brand."
   - question: "How do status page subscriptions work?"
@@ -84,6 +86,10 @@ We support following communication channels:
 
 [Contact us](mailto:ping@openstatus.dev) if you are looking for specific a channel.
 
+### Translations
+
+Offer your status page in **multiple languages**. Set a default locale and enable a **locale switcher** so visitors can read updates in their preferred language. Currently supports English, French, and German — with more languages coming from community contributions.
+
 ### Audience
 
 By default, your status page is public. For internal or client-specific pages, you can protect access using **password protection** or **magic link** authentication to control who can view your updates.