Traducir una página de marketing sin duplicarla
Este sitio tiene un selector de español en cada página desde hace un tiempo, pero hasta hoy una página mentía en silencio al respecto: /es/apps/deep-cut-atlas existía, tenía una URL, aparecía en las etiquetas hreflang, el selector apuntaba a ella, y cada palabra ahí estaba en inglés. El mecanismo de fallback de i18n de Astro facilita terminar así: se configura un locale de respaldo y cada ruta obtiene automáticamente una contraparte /es/ funcional, sin importar si alguien tradujo el contenido de verdad o no. La página técnicamente “existía.” Solo que no estaba en español.
Mi primer instinto fue copiar la página, traducir el texto dentro de la copia, y darlo por terminado, la misma forma que la última corrección de traducción que hice en este sitio hace meses. Me quedé pensando ese plan antes de tocar ningún archivo, y se cayó al inspeccionarlo: duplicar ~130 líneas de markup casi idéntico en dos archivos es exactamente la trampa que había corregido en otro issue ese mismo día, donde un string hardcodeado existía en dos lugares y solo uno de ellos se actualizaba. Dos copias de la misma página son dos lugares donde las versiones en inglés y en español pueden desalinearse en silencio la próxima vez que alguien edite una y olvide la otra.
La solución fue ver cómo la portada ya resuelve este mismo problema. Tampoco tiene dos copias de su contenido, tiene un componente consciente del locale que lee en qué idioma se está renderizando y toma sus strings de un diccionario compartido, más dos archivos de ruta delgados que son casi idénticos salvo por qué idioma piden. Reestructuré la página de Deep Cut Atlas de la misma forma: todo el markup real se movió a un componente, una nueva entrada del diccionario guarda el texto en inglés y en español lado a lado, y los dos archivos de ruta quedaron en unas diez líneas cada uno. Ahora hay exactamente una versión de la estructura de la página. Si necesita un cambio de diseño, necesita una edición, no dos ediciones que recordar.
La parte que más me preocupaba romper era la página en inglés misma, refactorizar “cómo una página obtiene sus strings” mientras se intenta dejar la página real sin cambios es el tipo de cambio donde un desliz de copiar y pegar es fácil de cometer y fácil de pasar por alto, porque el build igual tiene éxito de todas formas. Así que antes de tocar nada, guardé el HTML compilado en inglés como una instantánea, y después del refactor comparé el texto visible contra esa instantánea. La codificación de espacios y entidades HTML difería un poco, "To Check Out" salía como comillas literales antes y "To Check Out" después, ya que un camino era un string crudo y el otro pasaba por una plantilla con auto-escape, pero una vez decodificadas las entidades, cada palabra coincidía. Ese diff es la única razón por la que puedo decir “la página en inglés no cambió” en lugar de “creo que la página en inglés no cambió.”
Algo que casi se me pasó: la portada de este sitio tiene una tarjeta de Deep Cut Atlas con un enlace a la página de la app, y el código que arma ese enlace tenía un comentario, “no es/ counterpart yet”, que explicaba por qué siempre apuntaba a la URL en inglés sin importar en qué idioma estuviera la portada misma. Ese comentario dejó de ser cierto en el momento en que agregué la página en español, pero los comentarios no lanzan errores cuando lo que describen cambia. Si no hubiera ido a buscar cada lugar donde se enlaza esta página, una persona visitante en español en la portada en español igual terminaría en una página en inglés, y el selector ahí funcionaría correctamente, así que el bug parecería arreglado y solo estaría arreglado a medias.
Traducir el texto real fue la parte más divertida y la menos riesgosa: cuatro descripciones de funciones, tres pasos de onboarding, un eslogan, algunas etiquetas de botones. Traté de no traducir palabra por palabra; un par de frases en inglés (“slipped past you,” un “keeps everything” exagerado) ya habían sido reformuladas por tono ese mismo día, y quería que la versión en español se leyera como algo que alguien realmente diría, no como una frase pasada por un diccionario.
Lecturas relacionadas
Decirle a un lector en español por qué la página está en inglés
El fallback era la opción correcta por defecto y completamente silencioso. Dos tipos distintos de fallback necesitaban dos chequeos de detección distintos, y el caso negativo era la mitad que valía la pena probar.
La portada fue la única página que el i18n olvidó
El selector de idioma funcionaba perfecto. Solo que no había nada del otro lado: seis componentes de literales en inglés, un archivo de datos plano en inglés, y un servidor de desarrollo que mintió durante veinte minutos.
El párrafo que se saltó la traducción porque nunca preguntó
Un párrafo del pie de página estaba codificado en inglés junto a cadenas en español completamente traducidas, porque nunca estuvo en el archivo de cadenas i18n compartido.