Proyecto: Campus Astrología Frontend (Astro)

Creado: 2026-02-10
Carpeta de trabajo: /home/elias/www/castrologia-frontend/
Regla: NUNCA tocar nada fuera de esta carpeta sin permiso explícito

---

🎯 ARQUITECTURA

┌─────────────────────────────────────────────────┐
│              WordPress (Backend)                │
│  - wp-admin para administración                 │
│  - Menús, artículos, cursos, productos         │
│  - API REST: wp-json/wp/v2                     │
└─────────────────────────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────┐
│              Astro (Frontend)                   │
│  - Extracción vía API REST                     │
│  - Replica visual del tema Astra              │
│  - Menús dinámicos desde wp-admin              │
│  - SEO completo (meta, OpenGraph, Schema)      │
│  - Build estático en /dist                     │
└─────────────────────────────────────────────────┘

---

🎨 DISEÑO (Replicando Astra Theme)

• Header con gradiente violeta
• Tipografía: Heebo + Quattrocento
• Footer con grid de 4 columnas
• Responsive (mobile-first)

---

📁 ARCHIVOS DEL PROYECTO

castrologia-frontend/
├── src/
│   ├── lib/
│   │   ├── wordpress.js      ← API WordPress (completa)
│   │   ├── seo.ts            ← SEO (meta, OpenGraph, Schema)
│   │   └── rag.ts            ← RAG para biblioteca
│   ├── layouts/
│   │   └── MainLayout.astro  ← Layout con SEO + menús
│   ├── components/
│   │   └── Navigation.astro   ← Menú desde WordPress
│   └── pages/
│       └── [[index]].astro
├── dist/                      ← Build generado
├── astro.config.mjs
└── package.json

---

🔗 WORDPRESS API INTEGRATION

Endpoints Used

| Recurso | Endpoint | Uso | |---------|----------|-----| | Menús | /wp/v2/menus | Navegación dinámica | | Menú Locations | /wp/v2/menu-locations | Ubicaciones de menús | | Posts | /wp/v2/posts | Artículos | | Pages | /wp/v2/pages | Páginas estáticas | | Categorías | /wp/v2/categories | Categorías | | Tags | /wp/v2/tags | Etiquetas | | Cursos (Sensei) | /wp/v2/courses | Catálogo cursos | | Lecciones | /wp/v2/lessons | Lecciones cursos | | Usuarios | /wp/v2/users | Perfiles |

wordpress.js Funciones

getMenuTree('primary')      // Menú principal
getMenuTree('footer')       // Menú footer
getPosts({ category, tag })  // Artículos
getCourses()                 // Cursos Sensei
getSiteSettings()            // Configuración sitio
searchContent(query)         // Búsqueda

---

🔍 SEO IMPLEMENTADO

Meta Tags Generados

• Title, Description, Robots
• OpenGraph (Facebook, WhatsApp, LinkedIn)
• Twitter Cards

Schema.org Generado

• WebSite - Búsqueda integrada
• Article - Artículos
• Organization - Datos del sitio
• Course - Cursos Sensei
• BreadcrumbList - Migas de pan

Ejemplo de Uso en páginas

---
import MainLayout from '../layouts/MainLayout.astro';
import { getPosts } from '../lib/wordpress';

const posts = await getPosts({ perPage: 5 });
---

<MainLayout 
  title="El Cielo Actual"
  description="Análisis astrológico del mes"
  type="article"
>
  <!-- contenido -->
</MainLayout>

---

🎯 SISTEMA DE MENÚS

Flujo: wp-admin → Astro

1. Gestionar menús en wp-admin (Apariencia → Menús)
2. Astro lee via API REST (/wp/v2/menus)
3. Navigation.astro renderiza
4. Cache: 5 minutos (evita sobrecarga)

Uso

<Navigation location="primary" />  <!-- Menú principal -->
<Navigation location="footer" />   <!-- Menú footer -->

---

🔐 PLUGINS DE AUTENTICACIÓN / OAuth

| Plugin | Función | Migración | |--------|---------|-----------| | accesspress-social-login | Login social (Google, Facebook) | API OAuth propia + JWT | | fb-login-widget-pro | Login con Facebook | Facebook OAuth | | buddypress | Red social comunitaria | Futuro v2.0 | | custom-login | Personalizar login | CSS en Astro |

---

💬 PLUGINS DE FOROS

| Plugin | Función | Migración | |--------|---------|-----------| | wpForo | Foro principal | API wpForo o migrar a Discourse | | buddypress | Red social | Futuro v3.0 |

---

📧 NEWSLETTER / SUSCRIPCIONES

| Plugin | Función | Migración | |--------|---------|-----------| | Mailster | Email marketing | API REST Mailster | | Forms | Suscripción | Componente Astro |

---

📚 CURSOS (Sensei) - API Available

| Endpoint | Uso | |----------|-----| | /wp/v2/courses | Lista de cursos | | /wp/v2/lessons | Lecciones | | /wp/v2/questions | Preguntas quiz | | /wp/v2/course-category | Categorías cursos |

---

🛒 WOOCOMMERCE - API Available

| Endpoint | Uso | |----------|-----| | /wp/v2/products | Productos | | /wp/v2/product_cat | Categorías tienda | | /wp/v2/product_tag | Etiquetas productos |

---

📊 SHORTCODE PERSONALIZADOS

[total_usuarios]

// API: GET /wp/v2/users?per_page=1

[visitante] / [miembro]

// Content based on auth state
// Futuro: JWT auth integration

[astroseo]

// Generador de páginas planetas en signos
// Futuro: Componente Astro dinámico

---

🚫 REGLAS DE SEGURIDAD

| ✅ PUEDO | ❌ NO PUEDO | |---------|-------------| | Trabajar en /home/elias/www/castrologia-frontend/ | Modificar nada fuera de esta carpeta | | Crear archivos/código nuevo | Tocar configuraciones del servidor | | Ejecutar npm run build | Modificar nginx/apache | | Desplegar a dist/ | Afectar producción (campus-astrologia.es) | | Extraer contenido vía API REST | Acceder/modificar base de datos directamente |

---

📋 PRÓXIMOS PASOS

Inmediatos

• [ ] npm install en el servidor
• [ ] npm run build para generar /dist
• [ ] Configurar nginx para servir /dist

Funcionalidades

• [ ] Páginas de artículos dinámicos (/articulos/[slug])
• [ ] Catálogo de cursos Sensei
• [ ] Sistema de búsqueda (WP Search API)
• [ ] Formularios de suscripción (Mailster API)

Futuro (v2.0+)

• [ ] Sistema de autenticación (JWT)
• [ ] Carrito de compras (WooCommerce API)
• [ ] Foro integrado (wpForo API)
• [ ] Área de miembros

---

📚 RECURSOS

• API REST: https://campus-astrologia.es/wp-json/wp/v2/
• Frontend: /home/elias/www/castrologia-frontend/
• Build: /home/elias/www/castrologia-frontend/dist/
• Documentación SEO: /home/elias/www/castrologia-frontend/src/lib/seo.ts