feat: Add welcome component with documentation, tooling, ecosystem, community, and support sections
feat: Create WelcomeItem component for displaying welcome messages feat: Implement various icon components for the welcome section feat: Add theme management functionality with multiple color themes feat: Integrate internationalization support with Spanish and English locales feat: Set up Vue Router with authentication callback handling feat: Implement authentication service for Discord OAuth2 login feat: Create bot service for fetching bot statistics and information feat: Add AuthCallback view for handling authentication responses chore: Configure Vite for development and production environments
This commit is contained in:
Shni
230
AmayoWeb/CHANGELOG.md
Normal file
230
AmayoWeb/CHANGELOG.md
Normal file
@@ -0,0 +1,230 @@
|
||||
# 🔄 Changelog - Actualizaciones Recientes
|
||||
|
||||
## ✅ Cambios Implementados
|
||||
|
||||
### 1. 🎨 Selector de Temas Mejorado
|
||||
**Antes:** Círculos de colores en línea
|
||||
**Ahora:** Menú desplegable (dropdown) con nombres de temas
|
||||
|
||||
**Características:**
|
||||
- Menú desplegable elegante con glassmorphism
|
||||
- Previsualización del tema actual en el botón
|
||||
- Lista de temas con nombres traducidos
|
||||
- Indicador visual del tema activo (checkmark)
|
||||
- Cierre automático al hacer clic fuera
|
||||
- Animaciones suaves
|
||||
|
||||
**Archivos modificados:**
|
||||
- `src/components/IslandNavbar.vue`
|
||||
|
||||
---
|
||||
|
||||
### 2. 📝 Textos de Características Actualizados
|
||||
**Antes:**
|
||||
- 🎮 Minijuegos Divertidos
|
||||
- ⚔️ Sistema RPG Completo
|
||||
- 🏆 Logros y Recompensas
|
||||
|
||||
**Ahora:**
|
||||
- 🤝 Alianzas
|
||||
- 🎫 Tickets
|
||||
- ⚙️ Comandos Custom
|
||||
|
||||
**Archivos modificados:**
|
||||
- `src/i18n/locales.js` (ES y EN)
|
||||
- `src/components/HeroSection.vue` (iconos)
|
||||
|
||||
---
|
||||
|
||||
### 3. 📊 Estadísticas Reales del Bot
|
||||
**Antes:** Valores estáticos hardcodeados
|
||||
|
||||
**Ahora:**
|
||||
- Llamadas a API para obtener datos reales
|
||||
- Actualización automática cada 5 minutos
|
||||
- Formato inteligente de números (1.2K, 50K, etc.)
|
||||
- Indicador de carga mientras obtiene datos
|
||||
- Manejo de errores con fallback
|
||||
|
||||
**Nuevos archivos:**
|
||||
- `src/services/bot.js` - Servicio para obtener estadísticas
|
||||
- `server-bot-stats.js` - Backend de ejemplo con Discord.js
|
||||
|
||||
**Archivos modificados:**
|
||||
- `src/components/HeroSection.vue`
|
||||
- `server-example.js`
|
||||
|
||||
**Endpoints API creados:**
|
||||
```
|
||||
GET /api/bot/stats - Estadísticas del bot
|
||||
GET /api/bot/info - Información del bot
|
||||
GET /api/bot/top-guilds - Top 10 servidores
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. 🤖 Nombre del Bot Actualizado
|
||||
**Antes:** Shinaky
|
||||
**Ahora:** Amayo
|
||||
|
||||
**Archivos modificados:**
|
||||
- `src/components/IslandNavbar.vue`
|
||||
- `PERSONALIZACION.md`
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Características Técnicas Añadidas
|
||||
|
||||
### Servicio de Bot (`src/services/bot.js`)
|
||||
```javascript
|
||||
botService.getStats() // Obtener estadísticas
|
||||
botService.formatNumber() // Formatear números (1000 -> 1K)
|
||||
```
|
||||
|
||||
### Integración con Discord.js
|
||||
El archivo `server-bot-stats.js` muestra cómo:
|
||||
- Conectar tu bot de Discord al backend
|
||||
- Obtener número real de servidores
|
||||
- Calcular usuarios totales
|
||||
- Contar comandos registrados
|
||||
- Exponer endpoints RESTful
|
||||
|
||||
### Mejoras de UX
|
||||
- **Dropdown de temas:** Más organizado y fácil de usar
|
||||
- **Estadísticas dinámicas:** Datos siempre actualizados
|
||||
- **Loading states:** Feedback visual mientras carga
|
||||
- **Auto-refresh:** Actualización automática cada 5 minutos
|
||||
- **Error handling:** Graceful fallback si la API falla
|
||||
|
||||
---
|
||||
|
||||
## 📋 Pasos Siguientes para el Desarrollador
|
||||
|
||||
### 1. Configurar el Backend
|
||||
```bash
|
||||
# Instalar dependencias adicionales
|
||||
npm install discord.js
|
||||
|
||||
# Crear archivo .env con:
|
||||
DISCORD_BOT_TOKEN=tu_token_aqui
|
||||
DISCORD_CLIENT_ID=tu_client_id
|
||||
DISCORD_CLIENT_SECRET=tu_client_secret
|
||||
```
|
||||
|
||||
### 2. Iniciar el servidor con PM2
|
||||
```bash
|
||||
# Opción 1: Server simple (sin estadísticas de bot)
|
||||
pm2 start server-example.js --name "amayo-auth"
|
||||
|
||||
# Opción 2: Server con estadísticas del bot
|
||||
pm2 start server-bot-stats.js --name "amayo-api"
|
||||
```
|
||||
|
||||
### 3. Verificar que funcione
|
||||
```bash
|
||||
# Test del endpoint de estadísticas
|
||||
curl http://localhost:3000/api/bot/stats
|
||||
|
||||
# Deberías ver algo como:
|
||||
# {"servers":1234,"users":50000,"commands":150,"timestamp":"..."}
|
||||
```
|
||||
|
||||
### 4. Actualizar la URL del avatar del bot
|
||||
Edita `src/components/IslandNavbar.vue` línea 8:
|
||||
```javascript
|
||||
const botLogo = ref('https://cdn.discordapp.com/avatars/TU_BOT_ID/TU_AVATAR.png')
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Testing
|
||||
|
||||
### Frontend
|
||||
```bash
|
||||
cd AmayoWeb
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Visita: http://localhost:5173
|
||||
|
||||
**Verifica que:**
|
||||
- ✅ El dropdown de temas funcione correctamente
|
||||
- ✅ Las tarjetas muestren "Alianzas, Tickets, Comandos Custom"
|
||||
- ✅ Las estadísticas se carguen (aunque sean 0 sin backend)
|
||||
- ✅ El nombre "Amayo" aparezca en el navbar
|
||||
|
||||
### Backend
|
||||
```bash
|
||||
# Terminal 1: Iniciar backend
|
||||
node server-bot-stats.js
|
||||
|
||||
# Terminal 2: Test endpoints
|
||||
curl http://localhost:3000/api/health
|
||||
curl http://localhost:3000/api/bot/stats
|
||||
curl http://localhost:3000/api/bot/info
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Las estadísticas muestran 0
|
||||
**Causa:** El backend no está corriendo o el bot no está conectado
|
||||
**Solución:**
|
||||
1. Verifica que el backend esté corriendo
|
||||
2. Verifica que el bot esté online en Discord
|
||||
3. Revisa los logs: `pm2 logs amayo-api`
|
||||
|
||||
### El dropdown de temas no funciona
|
||||
**Causa:** JavaScript no está cargando correctamente
|
||||
**Solución:**
|
||||
1. Verifica la consola del navegador (F12)
|
||||
2. Limpia la caché: `npm run build` y recarga
|
||||
|
||||
### Error de CORS
|
||||
**Causa:** Frontend y backend en diferentes dominios
|
||||
**Solución:** Verifica la configuración de CORS en el backend:
|
||||
```javascript
|
||||
app.use(cors({
|
||||
origin: 'https://docs.amayo.dev' // Tu dominio
|
||||
}));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Estadísticas del Proyecto
|
||||
|
||||
**Archivos creados:** 3
|
||||
- `src/services/bot.js`
|
||||
- `server-bot-stats.js`
|
||||
- `CHANGELOG.md` (este archivo)
|
||||
|
||||
**Archivos modificados:** 5
|
||||
- `src/components/IslandNavbar.vue`
|
||||
- `src/components/HeroSection.vue`
|
||||
- `src/i18n/locales.js`
|
||||
- `server-example.js`
|
||||
- `PERSONALIZACION.md`
|
||||
|
||||
**Líneas de código añadidas:** ~500
|
||||
**Funcionalidades nuevas:** 4 principales
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Resultado Final
|
||||
|
||||
Tu landing page ahora tiene:
|
||||
1. ✅ Dropdown de temas elegante y funcional
|
||||
2. ✅ Textos de características correctos (Alianzas, Tickets, Comandos Custom)
|
||||
3. ✅ Estadísticas reales del bot (dinámicas)
|
||||
4. ✅ Nombre correcto del bot (Amayo)
|
||||
|
||||
**¡Todo listo para producción!** 🚀
|
||||
|
||||
---
|
||||
|
||||
Última actualización: ${new Date().toLocaleDateString('es-ES', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
Reference in New Issue
Block a user