Prototype: Internationalization setup for BookBrainz (About page)

samvit-srivastava · March 27, 2026, 9:16am

Hi,

I’ve been exploring how to add internationalization to BookBrainz and building a small prototype using the About page.

The goal was to test whether react-i18next can be integrated into the existing structure without breaking link rendering.

gist.github.com

https://gist.github.com/samvit-srivastava/31a56e471a91e07002fb3d7af20727d4

about.tsx

/* eslint-disable */
/*
 * Copyright (C) 2015  Ben Ockmore
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,

This file has been truncated. show original

en-translation.json

"about": {
        "title": "About BookBrainz",
        "intro": "BookBrainz is an online encyclopaedia which contains information about published literature. Our aim is to collect and store data about every book, magazine, journal or other publication ever written.",
        "commitment": "We are committed to making BookBrainz the definitive source of publication metadata. We hope to attract many contributors, who will be able to use their knowledge of literature to expand the database through our website. If you think you can help,",
        "becomeEditor": "become a BookBrainz editor!",
        "contributors": "BookBrainz relies on contributions from editors to expand the knowledge contained in the database. Editors can add new data to the site, fix any errors in the existing information, and create 0s between pieces of information.",

    "accessingData": {
        "title": "Accessing the data",
        "description": "The BookBrainz data is freely available to everyone, for any use. Please see our <0>licensing page</0> for more details",

This file has been truncated. show original

es-translation.json

{
  "about": {
        "title": "Acerca de BookBrainz",
        "intro": "BookBrainz es una enciclopedia en línea que contiene información sobre literatura publicada. Nuestro objetivo es recopilar y almacenar datos sobre cada libro, revista, publicación periódica u otra obra publicada.",
        "commitment": "Estamos comprometidos a hacer de BookBrainz la fuente definitiva de metadatos de publicaciones. Esperamos atraer a muchos colaboradores que puedan usar su conocimiento de la literatura para ampliar la base de datos a través de nuestro sitio web. Si crees que puedes ayudar,",
        "becomeEditor": "¡conviértete en editor de BookBrainz!",
        "contributors": "BookBrainz depende de las contribuciones de editores para ampliar el conocimiento contenido en la base de datos. Los editores pueden agregar nuevos datos al sitio, corregir errores en la información existente y crear enlaces entre distintas piezas de información.",

    "accessingData": {
        "title": "Acceso a los datos",

This file has been truncated. show original

There are more than three files. show original

I set up react-i18next with language detection and added English and Spanish translations.

While doing this, I ran into an issue with links not rendering properly inside translations. Fixed it by using indexed tags with the Trans component (e.g. <0>...</0>), and now links like licensing page, dumps, and documentation are showing correctly.

Also checked that names and inline links inside the story section work fine.

I went through the MetaBrainz translation setup (Weblate) and tried to follow a similar structure so this can fit in later:
https://translations.metabrainz.org/

This is just a prototype to test the approach.

What can be done more:

fix/improve the language toggle button UI
clean up the structure a bit
try extending this to other pages

Would love feedback on whether this direction looks reasonable before I include it in my proposal.

Thanks