spark-emdash-multilingual

Multilingual editing UX for emdash CMS. Companion plugin to spark-emdash — adds locale switching, translation status, side-by-side editing, and a translation dashboard to the admin.

Built by Alchemy Zürich for production multilingual sites on Cloudflare Workers.

Why multilingual matters (especially in Switzerland)

Switzerland runs on three languages. Your Zürich clients expect Deutsch, your Romandie leads need Français, and your international pipeline reads English. If your CMS admin makes multilingual editing painful, your editors will skip translations — and you'll lose rankings in three markets at once.

Google treats de-CH, fr-CH, and en as separate search markets. AI Overviews and Perplexity cite whichever locale version has the strongest E-E-A-T signals. A page that exists in one language but not the other two is invisible to two-thirds of Swiss search traffic. The translation dashboard in this plugin shows you exactly where those gaps are — so you can fix them before your competitors do.

For Swiss agencies building on emdash: this plugin turns "we should translate that" into a visible, trackable workflow your editors will actually follow.

What does it do?

| Feature | What changes | |---------|-------------| | Locale bar | Sticky locale switcher at the top of the admin — DE / FR / EN tabs, persists across navigation | | Translation status badges | Colored dots next to each content item: green (translated), yellow (outdated), red (missing) | | Side-by-side editor | Source language shown read-only alongside the translation form when editing non-default locales | | Copy-from-source | Per-field button to copy the source locale value into the current field | | Completeness bar | Progress indicator showing "12/18 fields translated (67%)" in the edit view | | Stale translation warning | Yellow banner when the source language was updated after the current translation | | Bulk publish | "Publish All Languages" button that publishes all locale variants in one click | | Translation dashboard | Matrix view of all content items × locales with missing/outdated/ok status |

All features inject via Astro middleware, same pattern as spark-emdash. No emdash internals modified.

Install

npm install spark-emdash-multilingual

Usage

In your src/middleware.ts:

import { sparkEmdash } from "spark-emdash/middleware";
import { sparkMultilingual } from "spark-emdash-multilingual/middleware";
import { sequence } from "astro:middleware";

export const onRequest = sequence(
  sparkEmdash({ layouts: { /* ... */ } }),
  sparkMultilingual({
    locales: ["de", "fr", "en"],
    defaultLocale: "de",
    labels: {
      de: "Deutsch",
      fr: "Français",
      en: "English",
    },
  })
);

Configuration

| Property | Type | Description | |----------|------|-------------| | locales | string[] | All locale codes, e.g. ["de", "fr", "en"] | | defaultLocale | string | The source language that translations are based on | | labels | Record<string, string>? | Display names for locale tabs (defaults to uppercase code) |

How it works

The plugin intercepts HTML responses from /_emdash/admin and injects CSS + JS that:

1. Locale bar: Renders locale tabs from config, stores selection in localStorage, updates ?locale= URL param on switch
2. Badges: Calls /_emdash/api/content/{collection}/{id}/translations to check which locales exist and their freshness
3. Side-by-side: Fetches the default-locale version via API and renders a read-only source panel alongside the edit form
4. Completeness: Counts empty vs filled fields in real-time
5. Stale warnings: Compares updatedAt timestamps between source and translation
6. Bulk publish: Calls the publish endpoint for each locale variant
7. Dashboard: Fetches all collections, groups by translation_group, and renders a status matrix

Requires emdash's i18n to be enabled in the CMS config with "supports": ["i18n"] on collections.

API reference

import { sparkMultilingual, buildPatch } from "spark-emdash-multilingual";
import type { MultilingualConfig } from "spark-emdash-multilingual";

| Export | Description | |--------|-------------| | sparkMultilingual(config) | Returns an Astro middleware handler | | buildPatch(config) | Returns the raw HTML string for custom injection |

License

MIT

Built by

Alchemy Zürich builds handcrafted brands for passionate megalomaniacs. spark-emdash-multilingual makes sure your content editors can actually manage 3 languages without losing their minds.