# 📚 Guía Completa: Adaptación de Demos Porto a CD-System

## 🎯 Propósito

Esta guía documenta **TODOS** los elementos necesarios para adaptar un demo de Porto 12.1.0 al sistema CD-System, asegurando que nada se pase por alto y el proceso sea eficiente y escalable.

---

## 📋 Checklist Completo de Adaptación

### FASE 1: Análisis y Preparación (15-20 min)

#### 1.1: Identificar el Demo en Porto
```bash
# Ubicación del template Porto
PORTO_PATH="/Users/cokecolombres/Downloads/themeforest-DR9jyGXD-porto-responsive-html5-template/HTML"

# Archivos HTML a revisar:
# - demo-{nombre}.html (página principal)
# - demo-{nombre}-about-us.html (página "Quiénes Somos")
# - demo-{nombre}-contact-us.html (página de contacto)
```

**Verificar en el HTML:**
- [ ] Línea ~40: `css/demos/demo-{nombre}.css`
- [ ] Línea ~43: `css/skins/skin-{nombre}.css`
- [ ] Línea ~1180-1200: `js/demos/demo-{nombre}.js` (puede no existir)
- [ ] Todas las referencias de imágenes: `img/demos/{nombre}/...`

---

### FASE 2: Copiar Archivos Base (10-15 min)

#### 2.1: CSS Demo
```bash
# Origen: PORTO_PATH/css/demos/demo-{nombre}.css
# Destino: PROJECT_PATH/public/template/css/demos/demo-{nombre}.css

mkdir -p "$PROJECT_PATH/public/template/css/demos"
cp "$PORTO_PATH/css/demos/demo-{nombre}.css" "$PROJECT_PATH/public/template/css/demos/"
```

**Verificar:**
- [ ] Archivo copiado correctamente
- [ ] Ruta en Blade: `public/template/css/demos/demo-{nombre}.css`

---

#### 2.2: CSS Skin
```bash
# Extraer nombre del skin del HTML (línea ~43)
# Ejemplo: css/skins/skin-creative-agency-2.css

# Origen: PORTO_PATH/css/skins/skin-{nombre}.css
# Destino: PROJECT_PATH/public/template/css/skins/skin-{nombre}.css

mkdir -p "$PROJECT_PATH/public/template/css/skins"
cp "$PORTO_PATH/css/skins/skin-{nombre}.css" "$PROJECT_PATH/public/template/css/skins/"
```

**Verificar:**
- [ ] Archivo copiado correctamente
- [ ] Nombre del skin identificado en el HTML

---

#### 2.3: JavaScript Demo
```bash
# Verificar si existe en Porto
# Origen: PORTO_PATH/js/demos/demo-{nombre}.js
# Destino: PROJECT_PATH/public/template/js/demos/demo-{nombre}.js

if [ -f "$PORTO_PATH/js/demos/demo-{nombre}.js" ]; then
    mkdir -p "$PROJECT_PATH/public/template/js/demos"
    cp "$PORTO_PATH/js/demos/demo-{nombre}.js" "$PROJECT_PATH/public/template/js/demos/"
fi
```

**Verificar:**
- [ ] Si existe, archivo copiado
- [ ] Si no existe, documentar que no tiene JS base

---

#### 2.4: Imágenes del Demo

**Paso 1: Extraer todas las referencias del HTML**
```bash
# Desde el HTML de Porto
grep -o 'img/demos/{nombre}/[^"]*' demo-{nombre}.html | sort -u
grep -o 'img/logos/[^"]*' demo-{nombre}.html | sort -u
grep -o 'img/avatars/[^"]*' demo-{nombre}.html | sort -u
```

**Paso 2: Crear estructura de directorios**
```bash
mkdir -p "$PROJECT_PATH/public/cd-project/img/demos/{nombre}"/{svg,services,concept,projects,backgrounds,generic,logos,team,blog,icons}
```

