feat: Actualizar botón de acción en la página de inicio con nuevo diseño y funcionalidad
This commit is contained in:
181
README/VIEWS_STRUCTURE.md
Normal file
181
README/VIEWS_STRUCTURE.md
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
# 📁 Estructura de Views - Amayo Bot
|
||||||
|
|
||||||
|
## 🗂️ Organización de Archivos
|
||||||
|
|
||||||
|
```
|
||||||
|
src/server/views/
|
||||||
|
├── layouts/
|
||||||
|
│ └── layout.ejs # Layout principal (HTML wrapper)
|
||||||
|
├── pages/
|
||||||
|
│ └── index.ejs # ✅ Contenido de la página (usado por servidor)
|
||||||
|
└── partials/
|
||||||
|
├── navbar.ejs # Barra de navegación
|
||||||
|
├── toc.ejs # Tabla de contenidos
|
||||||
|
└── sections/ # Secciones de contenido
|
||||||
|
├── primeros-pasos.ejs
|
||||||
|
├── comandos-basicos.ejs
|
||||||
|
└── ...
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ Archivo Correcto
|
||||||
|
|
||||||
|
### `/src/server/views/pages/index.ejs`
|
||||||
|
|
||||||
|
Este es el archivo **que se está usando**. El servidor lo busca aquí:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// En server.ts
|
||||||
|
const pageFile = path.join(viewsDir, "pages", `${template}.ejs`);
|
||||||
|
```
|
||||||
|
|
||||||
|
**Contenido:**
|
||||||
|
- Solo el contenido del `<body>`
|
||||||
|
- Sin etiquetas `<html>`, `<head>`, etc.
|
||||||
|
- Sin llamadas a `layout()`
|
||||||
|
- Directamente renderizado dentro de `layout.ejs`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ❌ Archivo Eliminado
|
||||||
|
|
||||||
|
### ~~`/src/server/views/index.ejs`~~ (ELIMINADO)
|
||||||
|
|
||||||
|
Este archivo estaba duplicado y **NO se estaba usando**. Causaba confusión porque:
|
||||||
|
- Tenía el sistema antiguo de layout con `<% layout('layouts/layout') %>`
|
||||||
|
- No era consultado por el servidor
|
||||||
|
- Los cambios no se reflejaban en la web
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔄 Flujo de Renderizado
|
||||||
|
|
||||||
|
### 1. Usuario solicita `/`
|
||||||
|
```
|
||||||
|
http://localhost:3000/
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Servidor renderiza
|
||||||
|
```typescript
|
||||||
|
await renderTemplate(req, res, "index", {
|
||||||
|
appName: "Amayo Bot",
|
||||||
|
version: "2.0.0",
|
||||||
|
djsVersion: "15.0.0-dev",
|
||||||
|
currentDateHuman: "octubre 2025"
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Proceso de renderizado
|
||||||
|
```
|
||||||
|
1. Lee: views/pages/index.ejs
|
||||||
|
↓ (renderiza con variables)
|
||||||
|
2. Resultado → pageBody
|
||||||
|
↓
|
||||||
|
3. Lee: views/layouts/layout.ejs
|
||||||
|
↓ (inserta pageBody en <%= body %>)
|
||||||
|
4. HTML completo → navegador
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 Cómo Editar
|
||||||
|
|
||||||
|
### Para cambiar el contenido de la página:
|
||||||
|
✅ **Edita**: `/src/server/views/pages/index.ejs`
|
||||||
|
|
||||||
|
### Para cambiar el layout (HTML, head, scripts):
|
||||||
|
✅ **Edita**: `/src/server/views/layouts/layout.ejs`
|
||||||
|
|
||||||
|
### Para cambiar navbar o footer:
|
||||||
|
✅ **Edita**:
|
||||||
|
- `/src/server/views/partials/navbar.ejs`
|
||||||
|
- Footer está en `layout.ejs` (líneas 45-75)
|
||||||
|
|
||||||
|
### Para agregar/editar secciones:
|
||||||
|
✅ **Edita**: `/src/server/views/partials/sections/*.ejs`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 CSS y Assets
|
||||||
|
|
||||||
|
### Archivos CSS cargados (en layout.ejs):
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="/assets/css/modern-pixel.css?v=2.0.0">
|
||||||
|
<link rel="stylesheet" href="/assets/css/modern-sections.css?v=2.0.0">
|
||||||
|
<link rel="stylesheet" href="/assets/css/styles.css?v=2.0.0">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Ubicación física:
|
||||||
|
```
|
||||||
|
src/server/public/assets/css/
|
||||||
|
├── modern-pixel.css # ✅ Componentes modernos
|
||||||
|
├── modern-sections.css # ✅ Estilos de secciones
|
||||||
|
├── styles.css # Original
|
||||||
|
├── pixel-art.css # ❌ Ya no se usa
|
||||||
|
└── pixel-sections.css # ❌ Ya no se usa
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Flujo de Trabajo
|
||||||
|
|
||||||
|
### Para hacer cambios visuales:
|
||||||
|
|
||||||
|
1. **Editar contenido:**
|
||||||
|
```bash
|
||||||
|
vim src/server/views/pages/index.ejs
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Editar estilos:**
|
||||||
|
```bash
|
||||||
|
vim src/server/public/assets/css/modern-pixel.css
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Reiniciar servidor:**
|
||||||
|
```bash
|
||||||
|
npm run server
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Limpiar caché del navegador:**
|
||||||
|
- `Ctrl + Shift + R` (hard reload)
|
||||||
|
- O modo incógnito: `Ctrl + Shift + N`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚠️ Notas Importantes
|
||||||
|
|
||||||
|
### Parámetros de Versión
|
||||||
|
Los archivos CSS tienen `?v=2.0.0` para forzar recargas:
|
||||||
|
```html
|
||||||
|
href="/assets/css/modern-pixel.css?v=2.0.0"
|
||||||
|
```
|
||||||
|
|
||||||
|
### Sistema de Caché
|
||||||
|
El servidor usa **ETags** para caché. Si haces cambios y no se ven:
|
||||||
|
1. Reinicia el servidor (nuevo ETag)
|
||||||
|
2. Hard reload en navegador (`Ctrl + Shift + R`)
|
||||||
|
|
||||||
|
### Await en Includes
|
||||||
|
Los partials usan `await include()`:
|
||||||
|
```ejs
|
||||||
|
<%- await include('../partials/navbar') %>
|
||||||
|
```
|
||||||
|
|
||||||
|
Esto es necesario para el renderizado asíncrono de EJS.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 Checklist de Edición
|
||||||
|
|
||||||
|
Antes de editar, verifica:
|
||||||
|
- [ ] ¿Estás editando `/pages/index.ejs`? (no el antiguo `/views/index.ejs`)
|
||||||
|
- [ ] ¿Los cambios CSS están en `modern-pixel.css`? (no en `pixel-art.css`)
|
||||||
|
- [ ] ¿El layout carga los CSS correctos?
|
||||||
|
- [ ] ¿Reiniciaste el servidor después de cambios?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Fecha**: Octubre 2025
|
||||||
|
**Autor**: Amayo Dev Team
|
||||||
|
**Estado**: ✅ Estructura actualizada y optimizada
|
||||||
@@ -43,11 +43,8 @@
|
|||||||
|
|
||||||
<!-- Botones de Acción -->
|
<!-- Botones de Acción -->
|
||||||
<div class="flex flex-col sm:flex-row gap-6 justify-center items-center pt-4">
|
<div class="flex flex-col sm:flex-row gap-6 justify-center items-center pt-4">
|
||||||
<a href="#primeros-pasos" class="pixel-btn flex items-center gap-2">
|
<a href="#primeros-pasos" class="block hover:scale-105 transition-transform duration-300">
|
||||||
<span>Comenzar ahora</span>
|
<img src="/assets/images/boton_entrar.svg" alt="Comenzar ahora" class="w-full h-auto" style="max-width: 350px; filter: drop-shadow(0 4px 12px rgba(255, 179, 71, 0.3));">
|
||||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
|
||||||
</svg>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user