@icarusmx/creta 0.2.2 → 0.3.0

package/CLAUDE.md

@@ -4,22 +4,115 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-This is "@icarusmx/creta" - a minimal CLI tool for the Icarus software school. The project is currently in early development (v0.0.2) with basic structure in place.
+This is "@icarusmx/creta" - a CLI tool for the Icarus software school that helps reconnect with former students by providing them with guided challenges to build personal portfolios. The tool generates SvelteKit 5 + Tailwind CSS 4 boilerplates with instructional comments in Spanish.
+
+## Purpose and Mission
+
+Creta is a Spanish-speaking software school focused on learn-by-building approach. This CLI tool serves as a reconnection mechanism with former students, encouraging them to complete their education by building personal websites. The tool provides progressive difficulty levels where students can skip ahead or get solutions for different components.
 
 ## Architecture
 
-- **Entry point**: `bin/creta.js` - Simple Node.js CLI executable that outputs a welcome message
-- **Package**: Published as `@icarusmx/creta` on npm with public access
-- **Language**: JavaScript (no TypeScript)
+- **Entry point**: `bin/creta.js` - Interactive Node.js CLI that collects student names and generates projects
+- **Package**: Published as `@icarusmx/creta` on npm with public access (current version: 0.2.2)
+- **Language**: JavaScript ES modules (no TypeScript)
+- **Templates**: SvelteKit 5 + Tailwind CSS 4 portfolio boilerplate in `/templates/sveltekit-portfolio/`
 
-## Development Commands
+## Available Commands
+
+- `creta portafolio` - Full challenge with instructional comments (level 0)
+- `creta portafolio-1` - Navbar completed (level 1) 
+- `creta portafolio-2` - Navbar + hero completed (level 2)
+- `creta portafolio-3` - Complete solution (level 3)
+
+## Technology Stack
+
+### Frontend Template
+- **SvelteKit 5**: Using new syntax with `{@render children?.()}` instead of `<slot />`
+- **Tailwind CSS 4**: Using `@tailwindcss/vite` plugin (no config files needed)
+- **Vite**: Build tool and dev server
+
+### Template Structure
+```
+templates/sveltekit-portfolio/
+├── package.json           # SvelteKit 5 + Tailwind 4 dependencies
+├── vite.config.js        # Vite config with Tailwind plugin
+├── svelte.config.js      # SvelteKit configuration
+├── src/
+│   ├── app.html         # HTML template
+│   ├── app.css          # Tailwind directives
+│   └── routes/
+│       ├── +layout.svelte # Layout with navbar/footer challenges
+│       └── +page.svelte   # Hero section challenge
+└── static/
+    └── favicon.png
+```
+
+## Key Features
+
+### Interactive Project Generation
+- Prompts for student name using readline interface
+- Generates project directory named `{name}-portafolio`
+- Replaces `{{STUDENT_NAME}}` and `{{PROJECT_NAME}}` placeholders
+- Copies template files with level-specific modifications
 
-This is a minimal CLI project without build tools, testing frameworks, or linting configured yet. The main executable can be tested directly:
+### Progressive Difficulty System
+The `applyLevelModifications()` function provides solutions based on level:
+- **Level 1+**: Complete navbar with navigation links
+- **Level 2+**: Complete hero section with student's name
+- **Level 3+**: Complete footer with copyright and Creta attribution
+
+### Spanish Instructional Design
+- All comments and instructions in Spanish
+- Detailed Tailwind CSS patterns and tips
+- Encouraging messages for returning students
+- HTML structure examples in code blocks (using `[placeholders]` to avoid parsing issues)
+
+## Development Commands
 
 ```bash
+# Test CLI locally
 node bin/creta.js
+
+# Test specific commands
+node bin/creta.js portafolio
+node bin/creta.js portafolio-1
+
+# Publish to npm (increment version first)
+npm publish
 ```
 