**Paso 3: Copiar imágenes específicas del demo**
```bash
# Si existen en Porto directamente
if [ -d "$PORTO_PATH/img/demos/{nombre}" ]; then
    cp -R "$PORTO_PATH/img/demos/{nombre}"/* "$PROJECT_PATH/public/cd-project/img/demos/{nombre}/"
fi
```

**Paso 4: Si no existen, buscar alternativas**
```bash
# Buscar imágenes similares en otros demos
# Services: construction-2, business-consulting-3
# Projects: personal-portfolio-2, digital-agency
# Concept: marketing-1
# SVG: buscar arrow*.svg en otros demos
```

**Verificar:**
- [ ] Todas las imágenes referenciadas en Blade existen
- [ ] Estructura de carpetas correcta
- [ ] Usar script: `./scripts/verify-demo-images.sh demo-{nombre}`

---

### FASE 3: Crear Vistas Blade (2-4 horas)

#### 3.1: Header
```bash
# Crear archivo
touch "resources/views/layout/front/headers/demo-{nombre}.blade.php"
```

**Adaptaciones necesarias:**
- [ ] Extender layout: `@extends('layout.front.master')` (si es necesario)
- [ ] Logo dinámico: `{{ asset(config('site.assets.main_logo')) }}`
- [ ] Navegación dinámica: `@php $navigation = get_dynamic_navigation('header'); @endphp`
- [ ] Rutas HTML → `route()` (ver [RUTAS-ESTANDAR-DEMOS.md](RUTAS-ESTANDAR-DEMOS.md))
- [ ] Assets → `asset()`
- [ ] Textos estáticos → `__()`
- [ ] Dropdowns de proyectos/servicios: usar `$featuredProjects` y `$serviceCategories`

**Referencias:**
- Ver `resources/views/layout/front/headers/demo-marketing-1.blade.php` como ejemplo

---

#### 3.2: Footer
```bash
# Crear archivo
touch "resources/views/layout/front/footers/demo-{nombre}.blade.php"
```

**Adaptaciones necesarias:**
- [ ] Logo dinámico: `{{ asset(config('site.assets.footer_logo', config('site.assets.main_logo'))) }}`
- [ ] Navegación dinámica: `get_dynamic_navigation('footer')`
- [ ] Contacto dinámico: `config('site.contact.email')`, `config('site.contact.phone')`
- [ ] Redes sociales: `@foreach(config('site.social_media') as $key => $social)`
- [ ] Newsletter: `route('front.newsletter.subscribe')`
- [ ] Rutas HTML → `route()`
- [ ] Assets → `asset()`
- [ ] Textos → `__()`
- [ ] Manejo seguro de Collections: `($recentPosts ?? collect())->take(9)`
- [ ] Manejo seguro de arrays: `array_slice($footerNav, 0, 3, true)`

**Referencias:**
- Ver `resources/views/layout/front/footers/demo-marketing-1.blade.php` como ejemplo

---

#### 3.3: Welcome (Página Principal) - OBLIGATORIA
```bash
# Crear archivo
mkdir -p "resources/views/modules/cd-base/frontend/demos/demo-{nombre}"
touch "resources/views/modules/cd-base/frontend/demos/demo-{nombre}/welcome.blade.php"
```

**Fuente:** `demo-{nombre}.html` (sección `<div role="main" class="main">`)

**Adaptaciones necesarias:**
- [ ] Extender layout: `@extends('layout.front.master')`
- [ ] Rutas HTML → `route()` (ver [RUTAS-ESTANDAR-DEMOS.md](RUTAS-ESTANDAR-DEMOS.md))
- [ ] Assets → `asset()`
- [ ] Textos estáticos → `__()`
- [ ] Integrar módulos: `@if(is_module_active('services'))`
- [ ] Datos dinámicos:
  - `$services` (si módulo activo)
  - `$featuredProjects` (si módulo activo)
  - `$recentPosts` (si módulo activo)
  - `$featuredReferences` (si módulo activo)
  - `$teamMembers` (si módulo activo)
  - `$recentNews` (si módulo activo)
