đ Bridging the World: KairosLabâs Multilingual Magic Revealed
August 1, 2025
đ Hey there! Welcome back to our Lab Journal!
Last time we talked about the technical heart of KairosLab. Today, weâre diving into something even coolerâhow we turned our website into a âglobal citizen,â making everyone feel at home no matter what language they speak.
Our dream is to create a space where people from all over the world can share and create together. To make that happen, the website itself needs to be a language genius! And thatâs way more than just translating some textâit requires a smart, scalable architecture. So letâs pull back the curtain and reveal the magic!
đ§ Design Philosophy: One Brain to Rule Them All
Our biggest fear? Chaos. Imagine if adding a new language meant engineers had to play âWhereâs Waldoâ across the codebaseâmadness! And a recipe for bugs.
So we made a simple rule: everything language-related goes into one central command centerâsrc/i18n/config.ts
.
export const SUPPORTED_LOCALES = ["en", "es", "zh-tw", "zh-cn"];
export const DEFAULT_LOCALE = "en";
export const LanguageNames = {
en: "English",
es: "EspaĂąol",
"zh-tw": "çšéŤä¸ć",
"zh-cn": "çŽä˝ä¸ć",
};
export const DateLocaleMap: { [key: string]: string } = {
en: "en-US",
es: "es-ES",
"zh-tw": "zh-TW",
"zh-cn": "zh-CN",
};
This file is the brain of our multilingual system, and it handles a few key responsibilities:
-
SUPPORTED_LOCALES: Our âsupported languagesâ list
A public declaration that says, âHey! These are the languages we speak!â Astro will only build pages for these languagesâno half-baked orphan pages allowed. -
DEFAULT_LOCALE: Our default âglobal greetingâ
If a new visitor arrives and weâre not sure what language they speak, we greet them in English (our default). This also tells Google that among all our language versions, English is our âmain storefront.â -
LanguageNames & DateLocaleMap: Our cultural consultants
- The former ensures that language options are shown in familiar terms (like âçšéŤä¸ćâ instead of âTraditional Chineseâ)
- The latter ensures dates are displayed in culturally appropriate formats (e.g., â2025ĺš´8ć11ćĽâ vs. âAugust 11, 2025â)
Centralizing all settings means that adding a new language (say, German de
) only requires updating this one fileâand voilĂ , the whole site speaks German. Efficient and elegant!
đŚ Content Management: Let the Right People Do the Right Things
A multilingual siteâs content generally falls into two categories:
- Fragmented UI text (buttons, headings, etc.)
- Structured long-form content (blog posts, etc.)
đ§ą UI Text: LEGO Blocks in JSON Drawers
We store all fragmented UI textâlike âSubmitâ on a button or âAbout Usâ in the navâin neatly categorized .json
drawers:
common.json
: Shared blocks across the sitemain.json
: Homepage-specific blockscategories.json
: Blocks for blog categories
This setup means translators can simply open the right drawer and swap out a blockâno need to touch the code. Super convenient!
âď¸ Long-Form Content: A Distraction-Free Writing Zone
For blog posts and other long-form content, we rely on Astroâs powerful Content Collections feature:
- Writers use Markdown and save files in the
src/content/
folder - We use Zod as a âquality inspectorâ to validate article formats (like title and date)
This ensures that published content is flawless.
Separating content from code makes collaboration smooth and efficient!
đ§ Smart Routing: A Language Experience That Feels Personal
We want our site to feel like a thoughtful guideâone that understands you. So we designed a combo system:
âď¸ First Impressions Matter: Airport Greeter (Vercel Edge Middleware)
When you visit for the first time, our âairport greeterâ checks your passport (browser language settings) before you even step through the gate. Thenâwhoosh!âyouâre redirected to the most appropriate language page before you even notice.
- So fast you wonât feel a thingâjust âWow, this site really gets me!â
- Great for SEOâGoogle sees the correct page right away!
đ Switch Anytime: Friendly Waiter (JavaScript)
When you click the language switcher, our âfriendly waiterâ jumps into action:
- Saves your language preference in a cookie (like stamping your membership card)
- Instantly redirects you to the new language page so you see the content you want
đ§ą Final Thoughts: Laying Every Brick for Borderless Dialogue
Building a powerful multilingual site is a serious undertakingâbut totally worth it. Because it means we genuinely want to connect with the world.
Thanks to this solid foundation, we can confidently say:
KairosLab is a platform born for global dialogueâa place where you feel at home, no matter where you are.
Weâve laid every brick for this borderless journey, and now, we canât wait for you to join us!
đ˘ Next Up: Weâll talk about how to make Google fall in love with usâstay tuned!