Las láminas están dibujadas como carteles y venían armonizadas: el
dibujo ocupa el 62,6 % de la izquierda y el resto es una banda lisa, que
es el sitio del texto. Las recorté creyendo que sobraba y no: ahora va
la lámina entera de fondo, pegada a la izquierda con el alto exacto de
la pantalla, y lo que sobre a la derecha se pinta del color de la propia
banda, así que en un monitor ancho la banda se alarga y no se ve dónde
acaba la imagen. La columna del texto empieza a 0,88 × el alto, que es
donde empieza la banda sea cual sea el ancho.
Sin cabecera, sin pie y sin barra de reproducción. Un cartel a pantalla
completa con el menú del sitio encima deja de ser un cartel, y de un
error se sale por la puerta que pone la propia página.
En vertical no vale ese reparto: al alto de un móvil el cartel se
quedaría en una franja del centro con el número cortado por los lados.
Ahí se apila, y con la otra versión del archivo —solo el dibujo, sin la
banda—, con el panel del color del borde del dibujo, que es exactamente
el color con el que la imagen termina.
Un 403 no es ninguno de los dos casos: la página existe y el sitio
funciona, es que no te toca. Esos salen sin ilustración. Y se descartan
los mensajes que pone SvelteKit cuando no hay uno nuestro: «Internal
Error» en un sitio en español es peor que no poner nada.
Con `src/error.html`, desnudo a propósito, para cuando la aplicación no
puede ni pintar su propia página de error.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Cada una lleva la suya: la del 404 y la del 500, recortadas del original
—traían una banda plana pegada a la derecha, de generarlas— y pasadas a
webp, 95 y 70 KB. El encabezado no repite lo que la lámina ya lleva
dibujado: dice lo mismo con otras palabras, para que no se lea dos veces
seguidas y para que la página siga teniendo titular si la imagen no
carga.
La música suena con un botón, no sola. Los navegadores cortan el audio
que empieza sin que el usuario haya tocado nada, y quien llega a un 404
desde un enlace roto no ha tocado nada: arrancarla al cargar no fallaría,
es que no sonaría, y en silencio. Con `preload="none"`, además, el mp3 no
se descarga hasta que se pide; sin eso, 686 KB a todo el que aterrice.
Y suena una cosa cada vez. Al 404 no se puede llegar sin recarga entera
—SvelteKit no enruta lo que no existe—, así que ahí nunca hay barra; al
500 sí, y entonces darle aquí pausa el tema, y darle al play de la barra
para esto.
Un 403 no es ninguna de las dos cosas: la página existe y el sitio
funciona, es que no te toca. Esos salen sin ilustración, con su mensaje,
en vez de con una lámina que miente. Y se descartan los mensajes que pone
SvelteKit cuando no hay uno nuestro: «Internal Error» en un sitio en
español es peor que no poner nada.
Con `src/error.html`, que es lo que sale cuando la aplicación no puede ni
pintar su propia página de error. Va desnudo a propósito: sin hoja de
estilos, sin fuentes, sin imagen y sin JavaScript, porque todo lo que
pidiera fuera podría estar caído también.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
El importador metió el texto; esto mete los archivos. Diez másteres a
media/audio (fuera de git), su muestra de cuarenta segundos a
static/muestras y la portada cuadrada de mil píxeles a static/images,
con sus filas en `medio` y atadas a cancion.audio_id, muestra_id y
portada_id. El disco se queda con la portada del primer tema porque la
carpeta no trae una suya.
Las portadas estaban en subcarpetas `cover` y `covers`, no en la raíz de
cada canción: el lector solo miraba la raíz y `Video`, así que ocho de
las diez iban a acabar con la miniatura de YouTube recortada. Ahora
busca la subcarpeta sin mirar mayúsculas, que además es un fallo de
verdad en Linux, donde `Video` no es `video`.
Comprobado a ojo: el botón de escuchar ya no está apagado, la muestra
suena (0:40, con su etiqueta) y las diez portadas cargan.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Fase 6. Está lo que todo lo demás necesita: quién entra y por dónde.
El rol vive en `usuario.rol`, con un CHECK que impide inventarse uno, y se da
con `npm run db:admin`. En una variable de entorno con correos habría sido más
rápido, pero entonces revocar a alguien pide un despliegue y a la pregunta
«quién administra esto» solo sabe contestar quien pueda leer la configuración
del servidor.
La guarda está en el `+layout.server.ts` de la carpeta y no en cada ruta: una
pantalla nueva queda protegida por el hecho de estar dentro. Sin sesión, a
entrar con la vuelta puesta; con sesión y sin el rol, 404 y no 403, porque un
403 confirma que el panel existe y dónde vive. Los tres casos, comprobados
contra la aplicación de verdad.
La portada contesta «qué falta» y no «cuánto hay». Cada sección trae lo que
tiene, lo que está a medias y los nombres de lo que está a medias: decir «1
género sin ficha» obliga a ir a buscar cuál, y esa búsqueda ya la ha hecho la
consulta. Dos viajes a la base para las siete filas.
Fuera Sveltia CMS y `static/admin/`. Editaba los Markdown de `src/content/`,
que desde la fase 4 no lee nadie: guardaba cambios que no salían en pantalla, y
además tapaba la ruta nueva.
Y de paso, la prueba de contacto que fallaba en la tanda completa y pasaba a
solas. No era aislamiento: `page.goto` vuelve al cargar, no al hidratar, y al
hidratar Svelte reescribe el valor de cada `input` con el del componente. Lo
tecleado antes de ese instante se perdía, y solo le pasaba al primer campo y
solo con la máquina cargada.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Cambia las referencias al dominio de trabajo: la URL canónica, los correos
de los textos legales, las direcciones de retorno de Google y Facebook, y
lo que espera la suite.
El `robots.txt` pasa de archivo estático a ruta generada. Llevaba el
dominio escrito a mano y se quedó anunciando el anterior: un mapa del
sitio mal anunciado no da ningún error, simplemente no lo encuentra
nadie. Ahora sale de `site.url`, igual que el mapa y las etiquetas de
cada página. De paso deja fuera del rastreo lo que depende de quién mira
—cuenta, carrito, favoritos, entrar, descargas—, que no es contenido.
Y el Nginx queda listo para el dominio, con los tres pasos que hay que
dar fuera del servidor: los registros A a 89.46.247.16, la redirección de
los puertos 80 y 443 a 192.168.18.171, y Certbot.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Cinco páginas legales en /legal, enlazadas desde el pie de todas las páginas:
información legal, condiciones de uso, privacidad, cookies y condiciones de
venta. Son borradores con los datos del titular marcados entre corchetes y un
aviso de que hace falta revisión de un abogado antes de vender: cubren lo que
pide la ley española, no son un documento validado.
La política de cookies y la de privacidad están escritas mirando el código, no
copiadas de una plantilla: dos cookies, las dos necesarias, y dos terceros
—Stripe y Resend— que reciben lo imprescindible.
Y eran tres, porque las tipografías venían de Google: cada visita mandaba la IP
del visitante a un tercero sin pedirlo y sin que aportara nada. Ahora se sirven
desde el propio dominio. Cargar la web ya no contacta con ningún dominio ajeno,
y hay una prueba que lo comprueba.
Aparte: el símbolo de marca registrada en el aviso de derechos, los botones de
reproducir de las tarjetas pasan de 48 a 36 píxeles —eran casi una quinta parte
de la portada, y cambiaban de proporción según la tarjeta— y el de ver el
carrito solo aparece cuando hay algo dentro.
De paso se arregla un fallo de tipos que estaba latente: `resolve()` tiene una
sobrecarga por ruta y no acepta una unión, así que la navegación dejaba de
compilar en cuanto se añadían rutas. Ahora se resuelve en `site.ts`, una a una.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
El texto del botón dorado se aclaraba al pasar el puntero y quedaba en 1,67 de
contraste sobre el oro. La causa no era el color del botón: `.btn:hover` pone
`color: inherit` —para que la regla general de los enlaces no tiña de dorado los
secundarios— y le gana por especificidad. Ahora el dorado repite su color ahí.
De paso, el dorado se parte en dos tokens porque hacía dos trabajos
incompatibles: de relleno tiene que ser claro para que encima se lea el marino
—7,6 de contraste en el tema claro— y escrito tiene que ser hondo para leerse
sobre el fondo —5,3—. Con un solo valor, el tema claro se quedaba en 4,4, por
debajo del mínimo. Y encima del oro va marino, no blanco, en los dos temas.
Los botones tenían tres tamaños distintos: el dorado a 16px con relleno 8/16 y
el de al lado a 14px con 12/24. Dos botones juntos con distinta letra se ven
como un descuido. Ahora hay una sola escala, y los 15px son los del menú.
El botón de ver el carrito solo aparece cuando hay algo dentro, con la cuenta:
uno que lleva a una página vacía gasta el sitio de una llamada a la acción para
decir que no hay nada.
Tres pruebas nuevas lo fijan, incluida la del contraste con el puntero encima,
que es donde estaba el fallo y donde una captura en reposo no lo enseña.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
El pack pasa de cinco a diez canciones por el mismo 1,50 €: diez canciones por
lo que cuesta un café. Es la propuesta, así que el número y el importe se leen
juntos en todas partes.
Las pruebas de la tienda estaban escritas con el cinco metido a mano y hubo que
reescribirlas enteras. Ahora dicen la regla en términos del propio tamaño del
pack, y el helper de las pruebas de extremo a extremo añade lo que haya a la
venta hasta llenarlo en vez de nombrar los temas uno a uno: así cambiar el
tamaño otra vez no obliga a tocar nada.
Las dos láminas de llamada estrenan foto propia con su velo, más cubriente que
el de la textura: sobre una imagen clara el texto blanco no se lee.
Y el dorado deja de ser plano en los botones. Un metal refleja, y lo que lo hace
parecer metal es la banda de luz que lo cruza; el fondo se pinta más alto que el
botón para que al acercar el puntero la luz recorra la pieza en vez de
limitarse a aclararla. El acento sube un punto de croma y baja uno de claridad,
que es lo que lo separa de un amarillo de rotulador.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
La portada abre con tres láminas: el disco en el tocadiscos, una invitación al
taller y otra a la tienda. Un carrusel mal hecho es de las piezas más hostiles
que hay —cambia mientras lees, no se para, y para un lector de pantalla es un
cajón que aparece y desaparece—, así que este se para al pasar el puntero o al
entrar el foco, tiene botón de pausa, no gira solo con `prefers-reduced-motion`
y deja las láminas ocultas con `inert`, fuera del orden de tabulación.
Las letras que no están en español se enfrentan con su traducción en dos
columnas, verso a verso. Cada columna declara su `lang`, que es lo que impide
que un lector de pantalla lea el inglés con voz española, y la traducción se
pinta con `pre-line`: es verso, y perder los cortes la deja inservible para
seguir la original. El nombre del idioma sale de `Intl.DisplayNames`.
Sobre el reproductor: ya sobrevivía a la navegación, porque vive en el layout
raíz fuera de `main`. Lo que faltaba era comprobarlo de verdad; el test decía
que la barra seguía visible, no que siguiera sonando. Ahora mira que la posición
avance.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
La portada estrena imagen de fondo propia, detrás del tocadiscos y del texto.
Llega en PNG de 2,1 MB y se sirve en tres anchos WebP: 10 kB en un móvil, 57 kB
en un panel grande. El velo que va encima se afloja hasta lo justo para que el
texto se lea, porque taparlo entero sería no haberlo puesto. El tema claro
todavía no tiene su versión, así que ahí sigue el clip de reserva.
La cabecera deja ver lo que pasa por debajo. La transparencia va con desenfoque
y no sola: sobre una imagen a sangre, un fondo solo translúcido dejaría el
contraste del menú a merced de lo que quedara detrás.
Y fuera las líneas entre secciones: separa el aire. Se quedan las que dibujan
una pieza —el pie, el reproductor, las filas de un listado, la tabla—.
Aparte, scripts/construir.mjs comprobaba `build/server/index.js`, un archivo
que adapter-node no genera: el servidor sale troceado en chunks. Daba por
fallido un build correcto.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Sitio del letrista y compositor, con SvelteKit 2 y Svelte 5.
El catálogo es contenido, no base de datos: estilos, álbumes, canciones y
capítulos son Markdown en `src/content/`, validados al compilar y compilados
dentro del bundle, así que recorrer la música no hace ni una consulta. La base
de datos guarda solo lo que generan las personas: cuentas, carritos, pedidos,
compras, valoraciones y favoritos.
Lo que hay:
- Música agrupada por estilos, con página propia para cada estilo, álbum y
tema, buscador y tabla ordenable.
- Reproductor persistente que sobrevive a la navegación. Suena un fragmento;
el archivo completo solo se obtiene comprando.
- Taller de letras: los principios del oficio y una ficha de creación por
estilo hispanoamericano.
- Blog con feed RSS, y etiquetas que cruzan blog y catálogo.
- Tienda con cuentas por código de correo, carrito, Stripe y descargas
protegidas.
- Panel de contenido en `/admin` que escribe los mismos Markdown.
- Tema oscuro de marca y su inversión clara, aplicado antes de pintar.
Lo que falta y no es código: las claves de Stripe y de correo, el tratamiento
del IVA, las páginas de condiciones y privacidad, y el material real. Las
canciones de ejemplo son inventadas y están para sustituirse; el audio son
marcadores salvo un tema.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
dev