- [ ] Imágenes con fallbacks: `{{ asset($project->featured_image ?? "cd-project/img/demos/{nombre}/projects/project-" . ($index + 1) . ".jpg") }}`

**Referencias:**
- Ver `resources/views/modules/cd-base/frontend/demos/demo-marketing-1/welcome.blade.php` como ejemplo

---

#### 3.4: About (Quiénes Somos) - OBLIGATORIA
```bash
# Crear archivo
touch "resources/views/modules/cd-base/frontend/demos/demo-{nombre}/about.blade.php"
```

**Fuente:** `demo-{nombre}-about-us.html` (sección `<div role="main" class="main">`)

**Adaptaciones necesarias:**
- [ ] Mismas que welcome
- [ ] Breadcrumbs: `route('front.homepage')`, `route('front.about')`
- [ ] Secciones específicas del demo

---

#### 3.5: Contact (Contacto) - OBLIGATORIA
```bash
# Crear archivo
touch "resources/views/modules/cd-base/frontend/demos/demo-{nombre}/contact.blade.php"
```

**Fuente:** `demo-{nombre}-contact-us.html` (sección `<div role="main" class="main">`)

**Adaptaciones necesarias:**
- [ ] Mismas que welcome
- [ ] Formulario de contacto: `route('front.contact.store')`
- [ ] Google Maps (si aplica)
- [ ] Información de contacto dinámica: `config('site.contact.*')`

---

### FASE 4: Configuración en Helpers (10-15 min)

#### 4.1: Agregar a `get_demo_skin_mapping()`
```php
// En app/helpers.php
'demo-{nombre}' => 'skin-{nombre}',
```

#### 4.2: Agregar a `get_demo_layout_mapping()`
```php
// En app/helpers.php
'demo-{nombre}' => [
    'header' => 'demo-{nombre}',
    'footer' => 'demo-{nombre}',
    'sidebar' => 'default',
    'description' => 'Template para [descripción]',
    'features' => ['feature1', 'feature2', ...],
    'extensions' => [
        'js' => true/false,  // Tiene JS custom?
        'css' => true/false, // Tiene CSS custom?
    ],
],
```

**Verificar:**
- [ ] No duplicar entradas
- [ ] Descripción clara
- [ ] Features listadas correctamente
- [ ] Extensions configuradas correctamente

---

### FASE 5: Verificación y Validación (15-20 min)

#### 5.1: Verificar Rutas
```bash
# Buscar rutas incorrectas
grep -r "frontend.services.show\|frontend.blog.show\|frontend.blog.post" resources/views/modules/cd-base/frontend/demos/demo-{nombre}/
```

**Rutas correctas:**
- ✅ `route('frontend.services.detail', $slug)` (NO `show`)
- ✅ `route('frontend.projects.show', $slug)`
- ✅ `route('blog.post', $slug)` (NO `frontend.blog.show`)
- ✅ `route('frontend.news.show', $slug)`
- ✅ `route('front.homepage')`, `route('front.about')`, `route('front.contact')`

---

#### 5.2: Verificar Imágenes
```bash
# Usar script de verificación
./scripts/verify-demo-images.sh demo-{nombre}
```

**Verificar:**
- [ ] Todas las imágenes estáticas existen
- [ ] Imágenes dinámicas tienen fallbacks
- [ ] Rutas usan `asset()` correctamente

---

#### 5.3: Verificar Variables
```bash
# Buscar variables no definidas
grep -r "\$featuredProjects\|\$recentPosts\|\$serviceCategories" resources/views/modules/cd-base/frontend/demos/demo-{nombre}/
```

**Verificar:**
- [ ] Todas las variables tienen manejo seguro: `($variable ?? collect())`
- [ ] Arrays usan `array_slice()` en lugar de `->take()`

---

#### 5.4: Probar en Navegador
- [ ] Homepage carga correctamente
- [ ] About carga correctamente
- [ ] Contact carga correctamente
- [ ] Header y footer se muestran correctamente
- [ ] Imágenes se cargan correctamente
- [ ] Navegación funciona
- [ ] Formularios funcionan
- [ ] Módulos se muestran condicionalmente

