# 🎨 Proceso Optimizado: Assets en Creación de Proyectos

## 📋 Resumen

Guía completa para manejar assets durante la creación de proyectos desde cero, siguiendo las mejores prácticas.

---

## 🎯 Problema Resuelto

**Antes**: Si montamos desde cero, no puede haber assets en `public/cd-project/assets/` porque el proyecto aún no existe.

**Ahora**: Los assets se preparan ANTES de ejecutar el script y se especifican en el JSON con ruta absoluta.

---

## 🚀 Flujo Optimizado Recomendado

### Paso 1: Preparar Assets ANTES de Crear el Proyecto

Organiza tus assets en una carpeta externa:

```
~/assets-proyectos/
└── cokecolombres/
    ├── logo.png
    ├── logo-2.png
    ├── logo-alternative.png
    ├── favicon.ico
    ├── apple-touch-icon.png
    ├── favicon.svg
    ├── web-app-manifest-192x192.png
    └── web-app-manifest-512x512.png
```

**Estructura recomendada:**
- Carpeta por proyecto: `~/assets-proyectos/{nombre-proyecto}/`
- O carpeta compartida: `~/assets-proyectos/` (todos juntos)
- O en el escritorio: `~/Desktop/assets-cokecolombres/`

### Paso 2: Crear JSON con Ruta a Assets

```json
{
  "project": {
    "name": "cokecolombres",
    "repository_url": "https://github.com/LACOMPANIADIGITAL/cokecolombres.git"
  },
  "identity": {
    "site_name": "Cokecolombres",
    "site_url": "www.cokecolombres.com",
    "contact_email": "contacto@cokecolombres.com"
  },
  "assets": {
    "has_assets": true,
    "assets_path": "/Users/tu-usuario/assets-proyectos/cokecolombres",
    "update_assets": true,
    "create_backup": true,
    "auto_detect": false
  }
}
```

**Importante**: Usa ruta **absoluta** (completa) para los assets.

### Paso 3: Ejecutar Script

```bash
cd /Applications/XAMPP/xamppfiles/htdocs/cd-system
./scripts/create-complete-project.sh mi-proyecto.json
```

**El script automáticamente:**
1. ✅ Crea el proyecto
2. ✅ Configura todo
3. ✅ Personaliza identidad
4. ✅ **Copia assets desde la ruta externa a `public/cd-project/assets/`**
5. ✅ **Actualiza assets en ubicaciones finales** (logos, favicons)
6. ✅ Crea backup automático

---

## 📁 Estructura de Assets Requeridos

### Archivos Mínimos (8 archivos)

```
tus-assets/
├── logo.png                    (Logo principal)
├── logo-2.png                  (Logo alternativo/loader)
├── logo-alternative.png        (Logo para footer)
├── favicon.ico                 (Favicon ICO)
├── apple-touch-icon.png        (Icono para Apple)
├── favicon.svg                 (Favicon SVG)
├── web-app-manifest-192x192.png (Icono PWA 192x192)
└── web-app-manifest-512x512.png (Icono PWA 512x512)
```

### Archivos Opcionales

```
tus-assets/
└── skin-*.css                  (Skins CSS personalizados)
```

---

## 🔄 Flujos Disponibles

### Flujo 1: Assets ANTES (Recomendado) ⭐

```
1. Preparar assets en carpeta externa
   ~/assets-proyectos/cokecolombres/
   ↓
2. Crear JSON con has_assets: true y ruta absoluta
   "assets_path": "/Users/usuario/assets-proyectos/cokecolombres"
   ↓
3. Ejecutar: ./create-complete-project.sh mi-proyecto.json
   ↓
4. ✅ Proyecto creado con assets actualizados automáticamente
```

**Ventajas:**
- ✅ Todo en un solo paso
- ✅ Automático y sin intervención manual
- ✅ Backup automático
- ✅ Proyecto listo para usar

### Flujo 2: Assets DESPUÉS (Alternativo)

```
1. Crear JSON sin assets (has_assets: false)
   ↓
2. Ejecutar: ./create-complete-project.sh mi-proyecto.json
   ↓
3. Copiar assets manualmente a public/cd-project/assets/
   ↓
4. Ejecutar: ./scripts/update-project-assets.sh
   ↓
5. ✅ Assets actualizados
```

**Cuándo usar:**
- Assets no están listos antes de crear el proyecto
- Prefieres copiar manualmente
- Quieres revisar assets antes de actualizar

### Flujo 3: Auto-detección (Para Casos Especiales)

```
1. Crear proyecto
   ↓
2. Copiar assets a public/cd-project/assets/ manualmente
   ↓
3. Si auto_detect: true, el script los detecta automáticamente
   ↓
4. ✅ Assets actualizados automáticamente
```

**Cuándo usar:**
- Ya tienes el proyecto creado
- Assets ya están en la carpeta del proyecto
- Quieres que se actualicen automáticamente

---

## 📝 Ejemplo Completo: cokecolombres

### 1. Preparar Assets

```bash
# Crear carpeta para assets
mkdir -p ~/assets-proyectos/cokecolombres

# Copiar tus assets allí
cp /ruta/a/tus/assets/* ~/assets-proyectos/cokecolombres/

# Verificar
ls -la ~/assets-proyectos/cokecolombres/
```

### 2. Crear JSON

