feat: Agregar archivo index.ejs para la vista principal del servidor
This commit is contained in:
@@ -1,181 +0,0 @@
|
|||||||
# 📁 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
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 394 KiB After Width: | Height: | Size: 394 KiB |
122
src/server/views/index.ejs
Normal file
122
src/server/views/index.ejs
Normal file
@@ -0,0 +1,122 @@
|
|||||||
|
<% const pageTitle = `${appName} | Guía Completa`; %>
|
||||||
|
<% const head = null; %>
|
||||||
|
<% const scripts = null; %>
|
||||||
|
<% const title = pageTitle; %>
|
||||||
|
<% layout('layouts/layout', { title, head, scripts, appName, version, djsVersion, currentDateHuman }); %>
|
||||||
|
|
||||||
|
<header class="relative overflow-hidden py-20 sm:py-28">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
|
||||||
|
<div class="max-w-5xl mx-auto text-center space-y-12">
|
||||||
|
<!-- Badge Moderno con decoraciones sutiles -->
|
||||||
|
<div class="inline-block relative">
|
||||||
|
<span class="pixel-pumpkin absolute" style="left: -40px; top: 50%; transform: translateY(-50%);"></span>
|
||||||
|
<div class="pixel-badge">
|
||||||
|
<%= appName %> • v<%= version %>
|
||||||
|
</div>
|
||||||
|
<span class="pixel-ghost absolute" style="right: -40px; top: 50%; transform: translateY(-50%);"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Título Principal -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl leading-tight">
|
||||||
|
Guía Completa
|
||||||
|
</h1>
|
||||||
|
<h2 class="text-4xl sm:text-5xl md:text-6xl" style="font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #a78bfa, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
|
||||||
|
<%= appName %>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Decoraciones sutiles -->
|
||||||
|
<div class="flex justify-center gap-6 items-center">
|
||||||
|
<span class="pixel-star-halloween">✦</span>
|
||||||
|
<span class="pixel-pumpkin"></span>
|
||||||
|
<span class="pixel-star-halloween" style="animation-delay: 0.5s;">✦</span>
|
||||||
|
<span class="pixel-ghost" style="animation-delay: 1s;"></span>
|
||||||
|
<span class="pixel-star-halloween" style="animation-delay: 1.5s;">✦</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Descripción con diseño moderno -->
|
||||||
|
<div class="pixel-box max-w-3xl mx-auto">
|
||||||
|
<p class="text-xl sm:text-2xl leading-relaxed" style="color: var(--text-secondary);">
|
||||||
|
Sistema completo de
|
||||||
|
<span class="gradient-text font-semibold">economía</span>,
|
||||||
|
<span class="gradient-text font-semibold">minijuegos</span>,
|
||||||
|
<span class="gradient-text font-semibold">misiones</span> y
|
||||||
|
<span class="gradient-text font-semibold">IA</span>
|
||||||
|
para Discord
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botones de Acción -->
|
||||||
|
<div class="flex flex-col sm:flex-row gap-6 justify-center items-center pt-4">
|
||||||
|
<a href="#primeros-pasos" class="block hover:scale-105 transition-transform duration-300">
|
||||||
|
<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));">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<button id="toggle-nav" class="pixel-btn pixel-btn-secondary flex items-center gap-2">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="3" y="5" width="18" height="2" fill="currentColor" rx="1"/>
|
||||||
|
<rect x="3" y="11" width="18" height="2" fill="currentColor" rx="1"/>
|
||||||
|
<rect x="3" y="17" width="18" height="2" fill="currentColor" rx="1"/>
|
||||||
|
</svg>
|
||||||
|
<span>Ver comandos</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats Footer con decoración -->
|
||||||
|
<div class="flex flex-wrap justify-center gap-4 pt-8">
|
||||||
|
<div class="pixel-box py-3 px-6 text-sm flex items-center gap-2">
|
||||||
|
<span class="pixel-leaf"></span>
|
||||||
|
<span><span class="pixel-text-dim">Discord.js</span> <%= djsVersion %></span>
|
||||||
|
</div>
|
||||||
|
<div class="pixel-box py-3 px-6 text-sm flex items-center gap-2">
|
||||||
|
<span>✦</span>
|
||||||
|
<span><span class="pixel-text-dim">Actualizado:</span> <%= currentDateHuman %></span>
|
||||||
|
</div>
|
||||||
|
<div class="pixel-box py-3 px-6 text-sm">
|
||||||
|
<span style="color: var(--pixel-accent-3); font-weight: bold;">23 Secciones</span> • Creación de Contenido
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
|
||||||
|
<div class="flex min-h-screen flex-col">
|
||||||
|
|
||||||
|
<div class="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-10 px-6 pb-16 lg:flex-row lg:px-10">
|
||||||
|
<%- include('partials/toc') %>
|
||||||
|
|
||||||
|
<main class="flex-1">
|
||||||
|
<div class="mx-auto flex w-full max-w-3xl flex-col gap-8">
|
||||||
|
<%- include('partials/sections/primeros-pasos') %>
|
||||||
|
<%- include('partials/sections/comandos-basicos') %>
|
||||||
|
<%- include('partials/sections/sistema-juego') %>
|
||||||
|
<%- include('partials/sections/minijuegos') %>
|
||||||
|
<%- include('partials/sections/inventario-equipo') %>
|
||||||
|
<%- include('partials/sections/economia') %>
|
||||||
|
<%- include('partials/sections/tienda') %>
|
||||||
|
<%- include('partials/sections/crafteo') %>
|
||||||
|
<%- include('partials/sections/logros') %>
|
||||||
|
<%- include('partials/sections/misiones') %>
|
||||||
|
<%- include('partials/sections/racha') %>
|
||||||
|
<%- include('partials/sections/consumibles') %>
|
||||||
|
<%- include('partials/sections/cofres') %>
|
||||||
|
<%- include('partials/sections/encantamientos') %>
|
||||||
|
<%- include('partials/sections/fundicion') %>
|
||||||
|
<%- include('partials/sections/ia') %>
|
||||||
|
<%- include('partials/sections/recordatorios') %>
|
||||||
|
<%- include('partials/sections/alianzas') %>
|
||||||
|
<%- include('partials/sections/admin') %>
|
||||||
|
<%- include('partials/sections/creacion-contenido') %>
|
||||||
|
<%- include('partials/sections/configuracion') %>
|
||||||
|
<%- include('partials/sections/estadisticas') %>
|
||||||
|
<%- include('partials/sections/tips') %>
|
||||||
|
<%- include('partials/sections/faq') %>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -43,8 +43,11 @@
|
|||||||
|
|
||||||
<!-- 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="block hover:scale-105 transition-transform duration-300">
|
<a href="#primeros-pasos" class="pixel-btn flex items-center gap-2">
|
||||||
<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));">
|
<span>Comenzar ahora</span>
|
||||||
|
<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