-## Current State
+## Current State (v0.2.2)
+
+The CLI is fully functional with:
+- ✅ Interactive name collection
+- ✅ SvelteKit 5 + Tailwind 4 template generation
+- ✅ Progressive difficulty levels (0-3)
+- ✅ Spanish instructional comments
+- ✅ Proper Svelte 5 syntax (`{@render children?.()}`)
+- ✅ HTML parsing issue fixes
+- ✅ Encouraging welcome message for returning students
+
+## Recent Fixes and Updates
+
+### Version History
+- **0.2.2**: Fixed Svelte 5 syntax and updated welcome message
+- **0.2.1**: Fixed HTML comment parsing errors in Svelte templates
+- **0.2.0**: Updated to Tailwind 4, changed command to "portafolio", new greeting
+- **0.1.1**: Fixed template path resolution for global installs
+- **0.1.0**: Initial working version with template generation
+- **0.0.2**: Basic CLI structure
+
+### Known Issues Resolved
+- ✅ HTML comments in code examples causing Svelte parsing errors (fixed by using `[placeholders]`)
+- ✅ Svelte 5 syntax compatibility (`<slot />` → `{@render children?.()}`)
+- ✅ Tailwind 4 migration (removed config files, updated to Vite plugin)
+- ✅ Template path resolution for global npm installs
+
+## Message and Tone
+
+The CLI uses encouraging Spanish messages:
+- Welcome: "¡Bienvenido de vuelta! 🏛️"
+- Mission: "Retomemos desde donde nos quedamos: hagamos tu portafolio."
+- Hero message: "Gracias por seguir aquí. Abre el proyecto usando `code .` y sigue las instrucciones. Si tienes dudas, apóyate en el equipo"
 
-The CLI currently only displays "Bienvenido a Crea" - this appears to be a foundational setup awaiting feature development.
+This reflects Creta's supportive approach to bringing students back to complete their learning journey.

package/bin/creta.js

@@ -4,6 +4,7 @@ import { createInterface } from 'readline'
 import { execSync } from 'child_process'
 import fs from 'fs'
 import path from 'path'
+import { fileURLToPath } from 'url'
 
 const args = process.argv.slice(2)
 const command = args[0]