---

## 📦 Archivos a Copiar (Resumen)

### Desde Porto:
1. **CSS:**
   - `css/demos/demo-{nombre}.css` → `public/template/css/demos/`
   - `css/skins/skin-{nombre}.css` → `public/template/css/skins/`

2. **JavaScript:**
   - `js/demos/demo-{nombre}.js` → `public/template/js/demos/` (si existe)

3. **Imágenes:**
   - `img/demos/{nombre}/**` → `public/cd-project/img/demos/{nombre}/`
   - Si no existen, buscar alternativas en otros demos

### Crear en CD-System:
1. **Vistas Blade:**
   - `resources/views/layout/front/headers/demo-{nombre}.blade.php`
   - `resources/views/layout/front/footers/demo-{nombre}.blade.php`
   - `resources/views/modules/cd-base/frontend/demos/demo-{nombre}/welcome.blade.php`
   - `resources/views/modules/cd-base/frontend/demos/demo-{nombre}/about.blade.php`
   - `resources/views/modules/cd-base/frontend/demos/demo-{nombre}/contact.blade.php`

2. **Configuración:**
   - Actualizar `app/helpers.php` (skin mapping y layout mapping)

---

## 🔧 Scripts Disponibles

### 1. Copiar Archivos Base
```bash
./scripts/copy-demo-base.sh demo-{nombre}
```
Copia CSS, Skin, JS y Assets base.

### 2. Verificar Imágenes
```bash
./scripts/verify-demo-images.sh demo-{nombre}
```
Verifica que todas las imágenes referenciadas existan.

---

## 📚 Referencias de Documentación

- [RUTAS-ESTANDAR-DEMOS.md](RUTAS-ESTANDAR-DEMOS.md) - Rutas correctas a usar
- [GUIA-RAPIDA-NUEVOS-DEMOS.md](GUIA-RAPIDA-NUEVOS-DEMOS.md) - Guía rápida
- [ESTANDAR-FINAL-DEMOS.md](ESTANDAR-FINAL-DEMOS.md) - Estándar establecido
- [VALIDACION-IMAGENES-DEMOS.md](VALIDACION-IMAGENES-DEMOS.md) - Validación de imágenes

---

## ✅ Checklist Final

Antes de considerar un demo completo:

- [ ] CSS Demo copiado
- [ ] CSS Skin copiado
- [ ] JS Demo copiado (si existe)
- [ ] Todas las imágenes copiadas y verificadas
- [ ] Header Blade creado y adaptado
- [ ] Footer Blade creado y adaptado
- [ ] Welcome Blade creado y adaptado
- [ ] About Blade creado y adaptado
- [ ] Contact Blade creado y adaptado
- [ ] Configuración en `helpers.php` agregada
- [ ] Rutas verificadas (todas correctas)
- [ ] Variables verificadas (manejo seguro)
- [ ] Imágenes verificadas (todas existen)
- [ ] Probado en navegador (todas las páginas funcionan)

---

## 🚨 Errores Comunes y Soluciones

### Error: `RouteNotFoundException`
**Causa:** Ruta incorrecta
**Solución:** Verificar [RUTAS-ESTANDAR-DEMOS.md](RUTAS-ESTANDAR-DEMOS.md)

### Error: `Call to a member function take() on array`
**Causa:** `get_dynamic_navigation()` retorna array, no Collection
**Solución:** Usar `array_slice($array, 0, 3, true)` en lugar de `->take(3)`

### Error: `Undefined variable $featuredProjects`
**Causa:** Variable no disponible en todas las vistas
**Solución:** Ya está resuelto con ViewComposer global

### Error: Imágenes no se muestran
**Causa:** Ruta incorrecta o imagen no existe
**Solución:** 
1. Verificar que existe: `./scripts/verify-demo-images.sh demo-{nombre}`
2. Verificar que usa `asset()`: `{{ asset('cd-project/img/...') }}`

---

**Última actualización:** {{ date('Y-m-d') }}
**Versión:** 1.0.0