Skip to content

Commit 871172b

Browse files
author
Darío Espinoza
committed
feat: Implement internationalization support with language-specific content and error handling
1 parent bff2b6e commit 871172b

8 files changed

Lines changed: 285 additions & 301 deletions

File tree

‎locales/en.json‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"site": {
3+
"title": "Vibe Coding",
4+
"description": "Vibe coding is a programming technique that uses artificial intelligence (AI) to build software based on natural language descriptions."
5+
},
6+
"index": {
7+
"header": "Peter Wong • Constellar.ai",
8+
"sections": [
9+
{
10+
"title": "What Is Vibe Coding?",
11+
"items": [
12+
"A new paradigm where you \"fully give in to the vibes\" (Andrej Karpathy)",
13+
"<strong>Embrace AI to write 95% of your codebase</strong>",
14+
"Shift from being a programmer to being a \"product engineer\"",
15+
"Make 10-100x productivity gains by leaning into AI coding tools"
16+
]
17+
},
18+
{
19+
"title": "Essential Tools",
20+
"items": [
21+
"<strong>Cursor - </strong>Most popular IDE for vibe coding with comprehensive code understanding",
22+
"<strong>Windsurf </strong>- Fast-growing alternative that indexes your entire codebase",
23+
"<strong>Claude 3.5 Sonnet/3 Opus </strong>- Top models for everyday coding tasks",
24+
"<strong>Claude 01/03 </strong>- Reasoning models for debugging complex issues",
25+
"<strong>ChatGPT </strong>- Used specifically for reasoning through debugging problems"
26+
]
27+
},
28+
{
29+
"title": "The New Workflow",
30+
"items": [
31+
"Roll not fix - Rewriting is cheaper than debugging (just retry from scratch)",
32+
"Prompt in parallel (run multiple AI sessions on different features simultaneously)",
33+
"Focus on rapid iteration rather than perfect code",
34+
"<strong>Human taste is now more important than coding skill</strong>"
35+
]
36+
},
37+
{
38+
"title": "When Vibe Coding Excels",
39+
"items": [
40+
"Zero-to-one product development (speed is everything)",
41+
"Feature prototyping and rapid iteration",
42+
"Projects where scale isn't an immediate concern",
43+
"<strong>Simple to moderately complex applications</strong>",
44+
"When working with modern, well-documented frameworks"
45+
]
46+
},
47+
{
48+
"title": "The Human Element",
49+
"items": [
50+
"Develop system thinking and architecture skills (AI still struggles here)",
51+
"Cultivate product taste and user empathy",
52+
"Learn to judge the quality of AI-generated code",
53+
"Debugging remains a critical human skill",
54+
"Focus on the \"why\" and \"what\" rather than the \"how\""
55+
]
56+
},
57+
{
58+
"title": "Building for Scale",
59+
"items": [
60+
"Vibe coding gets you to MVP quickly, but scaling requires expertise",
61+
"Hire systems thinkers for complex infrastructure challenges",
62+
"<strong>Technical debt accumulates faster - plan refactoring strategically</strong>",
63+
"Critical systems may require more traditional approaches",
64+
"Balance quick development with architectural considerations"
65+
]
66+
}
67+
]
68+
}
69+
}

‎locales/es.json‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"site": {
3+
"title": "Codificación de vibraciones(vibe coding)",
4+
"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."
5+
},
6+
"index": {
7+
"header": "Peter Wong • Constellar.ai • Traducido por Midudev",
8+
"sections": [
9+
{
10+
"title": "¿Qué es el Vibe Coding?",
11+
"items": [
12+
"Un nuevo paradigma donde te \"entregas completamente a las vibras\" (Andrej Karpathy)",
13+
"<strong>Adopta la IA para escribir más del 95% de tu código</strong>",
14+
"Transición de programador a \"ingeniero de producto\"",
15+
"Aumenta la productividad de 10 a 100 veces aprovechando herramientas de codificación con IA"
16+
]
17+
},
18+
{
19+
"title": "Herramientas esenciales",
20+
"items": [
21+
"<strong>Cursor -</strong> IDE más popular para vibe coding con una comprensión completa del código",
22+
"<strong>Windsurf -</strong> Alternativa de rápido crecimiento que indexa todo tu código",
23+
"<strong>Claude 3.5 Sonnet/3 Opus -</strong> Modelos líderes para tareas de codificación diarias",
24+
"<strong>Claude 01/03 -</strong> Modelos de razonamiento paa depuración de problemas complejos",
25+
"<strong>ChatGPT -</strong> Utilizado específicamente para el razonamiento en la depuración de problemas"
26+
]
27+
},
28+
{
29+
"title": "El nuevo flujo de trabajo",
30+
"items": [
31+
"Reescribir en lugar de arreglar - Reescribir es más barato que depurar (simplemente vuelve a intentarlo desde cero)",
32+
"Hacer prompts en paralelo (ejecuta múltiples sesiones de IA en diferentes funciones simultáneamente)",
33+
"Enfocarse en la iteración rápida en lugar del código perfecto",
34+
"<strong>El gusto humano es ahora más importante que la habilidad para programar</strong>"
35+
]
36+
},
37+
{
38+
"title": "Cuándo destaca el Vibe Coding",
39+
"items": [
40+
"Desarrollo de productos desde cero (la velocidad lo es todo)",
41+
"Prototipado de funciones e iteración rápida",
42+
"Proyectos donde la escalabilidad no es una preocupación inmediata",
43+
"<strong>Aplicaciones de complejidad simple a moderada</strong>",
44+
"Cuando se trabaja con frameworks modernos y bien documentados"
45+
]
46+
},
47+
{
48+
"title": "El elemento humano",
49+
"items": [
50+
"Desarrollar habilidades de pensamiento sistémico y arquitectura (la IA aún tiene dificultades aquí)",
51+
"Cultivar el gusto por los productos y la empatía con los usuarios",
52+
"Aprender a evaluar la calidad del código generado por IA",
53+
"La depuración sigue siendo una habilidad humana crítica",
54+
"Enfocarse en el \"por qué\" y el \"qué\", en lugar del \"cómo\""
55+
]
56+
},
57+
{
58+
"title": "Construyendo para la escalabilidad",
59+
"items": [
60+
"El vibe coding te permite llegar rápidamente a un MVP, pero la escalabilidad requiere experiencia",
61+
"Contratar expertos en pensamiento sistémico para desafíos de infraestructura complejos",
62+
"<strong>La deuda técnica se acumula más rápido - planifica la refactorización estratégicamente</strong>",
63+
"Los sistemas críticos pueden requerir enfoques más tradicionales",
64+
"Equilibrar el desarrollo rápido con consideraciones arquitectónicas"
65+
]
66+
}
67+
]
68+
}
69+
}