```json
{
  "project": {
    "name": "cokecolombres",
    "repository_url": "https://github.com/LACOMPANIADIGITAL/cokecolombres.git"
  },
  "identity": {
    "site_name": "Cokecolombres",
    "site_url": "www.cokecolombres.com",
    "contact_email": "contacto@cokecolombres.com",
    "seo_description": "Descripción SEO del sitio web de Cokecolombres",
    "author": "Cokecolombres"
  },
  "assets": {
    "has_assets": true,
    "assets_path": "/Users/tu-usuario/assets-proyectos/cokecolombres",
    "update_assets": true,
    "create_backup": true,
    "auto_detect": false
  }
}
```

**Obtener ruta absoluta:**
```bash
# En macOS/Linux
realpath ~/assets-proyectos/cokecolombres
# O simplemente:
cd ~/assets-proyectos/cokecolombres && pwd
```

### 3. Ejecutar Script

```bash
cd /Applications/XAMPP/xamppfiles/htdocs/cd-system
./scripts/create-complete-project.sh mi-proyecto.json
```

### 4. Verificar Resultado

```bash
cd /Applications/XAMPP/xamppfiles/htdocs/cokecolombres

# Verificar logos
ls -la public/cd-project/img/logos/
# Debe mostrar: logo.png, logo-2.png, logo-alternative.png

# Verificar favicons
ls -la public/cd-project/img/favicon/
# Debe mostrar: favicon.ico, apple-touch-icon.png, etc.

# Verificar backup
ls -la storage/app/backups/assets/
```

---

## 🎯 Mejores Prácticas

### 1. Organización de Assets

**Recomendado:**
```
~/assets-proyectos/
├── cokecolombres/
│   └── [8 archivos de assets]
├── terashe/
│   └── [8 archivos de assets]
└── mirage/
    └── [8 archivos de assets]
```

**Ventajas:**
- ✅ Fácil de encontrar
- ✅ Organizado por proyecto
- ✅ Reutilizable
- ✅ Backup centralizado

### 2. Nombres de Archivos

**Deben coincidir exactamente:**
- ✅ `logo.png` (no `Logo.png` ni `LOGO.PNG`)
- ✅ `logo-2.png` (no `logo2.png` ni `logo_2.png`)
- ✅ `favicon.ico` (no `favicon.ICO`)

**Case-sensitive**: Los nombres son sensibles a mayúsculas/minúsculas.

### 3. Rutas en JSON

**Siempre usar rutas absolutas:**
```json
// ✅ Correcto
"assets_path": "/Users/usuario/assets-proyectos/cokecolombres"

// ❌ Incorrecto (relativa)
"assets_path": "~/assets-proyectos/cokecolombres"
"assets_path": "../assets/cokecolombres"
```

**Obtener ruta absoluta:**
```bash
cd ~/assets-proyectos/cokecolombres
pwd
# Copiar la salida al JSON
```

### 4. Verificación Antes de Ejecutar

```bash
# Verificar que los assets existen
ls -la ~/assets-proyectos/cokecolombres/

# Verificar nombres correctos
cd ~/assets-proyectos/cokecolombres
ls | grep -E "(logo|favicon|web-app)"
```

---

## 🔧 Configuración del JSON

### Campos de Assets

```json
"assets": {
  "has_assets": true,                    // true si tienes assets listos
  "assets_path": "/ruta/absoluta",       // Ruta absoluta a carpeta con assets
  "update_assets": true,                 // true para actualizar automáticamente
  "create_backup": true,                 // true para crear backup antes
  "auto_detect": false                   // false si usas has_assets: true
}
```

### Valores Recomendados

| Campo | Valor Recomendado | Descripción |
|-------|-------------------|-------------|
| `has_assets` | `true` | Si tienes assets listos antes de crear |
| `assets_path` | Ruta absoluta | Ruta completa a carpeta con assets |
| `update_assets` | `true` | Actualizar automáticamente |
| `create_backup` | `true` | Crear backup antes de actualizar |
| `auto_detect` | `false` | Deshabilitar si usas `has_assets: true` |

---

## 🆘 Solución de Problemas

### Error: "No se encontró el directorio de assets"

**Causa**: La ruta en el JSON es incorrecta o no existe.

**Solución**:
```bash
# Verificar que la ruta existe
ls -la /ruta/especificada/en/json

# Obtener ruta absoluta correcta
cd ~/assets-proyectos/cokecolombres
pwd
# Copiar esta ruta al JSON
```

### Error: "No se encontraron assets válidos"

**Causa**: Los archivos no tienen los nombres correctos.

**Solución**:
```bash
# Verificar nombres
cd ~/assets-proyectos/cokecolombres
ls -la

# Deben existir al menos:
# - logo.png
# - logo-2.png
# - favicon.ico
```

### Assets no se copian

**Verificar**:
```bash
# 1. Que la ruta es absoluta
echo $ASSETS_PATH

# 2. Que los archivos existen
ls -la $ASSETS_PATH

# 3. Que tienen permisos de lectura
chmod 644 $ASSETS_PATH/*
```

---

## 📚 Referencias

- [Flujo Optimizado Completo](./flujo-optimizado-completo.md)
- [Proceso de Actualizar Assets](./proceso-actualizar-assets.md)
- [Guía Rápida: Actualizar Assets](./guia-rapida-actualizar-assets.md)

---

**Última actualización**: Proceso optimizado con assets preparados ANTES de crear proyecto