Configure Husky and migrate to Cloudflare Workers

.github/workflows/deploy.yml

@@ -6,8 +6,7 @@ on:
     branches: ["main"]
 
 jobs:
-  verify:
-    name: Verify
+  deploy:
     runs-on: ubuntu-latest
 
     permissions:
@@ -20,41 +19,16 @@ jobs:
       - name: Install Deno
         uses: denoland/setup-deno@v2
         with:
-          deno-version: v2.x
+          deno-version: "2.6.8"
 
-      - name: Type check and lint
-        run: deno task check
+      - name: Install npm dependencies
+        run: npm install
 
       - name: Build step
         run: deno task build
 
-      - name: Upload build artifacts
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-        uses: actions/upload-artifact@v4
-        with:
-          name: fresh-build
-          path: |
-            _fresh/
-          retention-days: 1
-
-  deploy:
-    name: Deploy to Cloudflare
-    runs-on: ubuntu-latest
-    needs: verify
-    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-
-    permissions:
-      contents: read
-
-    steps:
-      - name: Clone repository
-        uses: actions/checkout@v4
-
-      - name: Download build artifacts
-        uses: actions/download-artifact@v4
-        with:
-          name: fresh-build
-          path: _fresh/
+      - name: Type check and lint
+        run: deno task check
 
       - name: Deploy to Cloudflare Workers
         uses: cloudflare/wrangler-action@v3

.gitignore

@@ -9,3 +9,9 @@
 _fresh/
 # npm dependencies
 node_modules/
+
+# Husky (archivos internos - no trackear)
+.husky/_
+
+# Wrangler (archivos internos - no trackear)
+.wrangler/

.husky/pre-commit

@@ -0,0 +1,5 @@
+# Husky pre-commit hook (v9 forward-compatible format)
+export PATH="$HOME/.deno/bin:$PATH"
+
+echo "🔍 Running pre-commit checks (auto-formatting enabled)..."
+deno task precommit

CLAUDE.md

@@ -14,6 +14,11 @@ Proyecto construido con Deno Fresh con soporte para internacionalización
 - **CSS**: Tailwind CSS 3.4.1
 - **Deployment**: Cloudflare Workers (via Wrangler)
 
+**Nota sobre dependencias**: El proyecto usa Deno como runtime principal, pero
+incluye un `package.json` mínimo con Wrangler 4.80.0 como devDependency
+exclusivamente para GitHub Actions CI/CD. Tailwind y otras herramientas se
+instalan vía Deno.
+
 ## Convenciones de Código
 
 ### Componentes Fresh
