El texto de la landing page que competía en la categoría equivocada

Leí la landing page de Deep Cut Atlas por primera vez en un buen tiempo y no sonaba a la app que construí. El párrafo de introducción decía que “muestra los álbumes, EPs y sencillos nuevos que quedaron sin escuchar”. La primera funcionalidad se titulaba “Lanzamientos nuevos, filtrados a lo que realmente se sigue”. Es una descripción precisa de lo que hace la app. También es, palabra por palabra, el mensaje de MusicHarbor, una app que lleva años haciendo seguimiento de lanzamientos nuevos para Apple Music y lo hace bien.

Competir en el terreno de otro es una jugada perdedora cuando no hace falta. Así que abrí el view model real para revisar para qué se había construido la app.

El comentario de documentación tenía el verdadero mensaje

DiscoverViewModel tiene un comentario de documentación que describe qué muestra: “deep cuts”, lanzamientos del catálogo de los artistas en la biblioteca del usuario que este todavía no tiene. No lanzamientos “nuevos”. Cualquier lanzamiento, de cualquier punto del catálogo de un artista, que nunca llegó a la biblioteca del usuario. Los estrenos nuevos son un subconjunto de eso. El catálogo anterior es el resto, y normalmente es mucho más grande.

La landing page nunca hacía esa distinción. Tampoco explicaba el nombre. “Deep Cut Atlas” es un buen nombre para una app que mapea el catálogo completo de un artista. Es un nombre extraño para una app que solo informa sobre los sencillos de esta semana.

Reescribiendo alrededor de la funcionalidad real

La solución fue solo de texto: cinco puntos en la landing page y en la tarjeta de proyecto de la portada, sin cambios de código. El gancho al que llegué: “El algoritmo encontró al artista. Deep Cut Atlas encuentra los álbumes.” Traza la línea entre lo que ya hace el propio motor de recomendaciones de Apple Music (mostrar artistas) y lo que agrega esta app (mostrar todo de esos artistas que todavía no se tienen).

También toqué dos puntos que el issue no señalaba explícitamente: un paso de “Cómo funciona” que todavía se titulaba “Mira las novedades”, y la meta description de la página, que todavía prometía “lanzamientos nuevos” para buscadores y vistas previas en redes sociales. Dejar cualquiera de los dos sin tocar habría deshecho en silencio la mitad de la reescritura, así que también los alineé.

Un problema de comillas en los atributos de Astro

Una edición rompió el build de una manera que costó un segundo entender. La meta description de la página es un atributo HTML plano en un componente de Astro: description='...'. Mi reescritura necesitaba un apóstrofo en “you’re missing” dentro de ese string con comillas simples, así que lo escapé con backslash: you\'re. Eso es válido dentro de un literal de string de JS. No es válido dentro de un atributo HTML plano, porque un atributo plano no es una expresión de JS en absoluto, es solo texto hasta el carácter de comilla que hace match. Prettier intentó volver a parsear el archivo, chocó con el backslash y la comilla sueltos, y reescribió todo el atributo convirtiéndolo en un desastre de varias líneas con palabras sueltas.

La solución fue dejar de pelear contra los dos tipos de comillas que necesitaba el string (un apóstrofo y un par de comillas dobles alrededor de “Para escuchar”) y cambiar el atributo a una expresión de JS con un template literal: description={…}. Los backticks no necesitan escapar ninguno de los dos tipos de comilla, así que toda la oración, apóstrofo incluido, simplemente funciona.

Resultado

npm run check, format:check y build pasaron todos. Corrí un preview local y usé curl en ambas páginas para confirmar que la frase “lanzamiento nuevo” ya no aparece en ninguna parte del sitio, y que el nuevo enfoque se renderiza donde debe. Un cambio pequeño, pero mueve la app a una categoría que sí puede ganar, en lugar de una donde el competidor establecido siempre gana la comparación.