@icarusmx/creta 0.0.2 → 0.1.0

package/CLAUDE.md

@@ -0,0 +1,25 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## 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.
+
+## 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)
+
+## Development Commands
+
+This is a minimal CLI project without build tools, testing frameworks, or linting configured yet. The main executable can be tested directly:
+
+```bash
+node bin/creta.js
+```
+
+## Current State
+
+The CLI currently only displays "Bienvenido a Crea" - this appears to be a foundational setup awaiting feature development.

package/bin/creta.js

@@ -1,3 +1,217 @@
 #!/usr/bin/env node
 
-console.log("Bienvenido a Crea")
+import { createInterface } from 'readline'
+import { execSync } from 'child_process'
+import fs from 'fs'
+import path from 'path'
+
+const args = process.argv.slice(2)
+const command = args[0]
+
+console.log("¡Bienvenido a Creta! 🏛️")
+console.log("Aprendamos construyendo productos reales.\n")
+
+if (!command) {
+  console.log("Comandos disponibles:")
+  console.log("  creta website    - Crea tu portfolio personal (reto completo)")
+  console.log("  creta website-1  - Portfolio con navbar hecho")
+  console.log("  creta website-2  - Portfolio con navbar + hero")
+  console.log("  creta website-3  - Portfolio completo (solución)")
+  process.exit(0)
+}
+
+if (command.startsWith('website')) {
+  const level = command === 'website' ? 0 : parseInt(command.split('-')[1]) || 0
+  await createWebsiteProject(level)
+} else {
+  console.log(`Comando no reconocido: ${command}`)
+  process.exit(1)
+}
+
+async function createWebsiteProject(level) {
+  const rl = createInterface({
+    input: process.stdin,
+    output: process.stdout
+  })
+
+  const askQuestion = (question) => {
+    return new Promise((resolve) => {
+      rl.question(question, resolve)
+    })
+  }
+
+  try {
+    const name = await askQuestion("¿Cuál es tu nombre? ")
+    const projectName = `${name.toLowerCase().replace(/\s+/g, '-')}-portfolio`
+    
+    console.log(`\n🚀 Creando proyecto: ${projectName}`)
+    console.log(`📚 Nivel: ${level === 0 ? 'Reto completo' : `Con ${getLevelDescription(level)} completado`}`)
+    
+    await createProjectFiles(projectName, name, level)
+    
+    console.log(`\n✨ ¡Proyecto creado exitosamente!`)
+    console.log(`\n📁 Ingresa a tu proyecto: cd ${projectName}`)
+    console.log(`📦 Instala dependencias: npm install`)  
+    console.log(`🚀 Inicia el servidor: npm run dev`)
+    console.log(`\n💡 Lee los comentarios en los archivos para saber qué hacer`)
+    
+    rl.close()
+  } catch (error) {
+    console.error('Error:', error.message)
+    rl.close()
+    process.exit(1)
+  }
+}
+
+async function createProjectFiles(projectName, studentName, level) {
+  const __dirname = path.dirname(new URL(import.meta.url).pathname)
+  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.')
+  }
+  
+  // Create target directory
+  if (fs.existsSync(targetPath)) {
+    throw new Error(`El directorio ${projectName} ya existe`)
+  }
+  
+  fs.mkdirSync(targetPath, { recursive: true })
+  
+  // Copy template files
+  await copyTemplate(templatePath, targetPath, projectName, studentName, level)
+}
+
+async function copyTemplate(src, dest, projectName, studentName, level) {
+  const items = fs.readdirSync(src)
+  
+  for (const item of items) {
+    const srcPath = path.join(src, item)
+    const destPath = path.join(dest, item)
+    
+    if (fs.statSync(srcPath).isDirectory()) {
+      fs.mkdirSync(destPath, { recursive: true })
+      await copyTemplate(srcPath, destPath, projectName, studentName, level)
+    } else {
+      let content = fs.readFileSync(srcPath, 'utf8')
+      
+      // Apply level-specific modifications first
+      if (level > 0) {
+        content = applyLevelModifications(content, item, level)
+      }
+      
+      // Then replace placeholders
+      content = content.replace(/\{\{PROJECT_NAME\}\}/g, projectName)
+      content = content.replace(/\{\{STUDENT_NAME\}\}/g, studentName)
+      
+      fs.writeFileSync(destPath, content)
+    }
+  }
+}
+
+function applyLevelModifications(content, filename, level) {
+  if (filename === '+layout.svelte') {
+    return applyLayoutModifications(content, level)
+  }
+  
+  if (filename === '+page.svelte') {
+    return applyPageModifications(content, level)
+  }
+  
+  return content
+}
+
+function applyLayoutModifications(content, level) {
+  if (level >= 1) {
+    // Replace navbar placeholder with complete solution
+    content = content.replace(
+      '<nav class="bg-white shadow-sm">\n  <!-- ⚠️ COMPLETA AQUÍ LA NAVEGACIÓN -->\n</nav>',
+      `<nav class="bg-white shadow-sm">
+  <div class="max-w-7xl mx-auto px-4">
+    <div class="flex justify-between items-center py-3">
+      <div class="text-xl font-bold text-gray-900">{{STUDENT_NAME}}</div>
+      <div class="hidden md:flex space-x-6">
+        <a href="#inicio" class="text-gray-600 hover:text-blue-600">Inicio</a>
+        <a href="#sobre-mi" class="text-gray-600 hover:text-blue-600">Sobre mí</a>
+        <a href="#proyectos" class="text-gray-600 hover:text-blue-600">Proyectos</a>
+        <a href="#contacto" class="text-gray-600 hover:text-blue-600">Contacto</a>
+      </div>
+      <button class="md:hidden">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+</nav>`
+    )
+  }
+  
+  if (level >= 3) {
+    // Replace footer placeholder with complete solution
+    content = content.replace(
+      '<footer class="bg-gray-50 border-t">\n  <!-- ⚠️ COMPLETA AQUÍ EL FOOTER -->\n</footer>',
+      `<footer class="bg-gray-50 border-t">
+  <div class="max-w-7xl mx-auto py-8 px-4">
+    <div class="text-center text-gray-600 text-sm space-y-2">
+      <p>© ${new Date().getFullYear()} {{STUDENT_NAME}}. Todos los derechos reservados.</p>
+      <p>Hecho con ❤️ en <a href="https://creta.school" class="text-blue-600 hover:underline">Creta</a></p>
+    </div>
+  </div>
+</footer>`
+    )
+  }
+  
+  return content
+}
+
+function applyPageModifications(content, level) {
+  if (level >= 2) {
+    // Replace hero placeholder with complete solution
+    content = content.replace(
+      `<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
+  <!-- ⚠️ COMPLETA AQUÍ LA SECCIÓN HERO -->
+  <div class="max-w-4xl mx-auto px-4 text-center">
+    <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
+      ¡Construye tu hero aquí!
+    </h1>
+    <p class="text-lg text-gray-600 mb-8">
+      Lee los comentarios arriba para saber qué hacer ☝️
+    </p>
+  </div>
+</section>`,
+      `<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
+  <div class="max-w-4xl mx-auto px-4 text-center">
+    <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
+      Hola, soy {{STUDENT_NAME}}
+    </h1>
+    <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
+      Soy un desarrollador apasionado por crear productos digitales que impacten positivamente. 
+      Aprendo construyendo y siempre busco nuevos desafíos.
+    </p>
+    <div class="flex justify-center space-x-4">
+      <a href="#proyectos" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg transition-colors">
+        Ver proyectos
+      </a>
+      <a href="#contacto" class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-8 py-3 rounded-lg transition-colors">
+        Contáctame
+      </a>
+    </div>
+  </div>
+</section>`
+    )
+  }
+  
+  return content
+}
+
+function getLevelDescription(level) {
+  const descriptions = {
+    1: 'navbar',
+    2: 'navbar + hero',
+    3: 'todo el portfolio'
+  }
+  return descriptions[level] || 'nivel desconocido'
+}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@icarusmx/creta",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Salgamos de este laberinto.",
+  "type": "module",
   "bin": {
     "creta": "./bin/creta.js"
   },

