shni/amayo

Template

Files

Shni 001e7a33a7 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

7.0 KiB

Raw Blame History

🎨 Guía de Personalización - AmayoWeb

📝 Pasos Esenciales de Configuración

1. Configurar Variables de Entorno

Crea un archivo .env en la raíz de AmayoWeb/:

# Discord OAuth2
VITE_DISCORD_CLIENT_ID=TU_CLIENT_ID_AQUI

# API URL (opcional si tienes backend)
VITE_API_URL=https://docs.amayo.dev/api

2. Cambiar Avatar del Bot

Edita src/components/IslandNavbar.vue (línea 36):

// Antes
const botLogo = ref('https://cdn.discordapp.com/avatars/1234567890/avatar.png')

// Después - Usa tu avatar real
const botLogo = ref('https://cdn.discordapp.com/avatars/TU_BOT_ID/TU_AVATAR_HASH.png')

3. Actualizar Nombre del Bot

En el mismo archivo IslandNavbar.vue (línea 37):

// Cambia 'Amayo' por el nombre de tu bot si es diferente
const botName = ref('TuBotName')

4. Personalizar Textos del Hero

Edita src/i18n/locales.js:

// Español
hero: {
  subtitle: 'Tu descripción personalizada aquí',
  // ... más textos
}

// Inglés
hero: {
  subtitle: 'Your custom description here',
  // ... more texts
}

5. Ajustar Estadísticas

Edita src/components/HeroSection.vue (línea 42):

const stats = ref({
  servers: '1.2K',    // Cambia por tus números reales
  users: '50K',       // Cambia por tus números reales
  commands: '150'     // Cambia por tus números reales
})

6. Configurar URL de Invitación

Edita src/components/HeroSection.vue (línea 115):

const inviteBot = () => {
  // Reemplaza YOUR_CLIENT_ID con tu Discord Client ID real
  window.open('https://discord.com/api/oauth2/authorize?client_id=TU_CLIENT_ID&permissions=8&scope=bot%20applications.commands', '_blank')
}

🎨 Personalización de Colores

Cambiar el Tema por Defecto

Edita src/composables/useTheme.js (línea 36):

// Cambia 'red' por: 'blue', 'green', 'purple', 'orange'
const currentTheme = ref('red')

Agregar un Nuevo Tema

En src/composables/useTheme.js, añade al objeto themes:

const themes = {
  // ... temas existentes
  cyan: {
    primary: '#00bcd4',
    secondary: '#0097a7',
    accent: '#00e5ff',
    gradient: 'linear-gradient(135deg, #00bcd4, #0097a7)',
  },
}

Luego en src/components/IslandNavbar.vue, añade el tema al array:

const themes = [
  // ... temas existentes
  { name: 'cyan', gradient: 'linear-gradient(135deg, #00bcd4, #0097a7)' },
]

Personalizar Colores del Fondo

Edita src/components/AnimatedBackground.vue:

.layer-1 {
  /* Cambia los colores del gradiente */
  background: radial-gradient(circle at 30% 50%, #TU_COLOR 0%, transparent 50%);
}

🌐 Añadir Más Idiomas

1. Actualizar configuración de i18n

Edita src/i18n/locales.js:

export default {
  es: { /* ... */ },
  en: { /* ... */ },
  // Nuevo idioma
  pt: {
    navbar: {
      getStarted: 'Começar',
      dashboard: 'Painel',
    },
    // ... más traducciones
  }
}

2. Actualizar selector de idioma

Edita src/components/IslandNavbar.vue:

const toggleLanguage = () => {
  const langs = ['es', 'en', 'pt']
  const currentIndex = langs.indexOf(locale.value)
  const nextIndex = (currentIndex + 1) % langs.length
  locale.value = langs[nextIndex]
  localStorage.setItem('language', locale.value)
}

📱 Ajustes Responsive

Cambiar Breakpoints

Edita el CSS en los componentes:

/* Cambiar de 768px a tu preferencia */
@media (max-width: 768px) {
  /* Estilos móviles */
}

/* Agregar nuevos breakpoints */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Estilos tablet */
}

Edita src/components/IslandNavbar.vue:

<template>
  <!-- Cambia los hrefs -->
  <a href="#tus-secciones" class="nav-btn primary">
    {{ t('navbar.getStarted') }}
  </a>
  <a href="/tu-dashboard" class="nav-btn secondary">
    {{ t('navbar.dashboard') }}
  </a>
</template>

🎯 Personalizar Animaciones

Velocidad del Typewriter

Edita src/components/HeroSection.vue (línea 62):

const typewriterEffect = () => {
  // Ajusta las velocidades (en milisegundos)
  const speed = isDeleting.value ? 50 : 100  // Cambia estos valores
}

Velocidad de Animación del Fondo

Edita src/components/AnimatedBackground.vue:

.layer-1 {
  animation: slide1 15s infinite;  /* Cambia 15s a tu preferencia */
}

🖼️ Añadir Más Características al Hero

Edita src/components/HeroSection.vue:

<div class="hero-visual">
  <!-- Añade más tarjetas flotantes -->
  <div class="floating-card card-4">
    <div class="card-icon">⚡</div>
    <div class="card-text">Nueva Característica</div>
  </div>
</div>

.card-4 {
  top: 150px;
  right: 50px;
  animation: float 6s ease-in-out infinite 6s;
}

📊 Backend Discord OAuth2

Configurar el Backend

Copia server-example.js a tu carpeta de backend
Instala dependencias:

npm install express axios cors dotenv jsonwebtoken

Crea .env en tu backend:

DISCORD_CLIENT_ID=tu_client_id
DISCORD_CLIENT_SECRET=tu_client_secret
JWT_SECRET=tu_secret_super_seguro
NODE_ENV=production
PORT=3000

Ejecuta con PM2:

pm2 start server-example.js --name "amayo-auth"
pm2 save

🔒 Configurar Discord Developer Portal

Ve a https://discord.com/developers/applications
Crea una nueva aplicación o selecciona la existente
Ve a OAuth2 > General
Añade Redirect URIs:
- Desarrollo: http://localhost:5173/auth/callback
- Producción: https://docs.amayo.dev/auth/callback
Copia el Client ID y Client Secret
Ve a Bot y copia el Token del bot (si lo necesitas)

🚀 Optimizaciones de Producción

Lazy Loading de Componentes

En src/router/index.js:

{
  path: '/dashboard',
  component: () => import('../views/Dashboard.vue')  // Carga perezosa
}

Preload de Fuentes

En index.html:

<head>
  <link rel="preload" href="/fonts/tu-fuente.woff2" as="font" type="font/woff2" crossorigin>
</head>

📈 Analytics (Opcional)

Añadir Google Analytics