@@ -60,15 +65,79 @@ interface SectionWrapperContentProps {
 ## Comandos Importantes
 
 ```bash
-deno task start    # Desarrollo con hot-reload
-deno task check    # Fmt + Lint + Type check (verificación completa)
-deno task build    # Build de producción
-deno task deploy   # Desplegar a Cloudflare Workers
-deno fmt          # Formatear código
-deno lint         # Verificar lint
-deno check **/*.ts # Verificar tipos
+deno task start      # Desarrollo con hot-reload
+deno task check      # Fmt + Lint + Type check (verificación completa)
+deno task fmt        # Formatear código
+deno task precommit  # Formatear + validar (usado en pre-commit hook)
+deno task build      # Build de producción
+deno task deploy     # Desplegar a Cloudflare Workers
+deno lint            # Verificar lint
+deno check **/*.ts   # Verificar tipos
+```
+
+## Git Hooks (Husky)
+
+El proyecto usa Husky para garantizar calidad de código antes de cada commit.
+
+### Pre-commit Hook
+
+Ejecuta automáticamente `deno task precommit`:
+
+1. **`deno fmt`** - Formatea código automáticamente
+2. **`deno lint`** - Valida reglas de linting (bloquea si falla)
+3. **`deno check **/*.ts **/*.tsx`** - Valida tipos TypeScript (bloquea si
+   falla)
+
+### Setup
+
+Después de clonar el repositorio:
+
+```bash
+deno install         # Instala dependencias npm (Tailwind, Wrangler, etc.)
+deno task prepare    # Configura git hooks de Husky
+```
+
+### Diferencia: `check` vs `precommit`
+
+- **`deno task check`**: Usado en CI - valida sin modificar (`fmt --check`)
+- **`deno task precommit`**: Usado en hook - formatea automáticamente (`fmt`)
+
+### Bypass (solo emergencias)
+
+```bash
+git commit --no-verify -m "mensaje"
+```
+
+**Nota:** El CI de GitHub Actions ejecuta `deno task check` y validará de todas
+formas.
+
+### Troubleshooting
+
+**Hook no se ejecuta:**
+
+```bash
+# Re-instalar hooks
+deno task prepare
+```
+
+**Deno no encontrado en hook:**
+
+El hook `.husky/pre-commit` ya incluye `export PATH="$HOME/.deno/bin:$PATH"`
+para garantizar que Deno esté disponible. Si aún falla, verificar:
+
+```bash
+# Verificar que Deno está instalado
+which deno
+
+# Si no está, instalarlo:
+curl -fsSL https://deno.land/install.sh | sh
 ```
 
+**Hook muy lento:**
+
+- Considerar usar `lint-staged` para verificar solo archivos modificados
+- Por ahora, `deno check` verifica todos los archivos .ts/.tsx
+
 ## Patrones Comunes
 
 ### Ruta con Middleware State
@@ -126,5 +195,34 @@ export default function Component() {
 ## Notas de Deployment
 
 - El proyecto está configurado para Cloudflare Workers
-- Secrets necesarios para Wrangler si se agregan
+- Secrets necesarios: `CLOUDFLARE_API_TOKEN` y `CLOUDFLARE_ACCOUNT_ID` en GitHub
+  Actions
 - El archivo `static/styles.css` es generado por Tailwind durante el build
+
+## Cloudflare Workers - Diferencias vs Deno Deploy
+
+### Runtime Edge
+
+- **V8 Isolates**: Sin filesystem, solo APIs Web Standards
+- **Cold start**: ~5ms (súper rápido)
+- **300+ edge locations**: Latencia ultra baja global
+
+### Limitaciones
+
+- ❌ NO `Deno.readTextFile()` / `Deno.writeFile()` - sin filesystem
+- ❌ NO `Deno.env.get()` - usar env bindings de Cloudflare
+- ✅ Usar imports estáticos para assets (JSON, archivos)
+- ⚠️ Límite CPU: 50ms por request (plan gratuito)
+- ⚠️ Bundle size: 1MB compressed
+
+### Assets Estáticos
+
+- Servidos desde Cloudflare CDN (configurado en `wrangler.jsonc`)
+- Directorio `./static` sube automáticamente
+- Accesibles vía rutas absolutas (ej: `/styles.css`)
+
+### Traducciones (i18n)
+
+- Importadas estáticamente en `utils/i18n.ts`
+- Bundleadas en build time (no filesystem en runtime)
+- Agregar nuevo idioma requiere rebuild + deploy

README.md

@@ -1,4 +1,4 @@
-# Vibe Coding - La Guía Definitiva
+# Vibe Coding - The Ultimate Guide / La Guía Definitiva
 
 > Basado en el trabajo de Peter Wong · Creado por
 > [@daesdev](https://github.com/daesdev)
@@ -38,3 +38,48 @@ Then start the project:
 ```bash
 deno task start
 ```
+
+### Development Workflow
+
+Este proyecto usa **Husky** para ejecutar validaciones automáticas antes de cada
+commit.
+
+#### Setup inicial (solo una vez):
+
+```bash
+# Instalar dependencias npm (Wrangler para CI/CD)
+npm install
+
+# Configurar git hooks de Husky
+deno task prepare
+```
+
+**Nota**: Este proyecto usa Deno como runtime principal, pero incluye un
+`package.json` mínimo con Wrangler como devDependency para facilitar el deploy
+en GitHub Actions.
+
+#### Pre-commit Hook
+
+Cada vez que hagas `git commit`, se ejecutan automáticamente:
+
+1. **`deno fmt`** - Formatea el código automáticamente
+2. **`deno lint`** - Valida reglas de linting (bloquea si falla)
+3. **`deno check`** - Valida tipos TypeScript (bloquea si falla)
+
+#### Comandos útiles:
+
+```bash
+deno task fmt          # Formatear código manualmente
+deno task check        # Validar sin modificar (como en CI)
+deno task precommit    # Formatear + validar (como en el hook)
+deno task start        # Desarrollo con hot-reload
+```
+
+#### Bypass de hooks (solo emergencias):
+
+```bash
+git commit --no-verify -m "emergency fix"
+```
+
+**⚠️ NO abusar de `--no-verify`** - el CI de GitHub Actions igual validará el
+código.

static/styles.css → assets/css/fonts.css

@@ -1,11 +1,11 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @font-face {
   font-family: "roboto-mono";
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url("/fonts/roboto-mono-latin-500-normal.woff") format("woff");
+  size-adjust: 100%;
+  ascent-override: 0.1em;
+  descent-override: 0.1em;
+  line-gap-override: 0.1em;
 }

assets/css/styles.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+@import "./fonts.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: "Inter var", "system-ui", "sans-serif";
+  --font-roboto-mono: "roboto-mono", "monospace";
+}
+
+@layer theme {
+  :root {
+    color-scheme: light;
+  }
+
+  :root.dark {
+    color-scheme: dark;
+  }
+}
+
+html {
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}

client.ts

@@ -0,0 +1,2 @@
+// Import CSS files here for hot module reloading to work.
+import "./assets/css/styles.css";

deno.json

@@ -1,13 +1,13 @@
 {
-  "lock": false,
   "tasks": {
-    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
-    "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
-    "manifest": "deno task cli manifest $(pwd)",
-    "start": "deno run -A --watch=static/,routes/ dev.ts",
-    "build": "deno run -A dev.ts build",
-    "preview": "deno run -A main.ts",
-    "update": "deno run -A -r https://fresh.deno.dev/update .",
+    "check": "deno fmt --check && deno lint && deno check",
+    "fmt": "deno fmt",
+    "precommit": "deno fmt && deno lint && deno check **/*.ts && deno check **/*.tsx",
+    "prepare": "deno run -A npm:husky install",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "deno serve -A _fresh/server.js",
+    "update": "deno run -A -r jsr:@fresh/update .",
     "deploy": "deno run -A npm:wrangler deploy"
   },
   "lint": {
@@ -19,18 +19,20 @@
     }
   },
   "exclude": [
-    "**/_fresh/*"
+    "**/_fresh/*",
+    "**/node_modules/*",
+    ".husky/*"
   ],
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.7.3/",
-    "preact": "https://esm.sh/preact@10.22.0",
+    "@fresh/plugin-tailwind": "jsr:@fresh/plugin-tailwind@^1.0.0",
+    "@fresh/plugin-vite": "jsr:@fresh/plugin-vite@^1.0.8",
+    "preact": "npm:preact@^10.28.3",
     "preact/": "https://esm.sh/preact@10.22.0/",
-    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
-    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
-    "tailwindcss": "npm:tailwindcss@3.4.1",
-    "tailwindcss/": "npm:/tailwindcss@3.4.1/",
-    "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",
-    "$std/": "https://deno.land/std@0.216.0/"
+    "@preact/signals": "npm:@preact/signals@^2.7.1",
+    "$std/": "https://deno.land/std@0.216.0/",
+    "fresh": "jsr:@fresh/core@^2.2.2",
+    "vite": "npm:vite@7.3.2",
+    "@/": "./"
   },
   "compilerOptions": {
     "jsx": "react-jsx",