package/templates/sveltekit-portfolio/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite dev",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "svelte": "^5.0.0",
+    "tailwindcss": "^3.3.6",
+    "vite": "^5.0.3"
+  },
+  "type": "module"
+}

package/templates/sveltekit-portfolio/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/sveltekit-portfolio/src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/sveltekit-portfolio/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="es">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="antialiased">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/templates/sveltekit-portfolio/src/routes/+layout.svelte

@@ -0,0 +1,90 @@
+<!--
+  RETO CRETA: PORTFOLIO PERSONAL
+  ===============================
+  
+  ¡Hola {{STUDENT_NAME}}! 👋
+  
+  Este es tu proyecto base para crear un portfolio personal.
+  Necesitas completar 3 secciones principales:
+  
+  1. 🧭 NAVBAR (Barra de navegación)
+  2. 🌟 HERO (Sección principal) 
+  3. 🦶 FOOTER (Pie de página)
+  
+  Cada sección tiene comentarios que te guían sobre qué hacer.
+  
+  COMANDOS ÚTILES:
+  - npm run dev (inicia el servidor de desarrollo)
+  - Ctrl+C (para parar el servidor)
+  
+  ¡Manos a la obra! 🚀
+-->
+
+<script>
+  import '../app.css'
+</script>
+
+<!-- 
+  🧭 RETO 1: NAVBAR
+  ==================
+  
+  Crea una barra de navegación que incluya:
+  - Logo o nombre (lado izquierdo)
+  - Menú de navegación (lado derecho)
+    * Inicio
+    * Sobre mí
+    * Proyectos
+    * Contacto
+  
+  TIPS DE TAILWIND:
+  - Usa 'flex justify-between items-center' para distribuir elementos
+  - Usa 'bg-white shadow-sm' para fondo y sombra sutil
+  - Usa 'px-4 py-3' para espaciado interno
+  - Usa 'hover:text-blue-600' para efectos hover
+  
+  ESTRUCTURA SUGERIDA:
+  <nav class="bg-white shadow-sm">
+    <div class="max-w-7xl mx-auto px-4">
+      <div class="flex justify-between items-center py-3">
+        <!-- Logo/Nombre aquí -->
+        <!-- Menú aquí -->
+      </div>
+    </div>
+  </nav>
+-->
+
+<nav class="bg-white shadow-sm">
+  <!-- ⚠️ COMPLETA AQUÍ LA NAVEGACIÓN -->
+</nav>
+
+<main>
+  <slot />
+</main>
+
+<!-- 
+  🦶 RETO 3: FOOTER  
+  ==================
+  
+  Crea un pie de página simple que incluya:
+  - Tu nombre y año actual
+  - Links a redes sociales (opcional)
+  - Mensaje "Hecho con ❤️ en Creta"
+  
+  TIPS DE TAILWIND:
+  - Usa 'bg-gray-50 border-t' para fondo y borde superior
+  - Usa 'py-8 px-4' para espaciado
+  - Usa 'text-center text-gray-600 text-sm' para texto centrado y gris
+  
+  ESTRUCTURA SUGERIDA:
+  <footer class="bg-gray-50 border-t">
+    <div class="max-w-7xl mx-auto py-8 px-4">
+      <div class="text-center text-gray-600 text-sm">
+        <!-- Tu contenido aquí -->
+      </div>
+    </div>
+  </footer>
+-->
+
+<footer class="bg-gray-50 border-t">
+  <!-- ⚠️ COMPLETA AQUÍ EL FOOTER -->
+</footer>

