86c17728c4
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
162 lines
3.7 KiB
Markdown
162 lines
3.7 KiB
Markdown
# AmayoWeb - Nueva Landing Page
|
|
|
|
## 🎨 Características Implementadas
|
|
|
|
### ✅ Diseño Visual
|
|
- **Fondo Animado**: Gradientes rojos con efecto de deslizamiento suave
|
|
- **Grid Pattern**: Patrón de cuadrícula sutil sobre el fondo
|
|
- **Navbar Island Style**: Navegación flotante con bordes redondeados
|
|
- **Hero Section**: Con efecto typewriter animado
|
|
|
|
### 🌐 Internacionalización
|
|
- Soporte para Español e Inglés
|
|
- Selector de idioma en el navbar
|
|
- Traducciones configurables en `src/i18n/locales.js`
|
|
|
|
### 🎨 Sistema de Temas
|
|
- 5 temas predefinidos con degradados:
|
|
- Rojo (por defecto)
|
|
- Azul
|
|
- Verde
|
|
- Púrpura
|
|
- Naranja
|
|
- Selector visual con círculos de colores
|
|
- Persistencia en localStorage
|
|
|
|
### 🔐 Autenticación Discord
|
|
- Login con Discord OAuth2
|
|
- Servicio de autenticación completo
|
|
- Manejo de callbacks y tokens
|
|
- Guard de navegación para rutas protegidas
|
|
|
|
## 📦 Instalación
|
|
|
|
```bash
|
|
cd AmayoWeb
|
|
npm install
|
|
```
|
|
|
|
## ⚙️ Configuración
|
|
|
|
1. Copia el archivo de ejemplo de variables de entorno:
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
2. Configura las variables en `.env`:
|
|
```env
|
|
VITE_DISCORD_CLIENT_ID=tu_client_id_aqui
|
|
VITE_API_URL=http://localhost:3000
|
|
```
|
|
|
|
3. En Discord Developer Portal (https://discord.com/developers/applications):
|
|
- Crea una nueva aplicación
|
|
- Ve a OAuth2 > General
|
|
- Añade las siguientes redirect URIs:
|
|
- Desarrollo: `http://localhost:5173/auth/callback`
|
|
- Producción: `https://docs.amayo.dev/auth/callback`
|
|
- Copia el Client ID y añádelo al archivo `.env`
|
|
|
|
## 🚀 Desarrollo
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
El proyecto estará disponible en `http://localhost:5173`
|
|
|
|
## 🏗️ Build para Producción
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Los archivos compilados estarán en la carpeta `dist/`
|
|
|
|
## 🌐 Configuración de Nginx
|
|
|
|
Para servir la aplicación en tu VPS con el dominio `docs.amayo.dev`, añade esta configuración a Nginx:
|
|
|
|
```nginx
|
|
server {
|
|
listen 80;
|
|
listen [::]:80;
|
|
server_name docs.amayo.dev;
|
|
|
|
# Redirigir HTTP a HTTPS
|
|
return 301 https://$server_name$request_uri;
|
|
}
|
|
|
|
server {
|
|
listen 443 ssl http2;
|
|
listen [::]:443 ssl http2;
|
|
server_name docs.amayo.dev;
|
|
|
|
# Certificados SSL (Let's Encrypt)
|
|
ssl_certificate /etc/letsencrypt/live/docs.amayo.dev/fullchain.pem;
|
|
ssl_certificate_key /etc/letsencrypt/live/docs.amayo.dev/privkey.pem;
|
|
|
|
root /var/www/docs.amayo.dev/dist;
|
|
index index.html;
|
|
|
|
# Configuración para SPA
|
|
location / {
|
|
try_files $uri $uri/ /index.html;
|
|
}
|
|
|
|
# Proxy para API (si tienes backend)
|
|
location /api {
|
|
proxy_pass http://localhost:3000;
|
|
proxy_http_version 1.1;
|
|
proxy_set_header Upgrade $http_upgrade;
|
|
proxy_set_header Connection 'upgrade';
|
|
proxy_set_header Host $host;
|
|
proxy_cache_bypass $http_upgrade;
|
|
}
|
|
|
|
# Cache para assets estáticos
|
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
|
expires 1y;
|
|
add_header Cache-Control "public, immutable";
|
|
}
|
|
}
|
|
```
|
|
|
|
## 🚀 Deploy en VPS
|
|
|
|
1. Construye el proyecto:
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
2. Sube los archivos de `dist/` a tu VPS:
|
|
```bash
|
|
scp -r dist/* user@tu-vps:/var/www/docs.amayo.dev/dist/
|
|
```
|
|
|
|
3. Asegúrate de que Nginx tenga permisos:
|
|
```bash
|
|
sudo chown -R www-data:www-data /var/www/docs.amayo.dev
|
|
sudo chmod -R 755 /var/www/docs.amayo.dev
|
|
```
|
|
|
|
4. Recarga Nginx:
|
|
```bash
|
|
sudo nginx -t
|
|
sudo systemctl reload nginx
|
|
```
|
|
|
|
## 📝 Personalización
|
|
|
|
### Cambiar el avatar del bot
|
|
Edita `src/components/IslandNavbar.vue` línea 36:
|
|
```javascript
|
|
const botLogo = ref('TU_URL_DE_AVATAR_AQUI')
|
|
```
|
|
|
|
### Añadir más temas
|
|
Edita `src/composables/useTheme.js` y añade nuevos temas al objeto `themes`.
|
|
|
|
### Modificar textos
|
|
Edita `src/i18n/locales.js` para cambiar los textos en español e inglés.
|