‎routes/[lang]/index.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { PageProps } from "$fresh/server.ts";
2+
import Footer from "../../components/Footer.tsx";
3+
import SectionWrapperContent from "../../components/SectionWrapperContent.tsx";
4+
import WrapperPage from "../../components/WrapperPage.tsx";
5+
import translations from "../../locales/es.json" with { type: "json" };
6+
7+
interface State {
8+
state: { lang: string; translations: typeof translations };
9+
}
10+
11+
export default function Home({ state }: PageProps<State>) {
12+
const { lang: _lang, translations } = state;
13+
return (
14+
<>
15+
{/* <Header /> */}
16+
<div class="relative mx-4 md:mx-10 font-roboto-mono">
17+
<WrapperPage attrClass="">
18+
<div class="border-b pb-3 flex justify-end items-center gap-x-2 text-sm">
19+
<strong>
20+
{translations.index.header}
21+
</strong>
22+
</div>
23+
<SectionWrapperContent title="La Guía Definitiva del Vibe Coding">
24+
<section class="w-full gap-4 text-sm leading-sm">
25+
{
26+
translations.index.sections.map((section) => (
27+
<>
28+
<h3 class="font-bold text-base mt-5">
29+
{section.title}
30+
</h3>
31+
<ul class="ml-6 list-disc col-span-full text-slate-800/90 text-pretty text-sm">
32+
{
33+
section.items.map((item, index) => (
34+
<li key={index}>
35+
<div
36+
dangerouslySetInnerHTML={{
37+
__html: item,
38+
}}
39+
></div>
40+
</li>
41+
))
42+
}
43+
</ul>
44+
</>
45+
))
46+
}
47+
</section>
48+
</SectionWrapperContent>
49+
</WrapperPage>
50+
<Footer/>
51+
</div>
52+
</>
53+
);
54+
}

‎routes/_404.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Head } from "$fresh/runtime.ts";
2-
import { asset } from "$fresh/runtime.ts";
3-
export default function Error404() {
2+
import { pageProps } from "$fresh/server.ts";
3+
export default function Error404({message}: pageProps<{message: string}>) {
44
return (
55
<>
66
<Head>

‎routes/_app.tsx‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,32 @@
1-
import { type PageProps } from "$fresh/server.ts";
1+
import { FreshContext } from "$fresh/server.ts";
2+
import translations from "../locales/es.json" with { type: "json" };
3+
import { t } from "../utils/i18n.ts";
24

3-
/*
4-
import { Handlers } from "$fresh/server.ts";
5-
import marked from "marked"; */
6-
7-
/* export const handler: Handlers = {
8-
async GET(req, ctx) {
9-
// Lee el archivo Markdown
10-
const markdownContent = await Deno.readTextFile("./static/mi-archivo.md");
11-
12-
// Convierte el Markdown a HTML
13-
const htmlContent = marked(markdownContent);
14-
15-
return new Response(htmlContent, {
16-
headers: { "Content-Type": "text/html" },
17-
});
18-
},
19-
} */
20-
21-
export default function App({ Component }: PageProps) {
5+
interface State {
6+
lang: string;
7+
translations: typeof translations;
8+
}
9+
export default async function App(
10+
req: Request,
11+
ctx: FreshContext<State>,
12+
) {
13+
const url = new URL(req.url);
14+
const lang = url.pathname.split("/")[1] || "es";
15+
const translations = await t(lang);
16+
ctx.state.lang = lang;
17+
ctx.state.translations = translations;
2218
return (
23-
<html>
19+
<html lang={lang}>
2420
<head>
2521
<meta charset="utf-8" />
2622
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
27-
<title>vibe coding</title>
23+
<title>
24+
{translations?.site?.title || "Vibe Coding - Idioma no encontrado"}
25+
</title>
2826
<link rel="stylesheet" href="/styles.css" />
2927
</head>
3028
<body class="bg-[#f9f9f9] text-[#444444]">
31-
<Component />
29+
<ctx.Component />
3230
</body>
3331
</html>
3432
);

0 commit comments

Comments
 (0)