package/templates/sveltekit-portfolio/src/routes/+page.svelte

@@ -0,0 +1,48 @@
+<!--
+  🌟 RETO 2: HERO SECTION
+  ========================
+  
+  Crea la sección principal de tu portfolio que incluya:
+  - Tu nombre como título principal
+  - Una descripción breve de quién eres
+  - Un botón de llamada a la acción
+  - Opcionalmente: tu foto o avatar
+  
+  TIPS DE TAILWIND:
+  - Usa 'min-h-screen flex items-center justify-center' para centrar verticalmente
+  - Usa 'text-4xl md:text-6xl font-bold' para títulos grandes y responsivos
+  - Usa 'text-lg text-gray-600 mb-8' para descripciones
+  - Usa 'bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg' para botones
+  
+  ESTRUCTURA SUGERIDA:
+  <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
+    <div class="max-w-4xl mx-auto px-4 text-center">
+      <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
+        Hola, soy [Tu Nombre]
+      </h1>
+      <p class="text-lg text-gray-600 mb-8">
+        [Tu descripción aquí]
+      </p>
+      <a href="#contacto" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg">
+        Contáctame
+      </a>
+    </div>
+  </section>
+-->
+
+<svelte:head>
+  <title>{{STUDENT_NAME}} - Portfolio</title>
+  <meta name="description" content="Portfolio personal de {{STUDENT_NAME}}" />
+</svelte:head>
+
+<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
+  <!-- ⚠️ COMPLETA AQUÍ LA SECCIÓN HERO -->
+  <div class="max-w-4xl mx-auto px-4 text-center">
+    <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
+      ¡Construye tu hero aquí!
+    </h1>
+    <p class="text-lg text-gray-600 mb-8">
+      Lee los comentarios arriba para saber qué hacer ☝️
+    </p>
+  </div>
+</section>

package/templates/sveltekit-portfolio/static/favicon.png

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#3b82f6"/><text x="16" y="20" font-family="Arial" font-size="18" fill="white" text-anchor="middle">C</text></svg>

package/templates/sveltekit-portfolio/svelte.config.js

@@ -0,0 +1,10 @@
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

package/templates/sveltekit-portfolio/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/templates/sveltekit-portfolio/vite.config.js

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});