diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index c934580..661d0cc 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -1,18 +1,17 @@ name: Deploy on: push: - branches: main + branches: ["main"] pull_request: - branches: main + branches: ["main"] jobs: - deploy: - name: Deploy + verify: + name: Verify runs-on: ubuntu-latest permissions: - id-token: write # Needed for auth with Deno Deploy - contents: read # Needed to clone the repository + contents: read steps: - name: Clone repository @@ -23,14 +22,44 @@ jobs: with: deno-version: v2.x + - name: Type check and lint + run: deno task check + - name: Build step - run: "deno task build" + 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: Upload to Deno Deploy - uses: denoland/deployctl@v1 + - name: Deploy to Cloudflare Workers + uses: cloudflare/wrangler-action@v3 with: - project: "vide-coding" - entrypoint: "main.ts" - root: "." - - + apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} + accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} + command: deploy + wranglerVersion: "4.80.0" diff --git a/README.md b/README.md index 4b0caab..65d408a 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,31 @@ -# Basado en el archivo Vibe Coding de Peter Wong +# Vibe Coding - La Guía Definitiva -

+> Basado en el trabajo de Peter Wong · Creado por +> [@daesdev](https://github.com/daesdev) + +

Localhost preview page Mac

### Tecnologías usadas -[Deno Fresh](https://fresh.deno.dev/docs/getting-started) para el desarrollo de la aplicación. +[Deno Fresh](https://fresh.deno.dev/docs/getting-started) para el desarrollo de +la aplicación. + +[Tailwind CSS](https://tailwindcss.com/docs) para el diseño de la aplicación. + +[Cloudflare Workers](https://developers.cloudflare.com/workers/) para el +despliegue de la aplicación. -[Taildwind CSS](https://tailwindcss.com/docs) para el diseño de la aplicación. +### Deploy -[Deno Deploy](https://deno.com/deploy/docs) para el despliegue de la aplicación. -\*\* +```bash +deno task deploy +``` ### Información -[Post Linkedin Miduedev](https://www.linkedin.com/posts/midudev_he-traducido-la-gu%C3%ADa-del-vibe-coding-por-activity-7305964730001596416-dTiG?utm_source=share&utm_medium=member_desktop&rcm=ACoAAB3PwcUBiv3bSv2wXSWJredG6j5r6cHfe4M) + +[Post Linkedin Midudev](https://www.linkedin.com/posts/midudev_he-traducido-la-gu%C3%ADa-del-vibe-coding-por-activity-7305964730001596416-dTiG?utm_source=share&utm_medium=member_desktop&rcm=ACoAAB3PwcUBiv3bSv2wXSWJredG6j5r6cHfe4M) [Post X Peter](https://x.com/peterwong_xyz/status/1898090027873452542) @@ -24,6 +35,6 @@ Make sure to install Deno: https://deno.land/manual/getting_started/installation Then start the project: -``` +```bash deno task start ``` diff --git a/components/Footer.tsx b/components/Footer.tsx index 675c947..df2ffba 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -10,14 +10,14 @@ export default function Footer({ state }: PageProps) {
diff --git a/components/Header.tsx b/components/Header.tsx index 84ac565..eada3b1 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -3,7 +3,7 @@ export default function Header() { return (
@@ -22,7 +22,7 @@ export default function Header() { diff --git a/components/SectionWrapperContent.tsx b/components/SectionWrapperContent.tsx index d76d868..9db2478 100644 --- a/components/SectionWrapperContent.tsx +++ b/components/SectionWrapperContent.tsx @@ -1,17 +1,21 @@ interface SectionWrapperContentProps { - readonly title?: string; - readonly attrClass?: string; - readonly children: preact.ComponentChildren; + readonly title?: string; + readonly attrClass?: string; + readonly children: preact.ComponentChildren; } -export default function SectionWrapperContent({title, attrClass, children}: SectionWrapperContentProps) { - const classes = `flex flex-col gap-y-3 mt-10 font-roboto-mono ${attrClass}`; - return ( -
- { title && -

- {title} -

} - {children} -
- ); +export default function SectionWrapperContent( + { title, attrClass = "", children }: SectionWrapperContentProps, +) { + const classes = `flex flex-col gap-y-3 mt-10 font-roboto-mono ${attrClass}`; + return ( +
+ {title && + ( +

+ {title} +

+ )} + {children} +
+ ); } diff --git a/components/WrapperPage.tsx b/components/WrapperPage.tsx index 146b2b9..d8366f4 100644 --- a/components/WrapperPage.tsx +++ b/components/WrapperPage.tsx @@ -1,13 +1,16 @@ - interface ParentComponentProps { - readonly attrClass: string; - readonly children: preact.ComponentChildren; + readonly attrClass: string; + readonly children: preact.ComponentChildren; +} +export default function WrapperPage( + { attrClass, children }: ParentComponentProps, +) { + const valueClass = attrClass + ? `${attrClass} relative bg-white dark:bg-slate-800 px-4 md:px-12 rounded-sm container max-w-[21cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 print:h-auto print:py-0 print:mt-0 mt-5 [&:has(.decorator-bl, .decorator-br)~div>.decorator-tl]:bg-red-100` + : "relative bg-white dark:bg-slate-800 px-4 md:px-12 rounded-sm container max-w-[22cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 mt-5"; + return ( +
+ {children} +
+ ); } -export default function WrapperPage({attrClass, children}: ParentComponentProps ) { - const valueClass = attrClass ? `${attrClass} relative bg-white dark:bg-slate-800 px-4 md:px-12 rounded-sm container max-w-[21cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 print:h-auto print:py-0 print:mt-0 mt-5 [&:has(.decorator-bl, .decorator-br)~div>.decorator-tl]:bg-red-100` : 'relative bg-white dark:bg-slate-800 px-4 md:px-12 rounded-sm container max-w-[22cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 mt-5'; - return ( -
- {children} -
- ); -} \ No newline at end of file diff --git a/deno.json b/deno.json index a4d79ba..47397b4 100644 --- a/deno.json +++ b/deno.json @@ -7,7 +7,8 @@ "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 ." + "update": "deno run -A -r https://fresh.deno.dev/update .", + "deploy": "deno run -A npm:wrangler deploy" }, "lint": { "rules": { @@ -36,4 +37,4 @@ "jsxImportSource": "preact" }, "nodeModulesDir": "auto" -} \ No newline at end of file +} diff --git a/islands/AnchorLang.tsx b/islands/AnchorLang.tsx index 921ceb4..d9d126f 100644 --- a/islands/AnchorLang.tsx +++ b/islands/AnchorLang.tsx @@ -15,7 +15,9 @@ const AnchorLang = ({ lang: currentLang, languages }: AnchorLangProps) => { > {lang} diff --git a/islands/ButtonPrint.tsx b/islands/ButtonPrint.tsx index d4e96fe..1e1f78a 100644 --- a/islands/ButtonPrint.tsx +++ b/islands/ButtonPrint.tsx @@ -1,19 +1,23 @@ const ButtonPrint = () => { + const handlePrint = () => { + window.print(); + }; - const handlePrint = () => { - window.print(); - }; - - return ( - - ); + return ( + + ); }; -export default ButtonPrint; \ No newline at end of file +export default ButtonPrint; diff --git a/islands/DarkMode.tsx b/islands/DarkMode.tsx index 780e19c..6153a30 100644 --- a/islands/DarkMode.tsx +++ b/islands/DarkMode.tsx @@ -2,11 +2,13 @@ import { useEffect, useState } from "preact/hooks"; const DarkMode = () => { - const [isDarkMode, setIsDarkMode] = useState( false ); + const [isDarkMode, setIsDarkMode] = useState(false); useEffect(() => { const savedTheme = localStorage.getItem("theme"); - const isDarkModeClient = savedTheme ? savedTheme === "dark" : window.matchMedia("(prefers-color-scheme: dark)").matches; + const isDarkModeClient = savedTheme + ? savedTheme === "dark" + : window.matchMedia("(prefers-color-scheme: dark)").matches; if (isDarkModeClient) { setIsDarkMode(true); } diff --git a/locales/en.json b/locales/en.json index 9407dde..071074f 100644 --- a/locales/en.json +++ b/locales/en.json @@ -1,73 +1,73 @@ { - "site": { - "title": "Vibe Coding", - "description": "Vibe coding is a programming technique that uses artificial intelligence (AI) to build software based on natural language descriptions." - }, - "index": { - "header": "Peter Wong • Constellar.ai", - "sections": [ - { - "title": "What Is Vibe Coding?", - "items": [ - "A new paradigm where you \"fully give in to the vibes\" (Andrej Karpathy)", - "Embrace AI to write 95% of your codebase", - "Shift from being a programmer to being a \"product engineer\"", - "Make 10-100x productivity gains by leaning into AI coding tools" - ] - }, - { - "title": "Essential Tools", - "items": [ - "Cursor - Most popular IDE for vibe coding with comprehensive code understanding", - "Windsurf - Fast-growing alternative that indexes your entire codebase", - "Claude 3.5 Sonnet/3 Opus - Top models for everyday coding tasks", - "Claude 01/03 - Reasoning models for debugging complex issues", - "ChatGPT - Used specifically for reasoning through debugging problems" - ] - }, - { - "title": "The New Workflow", - "items": [ - "Roll not fix - Rewriting is cheaper than debugging (just retry from scratch)", - "Prompt in parallel (run multiple AI sessions on different features simultaneously)", - "Focus on rapid iteration rather than perfect code", - "Human taste is now more important than coding skill" - ] - }, - { - "title": "When Vibe Coding Excels", - "items": [ - "Zero-to-one product development (speed is everything)", - "Feature prototyping and rapid iteration", - "Projects where scale isn't an immediate concern", - "Simple to moderately complex applications", - "When working with modern, well-documented frameworks" - ] - }, - { - "title": "The Human Element", - "items": [ - "Develop system thinking and architecture skills (AI still struggles here)", - "Cultivate product taste and user empathy", - "Learn to judge the quality of AI-generated code", - "Debugging remains a critical human skill", - "Focus on the \"why\" and \"what\" rather than the \"how\"" - ] - }, - { - "title": "Building for Scale", - "items": [ - "Vibe coding gets you to MVP quickly, but scaling requires expertise", - "Hire systems thinkers for complex infrastructure challenges", - "Technical debt accumulates faster - plan refactoring strategically", - "Critical systems may require more traditional approaches", - "Balance quick development with architectural considerations" - ] - } - ], - "footer": { - "development": "Developed by @darioesp With love from a corner of ", - "created": "Created by @peterwong_xyz" - } + "site": { + "title": "Vibe Coding", + "description": "Vibe coding is a programming technique that uses artificial intelligence (AI) to build software based on natural language descriptions." + }, + "index": { + "header": "Peter Wong • Constellar.ai", + "sections": [ + { + "title": "What Is Vibe Coding?", + "items": [ + "A new paradigm where you \"fully give in to the vibes\" (Andrej Karpathy)", + "Embrace AI to write 95% of your codebase", + "Shift from being a programmer to being a \"product engineer\"", + "Make 10-100x productivity gains by leaning into AI coding tools" + ] + }, + { + "title": "Essential Tools", + "items": [ + "Cursor - Most popular IDE for vibe coding with comprehensive code understanding", + "Windsurf - Fast-growing alternative that indexes your entire codebase", + "Claude 3.5 Sonnet/3 Opus - Top models for everyday coding tasks", + "Claude 01/03 - Reasoning models for debugging complex issues", + "ChatGPT - Used specifically for reasoning through debugging problems" + ] + }, + { + "title": "The New Workflow", + "items": [ + "Roll not fix - Rewriting is cheaper than debugging (just retry from scratch)", + "Prompt in parallel (run multiple AI sessions on different features simultaneously)", + "Focus on rapid iteration rather than perfect code", + "Human taste is now more important than coding skill" + ] + }, + { + "title": "When Vibe Coding Excels", + "items": [ + "Zero-to-one product development (speed is everything)", + "Feature prototyping and rapid iteration", + "Projects where scale isn't an immediate concern", + "Simple to moderately complex applications", + "When working with modern, well-documented frameworks" + ] + }, + { + "title": "The Human Element", + "items": [ + "Develop system thinking and architecture skills (AI still struggles here)", + "Cultivate product taste and user empathy", + "Learn to judge the quality of AI-generated code", + "Debugging remains a critical human skill", + "Focus on the \"why\" and \"what\" rather than the \"how\"" + ] + }, + { + "title": "Building for Scale", + "items": [ + "Vibe coding gets you to MVP quickly, but scaling requires expertise", + "Hire systems thinkers for complex infrastructure challenges", + "Technical debt accumulates faster - plan refactoring strategically", + "Critical systems may require more traditional approaches", + "Balance quick development with architectural considerations" + ] + } + ], + "footer": { + "development": "Developed by @daesdev With love from a corner of ", + "created": "Created by @peterwong_xyz" } -} \ No newline at end of file + } +} diff --git a/locales/es.json b/locales/es.json index 5b1e757..1149f86 100644 --- a/locales/es.json +++ b/locales/es.json @@ -1,73 +1,73 @@ { - "site": { - "title": "Codificación de vibraciones(vibe coding)", - "description": "La codificación de vibraciones (vibe coding) es una técnica de programación que utiliza inteligencia artificial (IA) para construir software basado en descripciones en lenguaje natural." - }, - "index": { - "header": "Peter Wong • Constellar.ai • Traducido por Midudev", - "sections": [ - { - "title": "¿Qué es el Vibe Coding?", - "items": [ - "Un nuevo paradigma donde te \"entregas completamente a las vibras\" (Andrej Karpathy)", - "Adopta la IA para escribir más del 95% de tu código", - "Transición de programador a \"ingeniero de producto\"", - "Aumenta la productividad de 10 a 100 veces aprovechando herramientas de codificación con IA" - ] - }, - { - "title": "Herramientas esenciales", - "items": [ - "Cursor - IDE más popular para vibe coding con una comprensión completa del código", - "Windsurf - Alternativa de rápido crecimiento que indexa todo tu código", - "Claude 3.5 Sonnet/3 Opus - Modelos líderes para tareas de codificación diarias", - "Claude 01/03 - Modelos de razonamiento paa depuración de problemas complejos", - "ChatGPT - Utilizado específicamente para el razonamiento en la depuración de problemas" - ] - }, - { - "title": "El nuevo flujo de trabajo", - "items": [ - "Reescribir en lugar de arreglar - Reescribir es más barato que depurar (simplemente vuelve a intentarlo desde cero)", - "Hacer prompts en paralelo (ejecuta múltiples sesiones de IA en diferentes funciones simultáneamente)", - "Enfocarse en la iteración rápida en lugar del código perfecto", - "El gusto humano es ahora más importante que la habilidad para programar" - ] - }, - { - "title": "Cuándo destaca el Vibe Coding", - "items": [ - "Desarrollo de productos desde cero (la velocidad lo es todo)", - "Prototipado de funciones e iteración rápida", - "Proyectos donde la escalabilidad no es una preocupación inmediata", - "Aplicaciones de complejidad simple a moderada", - "Cuando se trabaja con frameworks modernos y bien documentados" - ] - }, - { - "title": "El elemento humano", - "items": [ - "Desarrollar habilidades de pensamiento sistémico y arquitectura (la IA aún tiene dificultades aquí)", - "Cultivar el gusto por los productos y la empatía con los usuarios", - "Aprender a evaluar la calidad del código generado por IA", - "La depuración sigue siendo una habilidad humana crítica", - "Enfocarse en el \"por qué\" y el \"qué\", en lugar del \"cómo\"" - ] - }, - { - "title": "Construyendo para la escalabilidad", - "items": [ - "El vibe coding te permite llegar rápidamente a un MVP, pero la escalabilidad requiere experiencia", - "Contratar expertos en pensamiento sistémico para desafíos de infraestructura complejos", - "La deuda técnica se acumula más rápido - planifica la refactorización estratégicamente", - "Los sistemas críticos pueden requerir enfoques más tradicionales", - "Equilibrar el desarrollo rápido con consideraciones arquitectónicas" - ] - } - ], - "footer": { - "development": "Desarrollado por @darioesp Con cariño desde un rincón de ", - "created": "Creado por @peterwong_xyz y traducido al español por @midudev " - } + "site": { + "title": "Codificación de vibraciones(vibe coding)", + "description": "La codificación de vibraciones (vibe coding) es una técnica de programación que utiliza inteligencia artificial (IA) para construir software basado en descripciones en lenguaje natural." + }, + "index": { + "header": "Peter Wong • Constellar.ai • Traducido por Midudev", + "sections": [ + { + "title": "¿Qué es el Vibe Coding?", + "items": [ + "Un nuevo paradigma donde te \"entregas completamente a las vibras\" (Andrej Karpathy)", + "Adopta la IA para escribir más del 95% de tu código", + "Transición de programador a \"ingeniero de producto\"", + "Aumenta la productividad de 10 a 100 veces aprovechando herramientas de codificación con IA" + ] + }, + { + "title": "Herramientas esenciales", + "items": [ + "Cursor - IDE más popular para vibe coding con una comprensión completa del código", + "Windsurf - Alternativa de rápido crecimiento que indexa todo tu código", + "Claude 3.5 Sonnet/3 Opus - Modelos líderes para tareas de codificación diarias", + "Claude 01/03 - Modelos de razonamiento para depuración de problemas complejos", + "ChatGPT - Utilizado específicamente para el razonamiento en la depuración de problemas" + ] + }, + { + "title": "El nuevo flujo de trabajo", + "items": [ + "Reescribir en lugar de arreglar - Reescribir es más barato que depurar (simplemente vuelve a intentarlo desde cero)", + "Hacer prompts en paralelo (ejecuta múltiples sesiones de IA en diferentes funciones simultáneamente)", + "Enfocarse en la iteración rápida en lugar del código perfecto", + "El gusto humano es ahora más importante que la habilidad para programar" + ] + }, + { + "title": "Cuándo destaca el Vibe Coding", + "items": [ + "Desarrollo de productos desde cero (la velocidad lo es todo)", + "Prototipado de funciones e iteración rápida", + "Proyectos donde la escalabilidad no es una preocupación inmediata", + "Aplicaciones de complejidad simple a moderada", + "Cuando se trabaja con frameworks modernos y bien documentados" + ] + }, + { + "title": "El elemento humano", + "items": [ + "Desarrollar habilidades de pensamiento sistémico y arquitectura (la IA aún tiene dificultades aquí)", + "Cultivar el gusto por los productos y la empatía con los usuarios", + "Aprender a evaluar la calidad del código generado por IA", + "La depuración sigue siendo una habilidad humana crítica", + "Enfocarse en el \"por qué\" y el \"qué\", en lugar del \"cómo\"" + ] + }, + { + "title": "Construyendo para la escalabilidad", + "items": [ + "El vibe coding te permite llegar rápidamente a un MVP, pero la escalabilidad requiere experiencia", + "Contratar expertos en pensamiento sistémico para desafíos de infraestructura complejos", + "La deuda técnica se acumula más rápido - planifica la refactorización estratégicamente", + "Los sistemas críticos pueden requerir enfoques más tradicionales", + "Equilibrar el desarrollo rápido con consideraciones arquitectónicas" + ] + } + ], + "footer": { + "development": "Desarrollado por @daesdev Con cariño desde un rincón de ", + "created": "Creado por @peterwong_xyz y traducido al español por @midudev " } -} \ No newline at end of file + } +} diff --git a/postcss.config.js b/postcss.config.js index a7f73a2..c2ddf74 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,5 +1,5 @@ export default { plugins: { - '@tailwindcss/postcss': {}, + "@tailwindcss/postcss": {}, }, -} +}; diff --git a/routes/[lang]/index.tsx b/routes/[lang]/index.tsx index b9bb0ae..7c17656 100644 --- a/routes/[lang]/index.tsx +++ b/routes/[lang]/index.tsx @@ -1,4 +1,5 @@ import { Handlers, PageProps } from "$fresh/server.ts"; +import { Fragment } from "preact"; import Footer from "../../components/Footer.tsx"; import Header from "../../components/Header.tsx"; import SectionWrapperContent from "../../components/SectionWrapperContent.tsx"; @@ -34,33 +35,30 @@ export default function Home({ state, data }: PageProps) {
- { - translations.index.sections.map((section) => ( - <> + {translations.index.sections.map((section) => ( +

{section.title}

    - { - section.items.map((item, index) => ( -
  • + {section.items.map((item, index) => ( +
  • -
    • - )) - } + dangerouslySetInnerHTML={{ + __html: item, + }} + > + + + ))}
- - )) - } + + ))}
-