@@ -14,15 +15,23 @@ console.log("Retomemos desde donde nos quedamos: hagamos tu portafolio.\n")
 if (!command) {
   console.log("Comandos disponibles:")
   console.log("  creta portafolio    - Crea tu portafolio personal (reto completo)")
-  console.log("  creta portafolio-1  - Portafolio con navbar hecho")
-  console.log("  creta portafolio-2  - Portafolio con navbar + hero")
-  console.log("  creta portafolio-3  - Portafolio completo (solución)")
+  console.log("  creta portafolio-1  - Desbloquea nivel 1 (navbar) 🔓")
+  console.log("  creta portafolio-2  - Desbloquea nivel 2 (navbar + hero) 🔓")
+  console.log("  creta portafolio-3  - Desbloquea nivel 3 (solución completa) 🔓")
+  console.log("\n💡 Tip: Si estás dentro de un proyecto existente, los comandos")
+  console.log("    portafolio-1/2/3 actualizarán tus archivos directamente")
   process.exit(0)
 }
 
 if (command.startsWith('portafolio')) {
   const level = command === 'portafolio' ? 0 : parseInt(command.split('-')[1]) || 0
-  await createPortfolioProject(level)
+  
+  // Check if we're in an existing Creta project
+  if (level > 0 && isInCretaProject()) {
+    await unstuckProject(level)
+  } else {
+    await createPortfolioProject(level)
+  }
 } else {
   console.log(`Comando no reconocido: ${command}`)
   process.exit(1)
@@ -64,13 +73,18 @@ async function createPortfolioProject(level) {
 }
 
 async function createProjectFiles(projectName, studentName, level) {
-  const __dirname = path.dirname(new URL(import.meta.url).pathname)
+  const __filename = fileURLToPath(import.meta.url)
+  const __dirname = path.dirname(__filename)
   const templatePath = path.join(__dirname, '../templates/sveltekit-portfolio')
   const targetPath = path.join(process.cwd(), projectName)
   
   // Check if template exists
   if (!fs.existsSync(templatePath)) {
-    throw new Error('Template no encontrado. Asegúrate de ejecutar desde el directorio correcto.')
+    console.error(`Debug info:`)
+    console.error(`  - CLI location: ${__filename}`)
+    console.error(`  - Template path: ${templatePath}`)
+    console.error(`  - Template exists: ${fs.existsSync(templatePath)}`)
+    throw new Error('Template no encontrado. Es posible que necesites reinstalar el paquete: npm uninstall -g @icarusmx/creta && npm install -g @icarusmx/creta')
   }
   
   // Create target directory
@@ -215,3 +229,75 @@ function getLevelDescription(level) {
   }
   return descriptions[level] || 'nivel desconocido'
 }
+
+function isInCretaProject() {
+  // Check if we're in a Creta project by looking for key files
+  const currentDir = process.cwd()
+  const packageJsonPath = path.join(currentDir, 'package.json')
+  const layoutPath = path.join(currentDir, 'src/routes/+layout.svelte')
+  const pagePath = path.join(currentDir, 'src/routes/+page.svelte')
+  
+  // Must have package.json and SvelteKit structure
+  if (!fs.existsSync(packageJsonPath) || !fs.existsSync(layoutPath) || !fs.existsSync(pagePath)) {
+    return false
+  }
+  
+  // Check if layout contains Creta comments
+  try {
+    const layoutContent = fs.readFileSync(layoutPath, 'utf8')
+    return layoutContent.includes('RETO CRETA') || layoutContent.includes('🧭 RETO 1: NAVBAR')
+  } catch (error) {
+    return false
+  }
+}
+
+async function unstuckProject(level) {
+  console.log(`\n🔓 ¡Te ayudo a desbloquear el nivel ${level}!`)
+  console.log(`📚 Agregando código para: ${getLevelDescription(level)}`)
+  
+  try {
+    const currentDir = process.cwd()
+    const layoutPath = path.join(currentDir, 'src/routes/+layout.svelte')
+    const pagePath = path.join(currentDir, 'src/routes/+page.svelte')
+    
+    // Get student name from package.json title if possible
+    let studentName = 'Tu nombre'
+    try {
+      const packageJsonPath = path.join(currentDir, 'package.json')
+      const packageContent = fs.readFileSync(packageJsonPath, 'utf8')
+      const packageJson = JSON.parse(packageContent)
+      if (packageJson.name && packageJson.name.includes('-portafolio')) {
+        studentName = packageJson.name.replace('-portafolio', '').split('-').map(word => 
+          word.charAt(0).toUpperCase() + word.slice(1)
+        ).join(' ')
+      }
+    } catch (error) {
+      // Use default if can't parse
+    }
+    
+    // Apply modifications to existing files
+    if (fs.existsSync(layoutPath)) {
+      let layoutContent = fs.readFileSync(layoutPath, 'utf8')
+      layoutContent = applyLayoutModifications(layoutContent, level)
+      fs.writeFileSync(layoutPath, layoutContent)
+      console.log(`✅ Actualizado: src/routes/+layout.svelte`)
+    }
+    
+    if (fs.existsSync(pagePath)) {
+      let pageContent = fs.readFileSync(pagePath, 'utf8')
+      pageContent = applyPageModifications(pageContent, level)
+      // Replace student name placeholder
+      pageContent = pageContent.replace(/\{\{STUDENT_NAME\}\}/g, studentName)
+      fs.writeFileSync(pagePath, pageContent)
+      console.log(`✅ Actualizado: src/routes/+page.svelte`)
+    }
+    
+    console.log(`\n🎉 ¡Listo! Ahora tienes el código del nivel ${level}`)
+    console.log(`💡 Revisa los archivos actualizados para ver qué se agregó`)
+    console.log(`🚀 Continúa con: npm run dev`)
+    
+  } catch (error) {
+    console.error('Error al actualizar el proyecto:', error.message)
+    process.exit(1)
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icarusmx/creta",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Salgamos de este laberinto.",
   "type": "module",
   "bin": {