Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 devops
|
ce929188ac | ||
|
devops
|
d299fc1201 | ||
|
devops
|
72a2715502 | ||
 gitea-actions
|
1ed06edbdd | ||
|
devops
|
ffcadc5dca | ||
|
devops
|
61c57fbf28 | ||
|
devops
|
a31a0d96b6 | ||
|
devops
|
ba2b290523 | ||
|
devops
|
cf9d642764 | ||
|
devops
|
48ef980910 | ||
|
devops
|
53b65965f3 | ||
|
devops
|
77044130aa | ||
|
devops
|
2b3768bfb4 | ||
|
devops
|
c9e8641bfb | ||
|
devops
|
99ddebcc8d | ||
|
devops
|
d3745c8617 | ||
|
devops
|
b123a5a9c9 | ||
|
devops
|
b5c2c36749 | ||
|
devops
|
f147f4c42c | ||
|
devops
|
d44ef5c35e |
No files matched your search
@@ -0,0 +1,225 @@
|
||||
# Sesión persistente de Claude Code (tmux en Docker)
|
||||
|
||||
## Problema que resuelve
|
||||
|
||||
Correr Claude Code directo en una shell SSH sobre el NAS lo ata al
|
||||
ciclo de vida de esa conexión: un corte de red, cambiar de laptop a
|
||||
tablet, o cerrar la terminal por accidente mata el proceso y con él
|
||||
todo el contexto de trabajo en curso — no hay forma de "retomar
|
||||
donde quedó" porque el proceso ya no existe.
|
||||
|
||||
**Esto es un problema distinto al de los límites de uso/cuota de
|
||||
Claude Code.** Este setup no aumenta cuota de mensajes ni tokens —
|
||||
eso lo controla el backend de Anthropic sin importar dónde corra el
|
||||
CLI. Lo único que resuelve es que la *sesión de terminal* sobreviva
|
||||
a cortes de red o cambios de dispositivo; si la cuota se agota, sigue
|
||||
agotada exactamente igual dentro de este setup.
|
||||
|
||||
## Por qué Docker y no instalación nativa
|
||||
|
||||
ZimaOS no tiene gestor de paquetes tradicional utilizable para esto:
|
||||
`/` está montado como `squashfs` de solo lectura (imagen del SO
|
||||
inmutable), y `/usr` es un overlay de solo lectura sobre eso —
|
||||
`/usr/local/bin` ni siquiera existe y no se puede crear, tampoco como
|
||||
root (`mkdir` falla con "Read-only file system"). No hay dónde
|
||||
instalar Node.js, npm ni tmux directamente sobre el host.
|
||||
|
||||
Un contenedor Docker sortea esto por completo: tiene su propio
|
||||
filesystem de escritura (overlay2), independiente del `squashfs` del
|
||||
host — ahí es donde `npm install -g` deja el binario de `claude` sin
|
||||
tocar el host en absoluto. Lo único que el contenedor toma del host
|
||||
es lo que se monta explícitamente como volumen.
|
||||
|
||||
## Arquitectura
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
SSH["Cliente SSH<br/>(laptop / tablet / lo que sea)"] -->|docker exec| C["Contenedor tmux-host<br/>--network host, --restart unless-stopped"]
|
||||
C --> T["tmux server<br/>sesión 'lab'"]
|
||||
T --> CC["proceso claude<br/>(Claude Code)"]
|
||||
C -.->|bind mount| DATA["/DATA (host)<br/>repos y configs del lab"]
|
||||
C -.->|bind mount| SOCK["/var/run/docker.sock (host)<br/>control de Docker/k3d"]
|
||||
C -.->|bind mount| HOME["/DATA/AppData/k3d-lab-v3/claude-code-home (host)<br/>-> /root/.claude"]
|
||||
```
|
||||
|
||||
El contenedor sigue vivo aunque la conexión SSH se corte — es el
|
||||
servidor tmux, no la shell del cliente, el que sostiene el proceso de
|
||||
Claude Code. `--restart unless-stopped` además lo revive si el NAS
|
||||
reinicia.
|
||||
|
||||
## Contenedor: `tmux-host`
|
||||
|
||||
```bash
|
||||
docker run -d \
|
||||
--name tmux-host \
|
||||
--restart unless-stopped \
|
||||
-v /DATA:/DATA \
|
||||
-v /media/HDD-Storage:/media/HDD-Storage \
|
||||
-v /var/run/docker.sock:/var/run/docker.sock \
|
||||
-v /DATA/AppData/k3d-lab-v3/claude-code-home:/root/.claude \
|
||||
-v /DATA/AppData/k3d-lab-v3/claude-code-home.json:/root/.claude.json \
|
||||
--network host \
|
||||
alpine sh -c "apk add --no-cache tmux docker-cli bash curl git kubectl nodejs npm && npm install -g @anthropic-ai/claude-code && git config --global --add safe.directory '*' && tail -f /dev/null"
|
||||
```
|
||||
|
||||
| Volumen | Destino | Por qué |
|
||||
|---|---|---|
|
||||
| `/DATA` | `/DATA` | Acceso a los repos (`apps-registry`, `platform-infra`, `scripts`) y configs del lab, mismos paths que en el host |
|
||||
| `/media/HDD-Storage` | `/media/HDD-Storage` | Ver "Gotcha: el symlink `/DATA/AppData`" abajo — sin esto, los repos no se ven dentro del contenedor pese a montar `/DATA` |
|
||||
| `/var/run/docker.sock` | `/var/run/docker.sock` | Seguir controlando Docker y k3d (contenedores, `k3d node`, etc.) desde dentro del contenedor |
|
||||
| `/DATA/AppData/k3d-lab-v3/claude-code-home` | `/root/.claude` | Persistir login/config de Claude Code — sobrevive no solo a un `docker restart`, sino a recrear el contenedor entero |
|
||||
| `/DATA/AppData/k3d-lab-v3/claude-code-home.json` | `/root/.claude.json` | Ver "Gotcha: la confianza del folder no persistía" abajo — es un archivo suelto, no vive dentro de `~/.claude/` |
|
||||
|
||||
## Gotcha: el symlink `/DATA/AppData`
|
||||
|
||||
Montar `-v /DATA:/DATA` **no alcanza** para ver los repos dentro del
|
||||
contenedor. `/DATA/AppData` en el host es un symlink *absoluto*:
|
||||
|
||||
```
|
||||
/DATA/AppData -> /media/HDD-Storage/AppData
|
||||
```
|
||||
|
||||
Los repos del lab (`lab-cruzcloud`) viven físicamente en el disco
|
||||
btrfs `/media/HDD-Storage`, no en el ext4 de `/DATA` — ZimaOS lo
|
||||
expone dentro de `/DATA` como submount (`/DATA/.media/HDD-Storage/...`,
|
||||
que sí viaja al contenedor porque Docker hace bind recursivo por
|
||||
defecto) pero el path "bonito" `/DATA/AppData/...` que usan `CLAUDE.md`
|
||||
y todos los scripts del lab llega ahí vía ese symlink absoluto, no vía
|
||||
el submount. Un symlink absoluto que apunta fuera del árbol montado
|
||||
queda roto dentro del contenedor aunque el submount subyacente esté
|
||||
perfectamente accesible por otra ruta.
|
||||
|
||||
**Cómo se detectó:** todo el trabajo de configuración inicial de este
|
||||
mismo setup se hizo con `git`/`docker exec` corriendo *en el host*, no
|
||||
dentro del contenedor — nadie había probado `cd
|
||||
/DATA/AppData/k3d-lab-v3/lab-cruzcloud` desde una sesión `lab` real
|
||||
hasta que se preguntó explícitamente por esto. `ls` devolvía "No such
|
||||
file or directory" pese a que el volumen de `/DATA` estaba montado y
|
||||
"andando".
|
||||
|
||||
**Fix:** montar también `-v /media/HDD-Storage:/media/HDD-Storage`,
|
||||
para que el symlink resuelva exactamente igual que en el host.
|
||||
|
||||
## Gotcha: git "dubious ownership" dentro del contenedor
|
||||
|
||||
Con el mount anterior ya arreglado, `git status`/`git log` dentro del
|
||||
contenedor fallan con:
|
||||
|
||||
```
|
||||
fatal: detected dubious ownership in repository at '/media/HDD-Storage/...'
|
||||
```
|
||||
|
||||
Los archivos en `/DATA`/`/media/HDD-Storage` pertenecen al usuario
|
||||
`devops` del host (via samba), pero los procesos dentro del
|
||||
contenedor corren como `root` (UID 0) — git, desde la versión que
|
||||
introdujo la protección CVE-2022-24765, rechaza operar sobre un repo
|
||||
cuyo dueño no coincide con el UID del proceso, a menos que el path
|
||||
esté explícitamente marcado como seguro.
|
||||
|
||||
**Fix:** `git config --global --add safe.directory '*'` dentro del
|
||||
contenedor. El wildcard (en vez de listar cada repo) es intencional
|
||||
acá: este contenedor ya tiene acceso root-equivalente al host vía el
|
||||
volumen de `/var/run/docker.sock`, así que restringir `safe.directory`
|
||||
por repo no suma aislamiento real.
|
||||
|
||||
**Por qué está en el comando de arranque y no como paso manual
|
||||
aparte:** igual que los paquetes `apk`, esta configuración vive en el
|
||||
filesystem efímero del contenedor (`/root/.gitconfig`, que no está
|
||||
bajo el volumen de `/root/.claude`) — se perdería si el contenedor se
|
||||
recrea. Ponerla en el `sh -c` de arranque la deja recreándose sola
|
||||
cada vez, sin pasos manuales que recordar.
|
||||
|
||||
## Gotcha: la confianza del folder no persistía
|
||||
|
||||
Al abrir `claude` por primera vez en un directorio, pide confirmar un
|
||||
diálogo de "¿confiás en este folder?" (más aún acá, porque este repo
|
||||
trae un `.claude/settings.local.json` con permisos pre-aprobados). Esa
|
||||
confirmación se guarda en `~/.claude.json` — un **archivo suelto en
|
||||
`/root`**, no dentro de la carpeta `~/.claude/` que ya estaba montada
|
||||
como volumen. Resultado: aunque el login (`~/.claude/.credentials.json`)
|
||||
sí persistía, el diálogo de confianza volvía a aparecer cada vez que
|
||||
se recreaba el contenedor — justo el tipo de "reconfigurar de nuevo"
|
||||
que este setup existe para evitar.
|
||||
|
||||
**Cómo se detectó:** al confirmar el diálogo por primera vez, se
|
||||
comparó `/root/.claude.json` dentro del contenedor contra sí mismo
|
||||
antes y después — mismo tamaño y mismo `mtime`, es decir, la
|
||||
confirmación en pantalla nunca se había registrado. La causa real:
|
||||
la primera vez se movió el selector con las flechas pero nunca se
|
||||
presionó Enter, así que en rigor el diálogo seguía sin confirmar; una
|
||||
vez confirmado *de verdad* (`tmux send-keys` moviendo el cursor a
|
||||
"Yes, I trust this folder" + Enter), el archivo saltó de 2.2 KB a
|
||||
40 KB y apareció la clave `projects` con la ruta del repo adentro.
|
||||
|
||||
**Fix:** copiar ese `.claude.json` ya confirmado a
|
||||
`/DATA/AppData/k3d-lab-v3/claude-code-home.json` en el host, y
|
||||
montarlo **archivo a archivo** (no como carpeta) en
|
||||
`-v .../claude-code-home.json:/root/.claude.json`. A diferencia de
|
||||
los demás volúmenes de este setup, este necesitó sembrarse con
|
||||
contenido real primero — un bind mount de archivo con un origen que
|
||||
no existe todavía en el host termina creando un directorio vacío en
|
||||
su lugar, no un archivo, y rompe el arranque del contenedor.
|
||||
Verificado en vivo: tras recrear el contenedor con este mount, `claude`
|
||||
arrancó directo en la sesión normal, sin volver a pedir el diálogo de
|
||||
confianza.
|
||||
|
||||
Sobre paquetes: alpine (imagen `alpine` sin pin de versión, la misma
|
||||
que uso este setup) sí trae `kubectl` en sus repos — no hizo falta
|
||||
cambiar de imagen base ni instalarlo por binario aparte, contrario a
|
||||
lo que se sospechaba inicialmente. `nodejs`/`npm` (v24/v11 al momento
|
||||
de escribir esto) también están en los repos de alpine y cumplen de
|
||||
sobra el mínimo que pide Claude Code.
|
||||
|
||||
**Nota sobre `--network host` + `docker.sock`:** el contenedor tiene,
|
||||
en la práctica, control equivalente a root sobre el NAS (puede lanzar
|
||||
cualquier otro contenedor con cualquier mount). Es una concesión
|
||||
deliberada — es exactamente lo que hace falta para seguir operando
|
||||
Docker/k3d desde dentro — no un descuido.
|
||||
|
||||
## Reconexión: un solo comando
|
||||
|
||||
```bash
|
||||
/media/HDD-Storage/AppData/k3d-lab-v3/lab-cruzcloud/scripts/lab-session.sh
|
||||
```
|
||||
|
||||
El script (`scripts/lab-session.sh`) es intencionalmente el mismo
|
||||
comando sin importar el estado previo:
|
||||
|
||||
```bash
|
||||
docker exec -it "$CONTAINER" tmux attach -t "$SESSION" || \
|
||||
docker exec -it "$CONTAINER" tmux new -s "$SESSION"
|
||||
```
|
||||
|
||||
Si la sesión `lab` existe, se adjunta a ella (mismo shell, mismo
|
||||
`claude` corriendo, mismo directorio de trabajo). Si no existe —por
|
||||
ejemplo justo después de que el contenedor se recreó desde cero— la
|
||||
crea. No hay que recordar cuál de los dos casos aplica.
|
||||
|
||||
## Qué sobrevive a qué
|
||||
|
||||
| Evento | ¿Sobrevive la sesión tmux (`lab`)? | ¿Sobrevive el login de Claude Code? |
|
||||
|---|---|---|
|
||||
| Corte de SSH / cerrar la terminal / cambiar de dispositivo | Sí — es exactamente el caso que este setup resuelve | Sí |
|
||||
| `docker restart tmux-host` (reinicio del NAS) | **No** — el proceso `tmux server` muere con el contenedor; `lab-session.sh` crea una sesión nueva automáticamente | Sí, vía el volumen montado en `/root/.claude` |
|
||||
| `docker rm` + recrear el contenedor desde cero | No | Sí, vía el mismo volumen — no hace falta volver a autenticar ni reconfirmar el diálogo de confianza del folder (ver el mount de `claude-code-home.json`) |
|
||||
|
||||
## Validación en vivo
|
||||
|
||||
Confirmado en este mismo lab (2026-08-27): se dejó una variable de
|
||||
entorno (`export MARCA_PERSISTENCIA=ok_<timestamp>`) corriendo dentro
|
||||
de la sesión `lab` vía `tmux send-keys`, y una invocación
|
||||
*completamente separada* de `docker exec` (equivalente a una nueva
|
||||
conexión) leyó de vuelta el mismo valor — confirma que el estado vive
|
||||
en el servidor tmux del contenedor, no en el cliente que se conecta.
|
||||
`claude --version` respondió `2.1.250` dentro de esa misma sesión, y
|
||||
un archivo de prueba escrito en `/root/.claude` dentro del contenedor
|
||||
apareció de inmediato en
|
||||
`/DATA/AppData/k3d-lab-v3/claude-code-home` en el host, confirmando
|
||||
el bind mount de credenciales.
|
||||
|
||||
Después de agregar el mount de `/media/HDD-Storage` y el
|
||||
`safe.directory`, se validó además: `md5sum` de `CLAUDE.md` idéntico
|
||||
leído desde el host y desde dentro del contenedor (vía el path con
|
||||
symlink `/DATA/AppData/...`), y `git log`/`git status` corriendo sin
|
||||
error sobre `apps-registry` y `scripts` desde una shell dentro de
|
||||
`tmux-host`.
|
||||
@@ -85,6 +85,7 @@ nav:
|
||||
- Red y exposición: arquitectura/red-y-exposicion.md
|
||||
- Flujo GitOps: arquitectura/gitops-flujo.md
|
||||
- Agente de monitoreo: arquitectura/agente-monitoreo.md
|
||||
- Sesión tmux persistente: arquitectura/sesion-tmux-persistente.md
|
||||
- Glosario: arquitectura/glosario.md
|
||||
- Decisiones (ADRs):
|
||||
- "0001 · Por qué k3d": decisiones/0001-por-que-k3d.md
|
||||
|
||||
@@ -25,7 +25,7 @@ spec:
|
||||
runAsNonRoot: false
|
||||
containers:
|
||||
- name: app
|
||||
image: gitea.cruzcloud.net/devops/docs-portal:v1.0.181
|
||||
image: gitea.cruzcloud.net/devops/docs-portal:v1.0.187
|
||||
# El base saca TODAS las capabilities. Probado en vivo y
|
||||
# revertido: con drop: ALL (aunque se agregue NET_BIND_SERVICE
|
||||
# de vuelta) el propio entrypoint de nginx:1.27-alpine falla al
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
/* ADR 0008 ("Navy & Coral") -- reemplaza ADR 0007 (Opcion 2, "Atelier
|
||||
calido"). Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md */
|
||||
--color-ari-marino: #122844; /* ancla: header, footer, badge "Nuevo", fondo de hero */
|
||||
--color-ari-coral: #D85A30; /* acento unico de accion: CTA, precio destacado */
|
||||
--color-ari-coral-claro: #F0997B; /* acento secundario: subtitulos sobre marino, ala inferior del isotipo */
|
||||
/* ADR 0008 -- paleta final "Azul & Amarillo" (inspirada en Walmart),
|
||||
iteracion sobre "Navy & Coral". Ver
|
||||
docs-portal/docs/decisiones/0008-identidad-navy-coral.md */
|
||||
--color-ari-marino: #0055B8; /* ancla: header, footer, badge "Nuevo", fondo de hero */
|
||||
--color-ari-coral: #0055B8; /* boton de accion (CTA): azul solido, nunca amarillo */
|
||||
--color-ari-coral-claro: #FFC220; /* acento: badges de oferta/descuento/urgencia, detalles del isotipo -- nunca en botones */
|
||||
|
||||
/* Alias de compatibilidad -- ADR 0007 definio estos nombres y hoy los
|
||||
siguen consumiendo catalog-client.tsx, product-card.tsx y button.tsx
|
||||
@@ -33,8 +34,8 @@
|
||||
html { scroll-behavior: smooth; }
|
||||
body { margin: 0; background: #FFFFFF; color: var(--color-slate-900); font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
|
||||
button, a { -webkit-tap-highlight-color: transparent; }
|
||||
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(216 90 48 / .5); outline-offset: 3px; }
|
||||
::selection { background: rgb(216 90 48 / .15); color: var(--color-slate-900); }
|
||||
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(0 85 184 / .5); outline-offset: 3px; }
|
||||
::selection { background: rgb(0 85 184 / .15); color: var(--color-slate-900); }
|
||||
|
||||
.content-auto {
|
||||
content-visibility: auto;
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
<!-- ADR 0008 ("Navy & Coral"). Version reducida del isotipo para favicon/
|
||||
app icon: solo circulo marino + mariposa, sin wordmark (no cabe
|
||||
legible a este tamano). Convencion de Next.js App Router: este
|
||||
archivo se sirve automaticamente como favicon/app icon. -->
|
||||
<!-- ADR 0008, paleta final "Azul & Amarillo" (Walmart-inspirada). Version
|
||||
reducida del isotipo para favicon/app icon: solo circulo azul +
|
||||
mariposa, sin wordmark (no cabe legible a este tamano). Convencion de
|
||||
Next.js App Router: este archivo se sirve automaticamente como
|
||||
favicon/app icon. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34" role="img" aria-label="ARI shopping">
|
||||
<circle cx="17" cy="17" r="17" fill="#122844"/>
|
||||
<circle cx="17" cy="17" r="17" fill="#0055B8"/>
|
||||
<g transform="translate(0 5)">
|
||||
<ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#D85A30"/>
|
||||
<ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#D85A30"/>
|
||||
<ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#F0997B"/>
|
||||
<ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#F0997B"/>
|
||||
<rect x="16" y="3" width="2" height="18" rx="1" fill="#122844"/>
|
||||
<ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#FFC220"/>
|
||||
<ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#FFC220"/>
|
||||
<ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#FFDD73"/>
|
||||
<ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#FFDD73"/>
|
||||
<rect x="16" y="3" width="2" height="18" rx="1" fill="#0055B8"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 895 B After Width: | Height: | Size: 932 B |
@@ -21,7 +21,7 @@ export const metadata: Metadata = {
|
||||
openGraph: { title: "ARI Shopping", description: "Tesoros para cada aventura.", type: "website", locale: "es_CO" },
|
||||
};
|
||||
|
||||
export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#122844" };
|
||||
export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#0055B8" };
|
||||
|
||||
// ADR 0008 ("Navy & Coral"): Poppins peso 700 para los "momentos de marca"
|
||||
// (wordmark, h1/h2, precio, CTA) + Inter para body/UI -- solo se carga el
|
||||
|
||||
@@ -323,18 +323,18 @@ export function CatalogClient({
|
||||
<div className="mb-8">
|
||||
{breadcrumb.length > 0 && (
|
||||
<nav aria-label="Breadcrumb" className="mb-4 flex flex-wrap items-center gap-1.5 text-xs font-bold text-slate-500">
|
||||
<Link href="/catalog" prefetch={false} className="hover:text-ari-ciruela">
|
||||
<Link href="/catalog" prefetch={false} className="hover:text-ari-coral">
|
||||
Inicio
|
||||
</Link>
|
||||
{breadcrumb.map((node, index) => (
|
||||
<span key={node.id} className="flex items-center gap-1.5">
|
||||
<ChevronRight className="size-3" />
|
||||
{index === breadcrumb.length - 1 ? (
|
||||
<span aria-current="page" className="text-ari-carbon">
|
||||
<span aria-current="page" className="text-ari-marino">
|
||||
{node.name}
|
||||
</span>
|
||||
) : (
|
||||
<Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-ari-ciruela">
|
||||
<Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-ari-coral">
|
||||
{node.name}
|
||||
</Link>
|
||||
)}
|
||||
@@ -342,23 +342,23 @@ export function CatalogClient({
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
<span className="text-xs font-black uppercase tracking-[.18em] text-ari-ciruela">
|
||||
<span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">
|
||||
Catálogo completo
|
||||
</span>
|
||||
<h1 className="font-display mt-2 text-5xl font-bold tracking-tight text-ari-carbon">Todos los tesoros</h1>
|
||||
<h1 className="font-display mt-2 text-5xl font-bold tracking-tight text-ari-marino">Todos los tesoros</h1>
|
||||
<p className="mt-3 text-slate-500">
|
||||
Filtra por categoría, marca o edad sin recargar la página.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-[260px_1fr]">
|
||||
<aside className="h-fit space-y-6 rounded-lg border border-slate-100 bg-white p-6 shadow-lg shadow-ari-carbon-oscuro/5 lg:sticky lg:top-44">
|
||||
<aside className="h-fit space-y-6 rounded-lg border border-slate-100 bg-white p-6 shadow-lg shadow-ari-marino/5 lg:sticky lg:top-44">
|
||||
<div className="flex items-center justify-between">
|
||||
<strong className="flex items-center gap-2 text-lg font-black">
|
||||
<SlidersHorizontal className="size-5 text-ari-cobre" />
|
||||
<SlidersHorizontal className="size-5 text-ari-coral-claro" />
|
||||
Filtros
|
||||
</strong>
|
||||
<button onClick={reset} className="text-xs font-black text-ari-ciruela">
|
||||
<button onClick={reset} className="text-xs font-black text-ari-coral">
|
||||
<X className="mr-1 inline size-3" />
|
||||
Limpiar
|
||||
</button>
|
||||
@@ -392,7 +392,7 @@ export function CatalogClient({
|
||||
step={5000}
|
||||
value={maxPrice}
|
||||
onChange={(event) => setMaxPrice(Number(event.target.value))}
|
||||
className="w-full accent-ari-ciruela"
|
||||
className="w-full accent-ari-coral"
|
||||
/>
|
||||
<p className="mt-2 text-xs font-bold text-slate-500">
|
||||
Hasta ${maxPrice.toLocaleString("es-CO")}
|
||||
@@ -470,8 +470,8 @@ function Filter({
|
||||
onClick={() => onChange(value)}
|
||||
className={`rounded-md px-3 py-2 text-xs font-bold transition ${
|
||||
selected === value
|
||||
? "bg-ari-carbon-oscuro text-white"
|
||||
: "bg-slate-100 text-slate-600 hover:bg-ari-cobre/10"
|
||||
? "bg-ari-marino text-white"
|
||||
: "bg-slate-100 text-slate-600 hover:bg-ari-coral-claro/10"
|
||||
}`}
|
||||
>
|
||||
{value}
|
||||
|
||||
@@ -50,7 +50,7 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
||||
</div>
|
||||
|
||||
<div className="relative overflow-visible bg-white">
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-ari-coral" />
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-ari-coral-claro" />
|
||||
<div className="mx-auto grid max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-4 px-4 py-4 lg:gap-8">
|
||||
<Link href="/" aria-label="ARI shopping" className="shrink-0">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}
|
||||
@@ -171,7 +171,7 @@ function CategoryNavBar({
|
||||
}) {
|
||||
return (
|
||||
<nav className="bg-ari-marino text-white">
|
||||
<div className="mx-auto flex max-w-7xl items-center gap-1 px-4 py-2">
|
||||
<div className="relative mx-auto flex max-w-7xl items-center gap-1 px-4 py-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@@ -213,7 +213,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="relative shrink-0" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
|
||||
<div ref={containerRef} className="shrink-0" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((value) => !value)}
|
||||
@@ -227,7 +227,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute left-0 top-full z-50 mt-1 w-[min(92vw,64rem)] rounded-2xl border border-white/10 bg-ari-marino p-6 shadow-2xl">
|
||||
<div className="absolute left-0 top-full z-50 mt-1 max-h-[80vh] w-[min(92vw,64rem)] overflow-y-auto rounded-2xl border border-white/10 bg-ari-marino p-6 shadow-2xl">
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-5 sm:grid-cols-3 lg:grid-cols-6">
|
||||
{tree.map((root) => (
|
||||
<div key={root.id}>
|
||||
|
||||
@@ -33,15 +33,15 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
||||
: null;
|
||||
|
||||
return (
|
||||
<article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-carbon-oscuro/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-ciruela/10">
|
||||
<div className="relative aspect-square overflow-hidden bg-ari-hueso">
|
||||
<article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-marino/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-coral/10">
|
||||
<div className="relative aspect-square overflow-hidden bg-white">
|
||||
<Link href={`/product/${product.slug}`} prefetch={false}><Image src={product.thumbnail} alt={product.name} fill priority={priority} sizes="(max-width: 640px) 82vw, (max-width: 1024px) 44vw, 280px" className="object-cover transition duration-500 group-hover:scale-[1.035]" /></Link>
|
||||
<div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-ari-terracota-oscuro text-white">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-carbon-oscuro text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-cobre text-white"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
|
||||
<button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-ari-ciruela text-white" : "bg-white/95 text-slate-900 hover:text-ari-ciruela"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
|
||||
<div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-ari-coral-claro text-ari-marino">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-marino text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-coral-claro text-ari-marino"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
|
||||
<button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-ari-coral text-white" : "bg-white/95 text-slate-900 hover:text-ari-coral"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col space-y-3 p-5">
|
||||
<div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-md bg-ari-cobre/10 px-2 py-1 text-ari-cobre">{product.collection}</span></div>
|
||||
<Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-ari-carbon group-hover:text-ari-ciruela">{product.name}</h3></Link>
|
||||
<div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-md bg-ari-coral-claro/10 px-2 py-1 text-ari-marino">{product.collection}</span></div>
|
||||
<Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-ari-marino group-hover:text-ari-coral">{product.name}</h3></Link>
|
||||
<p className="line-clamp-2 min-h-10 text-sm leading-5 text-slate-500">{product.shortDescription}</p>
|
||||
{product.variants.length > 1 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
@@ -55,7 +55,7 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
||||
onClick={() => setSelectedVariantId(variant.id)}
|
||||
className={`rounded-md border px-2.5 py-1 text-xs font-bold transition ${
|
||||
selectedVariantId === variant.id
|
||||
? "border-ari-ciruela bg-ari-ciruela/10 text-ari-ciruela"
|
||||
? "border-ari-coral bg-ari-coral/10 text-ari-coral"
|
||||
: "border-slate-200 text-slate-600 hover:border-slate-400"
|
||||
} ${!variant.available ? "cursor-not-allowed opacity-40" : ""}`}
|
||||
>
|
||||
@@ -70,7 +70,7 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
||||
<div className="mt-auto flex items-center justify-between gap-3 pt-1">
|
||||
<div className="flex flex-col">
|
||||
{product.compareAtPrice && <span className="text-xs font-bold text-slate-400 line-through">{formatMoney(product.compareAtPrice, product.currency)}</span>}
|
||||
<strong className="font-display text-base font-bold text-ari-carbon">{formatMoney(product.price, product.currency)}</strong>
|
||||
<strong className="font-display text-base font-bold text-ari-marino">{formatMoney(product.price, product.currency)}</strong>
|
||||
</div>
|
||||
<Button variant="primary" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,7 @@ spec:
|
||||
runAsUser: 1001
|
||||
containers:
|
||||
- name: app
|
||||
image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.180
|
||||
image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.185
|
||||
env:
|
||||
- name: HEADLESS_PROVIDER
|
||||
value: medusa
|
||||
|
||||
@@ -42,6 +42,22 @@ const nextConfig: NextConfig = {
|
||||
},
|
||||
],
|
||||
},
|
||||
// Assets de marca (logo, favicon) cambian con cada iteracion de
|
||||
// identidad visual, a diferencia de las fotos de producto -- el
|
||||
// cache de 7 dias de la regla anterior dejaba servido el logo
|
||||
// viejo en Cloudflare/navegador durante toda una semana despues de
|
||||
// cada deploy (ver ADR 0008). Next.js aplica el ultimo header que
|
||||
// matchee un mismo path, asi que esta regla, al ir despues,
|
||||
// sobreescribe el Cache-Control solo para /images/brand/*.
|
||||
{
|
||||
source: "/images/brand/:path*",
|
||||
headers: [
|
||||
{
|
||||
key: "Cache-Control",
|
||||
value: "public, max-age=300, must-revalidate",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
<!-- ADR 0008 ("Navy & Coral"). Isotipo: mariposa geometrica de 4 elipses
|
||||
sobre circulo/campo marino + wordmark "ARI shopping".
|
||||
<!-- ADR 0008, paleta final "Azul & Amarillo" (Walmart-inspirada). Isotipo:
|
||||
mariposa geometrica de 4 elipses sobre circulo/campo azul + wordmark
|
||||
"ARI shopping".
|
||||
Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" role="img" aria-label="ARI shopping">
|
||||
<rect width="200" height="64" rx="12" fill="#122844"/>
|
||||
<rect width="200" height="64" rx="12" fill="#0055B8"/>
|
||||
<g transform="translate(14 20)">
|
||||
<ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#D85A30"/>
|
||||
<ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#D85A30"/>
|
||||
<ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#F0997B"/>
|
||||
<ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#F0997B"/>
|
||||
<rect x="16" y="3" width="2" height="18" rx="1" fill="#122844"/>
|
||||
<ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#FFC220"/>
|
||||
<ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#FFC220"/>
|
||||
<ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#FFDD73"/>
|
||||
<ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#FFDD73"/>
|
||||
<rect x="16" y="3" width="2" height="18" rx="1" fill="#0055B8"/>
|
||||
</g>
|
||||
<text x="64" y="38" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="26" fill="#FFFFFF">ARI</text>
|
||||
<text x="64" y="53" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="11" letter-spacing="2.5" fill="#F0997B">shopping</text>
|
||||
<text x="64" y="53" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="11" letter-spacing="2.5" fill="#FFC220">shopping</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Reference in new issue
Block a user