# LovePostal CDN

CDN estático con todos los brand assets de **LovePostal**: imagotipos, isotipos, logotipos y kit de redes sociales.

![og-image](og-image.jpg)

## Para qué sirve

- Centralizar URLs de assets de marca para usarlas en sitio web, emails, social media, presentaciones.
- Servir como fuente única para agentes IA (Lovable, v0, Cursor, Bolt) — ver `agents.md`.
- Inventario navegable con preview, búsqueda, filtros, copia de URL y descarga directa.

## Cómo abrir localmente

```bash
open index.html
```

Funciona offline con rutas relativas. La galería renderiza tal cual aunque no haya CDN aún.

## Cómo desplegar

Cualquier hosting estático sirve. Solo subir el directorio completo (sin `_backup_imagenes/`):

- **Cloudflare R2 + Workers** — recomendado por costos y CORS configurable.
- **Netlify / Vercel** — drag & drop del folder.
- **AWS S3 + CloudFront** — clásico, requiere config de bucket policy + Origin Access Identity.
- **GitHub Pages** — gratis, suficiente para CDN ligero.

Configura el dominio (ejemplo `cdn.lovepostal.studio`) y actualiza la constante `CDN_BASE` en `index.html` y las URLs en `agents.md` si cambia.

### Lo mínimo a excluir del deploy

```
_backup_imagenes/
.DS_Store
```

## Convención de nombres

| Tipo                | Patrón                                              | Ejemplo                                            |
| ------------------- | --------------------------------------------------- | -------------------------------------------------- |
| Imagotipo           | `imagotipo_{slug}_{color}_{n}.png`                  | `imagotipo_lovepostal_terracotaoscuro_1.png`       |
| Isotipo             | `isotipo_{slug}_{color}_{n}.png`                    | `isotipo_lovepostal_blanco_1.png`                  |
| Logotipo            | `logotipo_{slug}_{color}_{n}.png`                   | `logotipo_lovepostal_terracotaclaro_1.png`         |
| Profile picture     | `profile_{slug}_{fondo}_{simbolo}_{n}.jpg`          | `profile_lovepostal_blanco_terracotaoscuro_1.jpg`  |
| Cover picture       | `cover_{slug}_{red}_{n}.jpg`                        | `cover_lovepostal_facebook_1.jpg`                  |
| Template social     | `template_{slug}_{tipo}_{n}.png`                    | `template_lovepostal_post_1.png`                   |
| PSD                 | `psd_{slug}_{tipo}_{n}.psd`                         | `psd_lovepostal_postcard_1.psd`                    |

Reglas:
- Snake-case, todo minúsculas, ASCII puro.
- Color sin tildes ni espacios: `terracotaoscuro`, `terracotaclaro`, `blanco`, `negro`, `bicolor`.
- `{n}` es contador 1-indexed para variantes con misma combinación.

## Cómo agregar nuevos assets

1. Renombra el archivo respetando la convención.
2. Colócalo en la subcarpeta correcta (`PNG/`, `SOCIAL MEDIA KIT/...`).
3. Edita `index.html` → arrays `PNG_ASSETS` o `PROFILE_ASSETS`. Inserta:
   ```js
   { file: "imagotipo_lovepostal_dorado_1.png", tipo: "imagotipo", color: "dorado", w: 1568, h: 411, size: 80000 }
   ```
4. Si introduces un color nuevo, agrega chip en filtros y entry en `colorLabel()`.
5. Actualiza tablas en `CLAUDE.md` y URLs en `agents.md`.
6. Re-deploy.

## Estructura

```
.
├── og-image.jpg                    ← Open Graph image (1200×630)
├── index.html                      ← Galería pública
├── README.md                       ← Este archivo
├── CLAUDE.md                       ← Contexto para Claude Code
├── agents.md                       ← Contexto para agentes IA
├── CLAUDE_TEMPLATE.md              ← Pasos replicables para nuevos CDN
├── PNG/                            ← Brand PNG transparentes (11)
├── SOCIAL MEDIA KIT/
│   ├── COVER PICTURES/             ← (vacío)
│   ├── PROFILE PICTURES/           ← 12 profiles 1080×1080
│   ├── PSD FILES/                  ← (vacío)
│   └── TEMPLATES/                  ← (vacío)
└── _backup_imagenes/               ← Originales webp (NO TOCAR)
```

## Scripts

Los scripts de generación (resize webp → png/jpg, rename, restructure) se ejecutaron una vez para crear este CDN. **Ya no viven en el repo**. Si necesitas replicar el flow para otra marca o re-procesar assets, copia los snippets inline desde `CLAUDE_TEMPLATE.md` (sección "Paso 1" y "Paso 5") a un `.py` local y ejecuta.