mgpanel-cli 1.0.2 → 1.0.4

package/README.md

@@ -37,6 +37,20 @@ npm -v
 
 ## Comandos disponibles
 
-Crear un módulo:
+Iniciar un proyecto:
+```bash
+mgpanel init nombre-web
+```
+
+Crear un paginas:
+```bash
+mgpanel make page nombre-pagina
+```
+
+Crear un secciones y asignarlas a páginas:
+```bash
+mgpanel make module nombre-modulo
+mgpanel add module nombre-modulo --to nombre-pagina
 
-mgpanel make module home
+```
+Puedes crear diferentes secciones (módulos) y asginarlas a tu preferencia a cualquier página.

package/bin/mgpanel.js

@@ -193,6 +193,292 @@ renderPage(pageFromPath()).catch(err => {
     "utf8"
   );
 
+  // dev/config.md: Documentación para IDEs (Cursor, etc.)
+  const configMD = `# MGPanel - Configuración de Desarrollo
+
+Esta documentación está diseñada para ayudar a IDEs como Cursor y otros editores a entender el contexto de desarrollo con MGPanel.
+
+## ¿Qué es MGPanel?
+
+MGPanel es un sistema de gestión de contenido (CMS) basado en Node.js y MongoDB que permite crear sitios web usando HTML, CSS y JavaScript puro, sin frameworks complejos. Los proyectos MGPanel utilizan una arquitectura modular donde las páginas se componen de módulos reutilizables.
+
+## Estructura del Proyecto
+
+\`\`\`
+proyecto/
+├── pages/              # Páginas del sitio
+│   └── <nombre-pagina>/
+│       └── page.json   # Configuración de la página (ruta, título, módulos)
+├── modules/            # Módulos reutilizables
+│   └── <nombre-modulo>/
+│       ├── <nombre-modulo>.html
+│       ├── <nombre-modulo>.css
+│       └── <nombre-modulo>.js
+├── assets/             # Archivos estáticos globales
+│   ├── css/
+│   │   └── style.css
+│   └── js/
+│       └── app.js
+├── dev/                # Utilidades de desarrollo
+│   ├── config.md       # Este archivo
+│   └── preview.js      # Script para preview local
+└── index.html          # Punto de entrada para preview local
+\`\`\`
+
+## Comandos Disponibles
+
+### Crear una Página
+
+\`\`\`bash
+mgpanel make page <nombre-pagina>
+\`\`\`
+
+**Ejemplo:**
+\`\`\`bash
+mgpanel make page about
+mgpanel make page contacto
+\`\`\`
+
+Esto crea:
+- \`pages/<nombre-pagina>/page.json\` - Archivo de configuración de la página
+
+**Estructura de page.json:**
+\`\`\`json
+{
+  "route": "/about",
+  "title": "About",
+  "description": "Descripción de la página about.",
+  "modules": []
+}
+\`\`\`
+
+### Crear un Módulo
+
+\`\`\`bash
+mgpanel make module <nombre-modulo>
+\`\`\`
+
+**Ejemplo:**
+\`\`\`bash
+mgpanel make module header
+mgpanel make module hero-banner
+mgpanel make module footer
+\`\`\`
+
+Esto crea en \`modules/<nombre-modulo>/\`:
+- \`<nombre-modulo>.html\` - Estructura HTML del módulo
+- \`<nombre-modulo>.css\` - Estilos CSS del módulo
+- \`<nombre-modulo>.js\` - Lógica JavaScript del módulo
+
+### Asociar un Módulo a una Página
+
+\`\`\`bash
+mgpanel add module <nombre-modulo> --to <nombre-pagina>
+\`\`\`
+
+**Ejemplo:**
+\`\`\`bash
+mgpanel add module header --to home
+mgpanel add module hero-banner --to home
+mgpanel add module footer --to home
+\`\`\`
+
+Esto actualiza el archivo \`pages/<nombre-pagina>/page.json\` añadiendo el módulo al array \`modules\`:
+
+\`\`\`json
+{
+  "route": "/",
+  "title": "Home",
+  "description": "Página principal.",
+  "modules": [
+    { "name": "header" },
+    { "name": "hero-banner" },
+    { "name": "footer" }
+  ]
+}
+\`\`\`
+
+**Importante:** Los módulos se renderizan en el orden en que aparecen en el array \`modules\`.
+
+### Servidor de Desarrollo
+
+\`\`\`bash
+mgpanel dev [puerto]
+\`\`\`
+
+Inicia un servidor HTTP local para previsualizar el proyecto.
+
+- **Puerto por defecto:** 3000
+- **Acceso:** http://localhost:3000 (o el puerto especificado)
+
+El servidor:
+- Sirve archivos estáticos (HTML, CSS, JS, imágenes)
+- Implementa routing SPA: rutas sin extensión devuelven \`index.html\`
+- Soporta hot-reload manual (refrescar el navegador)
+
+**Ejemplos:**
+\`\`\`bash
+mgpanel dev        # Puerto 3000
+mgpanel dev 8080   # Puerto 8080
+\`\`\`
+
+## Flujo de Trabajo Recomendado
+
+1. **Crear un módulo:**
+   \`\`\`bash
+   mgpanel make module header
+   \`\`\`
+
+2. **Editar el módulo:**
+   - Edita \`modules/header/header.html\`
+   - Edita \`modules/header/header.css\`
+   - Edita \`modules/header/header.js\`
+
+3. **Crear/editar una página:**
+   \`\`\`bash
+   mgpanel make page home
+   \`\`\`
+
+4. **Asociar módulos a la página:**
+   \`\`\`bash
+   mgpanel add module header --to home
+   mgpanel add module hero --to home
+   mgpanel add module footer --to home
+   \`\`\`
+
+5. **Iniciar servidor de desarrollo:**
+   \`\`\`bash
+   mgpanel dev
+   \`\`\`
+
+6. **Acceder a la página:**
+   - http://localhost:3000 (página home)
+   - http://localhost:3000/about (si existe la página about)
+
+## Convenciones y Reglas
+
+### Nombres de Páginas y Módulos
+
+- Usar solo letras minúsculas, números y guiones
+- No usar espacios ni caracteres especiales
+- Ejemplos válidos: \`home\`, \`about-us\`, \`contacto\`, \`header\`, \`hero-banner\`
+- Ejemplos inválidos: \`About Us\`, \`contact_page\`, \`mi@modulo\`
+
+### Estructura de Módulos
+
+Cada módulo debe tener exactamente 3 archivos con el mismo nombre base:
+
+\`\`\`
+modules/<nombre-modulo>/
+├── <nombre-modulo>.html
+├── <nombre-modulo>.css
+└── <nombre-modulo>.js
+\`\`\`
+
+### CSS y JavaScript Globales
+
+- **Global CSS:** \`assets/css/style.css\` - Se carga en todas las páginas
+- **Global JS:** \`assets/js/app.js\` - Se carga en todas las páginas
+- **Módulo CSS:** Se carga automáticamente cuando el módulo es usado
+- **Módulo JS:** Se carga automáticamente cuando el módulo es usado
+
+### Preview Local
+
+El archivo \`index.html\` y \`dev/preview.js\` permiten previsualizar las páginas localmente:
+
+- Lee \`pages/<nombre>/page.json\`
+- Carga los módulos especificados en el orden definido
+- Inyecta CSS y JS de cada módulo automáticamente
+- Soporta routing basado en la URL
+
+## Integración con MGPanel CMS
+
+Cuando despliegues el proyecto en MGPanel:
+
+1. Las páginas se sincronizan con el CMS
+2. Los módulos se pueden reutilizar entre páginas
+3. El contenido puede ser editado desde el panel de administración
+4. La estructura de archivos se mantiene compatible
+
+## Consejos para IDEs
+
+- Los archivos \`page.json\` definen la configuración de cada página
+- Los módulos son componentes independientes y reutilizables
+- El orden de los módulos en \`page.json\` determina el orden de renderizado
+- Usa autocompletado para referencias entre módulos y páginas
+- Valida los nombres de módulos antes de asociarlos a páginas
+`;
+
+  fs.writeFileSync(path.join(projectPath, "dev", "config.md"), configMD, "utf8");
+
+  // README.md en la raíz del proyecto
+  const readmeMD = `# Proyecto MGPanel
+
+Este proyecto ha sido creado con **MGPanel CLI**, un sistema para desarrollar sitios web usando HTML, CSS y JavaScript puro, organizados de forma modular.
+
+## 📚 Documentación de Desarrollo
+
+Para entender completamente cómo trabajar con este proyecto, consulta la documentación completa en:
+
+**\`dev/config.md\`**
+
+Este archivo contiene información detallada sobre:
+- Comandos para crear páginas y módulos
+- Cómo asociar módulos a páginas
+- Estructura del proyecto
+- Flujo de trabajo recomendado
+- Convenciones y mejores prácticas
+
+## 🚀 Inicio Rápido
+
+1. **Crear un módulo:**
+   \`\`\`bash
+   mgpanel make module nombre-modulo
+   \`\`\`
+
+2. **Crear una página:**
+   \`\`\`bash
+   mgpanel make page nombre-pagina
+   \`\`\`
+
+3. **Asociar módulo a página:**
+   \`\`\`bash
+   mgpanel add module nombre-modulo --to nombre-pagina
+   \`\`\`
+
+4. **Iniciar servidor de desarrollo:**
+   \`\`\`bash
+   mgpanel dev
+   \`\`\`
+
+## 📁 Estructura del Proyecto
+
+\`\`\`
+.
+├── pages/              # Páginas del sitio
+│   └── <nombre>/page.json
+├── modules/            # Módulos reutilizables
+│   └── <nombre>/
+│       ├── <nombre>.html
+│       ├── <nombre>.css
+│       └── <nombre>.js
+├── assets/             # Recursos globales
+│   ├── css/style.css
+│   └── js/app.js
+├── dev/                # Desarrollo
+│   ├── config.md       # 📖 Documentación completa para IDEs
+│   └── preview.js
+└── index.html          # Preview local
+\`\`\`
+
+## 🔗 Más Información
+
+- **Documentación de desarrollo:** Ver \`dev/config.md\`
+- **MGPanel CLI:** https://github.com/miguayaba/mgpanel-cli
+`;
+
+  fs.writeFileSync(path.join(projectPath, "README.md"), readmeMD, "utf8");
+
   console.log("✅ Proyecto creado correctamente");
   console.log("👉 Ejecuta: cd " + projectName + " && mgpanel dev");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mgpanel-cli",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "MGPanel CLI",
   "bin": {
     "mgpanel": "./bin/mgpanel.js"