Add comprehensive setup and customization guides for AmayoWeb

- Introduced NGINX setup instructions for hosting the frontend application. - Added detailed personalization steps for customizing the AmayoWeb landing page. - Created a quickstart guide for rapid deployment and development setup. - Included troubleshooting documentation for frontend loading issues. - Provided VPS setup commands for configuring NGINX and deploying the application.
2025-11-04 13:01:37 -06:00
parent 8c6d7c9dd6
commit 001e7a33a7
16 changed files with 282 additions and 812 deletions
--- a/README/SETUP.md
+++ b/README/SETUP.md
@@ -0,0 +1,161 @@
+# 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.